使用函数封装组件-Tab组件

Tab组件的html和css技巧

• html技巧-分成菜单和面板两个部分

  
  1.png

<div class="tab"> /*放在同一个节点里，方便优化元素选择*/
        <ul class="tab-menu">  /*菜单*/
            <li class="first active">First</li>
            <li class="second">Second</li>
            <li class="third">Third</li>
        </ul>
        <div> /*面板*/
            <li class="panel">First</li>
            <li class="panel">Second</li>
            <li class="panel">Third</li>
        </div>
    </div>

• css技巧-负margin产生缺口

  
  2.png

/*通过设置负margin和下边框的颜色（白色）产生缺口，具体参数需自己调试*/
margin-bottom: -3px;
border-color: #ccc #ccc #fff #ccc; /*设置边框颜色，顺序为上右下左*/

border: 1px solid transparent; /*设置1px透明边框*/
border-radius: 5px; /*设置边框圆角*/

/*可单独设置边框的四个圆角*/
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

使用JS触发事件

/*语法*/
var event = new Event(' ');  /* (' ')可填click，change等 */
要触发事件的元素.dispatchEvent(event); 

/*举例*/
var event = new Event('click'); /* click可以改变 */
lis[0].dispatchEvent(event); /*lis[0]表示要触发事件的元素*/
tab.querySelector('.tab-mune li.active').dispatchEvent(event); /*根据选中的元素触发事件：tab.querySelector('.tab-mune li.active')表示选中的元素*/

/*当需要找出Tab组件里里具有active项时，使用for循环语句触发事件*/
for (var i = 0; i < lis.length; i++) {
        if (lis[i].classList.contains('active')) {
            lis[i].dispatchEvent(event);
            break; /*找到active项就跳出循环*/
        }

使用函数封装组件-实现3个Tab组件

• Tab组件结构完全相同

/*将tab当作函数的参数，调用相应的Tab*/
var tabs = document.querySelectorAll('.tab'); /*选中页面中的3个Tab*/
initTab(tabs[0]); /*调用第一个Tab*/
initTab(tabs[1]); /*调用第二个Tab*/
initTab(tabs[2]); /*调用第二个Tab*/

function initTab(tab) {  
  函数体
}

• Tab组件的结构（菜单和面板选择器）不相同

/*将tab,菜单和面板选择器都当作函数的参数，调用相应的Tab，函数体内需要用if语句设置菜单选择器和面板选择器的默认值*/
var tabs = document.querySelectorAll('.tab'); /*选中页面中的3个Tab*/
initTab(tabs[0]); /*调用第一个Tab*/
initTab(tabs[1],'menu li',undefined); /*调用第二个Tab,'menu li'表示第一个Tab菜单不同的选择器，undefined（未定义）表示面板选择器的默认值，菜单选择器对应less代码需修改*/
initTab(tabs[2], undefined, '.pane'); /*调用第三个Tab，undefined（未定义）表示菜单选择器的默认值，'.pane'表示与第一个Tab面板不同的选择器，面板选择器对应less代码需修改*/

function initTab(tab，menuSelector,paneSelector) {  
/*if语句设置菜单选择器和面板选择器的默认值*/
  if (menuSelector == undefined) {
        menuSelector = '.tab-menu li'; /*菜单选择器的默认值为.tab-menu li*/
     }
if (paneSelector == undefined) {
         paneSelector = '.panel';  /*面板选择器的默认值为.panel*/
    }
}
 var lis = tab.querySelectorAll(menuSelector);
 var panels = tab.querySelectorAll(paneSelector);
  ......

• 结合逻辑非和能够转换为false的语句精简if语句
  逻辑非：！
  能够转换为false的语句：
  null；
  NaN；
  0；
  空字符串（“”）；
  undefined；
  if语句设置菜单选择器和面板选择器的默认值可精简为：

  if (!menuSelector) {
        menuSelector = '.tab-menu li'; /*菜单选择器的默认值为.tab-menu li*/
     }
if (!paneSelector) {
         paneSelector = '.panel';  /*面板选择器的默认值为.panel*/
    }
}

检测内容是否为空

/*当value的值为空时，用alert弹出警告提示*/
var value = Text.value; //<input type="text" value=" " class="text-input">中value的没有默认值有空格的时候什么也不会输出，空格也相当于内容，没有默认值可以不用写value
    console.log('hello', value);
    if (!value) {
        alert('请输入内容！');
        return;
    }

    var value = Text.value.trim();//用 text.value.trim() 去掉空格

逻辑或的使用方法

/*当num的值大于10或等于0时输出ok，否则输出num本身的值*/
 if(num > 10 || num == 0) {
        console.log('ok');
    }

• 短路运算

function a() {
    console.log('a');
    return 1;
}

function b() {
    console.log('b');
    return 2;
}

var ret = a() || b();
console.log('result',ret);
/*运算结果为
a 
result 1
因为函数a的表达式返回1，即true，不会执行函数b*/

function a() {
    console.log('a');
    return 0;
}

function b() {
    console.log('b');
    return 2;
}

var ret = a() || b();
console.log('result',ret);
/*运算结果为
a 
b 
result 2
因为函数a的表达式返回0，即false，会执行函数b*/

因此，还可以精简if语句

menuSelector = menuSelector || '.tab-menu li';
paneSelector = paneSelector || ".panel";

对象-为了解决函数参数太多不好对应，函数参数最好不超过4个

• 简化函数参数

 /*先将可选参数统一命名，然后将数据放到里面，中间用逗号分隔*/
var options = {     
    menuSelector: false,
    paneSelector: '.pane',
    autoPlay: true,
};
function initTab(tab, options) {
}

• 使用options对象

initTab(tabs[0]);
initTab(tabs[1], {
    menuSelector: '.menu li'
});
var options = {
    menuSelector: false,
    paneSelector: '.pane',
    autoPlay: true,
};
initTab(tabs[2], {
    paneSelector: '.pane'
});

function initTab(tab, menuSelector, paneSelector,autoPlay) {
function initTab(tab, options) {
}