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]

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 225,151评论 6 523
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,465评论 3 405
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 172,429评论 0 368
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,147评论 1 301
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,149评论 6 400
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,614评论 1 315
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,965评论 3 429
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,950评论 0 279
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,486评论 1 324
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,524评论 3 347
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,640评论 1 355
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,228评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,976评论 3 340
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,407评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,552评论 1 277
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,215评论 3 381
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,714评论 2 366

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,511评论 1 11
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,120评论 1 32
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,541评论 0 106
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,595评论 0 7
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,381评论 1 3