Tab组件

1.如何写出缺口结构的HTML和CSS代码。

捕获.PNG
其中缺口采用的是覆盖原理。上面的Second的元素盖住下面元素边框。使用
margin : npx;实现

2.使用js触发事件

1.当上面的First等进行点击时，添加类，进行样式改变。循环添加事件监听并且点击时添加类，如上章节相同。
2.下面的second显示使用隐藏别的元素，只显示一个框。
3.但是我们初始化的时候样式与预期不同。于是我们采用开始时就系统默认点击了一个元素

var event = new Event('click');//事件
元素.dispatchEvent(event);

4.格式化代码。

使用函数封装组件，使代码复用

1.选择多个元素
document.querySelectorAll('.类名');
2.函数调用。
由于我们的类名可能不同。因此我们要使用传参的方式。

function 函数名(参数1,参数2···){
//代码
}

3.由于我们很多参数都可能相同，只有少部分进行改变。因此我们可以采用默认参数的方式。
1>我们未传参

if(a==undefined){
//当我们未传参时a为什么
}
a=×××；

简化上述代码

if(!a){
//如果a是undefined/Null/0/NaN/''的时候执行的代码
}

如果有时a不可以为空格或者0.我们又如何简化
我们要检测内容是否为空

' ' != '';

我们如何去掉所有空字符串
a.trim();
我们如何判断输入的是否为数字

var num = parseInt(value,10);//因为字符串不能转换为数字，只能为NaN；
if(!num){
//当num为NaN/0执行代码
}

但是当我们输入0时依旧会执行当num为NaN执行的代码

if(isNaN(num)){
//当num为NaN执行代码
}

3逻辑或的惯用法

条件1 || 条件2：短路技术
即当条件1为真不会判断条件2
使用方法：通常在默认值时使用

var a 
 = ((options.menuSelector) || '.menu')

第二个为默认值。当第一个为空时，我们的a就会为默认值

4初识对象(Object)

1.我们如何解决函数的参数传入过多的问题？
函数参数<=4；
当数据太多进行打包。将可选参数进行封装成为对象；

var options = {
参数1名字:数值,
参数2名字:数值,
···
}；
function(必选参数,options){
options.参数1名字;//就取到参数1的数值
}
//当函数中未传入并且不需要传入时我们需要默认值；将options等于空
function(必选参数,options){
options=options||{};
options.参数1名字;//就取到参数1的数值
}
//我们的参数只需要一处使用因此不需要命名
function(必选参数,{参数1名字:数值,参数2名字:数值···}){
options=options||{};
options.参数1名字;//就取到参数1的数值
}