一些常见的前端知识点持续更新中...

前言

持续更新中...

CSS相关

通过CSS禁用鼠标事件

    .disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
    }

实现条纹网格

    // odd 奇数行，even 偶数行
    .row:nth-child(odd) {
        background-color: #eee;
    }

CSS禁止用户选择

    body{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

修改chrome记住密码后自动填充表单的黄色背景

    input:-webkit-autofill,
    textarea:-webkit-autofill, 
    select:-webkit-autofill {
        background-color: rgb(250, 255, 189);
        background-image: none;
        color: rgb(0, 0, 0);
    }

修改placeholder颜色

    ::-webkit-input-placeholder { /* WebKit browsers */
        color: #999; }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #999; }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #999; }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #999; }
    input:focus::-webkit-input-placeholder{ color:#999; }

JS相关

求平面两点之间的距离

    let a = {x:'6', y:10},
        b = {x: 8, y: 20};
    function distant(a,b){
        let dx = Number(a.x) - Number(b.x)
        let dy = Number(a.y) - Number(b.y)
        return Math.pow(dx*dx + dy*dy, .5)
    }

数组去重

    // 一般方式
    function unique(array) {
        let arr = array.map(item => item);
        let _arr = [];
        for (let item of arr) {
            if (_arr.indexOf(item) === -1) {
                _arr.push(item);
            }
        }
        return _arr;
    }

    // 进化方式：数组排序后使用filter过滤
    function unique(array) {
        let arr = array.map(item => item);
        return arr.sort().filter((item, index, array) => !index || item !== array[index - 1]);
    }

    // 高逼格玩法： 使用ES6的Set
    let unique = (array) => [...new Set(array)];

深拷贝及浅拷贝

浅拷贝只是拷贝一层对象的属性，而深拷贝递归拷贝了所有层级

    function extend(target, options, deep) {
        for (let name in options) {
            let copy = options[name];
            if (deep && copy instanceof Array) {
                target[name] = extend([], copy, deep);
            } else if (deep && copy instanceof Object) {
                target[name] = extend({}, copy, deep);
            } else {
                target[name] = options[name];
            }
        }
        return target;
    }
    let classmate = {
        ammount: 10,
        age: 9,
        name: ['joke','nike','puma']
    };
    let class1 = extend({},classmate,false);        // 浅拷贝
    let class2 = extend({},classmate,true);         // 深拷贝
    class2.name[0] = 'tom';
    console.log(classmate.name);      // ["joke", "nike", "puma"]
    class1.name[0] = 'papi';               
    console.log(classmate.name);      // ["papi", "nike", "puma"]

全屏和退出全屏

    function fullScreen() {
      var el = document.documentElement;
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || 
          el.mozRequestFullScreen || el.msRequestFullScreen;
      if(typeof rfs != "undefined" && rfs) {
        rfs.call(el);
      } else if(typeof window.ActiveXObject != "undefined") {
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
            wscript.SendKeys("{F11}");
        }
      }
    }
    function exitFullScreen() {
      var el = document;
      var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || 
          el.mozCancelFullScreen || el.exitFullScreen;
      if(typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      } else if(typeof window.ActiveXObject != "undefined") {
        //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
            wscript.SendKeys("{F11}");
        }
      }
    }

检测浏览器版本

    function myBrowser(){
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {
            return "Opera"
        }; //判断是否Opera浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判断是否Firefox浏览器
        if (userAgent.indexOf("Chrome") > -1){
      return "Chrome";
     }
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判断是否Safari浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
            return "IE";
        }; //判断是否IE浏览器
    }

理论相关

GET和POST的区别

GET请求可被缓存，而且保留在历史记录里，也可被收藏为书签，请求数据大小也有限制，只应当应用于取回数据
POST跟GET相反，请求数据也没有大小限制

如何提高首频加载速度

JS外联文件放在BODY底部，CSS外联文件放在HEAD内
HTTP静态资源尽量用多个子域名（1.请求新的域名，不会默认携带cookie；2.动静分离，有利于部署CDN；3.HTTP协议对同一域名下的同时下载线程有限制）
服务器提供静态资源的时候最好开启GZIP
在JS/CSS/IMG等资源响应的http headers里设定expires，last-modified
资源压缩
使用CSS SPRITES，减少IMG请求次数
大图使用lazyload 懒加载
避免404，减少外联JS
减少COOKIE大小
减少DOM元素的数量
使用异步脚本

使用link和@import的区别

link是XHTML标签，除了加载CSS，还可以定义rel连接属性等作用，而import是CSS提供的，只能加载CSS
页面加载时，link会同时加载，而import等页面加载完再加载
import有兼容问题
link支持使用JS控制DOM去改变样式，import不支持

cookie,sessionStorage和localStorage的区别

cookie是网站为了标识用户身份而储存在用户本地终端上的数据，它始终在同源的http请求中携带，在浏览器和服务器之间来回传递
sessionStorage和localStorage不会自动把数据发送给服务器，仅本地保存
cookie大小不能超过4K，sessionStorage和localStorage可以达到5M甚至更大
localStorage储存持久数据，除非主动删除；sessionStorage数据在浏览器窗口关闭后自动删除；cookie有过期时间

THIS对象

this总是指向函数的直接调用者
如果有NEW关键字，this指向NEW出来的那个对象
在事件中，this指向触发这个事件的对象

特殊

IE中的attachEvent中的this指向全局对象WINDOW

NEW一个对象的过程

创建一个空对象，并且this指向该对象，同时还继承了该函数的原型
属性和方法加入到this引用的对象中
新创建的对象由this所引用，并最后隐式的返回this

Ajax解决浏览器缓存

在Ajax发送请求前加上anyAjaxObj.setRequestHeader("If-Modified-Since","0")
在URL后面加上一个随机数
在URL后面加时间戳
如果使用的是jQuery，直接$.ajaxSetup({cache:false})

常见HTTP请求错误码

1xx(临时响应) 100——服务器已收到请求的一部分，等待其余部分
2xx(成功) 202——服务器已接收请求，但未进行处理
3xx(重定向) 301——请求的网页已永久移动到新位置
4xx(请求错误) 404——请求网页未找到；408——请求超时；413——请求实体过大
5xx(服务器错误) 500——服务器内部错误；502——错误网关；504——网关超时