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监控
  • 使用计算属性
  • 过渡器