大家好，我是讯享网，很高兴认识大家。



• 一、HTML+CSS 部分（）

• 二、HTML5+CSS3 部分（）

• 三、 Javascript

• 五、常见的兼容性问题
• PC 端常见的兼容性问题

• 移动端常见的兼容性问题

• 六、代码题

4、函数库 lodash，也有提供 cloneDeep 用来实现

12、什么是回调地狱，怎么解决回调地狱？

由于回调函数是异步的，每一层的回调函数都需要依赖上一层的回调执行完，所以形成了层层嵌套的关系最终形成了回调地狱。例如：定时器中再写定时器再写定时器，这种就形成了通常所说的回调地狱。

解决 1、避免函数的嵌套

2、模块化开发

3、使用 Promise 解决

13、对 ES6 中 Promise 的理解？

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

特点：

1、自己身上有 all、reject、resolve 这几个方法

2、原型上有 then、catch 等方法

3、一旦建立，就无法取消，这是它的缺点

注意具体方法使用请参看：

14、谈谈你对 this 理解？

普通函数中：this->window 定时器中：this->window 构造函数中：this->当前实例化的对象

事件处理函数中：this->事件触发对象

在 js 中一般理解就是谁调用这个 this 就指向谁

15、Js 的原型和原型链？原型链的应用？

每个对象都会在其内部初始化一个属性，就是 prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个 prototype 又会有自己的 prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

应用：

原型链是实现继承的主要方法。

16、几种常用的继承方式？

1、扩展原型对象实现继承

2、利用 apply(),和 call 实现继承

3、组合 call+prototype，最常用的一种方式

17、对 json 的了解？

Json 指的是 js 对象表示法。

1.轻量级的数据交互格式

2.可以形成复杂的嵌套格式

3.解析非常方便

4.易于读写，占用带宽小

18、总结常用的 es6 语法

1、Let：声明的变量，只作用于使用了 let 命令的代码块

2、const :声明一个常量，声明过后，就不可修改其值(会报错)

3、解构性赋值

3、箭头函数：用法的两个明显的优点： * 函数的写法更加简洁 *

箭头函数内部没有自己的 this 对象，而是全部继承外面的，所以内部的 this 就是外层代码块的 this。4、字符串模板：ES6 中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量\({vraible}</p><p>5、Proxy：Proxy 可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作</p><p>6、循环：for of 实现数组的遍历（以及 keys(),value(),entries()等方法）</p><p>注意：详细内容请参考：http://es6.ruanyifeng.com/</p><h5>19、apply，call，和 bind 有什么区别</h5><p>三者都可以把一个函数应用到其他对象上，注意不是自身对象．apply,call 是直接执行函数调用， bind 是绑定，执行需要再次调用．apply 和 call 的区别是 apply 接受数组作为参数，而 call 是接受逗号分隔的无限多个参数列表</p><h5>20、什么是内存泄漏，哪些常见操作会造成内存泄漏</h5><p>内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。在 C++中，因为是手动管理内存，内存泄露是经常出现的事情。而现在流行的 C#和 Java 等语言采用了自动垃圾回收方法管理内存，正常使用的情况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有 bug，会产生内存泄露。<br> 1全局变量引起的内存泄漏</p><p>2 闭包引起的内存泄漏，可以再退出函数前删除局部变量，为局部变量赋值为null</p><p>3dom 清空或删除时，事件未清除导致的内存泄漏</p><h5>21、简述 readyonly 与 disabled 的区别</h5><p>ReadOnly 和 Disabled 的作用是使用户不能够更改表单域中的内容.</p><p>但是二者还是有着一些区别的：</p><p>1、Readonly 只针对 input(text/password)和 textarea 有效，而 disabled 对于所有的表单元素有效，包括 select,radio,checkbox,button 等。</p><p>2、在表单元素使用了 disabled 后，我们将表单以 POST 或者 GET 的方式提交的话，这个元素的值不会被传递出去，而 readonly 会将该值传递出去</p><h5>22、jq 的在项目中的常用的方法？</h5><p>使用 JQuery 获取元素</p><p>JQ 获取元素的内容：\)(“xxxx”).html()

JQ 中的事件操作

JQ 操作控件属性

JQ 操作 css

ajax 操作

jq 函数级插件–
讯享网
.extend-添加静态方法

23、\((this)和 this 的区别是什么？</h5><p>\)(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用 val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。

24、jquery 对象和 dom 对象是怎样转换的？

jquery 转 DOM 对象:jQuery 对象是一个数组对象，可以通过[index]的得到相应的 DOM 对象还可以通过 get[index]去得到相应的 DOM 对象。DOM 对象转 jQuery 对象:\((DOM 对象)</p><h5>25、jq 和 zepto 区别是什么？</h5><p>相同点：</p><p>Zepto 最初是为移动端开发的库，是 jQuery 的轻量级替代品，因为它的 API 和 jQuery 相似，而文件更小。 Zepto 最大的优势是它的文件大小，只有 8k 多，是目前功能完备的库中最小的一个，尽管不大，Zepto所提供的工具足以满足开发程序的需要。大多数在 jQuery 中·常用的 API 和方法 Zepto 都有，Zepto 中还有一些 jQuery 中没有的。另外，因为 Zepto 的 API 大部分都能和 jQuery 兼容，所以用起来极其容易，如果熟悉 jQuery，就能很容易掌握 Zepto。你可用同样的方式重用 jQuery 中的很多方法，也可以方面地把方法串在一起得到更简洁的代码，甚至不用看它的文档。不同点</p><p>针对移动端程序，Zepto 有一些基本的触摸事件可以用来做触摸屏交互（tap 事件、swipe 事件）， Zepto 是不支持 IE 浏览器的，这不是 Zepto 的开发者 Thomas Fucks 在跨浏览器问题上犯了迷糊，而是经过了认真考虑后为了降低文件尺寸而做出的决定，就像 jQuery 的团队在 2.0 版中不再支持旧版的 IE（6 7 8）一样。因为 Zepto 使用 jQuery 句法，所以它在文档中建议把 jQuery 作为 IE 上的后备库。那样程序仍能在 IE 中，而其他浏览器则能享受到 Zepto 在文件大小上的优势，然而它们两个的 API 不是完全兼容的，所以使用这种方法时一定要小心，并要做充分的测试。</p><p>1、width()和 height()的区别：Zepto 由盒模型(box-sizing)决定，用.width()返回赋值的 width，用.css(‘width’)返回加 border 等的结果；jQuery 会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。</p><p>2、offset()的区别：Zepto 返回{top,left,width,height}；jQuery 返回{width,height}。</p><p>3、Zepto 无法获取隐藏元素宽高，jQuery 可以。</p><p>4、Zepto 中没有为原型定义 extend 方法而 jQuery 有。</p><h5>26、jQuery.fn 的 init 方法返回的 this 指的是什么对象？为什么要返回 this？</h5><p>this 执行 init 构造函数自身，其实就是 jQuery 实例对象，返回 this 是为了实现 jQuery 的链式操作</p><h5>27、jquery.extend 与 jquery.fn.extend 的区别？</h5><p>jQuery 为开发插件提拱了两个方法，分别是：</p><p>1.jQuery.fn.extend();用来扩展 jQuery 实例</p><p>2.jQuery.extend();用来扩展 jQuery 对象本身</p><h5>28、Zepto 的点透问题如何解决？</h5><p>点透主要是由于两个 div 重合，例如：一个 div 调用 show()，一个 div 调用 hide()；这个时候当点击</p><p>上面的 div 的时候就会影响到下面的那个 div；</p><p>解决办法主要有 2 种：</p><p>1.github 上有一个叫做 fastclick 的库，它也能规避移动设备上 click 事件的延迟响应， https://github.com/ftlabs/fastclick</p><p>将它用 script 标签引入页面（该库支持 AMD，于是你也可以按照 AMD 规范，用诸如 require.js 的模块加载器引入），并且在 dom ready 时初始化在 body 上，</p><p>2.根据分析，如果不引入其它类库，也不想自己按照上述 fastclcik 的思路再开发一套东西，需要 1. 一个优先于下面的“divClickUnder”捕获的事件；2.并且通过这个事件阻止掉默认行为（下面的“divClickUnder”对 click 事件的捕获，在 ios 的 safari，click 的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被 event.preventDefault()阻止的行为）。</p><h5>29、jQuery 中.bind() .live() .delegate() .on()的区别</h5><p>1、bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 \)(“a”).bind(“click”,function(){alert(“ok”);});

2、live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

\((“a”).live(“click”,function(){alert(“ok”);});</p><p>3、delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处</p><p>理程序，并规定当这些事件发生时运行的函数</p><p>\)(“#container”).delegate(“a”,“click”,function(){alert(“ok”);})

4、on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

差别：

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到 document DOM 节点上。

和.bind()的优势是支持动态数据。

.delegate()则是更精确的小范围使用事件代理，性能优于.live() .on()则是最新的 1.9 版本整合了之前的三种方式的新事件绑定机制

30、json 字符串和 json 对象怎么相互转化？

JSON.parse() 从一个字符串中解析出 json 对象

JSON.stringify() 从一个对象中解析出字符串

在前后数据交互中经常使用，必须要记住。

31、http 和 https 的区别是什么？

http 和 https 使用的是完全不同的连接方式,用的端口也不一样,前者是 80,后者是 443。

HTTPS 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版。

由于 https 要还密钥和确认加密算法的过程，所以更安全

32、get 和 post 的区别？

客户端对服务器的请求常用类型主要有四种：

GET（从服务器获取）

POST（向服务器发送请求数据）

PUT（更新）

DELETE（删除）

POST 和 GET 区别

GET 的所有参数全部包装在 URL 中，明文显示，且服务器的访问日志会记录，非常不安全

POST 的 URL 中只有资源路径，不包含参数，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全。所有涉及用户隐私的数据都要用 POST 传输。

GET：不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内 POST 方法提交的数据比较大，大小靠服务器的设定值限制，PHP 默认是 2M

33、jsonp 的原理，有什么优缺点？

ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。

Jsonp 优点:

完美解决在测试或者开发中获取不同域下的数据,用户传递一个 callback 参数给服务端，然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

Jsonp 缺点:

Jsonp 只支持 get 请求而不支持 post 请求,也即是说如果想传给后台一个 json 格式的数据,此时问题就来了,浏览器会报一个 http 状态码 415 错误,告诉你请求格式不正确.

34、跨域的几种解决方式

①通过 jsonp 跨域

② CORS

核心思想：在服务器端通过检查请求头部的 origin，从而决定请求应该成功还是失败。具体的方法是在服务端设置 Response Header 响应头中的 Access-Control-Allow-Origin 为对应的域名，实现了CORS（跨域资源共享），这里出于在安全性方面的考虑就是尽量不要用 *，但对于一些不重要的数据则随意。

35、同源策略

36、jq 中 ajax 请求的步骤？怎么解决跨域的？

\(.ajax({</p><p>Type:”get/post”,</p><p>Url:””,</p><p>dataType:”jsonp”, 利用 jsonp 进行跨域</p><p>Data:{},</p><p>async: false，–默认为 true 异步 false 同步</p><p>cache: false,–默认为 true 缓存 false 不缓存</p><p>beforeSend:fucntion(){},</p><p>Success:function(){},</p><p>Errorr:function(){}</p><p>})</p><h5>37、简述 ajax 的交互原理，以及同步和异步的区别</h5><p>Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后</p><p>用 javascript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据</p><p>1、创建 XMLHttpRequest 对象</p><p>2、建立连接，设置为 GET 发送：xmlHttp.open(“GET”, “/ajax/getHint.jsp?q=” + txtValue, true);</p><p>3、发送数据：xmlHttp.send();</p><p>4、注册回调方法：xmlHttp.onreadystatechange = ajaxCallback;</p><p>5、执行回调：</p><p>function ajaxCallback(){ //响应就绪时</p><p>if(xmlHttp.readyState == 4 &amp;&amp; xmlHttp.status == 200){ searchInput.value = xmlHttp.responseText;<br> }</p><p>}</p><p>同步：同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。</p><p>异步：不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。</p><h5>38、ajax 出现错误怎么调试？</h5><p>JQuery 使我们在开发 Ajax 应用程序的时候提高了效率，减少了许多兼容性问题，我们在 Ajax 项目中，遇到 ajax 异步获取数据出错怎么办，我们可以通过捕捉 error 事件来获取出错的信息。发送 error 可能有下面两张引起的，或者其他程序问题，需要我们认真仔细。</p><p>1、data:“{}”, data 为空也一定要传"{}"；不然返回的是 xml 格式的。并提示 parsererror.</p><p>2 、 parsererror 的异常和 Header 类型也有关系 。 及编码 header(‘Content-type: text/html; charset=utf8’);</p><h5>39、ajax 的缺点（答出三点即可）</h5><p>1、ajax 不支持浏览器 back 按钮。</p><p>2、安全问题 AJAX 暴露了与服务器交互的细节。</p><p>3、对搜索引擎的支持比较弱。</p><p>4、破坏了程序的异常机制。</p><p>5、不容易调试</p><p>注意详细内容请查看：</p><h5>40、WEB 应用从服务器主动推送 Data 到客户端有那些方式？</h5><p>html5 websoket</p><p>WebSocket 通过 Flash</p><p>XHR 长时间连接</p><p>XHR Multipart Streaming<br> 不可见的 Iframe<br></p><h5>41、请写出至少 5 种常见的 http 状态码以及代表的意义</h5><p>5 种常见的 http 状态码以及代表的意义如下：</p><p>200（OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回。</p><p>303（See Other）：告知客户端使用另一个 URL 来获取资源。</p><p>400（Bad Request）：请求格式错误。1)语义有误，当前请求无法被服务器</p><p>理解。除非进行修改，否则客户端不应该重复提交这个请求；2)请求参数有误。404（Not Found）：请求失败，请求所希望得到的资源未被在服务器上发现。500（Internal Server Error）：服务器遇到了一个未曾预料的状况，导致了它</p><p>无法完成对请求的处理。</p><h5>42、window.onload 和 document ready 的区别?</h5><p>window.onload 是在 dom 文档树加载完和所有文件加载完之后执行一个函数 Document.ready 原生</p><p>种没有这个方法，jquery 中有 \)().ready(function),在 dom 文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。

\((document).ready 要比 window.onload 先执行</p><p>window.onload 只能出来一次，\)(document).ready 可以出现多次

43、什么是事件代理？请写出一个事件代理的示例？

1、当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，我们把事件委托到其父对象上，借助事件冒泡机制，可以将事件委托到 body，document 等元素上，这样等于一个页面就只有一个事件触发，避免直接把事件添加到多个对象上

2、动态加载的数据是不能直接进行事件的绑定，这时就需要使用事件委托。

例如：\((body).on(‘click’,’#div’,function(){})</p><h5>44、IE 和 DOM 事件流的区别</h5><p>1.执行顺序不一样、2.参数不一样 3.事件加不加 on 4.this 指向问题注：（1）IE9 以前：attachEvent(“onclick”)、detachEvent(“onclick”)</p><p>（2）IE9 开始跟 DOM 事件流是一样的，都是 addEventListener 比较 attachEvent 和 addEventListener：</p><p>1、attachEvent 只支持事件冒泡 addEventListener 既支持事件冒泡，也支持事件捕获</p><p>2、参数：attachEvent 事件类型需要 on 前缀 addEventListener 事件类型不需要 on 前缀</p><p>3、如果使用 attachEvent 对一个元素的目标阶段绑定了多次事件，那么会按照绑定顺序的相反顺序进行触发</p><p>如果使用 addEventListener 对一个元素的目标阶段绑定了多次事件，那么会按照绑定顺序进行触发</p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//_cdad1c018497.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='JavaScript前端开发案例教程第二版 课后答案 web前端开发实例教程答案_jquery_04' style="width: 865px; visibility: visible;"></p><h5>45、如何阻止事件冒泡和默认事件？</h5><p>阻止浏览器的默认行为</p><p>IE9 之前：window.event.returnValue=false;</p><p>IE9+ FF Chrome： e.preventDefault();</p><p>停止事件冒泡</p><p>IE9+ FF Chrome：e. stopPropagation();</p><p>event.canceBubble=true;//ie9 之前</p><p>原生 JavaScript 中，return false;只阻止默认行为，不阻止冒泡，jQuery 中的 return false;既阻止默认行为，又阻止冒泡</p><h5>46、js 延迟加载的方式有哪些？</h5><p>defer 属性</p><p>async 属性</p><p>动态创建 DOM 方式</p><p>使用 jQuery 的 getScript 方法</p><p>使用 setTimeout 延迟方法</p><p>让 JS 最后加载</p><h5>47、你如何优化自己的代码？</h5><p>A、代码重用</p><p>B、避免使用过多的全局变量（命名空间，封闭空间，模块化 mvc…）</p><p>C、拆分函数避免函数过于臃肿：单一职责原则</p><p>D、将面向过程的编程方式改为使用面向对象编程</p><p>E、适当的注释，尤其是一些复杂的业务逻辑或者是计算逻辑，都应该写出这个业务逻辑的具体过</p><p>程</p><p>F、内存管理，尤其是闭包中的变量释放</p><h5>48、前端开发的优化问题（看雅虎 14 条性能优化原则）</h5><p>（1） 减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存 ，图片服务器。</p><p>（2） 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数</p><p>（3） 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。</p><p>（4） 当需要设置的样式很多时设置 className 而不是直接操作 style。</p><p>（5） 少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。</p><p>（6） 避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。</p><p>（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。</p><p>（8） 避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比 div+css 布局慢。</p><h5>1、 Vue 的双向数据绑定原理是什么？</h5><p>vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。</p><p>具体步骤：</p><p>第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。</p><p>第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。</p><p>第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个 update()方法 3、待属性变动 dep.notice()通知时，能调用自身的update()方法，并触发 Compile 中绑定的回调，则功成身退。</p><p>第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己</p><p>的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -&gt; 视图更新；视图交互变化(input) -&gt; 数据 model 变更的双向绑定效果。</p><h5>2、请详细说下你对 vue 生命周期的理解？</h5><p>总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：</p><p>1、在 beforeCreated 阶段，vue 实例的挂载元素\)el 和数据对象 data 都为 undefined，还未初始化。

2、在 created 阶段，vue 实例的数据对象 data 有了，\(el 还没有。</p><p>3、载入前/后：在 beforeMount 阶段，vue 实例的\)el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节

点，data.message 还未替换。

北京顺义传智播客·黑马程序员 www.itheima.com

第54页 共 97页

4、在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。

5、更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。

6、销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在

3、请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？

assets 文件夹是放静态资源；

components 是放组件；

router 是定义路由相关的配置;

view 视图；

app.vue 是一个应用主组件；

main.js 是入口文件

4、怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？

在 router 目录下的 index.js 文件中，对 path 属性加上/:id。 使用 router 对象的 params.id

5、vue-router 有哪几种导航钩子？

6、scss 是什么？在 vue.cli 中的安装使用步骤是？有哪几大特性？

css 的预编译。

使用步骤：

第一步：用 npm 下三个 loader（sass-loader、css-loader、node-sass）

第二步：在 build 目录找到 webpack.base.config.js，在那个 extends 属性中加一个拓展.scss

第三步：还是在同一个文件，配置一个 module 属性

第四步：然后在组件的 style 标签加上 lang 属性 ，例如：lang=”scss”

有哪几大特性:1、可以用变量，例如（\(变量名称=值）；2、可以用混合器；3、可以嵌套</p><h5>7、mint-ui 是什么？怎么使用？说出至少三个组件使用方法？</h5><p>基于 vue 的前端组件库。npm 安装，然后 import 样式和 js，</p><p>vue.use（mintUi）全局引入。</p><p>在单个组件局部引入：import {Toast} from ‘mint-ui’。</p><p>组件一：Toast(‘登录成功’)；</p><p>组件二：mint-header；</p><p>组件三：mint-swiper</p><h5>8、请说下封装 vue 组件的过程？</h5><p>首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。</p><p>然后，使用 Vue.extend 方法创建一个组件，然后使用 Vue.component 方法注册组件。子组件需要数据，可以在 props 中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用 emit 方法</p><h5>9、vue-loader 是什么？使用它的用途有哪些？</h5><p>解析.vue 文件的一个加载器，跟 template/js/style 转换成 js 模块。</p><p>用途：js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade 等</p><h5>10、vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？</h5><p>第一步：在 components 目录新建你的组件文件（smithButton.vue），script 一定要 export default</p><p>第二步：在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’</p><p>第三步：注入到 vue 的子组件的 components 属性上面,components:{smithButton}第四步：在 template 视图 view 中使用， 问题有：smithButton 命名，使用的时候则 smith-button。</p><h5>11、说下你对 mvvm 的理解？双向绑定的理解？</h5><p>mvvm 就是 vm 框架视图、m 模型就是用来定义驱动的数据、v 经过数据改变后的 html、vm 就是用来实现双向绑定</p><p>双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着变</p><h5>12、请说下具体使用 vue 的理解？</h5><p>1、使用 vue 不必担心布局更改和类名重复导致的 js 重写，因为它是靠数据驱动双向绑定，底层是通过 Object.defineProperty() 定义的数据 set、get 函数原理实现。</p><p>2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。</p><p>3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。</p><p>4、js 的代码无形的规范，团队合作开发代码可阅读性更高。</p><h5>13、你是怎么认识 vuex 的？</h5><p>1、vuex 可以理解为一种开发模式或框架。比如 PHP 有 thinkphp，java 有 spring 等。</p><p>2、通过状态（数据源）集中管理驱动组件的变化（好比 spring 的 IOC 容器对 bean 进行集中管理）。</p><p>3、应用级的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事物； 异步逻辑应该封装在 action 中。</p><h5>14、vuex 有哪几种属性？</h5><p>有五种，分别是 State、 Getter、Mutation 、Action、 Module</p><h5>15、vuex 的 State 特性是？</h5><p>1、Vuex 就是一个仓库，仓库里面放了很多对象。其中 state 就是数据源存放地，对应于与一般 Vue 对象里面的 data。</p><p>2、state 里面存放的数据是响应式的，Vue 组件从 store 中读取数据，若是 store 中的数据发生改变，依赖这个数据的组件也会发生更新。</p><p>3、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。</p><h5>16、vuex 的 Getter 特性是？</h5><p>1、getters 可以对 State 进行计算操作，它就是 Store 的计算属性</p><p>2、 虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用</p><p>3、 如果一个状态只在一个组件内使用，是可以不用 getters</p><h5>17、vuex 的 Mutation 特性是？</h5><p>1、Action 类似于 mutation，不同在于：</p><p>2、Action 提交的是 mutation，而不是直接变更状态。</p><p>3、Action 可以包含任意异步操作</p><h5>18、的作用是什么？</h5><p> 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。</p><h5>19、vue 中 ref 的作用是什么？</h5><p>ref 被用来给 DOM 元素或子组件注册引用信息。引用信息会根据父组件的 \)refs 对象进行注册。如果在普通的 DOM 元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例注意：只要想要在 Vue 中直接操作 DOM 元素，就必须用 ref 属性进行注册

20、vue 中组件直接的通信是如何实现的？

组件关系可分为父子组件通信、兄弟组件通信。

1、父组件向子组件：

通过 props 属性来实现

2、子组件向父组件：

子组件用on（）来监昕子组件的事件。

父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。

3、兄弟之间的通信：

通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus，之后通过分别调用 Bus 事件触发和监听来实现组件之间的通信和参数传递。

21、你对 Webpack 的认识？

webpack 是收把项目当作一个整体，通过一个给定的的主文件，webpack 将从这个文件开始找到你的项目的所有依赖文件，使用 loaders 处理它们，最后打包成一个或多个浏览器可识别的 js 文件

22、webpack 中的 entry 是做什么的？

entry: 用来写入口文件，它将是整个依赖关系的根。当我们需要多个入口文件的时候，可以把 entry 写成一个对象。

var baseConfig = {

entry: {

main: ‘https://blog.51cto.com/u_/src/index.js’

}

}

23、webpack 中的 output 是做什么的？

output: 即使入口文件有多个，但是只有一个输出配置，如果你定义的入口文件有多个，那么我们需要使用占位符来确保输出文件的唯一性。

var baseConfig = {

entry: {

main: ‘https://blog.51cto.com/u_/src/index.js’

},

output: {

filename: ‘[name].js’,

path: path.resolve(‘https://blog.51cto.com/u_/build’)

}

}

module.exports = baseConfig

24、webpack 中的 Loader 的作用是什么？

1、实现对不同格式的文件的处理，比如说将 scss 转换为 css，或者 typescript 转化为 js

2、转换这些文件，从而使其能够被添加到依赖图中这里介绍几个常用的 loader：

babel-loader： 让下一代的 js 文件转换成现代浏览器能够支持的 JS 文件。

babel 有些复杂，所以大多数都会新建一个.babelrc 进行配置

css-loader,style-loader:两个建议配合使用，用来解析 css 文件，能够解释@import,url()如果需要解析 less 就

在后面加一个 less-loader

file-loader: 生成的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名

url-loader: 功能类似 file-loader,但是文件大小低于指定的限制时，可以返回一个 DataURL 事实上，在使用 less,scss,stylus 这些的时候，npm 会提示你差什么插件，差什么，你就安上就行了

25、webpack 中的 Plugins 的作用是什么？

loaders 负责的是处理源文件的如 css、jsx，一次处理一个文件。而 plugins 并不是直接操作单个文件，它直接对整个构建过程起作用

1、ExtractTextWebpackPlugin: 它会将入口中引用 css 文件，都打包都独立的 css 文件中，而不是内嵌在 js 打包文件中。

2、HtmlWebpackPlugin:依据一个简单的 index.html 模版，生成一个自动引用你打包后的 js 文件的新index.html。

3、HotModuleReplacementPlugin: 它允许你在修改组件代码时，自动刷新实时预览修改后的结果注意永远不要在生产环境中使用 HMR。

26、webpack 中什么是 bundle,什么是 chunk,什么是 module?

1、bundle 是由 webpack 打包出来的文件，

2、chunk 是指 webpack 在进行模块的依赖分析的时候，代码分割出来的代码块。

3、module 是开发中的单个模块。

4、chunk 打包后变成 bundle.

27、webpack-dev-server 和 http 服务器如 nginx 有什么区别？

webpack-dev-server 使用内存来存储 webpack 开发环境下的打包文件，并且可以使用模块热更新，他比传统的 http 服务对开发更加有效。

28、什么是模块热更新？

模块热更新，是 webpack 的一个功能，他可以使得代码通过修改过后，不用刷新浏览器就可以更新。是高级版的自动刷新浏览器。

29、什么是长缓存？在 webpack 中如何做到长缓存优化？

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。在 webpack

中，可以在 output 给出输出的文件制定 chunkhash, 并且分离经常更新的代码和框架代码，通过 NamedModulesPlugin 或者 HashedModulesIdsPlugin 使再次打包文件名不变。

30、简单描述下微信小程序的相关文件类型？

微信小程序项目结构主要有一下几个文件类型,如下

1、WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。

2、WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，

3、js 逻辑处理，网络请求

4、json 小程序设置，如页面注册，页面标题及 tabBar。

5、app.json 必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的 window 背景色，配置导航条样式，配置默认标题。

6、app.js 必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

31、你是怎么封装微信小程序的数据请求的？

1、将所有的接口放在统一的 js 文件中并导出

2、在 app.js 中创建封装请求数据的方法

3、在子页面中调用封装的方法请求数据

32、小程序有哪些参数传值的方法？

1、给 HTML 元素添加 data-*属性来传递我们需要的值，然后通过 e.currentTarget.dataset 或 onload 的 param 参数获取。但 data-名称不能有大写字母和不可以存放对象

2、设置 id 的方法标识来传值通过 e.currentTarget.id 获取设置的 id 的值,然后通过设置全局对象的方式来传递数值

3、在 navigator 中添加参数传值

33、简述微信小程序原理？

1、微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。

2、JavaScript：首先 JavaScript 的代码是运行在微信 App 中的，并不是运行在浏览器中，因此一些 H5 技术的应用，需要微信 App 提供对应的 API 支持，而这限制住了 H5 技术的应用，且其不能称为严格的 H5，可以称其为伪 H5，同理，微信提供的独有的某些 API，H5 也不支持或支持的不是特别好。

3、WXML：WXML 微信自己基于 XML 语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。

4、WXSS：WXSS 具有 CSS 的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档。

5、微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。

6、小程序分为两个部分 webview 和 appService。其中 webview 主要用来展现 UI，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理。

34、小程序的双向绑定和 vue 哪里不一样？

小程序直接 this.data 的属性是不可以同步到视图的，必须调用：

小程序：

35、webview 中的页面怎么跳回小程序中？

网页中可使用 JSSDK 1.3.2 提供的接口返回小程序页面。

例如：wx.miniProgram.navigateTo({url: ‘/path/to/page’})

36、小程序关联微信公众号如何确定用户的唯一性？

使用 wx.getUserInfo 方法 withCredentials 为 true 时可获取 encryptedData，里面有 union_id。后端需要进行对称解密。

37、小程序如何实现下拉刷新？

用view 代替 scroll-view,设置 onPullDownRefresh 函数实现。

1、在 json 文件中配置 enablePullDownRefresh 为 true(app.json 中在 window 中设置 enablePullDownRefresh,此效果作用于全局)。

2、在 js 文件中实现 onPullDownRefresh 方法,在网络请求完成后调用 wx.stopPullDownRefresh()来结束下拉刷新。

38、小程序调用后台接口遇到哪些问题？

1、数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；

2、小程序不可以直接渲染文章内容页这类型的 html 文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的 html 进行过滤，后台直接处理批量替换 p 标签 div 标签为 view 标签，然后其它的标签让插件来做，减轻前端的时间。

39、小程序的 wxss 和 css 有哪些不一样的地方？

1、wxss 的图片引入需使用外链地址。

2、没有 Body，样式可直接使用 import 导入。

40、分析下微信小程序的优劣势

优势：

1、无需下载，通过搜索和扫一扫就可以打开。

2、良好的用户体验：打开速度快。

3、开发成本要比 App 要低。

4、安卓上可以添加到桌面，与原生 App 差不多。

5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。

劣势：

1、限制较多。页面大小不能超过 1M。不能打开超过 5 个层级的页面。

2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。

3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。

4、依托于微信，无法开发后台管理功能。

41、Angular 中是怎么实现数据双向绑定的？

Angular 实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。即数据模型（Module）和视图（View）之间的双向绑定。

脏检查机制。双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。

原理就是，Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 \(watch 队列里插入一条 <span><img src='https://math-api.51cto.com/?from=%20%20%20%20%20%20%20%20watch%EF%BC%8C%E7%94%A8%E6%9D%A5%E6%A3%80%E6%B5%8B%E5%AE%83%E7%9B%91%E8%A7%86%E7%9A%84%20model%20%E9%87%8C%E6%98%AF%E5%90%A6%E6%9C%89%E5%8F%98%E5%8C%96%E7%9A%84%E4%B8%9C%E8%A5%BF%E3%80%82%E5%BD%93%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8E%A5%E6%94%B6%E5%88%B0%E5%8F%AF%E4%BB%A5%E8%A2%AB%20angular%20context%20%E5%A4%84%E7%90%86%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%97%B6%EF%BC%8C%20' alt='JavaScript前端开发案例教程第二版 课后答案 web前端开发实例教程答案_css_06'></span>digest循环就会触发，遍历所有的 \)watch，最后更新 dom。

42、Angular 中 ng-show/ng-hide 与 ng-if 可以用来作什么？有什么区别？

angularJS 中的 ng-show、ng-hide、ng-if 指令都可以用来控制 dom 元素的显示或隐藏。ng-show和ng-hide 根据所给表达式的值来显示或隐藏 HTML 元素。当赋值给 ng-show 指令的值为 false 时元素会被隐藏，值为 true 时元素会显示。ng-hide 功能类似，使用方式相反。元素的显示或隐藏是通过改变 CSS 的 display 属性值来实现的。

ng-if 指令可以根据表达式的值在 DOM 中生成或移除一个元素。如果赋值给 ng-if 的表达式的值是false，那对应的元素将会从 DOM 中移除，否则生成一个新的元素插入 DOM 中。ng-if 同 no-show和ng-hide 指令最本质的区别是，它不是通过 CSS 显示或隐藏 DOM 节点，而是删除或者新增结点。

43、angular 中\(rootScope 和 scope 有什么区别？</h5><p>scope 是 html 和单个 controller 之间的桥梁，数据绑定就靠他了。rootscope 是各个 controller中scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。</p><h5>44、angular 中应用是怎么启动的，有哪几种方式，且怎么实现的，请写出实现代码？</h5><p>①angular 启动的主要步骤：</p><p>（1）匿名自执行函数，保证 angular.js 加载完后，立即执行其中的代码。</p><p>（2）通过 window.angular.bootstrap 检测是否 angular 被多次启动/angular.js 被多次加载。多次加载，耗时耗力，不值得提倡。在 window 对象上绑定一个属性，这就是个全局属性，全局的嘛，就能用来判断是否多次加 载了（自己写 lib 也可以好好利用 window 属性哦）。</p><p>（3）绑定 jQuery，即 bindJQuery()：如果用户导入了 jQuery，就用这个导入的外部 jQuery。否则用 angular 内置的 jQLite。看来 jQuery 已经成为不可或缺的神物。</p><p>（4）发布 ng 的 API，即 publishExternalAPI()。这样我们才能用 angular.module()之类的方</p><p>法。</p><p>（5）查找 ng-app，即 angularInit()。ng 的边界就是 ng-app。</p><p>②启动方式有自启动和手启动</p><p>自启：angular.moudle(“myApp”).run(function(KaTeX parse error: Expected '}', got 'EOF' at end of input: …){ console.log(rootScope)});</p><p>手启：angular.moudle(“myApp”). run(function(KaTeX parse error: Expected '}', got 'EOF' at end of input: …){ console.log(rootScope)}); angular.bootstrap().bootstrap(DOM 对象，[‘myApp’]);</p><p>注：手动启动的时候，不需要在页面中指定 ng-app 指令；一般使用自启动。对于一个页面中存在多个 ng-app 的情况，第一个 ng-app 会自动启动，其余的需要手动启动才可以，否则，不生效而且会报错，可以忽略这种方法。</p><h5>45、angular 自定义指令中 restrict 可以怎么样设置，分别是什么意思？Scope 中@，=，&amp;有什么区别？怎么实现与父级别作用进行交互？</h5><p>restrict 属性，来决定这个指令是作为标签（E）、属性（A）、属性值（C）、还是注释（M）。</p><p>Scope</p><p>1 false（默认值）：直接使用父 scope。比较“危险”。</p><p>2 true：继承父 scope</p><p>3 {}可以理解成指令内部并没有一个新的 scope，它和指令以外的代码共享同一个 scope。@：单向绑定，外部 scope 能够影响内部 scope，但反过来不成立</p><p>=：双向绑定，外部 scope 和内部 scope 的 model 能够相互改变</p><p>&amp;：把内部 scope 的函数的返回值和外部 scope 的任何属性绑定起来</p><h5>46、不同模块之间可以使用哪些方式实现交互？可以怎么实现优化 angular 性能？以及你对在 angular 中使用的 jquery 的个人看法</h5><p>不同模块间的通信</p><p>1 采用 SharedService, 利用共享的公共服务来实现数据交换。AngularJS 中的 Service 被设计成单例</p><p>的，这为这一方案，提供来底层的实现可行性，这一方案也是被广泛采用的。</p><p>2 利用 AngularJS 提供的事件机制，<span><img src='https://math-api.51cto.com/?from=%20%20%20%20%20%20%20%20rootScope.%20' alt='JavaScript前端开发案例教程第二版 课后答案 web前端开发实例教程答案_css_07'></span>broadcast/ <span><img src='https://math-api.51cto.com/?from=%20%20%20%20%20%20%20%20scope.%20' alt='JavaScript前端开发案例教程第二版 课后答案 web前端开发实例教程答案_css_08'></span>emit 配合 <span><img src='https://math-api.51cto.com/?from=%20%20%20%20%20%20%20%20on%20%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%E3%80%82%20%E8%AF%A5%E6%96%B9%E6%A1%88%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%85%B7%E5%A4%87%E4%B8%80%E5%AE%9A%E7%9A%84%E5%B1%80%E9%99%90%E6%80%A7%EF%BC%8C%E6%AF%94%E5%A6%82%EF%BC%9A%20' alt='JavaScript前端开发案例教程第二版 课后答案 web前端开发实例教程答案_CSS_09'></span>emit 方法只能向上传递事件，而不能实现向下的事件传播。但是进行合理的搭配组合已经基本够用了。</p><p>3 利用浏览器的 SessionStorage 或者 LocalStorage 进行数据交换。 由于浏览器提供的这两类本地存</p><p>储方案都提供了相应的 storage 事件，所以我们也可以使用该方案进行数据交换。使用该方案是应</p><p>该注意及时清理无关数据。</p><p>优化性能：</p><p>1 官方提倡的，关闭 debug,\)compileProvider

myApp.config(function (\(compileProvider) {</p><p>\)compileProvider.debugInfoEnabled(false);

});

2使用一次绑定表达式即{{::yourModel}}

3 减少 watcher 数量

4 在无限滚动加载中避免使用 ng-repeat,关于解决方法可以参考这篇文章

5 使用性能测试的小工具去挖掘你的 angular 性能问题，我们可以使用简单的 console.time()也可

以借助开发者工具以及 Batarang

console.time(“TimerName”);

codeconsole.timeEnd(“TimerName”);

angularJS 的用法更像是面向对象的编程模式。它会要求你定义一个 view model，然后所有的页面变化，是通过改变这个 view model 来实现的。一旦搭建好了这个框框之后，页面的操作会非常爽，完全不用考虑具体页面怎么变化，怎么去操作 dom 的问题，浏览器兼容性的问题 angularJS 也一并帮你解决了。

而 jquery 的用法，更像是面向过程的编程模式。你在用 jquery 写具体代码的时候，你需要先考虑到你要实现的场景是怎么样的，然后把具体的实现过程用代码表示出来，而且这种实现往往是单向的。也就是说下次你要再进行页面改变的时候，又得用代码实现一边（而 angularJS 则只要把view model 的数据还原下就可以了）。

47、关于 angular.js 中，ng-repeat 迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决；

会提示 Duplicates in a repeater are not allowed. 加 track by \(index 可解决。当然，也可以 trace by 任何一个普通的值，只要能唯一性标识数组中的每一项即可（建立 dom 和数据之间的关联）。</p><h5>48、开发 one page 页面，需要有哪些注意事项；</h5><p>1事件执行效率</p><p>大量实现给未来 dom 节点绑定事件，这种绑定的很多封装实现，是利用往 document 绑定事件，然后冒泡到未来节点来的原理。当页面切换后，这些事件并未清理，页面会给新页面再执行类似的事件绑定。当 document 上点击后，执行的冒泡判断会越来越多，不仅影响到冒泡到未来 dom 节点模式的事件响应速度（因为冒泡判断），还会影响到精确绑定到 dom 节点事件的响应速度（因为执行完事件后，如果没有返回 false，会继续冒泡到 document），导致页面的点击响应越来越慢。</p><p>解决这类问题，可以往未来 dom 节点中已存在的父节点绑定事件实现冒泡，或将未来 dom 节点的精确绑定事件触发延迟执行。</p><p>2第三方插件重复渲染报错</p><p>页面切换，将原理的 uploadify flash 从 dom 中清除，后面再次进入需要显示 uploadify 的页面时，因为没有刷新页面，uploadify 再次渲染会报 id 冲突错误。</p><p>类似问题可以在页面切换前或新页面渲染前销毁插件对象。</p><p>3会话状态变化</p><p>单页应用不刷新页面，很多交互操作只是发出 ajax 请求。如果同一浏览器打开两个窗口，在一个窗口进行了帐号退出操作或切换了帐号，另一窗口继续进行操作，因为不会刷新页面，而且基本都是发 ajax 请求获取数据，这样就会出现页面显示的是切换前的帐号数据，而 ajax 获取到的是切换后的帐号的数据。</p><p>可以在每次 ajax 请求，都缓存会话 id，然后 ajax 请求前，比较缓存的会话 id 和 cookie 中的会话 id 是否一致，如果不一致，则表示已经切换帐号，可以刷新当前页面。</p><h5>49、Angular 和 vue 的优缺点，你是怎么看待的</h5><p>① Vue：</p><p>优点：</p><ol><li>简单：官方文档很清晰，比 Angular 简单易学。</li></ol><p>2.快速：异步批处理方式更新 DOM。</p><p>3.组合：用解耦的、可复用的组件组合你的应用程序。</p><p>4.紧凑：~18kb min+gzip，且无依赖。</p><p>5.强大：表达式 &amp; 无需声明依赖的可推导属性 (computed properties)。</p><p>6.对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular</p><p>的各种规定，使用场景更加灵活。</p><p>缺点：</p><ol><li>新生儿：Vue.js 是一个新的项目，没有 angular 那么成熟。</li></ol><p>2.影响度不是很大：google 了一下，有关于 Vue.js 多样性或者说丰富性少于其他一些有名库。</p><p>3.不支持 IE8：</p><p>②angularJS：</p><p>优点：</p><ol><li>模板功能强大丰富，自带了极其丰富的 angular 指令。</li></ol><p>2.是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器， 依赖注入等所有功能；</p><p>3.自定义指令，自定义指令后可以在项目中多次使用。</p><p>4.ng 模块化比较大胆的引入了 Java 的一些东西（依赖注入），能够很容易的写出可复用的 代码，对于敏捷开发的团队来说非常有帮助。</p><p>5.angularjs 是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。</p><p>缺点：</p><ol><li>angular 入门很容易 但深入后概念很多, 学习中较难理解.</li></ol><p>2.文档例子非常少, 官方的文档基本只写了 api, 一个例子都没有, 很多时候具体怎么用都是 google 来的, 或直接问 misko,angular 的作者.</p><p>3.对 IE6/7 兼容不算特别好, 就是可以用 jQuery 自己手写代码解决一些.</p><p>4.指令的应用的**实践教程少, angular 其实很灵活, 如果不看一些作者的使用原则，很容易写出 四不像的代码, 例如 js 中还是像 jQuery 的思想有很多 dom 操作.</p><p>5.DI 依赖注入 如果代码压缩需要显示声明。</p><h5>50、RequireJS 和 seaJs 的区别</h5><p>相同之处</p><p>RequireJS 和 SeaJS 都是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的</p><p>模块化开发变得更简单自然。</p><p>不同之处</p><p>两者的区别如下：</p><p>② 定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在</p><p>Node 服务器端。</p><p>③ 遵循的规范不同。RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范。规范的不同，导致了两者 API 的不同。SeaJS 更简洁优雅，更贴近 CommonJS Modules/1.1 和 Node Modules 规范。</p><p>④ 社区理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。SeaJS 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。</p><p>⑤ 代码质量有差异。RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug。</p><p>⑥ 对调试等的支持有差异。SeaJS 通过插件，可以实现 Fiddler 中自动映射的功能，还可以实现自动 combo 等功能，非常方便。RequireJS 无这方面的支持。</p><p>⑦ 插件机制不同。RequireJS 采取的是在源码中预留接口的形式，源码中留有为插件而写的代码。 SeaJS 采取的插件机制则与 javascript 语言以及 Node 的方式一致：开放自身，让插件开发者可直接访问或修改，从而非常灵活，可以实现各种类型的插件。</p><h5>51、Angular 的架构思想</h5><p>1、MVVM指Model View Controller<br> 2、模块化和依赖注入</p><p>模块用于单独的逻辑表示服务，控制器，应用程序等，并保持代码的整洁。我们在单独的 js 文件中定义的模块，并将其命名为按照 module.js 文件形式</p><p>模块化的好处</p><p>1 增加了模块的可重用性</p><p>2 通过定义模块，实现加载顺序的自定义</p><p>3 在单元测试中，不必加载所有的内容</p><p>依赖注入是一种软件设计模式,用于处理如何让程序获得其依赖(对象的)引用3、双向数据绑定</p><p>一但建立双向绑定，使用者输入，会由 Angular 自动传到一个变量中，再自动读到所有绑到它的内容，更新它，效果上就是立即的资料同步，在程式码中修改变量，也会直接反应到呈现的外观上。</p><p>4、指令</p><p>指令是 DOM 元素上的标记，使元素拥有特定的行为。举例来说，静态的 HTML 不知道如何来创建和展现一个日期选择器控件。让 HTML 能识别这个语法，我们需要使用指令。指令通过某种方法来创建一个能够支持日期选择的元素。我们会循序渐进地介绍这是如何实现的。 如果你写过</p><p>AngularJS 的应用，那么你一定已经使用过指令，不管你有没有意识到。你肯定已经用过简单的指令，比如 ng-model, ng-repeat, ng-show 等。这些指令都赋予 DOM 元素特定的行为。例如，ng-repeat</p><p>重复特定的元素，ng-show 有条件地显示一个元素。如果你想让一个元素支持拖拽，你也需要创建一个指令来实现它。指令背后基本的想法很简单。它通过对元素绑定事件监听或者改变 DOM 而使 HTML 拥有真实的交互性。</p><h5>52、谈谈模块化的理解</h5><p>所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数</p><h5>53、angular 中 service 服务三种方式是什么？区别是什么？</h5><p>Factory ：把 service 的方法和数据放在一个对象里，并返回这个对象。</p><p>Service：通过构造函数方式创建 service，返回一个实例化对象。</p><p>Provider：创建一个可通过 config 配置的 service，\)get 中返回的，就是用 factory 创建 service 的内容

从底层实现上来看，service 调用了 factory，返回其实例；factory 调用了 provider，返回其 \(get 中定义的内容。factory 和 service 功能类似，只不过 factory 是普通 function，可以返回任何东西（return 的都可以被访问，所以那些私有变量怎么写，你懂的）；service 是构造器，可以不返回（绑定到 this 的都可以被访问）；provider 是加强版 factory，返回一个可配置的 factory。</p><h5>54、列举 React 的生命周期</h5><ol><li>实例化： getDefaultProps getInitialState componentWillMount render componentDidMount</li><li>更新 componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate</li><li>销毁&amp;清理期 componentWillUnmount</li></ol><h5>55、react 中 state 和 prop 的区别，改变 state 将对页面有什么影响</h5><p>props 放初始化数据，是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件，组件本身不能修改自己的 props。而 state 代表的是一个组件内部自身的状态，改变一个组件自身状态，从语义上来说，就是这个组件内部已经发生变化，有可能需要对此组件以及组件所包含的</p><p>子孙组件进行重渲染</p><h5>56、在 react 中如何获取真实 dom 节点</h5><p>React.findDOMNode(component)，在已经装载的组件中调用获取真实节点，在 render 中调用会报错。</p><h5>57、props.children 的作用是什么，如何使用？</h5><p>this.props.children 属性，它表示组件的所有子节点</p><p>可以使用以下方法遍历：</p><p>使用方法：</p><div></div><p>其他方法</p><div></div><h5>58、如何为 react 组件设置样式</h5><p>可以使用 style 或 className</p><p></p><h5>59、实现简单的 react 组件</h5><div></div><h5>60、react 中 value 和 defaultValue 属性的区别是什么</h5><p>defaultValue 在 react 为 form 组件里设置的初始值，组件成为非受控组件，设置 defaultValue，可以在页面上自动改变控件的值。</p><p>如果设置了 value 值，组件变成受控组件，当在页面上改变控件的值的时候，并不会生效，要响应用户的输入值，需为其绑定 onChange 事件，改变组件对应的 state，让页面重新渲染。</p><div></div><h5>61、Bootstrap 有什么好处，为什么要用 bootstrap，什么情况用比较合适</h5><p>Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、 JAVASCRIPT 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。</p><p>为什么使用 Bootstrap？</p><p>移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。</p><p>浏览器支持：所有的主流浏览器都支持 Bootstrap。</p><p>容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。</p><p>响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。它为开发人员创</p><p>建接口提供了一个简洁统一的解决方案。</p><p>它包含了功能强大的内置组件，易于定制。</p><p>它还提供了基于 Web 的定制。</p><p>它是开源的。</p><h5>62、什么是 Bootstrap 网格系统（Grid System）？</h5><p>Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。</p><p>响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。</p><h5>63、Bootstrap 网格系统（Grid System）的工作原理？</h5><p>1、行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。</p><p>2、使用行来创建列的水平组。</p><p>3、内容应该放置在列内，且唯有列可以是行的直接子元素。</p><p>4、预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。</p><p>5、列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。</p><p>6、网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。</p><h5>64、Bootstrap 网格系统列与列之间的间隙宽度是多少？</h5><p>间隙宽度为 30px（一个列的每边分别是 15px）。</p><h5>65、使用 Bootstrap 创建垂直表单的基本步骤？</h5><p>1、向父元素添加；</p><p>2、把标签和控件放在一个带有 class="form-group"的</p><p> <br></p><p> 中，这是获取**间距所必需的； </p><p> <br></p><p>3、向所有的文本元素、、添加 。</p><h5>66、使用 Bootstrap 创建水平表单的基本步骤？</h5><p>1、向父元素添加 class=“form-horizontal”；</p><p>2、把标签和控件放在一个带有 class="form-group"的中；</p><p>3、向标签添加 class=“control-label”。</p><h5>67、对于各类尺寸的设备，Bootstrap 设置的 class 前缀分别是什么？</h5><p>超小设备手机（&lt;768px）：.col-xs-</p><p>小型设备平板电脑（&gt;=768px）：.col-sm-</p><p>中型设备台式电脑（&gt;=992px）：.col-md-</p><p>大型设备台式电脑（&gt;=1200px）：.col-lg-</p><h5>68、为什么使用 node？</h5><p>总结起来 node 有以下几个特点:简单强大，轻量可扩展．简单体现在 node 使用的是 javascript,json 来进行编码，人人都会；强大体现在非阻塞 IO,可以适应分块传输数据，较慢的网络环境，尤其擅长高并发访问；轻量体现在 node 本身既是代码，又是服务器，前后端使用统一语言;可扩展体现在可以轻松应对多实例，多服务器架构，同时有海量的第三方应用组件．</p><h5>69、Node 有哪些全局对象？</h5><p>答：process, console, Buffer 和 exports</p><h5>70、Node.js 的适用场景？</h5><p>1)、实时应用：如在线聊天，实时通知推送等等（如 socket.io）</p><p>2)、分布式应用：通过高效的并行 I/O 使用已有的数据</p><p>3)、工具类应用：海量的工具，小到前端压缩部署（如 grunt），大到桌面图形界面应用程序</p><p>4)、游戏类应用：游戏领域对实时和并发有很高的要求（如网易的 pomelo 框架）</p><p>5)、利用稳定接口提升 Web 渲染能力</p><p>6)、前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯 Javascript 全栈式 MEAN 架构）</p><h4 id="h5">PC 端常见的兼容性问题</h4><h5>1、IE8 下面的 png 图片无法正常显示？</h5><p>原因：打开调试面板，你会发现 IE8 浏览器把 PNG 格式的 img 解析成了 span 标签，导致图无法显示。</p><p>解决方案：在样式里面对 span 设置宽高和 display:inline-block;即可。</p><h5>2、rgba 不支持 IE8？</h5><p>解决方案:可以用 opacity</p><p>opacity:0.7;/<em>FF chrome safari opera</em>/</p><p>filter:alpha(opacity:70);/<em>用了 ie 滤镜,可以兼容 ie</em>/</p><p>但是,需要注意的是,opacity 会影响里面元素的透明度</p><h5>3、C3 的新属性？</h5><p>当一些 CSS3 样式语法还存在波动时，它们提供针对浏览器的前缀。现在主要流行的浏览器内核主要有：</p><p>Trident 内核：主要代表为 IE 浏览器</p><p>Gecko 内核：主要代表为 Firefox</p><p>Presto 内核：主要代表为 Opera</p><p>Webkit 内核：产要代表为 Chrome 和 Safari</p><p>而这些不同内核的浏览器，CSS3 属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的 CSS3 属性可以说是对应浏览器的私有属性：</p><p>Trident 内核：前缀为-ms</p><p>Gecko 内核：前缀为-moz</p><p>Presto 内核：前缀为-o</p><p>Webkit 内核：前缀为-webkit</p><h5>4、document.form.item 问题</h5><p>问题：</p><p>代码中存在 这样的语句，不能在 FF 下运行解决方法：</p><p>改用 </p><h5>5、集合类对象问题</h5><p>问题：</p><p>代码中许多集合类对象取用时使用()，IE 能接受，FF 不能解决方法：</p><p>改用 [] 作为下标运算，例：</p><p>document.getElementsByName(“inputName”)(1) 改 为 document.getElementsByName(“inputName”)[1]</p><h5>6. window.event</h5><p>问题：</p><p>使用 window.event 无法在 FF 上运行</p><p>解决方法：</p><p>FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通</p><p>解决：</p><div></div><h5>7.HTML 对象的 id 作为对象名的问题</h5><p>问题：</p><p>在IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用，在 FF 中不能解决方法：</p><p>使用对象变量时全部用标准的 getElementById(“idName”)</p><h5>8.用 idName 字符串取得对象的问题</h5><p>问题：</p><p>在IE 中，利用 eval_r(“idName”) 可以取得 id 为 idName 的 HTML 对象，在 FF 中不能解决方法：</p><p>用 getElementById(“idName”) 代替 eval_r(“idName”)</p><h5>9.变量名与某 HTML 对象 id 相同的问题</h5><p>问题：</p><p>在FF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能</p><p>解决方法：在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行最好不要取与 HTML 对象 id 相同的变量名，以减少错误</p><h5>10. event.x 与 event.y 问题</h5><p>问题：</p><p>在IE 中，event 对象有 x,y 属性，FF 中没有解决方法：</p><p>在FF 中，与 event.x 等效的是 event.pageX ，但 event.pageX IE 中没有故采用 event.clientX 代替 event.x ，在 IE 中也有这个变量 event.clientX 与 event.pageX 有微妙的差别，就是滚动条</p><p>要完全一样，可以这样：</p><p>mX = event.x ? event.x : event.pageX; 然后用 mX 代替 event.x</p><h5>11. 取得元素的属性</h5><p>在FF 中，自己定义的属性必须 getAttribute() 取得</p><h5>10.在 FF 中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes</h5><p>问题：</p><p>childNodes 的下标的含义在 IE 和 FF 中不同，FF 的 childNodes 中会插入空白文本节点解决方法：</p><p>可以通过 node.getElementsByTagName_r() 来回避这个问题问题：</p><p>当 html 中节点缺失时，IE 和 FF 对 parentNode 的解释不同，例如：</p><div></div><p>FF 中 input.parentNode 的值为 form，而 IE 中 input.parentNode 的值为空节点问题：</p><p>FF 中节点自己没有 removeNode 方法解决方法：</p><p>必须使用如下方法 node.parentNode.removeChild(node)</p><h5>12. const 问题</h5><p>问题：</p><p>在IE 中不能使用 const 关键字解决方法：</p><p>以 var 代替</p><h5>13.body 对象</h5><p>FF的 body 在 body 标签没有被浏览器完全读入之前就存在，而 IE 则必须在 body 完全被读入之后才存在</p><p>这会产生在 IE 下，文档没有载入完时，在 body 上 appendChild 会出现空白页面的问题解决方法：</p><p>一切在 body 上插入节点的动作，全部在 onload 后进行</p><h5>14.url encoding</h5><p>问题：</p><p>一般 FF 无法识别 js 中的&amp;</p><p>解决方法：</p><p>在js 中如果书写 url 就直接写&amp;不要写&amp;</p><h5>15.nodeName 和 tagName 问题</h5><p>问题：</p><p>在FF 中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在 IE 中，nodeName</p><p>的使用有问题</p><p>解决方法：</p><p>使用 tagName，但应检测其是否为空</p><h5>16.元素属性</h5><p>IE 下 input.type 属性为只读，但是 FF 下可以修改</p><h5>16.document.getElementsByName() 和 document.all[name] 的问题问题：</h5><p>在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）</p><h5>17.调用子框架或者其它框架中的元素的问题</h5><p>在 IE 中，可以用如下方法来取得子元素中的值 document.getElementByIdx_x(“frameName”).(document.)elementName window.frames[“frameName”].elementName</p><p>在 FF 中则需要改成如下形式来执行，与 IE 兼容： window.frames[“frameName”].contentWindow.document.elementName window.frames[“frameName”].document.elementName</p><h5>18.对象宽高赋值问题</h5><p>问题：</p><p>FireFox 中类似 obj.style.height = imgObj.height 的语句无效解决方法：</p><p>统一使用 obj.style.height = imgObj.height + “px”;</p><h5>19.innerText 的问题</h5><p>问题：</p><p>innerText 在 IE 中能正常工作，但是 innerText 在 FireFox 中却不行解决方法：</p><p>在非 IE 浏览器中使用 textContent 代替 innerText</p><h5>20. event.srcElement 和 event.toElement 问题</h5><p>问题：</p><p>IE 下，even 对象有 srcElement 属性，但是没有 target 属性；Firefox 下，even 对象有 target 属性，但是没有 srcElement 属性</p><p>解决方法：</p><p>var source = e.target || e.srcElement;</p><p>var target = e.relatedTarget || e.toElement;</p><h5>21.禁止选取网页内容</h5><p>问题：</p><p>FF 需要用 CSS 禁止，IE 用 JS 禁止解决方法：</p><p>IE: obj.onselectstart = function() {return false;}</p><p>FF: -moz-user-select:none;</p><h5>22.捕获事件</h5><p>问题：</p><p>FF没有 setCapture()、releaseCapture()方法解决方法：</p><p>IE:</p><div></div><p>FF:</p><div></div><h5>1、html5 调用安卓或者 ios 的拨号功能</h5><p>html5 提供了自动调用拨号的标签，只要在 a 标签的 href 中添加 tel:就可以了。</p><p>如下：</p><p></p><p>拨打手机直接如下</p><p></p><h5>2、上下拉动滚动条时卡顿、慢</h5><p>Android3+和 iOS5+支持 CSS3 的新属性为 overflow-scrolling</p><h5>3、圆角 bug</h5><p>某些 Android 手机圆角失效</p><p></p><h5>4、ios 设置 input 按钮样式会被默认样式覆盖</h5><p>解决方式如下：</p><div></div><p>设置默认样式为 none</p><h5>5、IOS 键盘字母输入，默认首字母大写</h5><p>解决方案，设置如下属性</p><p></p><h5>6、h5 底部输入框被键盘遮挡问题</h5><p>h5 页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决</p><div></div><h5>7、IOS 移动端 click 事件 300ms 的延迟响应</h5><p>移动设备上的 web 网页是有 300ms 延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,</p><p>2007 年苹果发布首款 iphone 上 IOS 系统搭载的 safari 为了将适用于 PC 端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个 PC 上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。</p><p>双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先 Hold 一段时间 t，如果在 t 时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果 t 时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间 t 有多少呢？在 IOS safari 下，大概为300 毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于 web 开发者来说是，页面 js 捕获 click 事件的回调函数处理，需要 300ms 后才生效，也就间接导致影响其他业务逻辑的处理。</p><p>解决方案：</p><p>1、fastclick 可以解决在手机上点击事件的 300ms 延迟</p><p>2、zepto 的 touch 模块，tap 事件也是为了解决在 click 的延迟问题</p><p>3、触摸事件的响应顺序为 touchstart --&gt; touchmove --&gt; touchend --&gt; click,也可以通过绑定 ontouchstart 事件，加快对事件的响应，解决 300ms 延迟问题</p><h5>8、在 ios 和 andriod 中,audio 元素和 video 元素在无法自动播放</h5><p>应对方案：触屏即播</p><div></div><h5>9、CSS 动画页面闪白,动画卡顿</h5><p>解决方法:</p><p>1.尽可能地使用合成属性 transform 和 opacity 来设计 CSS3 动画，不使用 position 的 left 和 top 来定位</p><p>2.开启硬件加速</p><p>-webkit-transform: translate3d(0, 0, 0);</p><p>-moz-transform: translate3d(0, 0, 0);</p><p>-ms-transform: translate3d(0, 0, 0);</p><p>transform: translate3d(0, 0, 0);</p><h5>10、fixed 定位缺陷</h5><p>1、ios 下 fixed 元素容易定位出错，软键盘弹出时，影响 fixed 元素定位</p><p>2、android 下 fixed 表现要比 iOS 更好，软键盘弹出时，不会影响 fixed 元素定位</p><p>3、ios4 下不支持 position:fixed</p><p>解决方案： 可用 iScroll 插件解决这个问题</p><h5>1、变量问题，写出下题结果</h5><div></div><h5>2、作用域问题，思考此题结果</h5><div></div><h5>3、作用域问题，看题作答</h5><div></div><h5>4、作用域问题，看题作答</h5><div></div><h5>5、看题作答</h5><div></div><h5>6、看题作答</h5><div></div><h5>7、用 JavaScript 实现冒泡排序。数据为 23、45、18、37、92、13、24</h5><div></div><h5>8、使用 jquery.extend 实现扩展，并解释其与 jquery.fn.extend 的区别</h5><div></div><p>jquery.extends 与 jquery.fn.extend 都可以用来扩展 jquery 方法，jquery 扩展的是 Jquery 类本身， jQuery.fn=jQuery.prototype, jQuery.fn.extend 拓展的是 jQuery 对象（原型的）的方法, 用在 jQuery对象上面</p><div></div><h5>9、请说明要输出正确的 myName 的值要如何修改程序?并解释原因</h5><div></div><p>this.sayHello 改成</p><p>this.sayHello.call(this)</p><p>this.sayHello.apply(this)</p><p>this.sayHello.bind(this)</p><p>给this.sayHello 方法绑定作用域，使其指向 foo。</p><h5>10、将字符串”abc1234efg9088dsd“ 中的数字转换成＊号。</h5><div></div><h5>11、window.onload 与 document.ready 有什么区别？</h5><p> 就是 jquery 中的和</p><p>是在 dom 文档树加载完之后执行一个函数， 是在 dom 文档树加载完和所有文件加载完之后执行一个函数。 在 之后执行。</p><h5>12、创建一个列表，并将其插入 id 为 containter 的 DIV 元素中</h5><p>1)原生 javascript 方法：</p><div></div><ol start="2"><li>jquery 方法</li></ol><div></div><h5>13、希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架)</h5><div></div><h5>14、已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法” getElementById”。</h5><div></div><h5>15、var ary = [3,6,2,4,1,5]; （考察基础 API）</h5><p>1)实现对该数组的倒排，输出[5,1,4,2,6,3]</p><p>（1）</p><p>（2）</p><div></div><p>2)实现对该数组的降序排列，输出[6,5,4,3,2,1]</p><p>(1)</p><p>(2)</p><div></div><h5>16、 </h5><p>下面属性分别返回什么结果？</p><div></div><h5>17、为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将&lt;, &gt;, &amp;, “进行转义</h5><div></div><h5>18、用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序。</h5><div></div><h5>19、Javascript 中 callee 和 caller 的作用？</h5><p>caller 是返回一个对函数的引用，该函数调用了当前函数；</p><p>callee 是返回正在被执行的 function 函数，也就是所指定的 function 对象的正文。</p><p>那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第 n 个月能繁殖成多少对兔子？（使用 callee 完成）</p><div></div><h5>20、完成函数 showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示</h5><p>考点：1、下拉框切换：onchange 事件 2、通过 value 获取下拉框的值</p><div></div><h5>21、判断一个字符串中出现次数最多的字符，统计这个次数</h5><div></div><h5>22、去掉数组中重复的数字</h5><p>//思路：每遍历一次就和之前的所有做比较，不相等则放入新的数组中！</p><p>//这里用的原型 个人做法；</p><div></div><p>方法二：</p><div></div><h5>23、下面这个 ul，如何点击每一列的时候 alert 其 index?（闭包）</h5><div></div><p>// 方法一：</p><div></div><p>//方法二：</p><div></div><h5>24、给 js 内置对象 Array 添加一个原生方法 filter（args）。</h5><p>功能：将数组参数 args 中包含的元素从原数组中删除，并返回修改后的数组。</p><div></div><h5>25、按如下要求，写一个简单的 jquery 插件。插件调用方法：\)“(.light”).light({color:”red”});

功能：根据传入的参数 color，可以改变选择元素的前景色。（color 默认颜色为#000000）