一些常见的前端知识点

前言

持续更新中…

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的区别

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

如何提高首频加载速度

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

使用link和@import的区别

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

cookie,sessionStorage和localStorage的区别

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

THIS对象

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

特殊

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

NEW一个对象的过程

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

Ajax解决浏览器缓存

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

常见HTTP请求错误码

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

https://juejin.im/post/5de0911bf265da05f32fe7db

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论