1. 清除浮动
    方法1::after方法
    1
    2
    3
    4
    5
    6
    :after{
    content: ".";
    clean:both;
    display:block;
    height: 0px;
    }

方法2:父元素设置overflow:hidden

1
2
3
4
.f{
overflow:hidden;
}

方法3:添加空div标签clean:both

1
2
3
.clean-both{
clean:both;
}

  1. div垂直和水平居中
    方法1 使用absolute+transform
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .parent{
    position: relative;
    }
    .child{
    position:absolute;
    left:50%;
    top:50%;
    transform:tranplate(-50%,-50%);
    }

方法2 inline-block+text-align

1
2
3
4
5
6
7
8
.parent{
text-align:center;
display:table-cell;
vertical-align:middle;
}
.child{
display:inline-block;
}

方法3 flex

1
2
3
4
5
.parent{
display:flex;
justify-content:center;
align-items:center;
}

  1. DOM操作
    获取子元素并插入
    1
    2
    3
    4
    <ul>
    <li>1</li>
    <li>3</li>
    </ul>

代码如下:

1
2
3
4
5
var li=document.createElement("li");
var textNode=document.createTextNode("2");
li.appendChild(textNode);
var ul=document.getElementsByTagName("ul");
ul.insertBefore(li,ul.childNodes[1]);

  1. 数组去重
    遍历,将数组的值添加到一个对象的属性名里,并给属性赋值,对象不能添加相同属性名,以这个为依据可以实现数组去重,然后用Object.keys(对象)返回这个对象可枚举属性组成的数组,这个数组就是去重后的数组。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    let a = ['1', '2', '3', 1,NaN,NaN,undefined,undefined,null,null, 'a', 'b', 'b'];
    const unique = arr => {
    var obj = {}
    arr.forEach(value => {
    obj[value] = 0;//这步新添加一个属性,并赋值,如果不赋值的话,属性会添加不上去
    })
    return Object.keys(obj);//`Object.keys(对象)`返回这个对象可枚举属性组成的数组,这个数组就是去重后的数组
    }
    console.log(unique(a));//["1", "2", "3", "NaN", "undefined", "null", "a", "b"]
    作者:OBKoro1
    链接:https://juejin.im/post/5aad40e4f265da237f1e12ed
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

es6

1
2
3
let unique= [...new Set(array)];
//es6 Set数据结构类似于数组,成员值是唯一的,有重复的值会自动去重。
//Set内部使用===来判断是否相等,类似'1'和1会两个都保存,NaN和NaN只会保存一个

  1. 提高页面加载速度
  • 减少dom操作
  • 部署前,图片压缩,代码压缩
  • 优化js代码结构,减少冗余代码
  • 减少http请求,合理设置 HTTP缓存
  • 使用内容分发cdn加速
  • 静态资源缓存
  • 图片延迟加载
  1. 作用域问题

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function F(){
    var arr=[],i;
    for(i=0;i<3;i++){
    arr[i]=function(){
    return i;
    };
    }
    return arr ;
    }
    结果都为3;闭包问题
    方法为
    function F(){
    function binder(x){
    return function(){
    return x;
    };
    }
    var arr =[],i;
    for(i=0;i<3;i++){
    arr[i]=binder(i);
    }
    return arr;
    }
  2. vue数据监控

  • 使用watch监控
  • 使用计算属性
  • 过渡器