22天面试题

1.什么是事件代理且描述事件代理的原理及为什么要用事件代理？

2.移动端1px问题，为什么会有？如何解决？

3.解释jsonp的原理

4.在工作中你是如何优化自己的代码的？

5.axios是什么？如何使用？描述其实现登录的流程

6.用JS去掉数组里面重复的数据，并且打印出来                                                                                                                     var   arr = [a,b,c,d,d,e,a,b,f,g]

One，什么是事件代理且描述事件代理的原理及为什么要用事件代理？

        事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

        像电商购物车的控制数量加减删除等功能就利用了事件委托，现有的dom节点有事件，新添加的dom节点也有事件

        事件冒泡：

        事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传    播事件   

        有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

         为什么用事件代理：

         在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能

          简单说每个函数都是一个对象，而只要是对象就会占用内存，对象越多内存消耗越大，就影响了性能，而如果使用事件委托，则只需对父级进行操作，这样就只使用一个对象也就是函数就够了

Two，移动端1px问题，为什么会有？如何解决？

            由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了

解决方案

1.在ios8+中当devicePixelRatio=2的时候使用0.5px

p{

    border:1px solid #000;

}

@media (-webkit-min-device-pixel-ratio: 2) {

     p{

         border:0.5px solid #000;

     }

}

2.伪类 + transform 实现

对于老项目伪类+transform是比较完美的方法了。

原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

单条border样式设置：

.scale-1px{ position: relative; border:none; }

.scale-1px:after{

    content: '';

    position: absolute; bottom: 0;

    background: #000;

    width: 100%; height: 1px;

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);

     -webkit-transform-origin: 0 0;

    transform-origin: 0 0; 

}

优点：所有场景都能满足，支持圆角(伪类和本体类都需要加border-radius)

缺点：对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套

3.viewport + rem 实现

        这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。

        在devicePixelRatio = 2 时，输出viewport：

        在devicePixelRatio = 3 时，输出viewport：

        优点：所有场景都能满足，一套代码，可以兼容基本所有布局

        缺点：老项目修改代价过大，只适用于新项目

4.使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果

样式设置：

.box-shadow-1px {

box-shadow: inset 0px -1px 1px -1px #c8c7cc;

}

优点：代码量少，可以满足所有场景

缺点：边框有阴影，颜色变浅

Three.解释jsonp的原理

     jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。                                       注意：jsonp只支持get请求                                                                                                                                         jsonp的核心是动态添加script标签调用服务器提供的js脚本    

简单封装：

       原理：因为浏览器有同源策略，script标签的src属性,src属性不仅仅可以写 JS文件，可以请求任意文件，通过JS这一特点实现，并添加async（异步属性），在js文件中封装函数，函数中进行异步操作

简单封装jsonp文件

Four.在工作中你是如何优化自己的代码的？

命名规范；

注释覆盖率50%以上；

避免全局变量；

避免修改原生API；

拆分函数，避免函数过于臃肿；

函数专注于做一件事情；

模块化封装；

组件化开发；

对于常量始终保持先定义后使用；

对于两个分支的判断，使用三目运算符，对于多个分支的判断使用switch语句；

减少DOM操作，减少页面重绘；

尽可能使用 === 而不是 ==，避免隐式转换。

Five.   axios是什么？如何使用？描述其实现登录的流程

      Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。

     在特性里面已经有提到，浏览器发送请求，或者Node.js发送请求都可以用到Axios

使用：npm install axios或<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>

引入模块后可以直接使用

   //Get

   function(){

        axios.get('/user',{params:{ID:12345}}).then(function(response)

                  {console.log(response);

             })

   }

//Post

function(){

       axios.post('/url',{name:'a',sex:'women'}).then(function(res){

              console.log(res)

       })

}

也可以使用拼接字符串的方式使用post请求

let name = 'a'     let sex = 'women'

`url+${name}+${sex}`

使用axios实现登陆：首先我们需要登陆的接口，登陆是post请求，将用户名和密码作为参数提交到后台上，只需要获取到用户名和密码这两条数据并提交到接口就好，提交后，后台会返回一条数据给我们，成功会给我们一条token值，拿到token值后，就可以进行对用户的编写，失败则会返回失败，根据这两条数据来判断是否登陆成功

six.    用JS去掉数组里面重复的数据，并且打印出来                                                                                            var   arr = [a,b,c,d,d,e,a,b,f,g]

      数组元素不是字符串，都是未定义的变量，小四你真黑啊