├── README.md └── front-end ├── 前端开发面试题之HTML.md ├── 前端开发面试题之综合篇.md ├── 前端开发面试题之CSS.md └── 前端开发面试题之JavaScript.md /README.md: -------------------------------------------------------------------------------- 1 | # Blogs 2 | This repositories collect some question and answer of front-end interview.I hope it can help people who want to go in for front-end development.All resource pick form Internet. 3 | -------------------------------------------------------------------------------- /front-end/前端开发面试题之HTML.md: -------------------------------------------------------------------------------- 1 | ## 前端开发面试题之HTML 2 | 3 | ![](http://upload-images.jianshu.io/upload_images/1714316-3063f0220faa8f03.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 4 | 5 | ----- 6 | 7 | > “每18至24个月，前端都会难一倍” 8 | > 9 | > ——赫门 “2015深JS大会《前端服务化之路》主题演讲” 10 | 11 | 12 | #### 知识点 13 | `对Web标准的理解`、`浏览器内核差异`、`兼容性`、`hack`、`HTML5`...... 14 | 15 | #### 题目&答案 16 | - Doctype作用？标准模式与兼容模式各有什么区别？ 17 | ``` 18 | （1）声明位于HTML文档中的第一行，处于标签之前，用于告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 19 | （2）标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。 20 | ``` 21 | 22 | - HTML5为什么只需要写？ 23 | ``` 24 | HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照它们应该的方式来运行）； 25 | HTML4.01基于SGML，所以需要对DTD进行引用，才能让浏览器知道该文档所使用的文档类型。 26 | ``` 27 | 28 | - 行内元素有哪些？块级元素有哪些？空（void）元素有哪些？ 29 | ``` 30 | 声明：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 31 | 32 | （1）行内元素有：a b span img input select strong（强调的语气） 33 | （2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p 34 | （3）常见的空元素： 35 |
36 | 鲜为人知的空元素： 37 | 38 | ``` 39 | 40 | - 页面导入样式时，使用`Link`和`@import`有什么区别？ 41 | 42 | ``` 43 | （1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; 44 | （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 45 | （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; 46 | ``` 47 | 48 | - 介绍一下你对浏览器内核的理解 49 | ``` 50 | 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。 51 | （1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 52 | （2）JS引擎则：解析和执行javascript来实现网页的动态效果。 53 | 54 | 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。 55 | ``` 56 | 57 | - 常见的浏览器内核有哪些？ 58 | 59 | ``` 60 | Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML] 61 | Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 62 | Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;] 63 | Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）] 64 | EdgeHTML内核：Microsoft Edge [此内核其实是从MSHTML fork而来，删掉了几乎所有的IE私有特性] 65 | ``` 66 | 详细文章：[浏览器内核的解析和对比——依水间](http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html) 67 | 68 | - HTML5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 69 | ``` 70 | * HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 71 | 绘画 canvas; 72 | 用于媒介回放的 video 和 audio 元素; 73 | 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; 74 | sessionStorage 的数据在浏览器关闭后自动删除; 75 | 语意化更好的内容元素，比如 article、footer、header、nav、section; 76 | 表单控件，calendar、date、time、email、url、search; 77 | 新的技术webworker, websockt, Geolocation; 78 | 79 | 移除的元素： 80 | 纯表现的元素：basefont，big，center，font, s，strike，tt，u; 81 | 对可用性产生负面影响的元素：frame，frameset，noframes； 82 | 83 | * 支持HTML5新标签： 84 | IE8/IE7/IE6支持通过document.createElement方法产生的标签， 85 | 可以利用这一特性让这些浏览器支持HTML5新标签， 86 | 浏览器支持新标签后，还需要添加标签默认的样式。 87 | 88 | 当然最好的方式是直接使用成熟的框架、比如html5shim; 89 | 92 | 93 | * 区分方法： DOCTYPE声明\新增的结构元素\功能元素 94 | ``` 95 | 96 | 97 | - 简述一下你对HTML语义化的理解。 98 | ``` 99 | 用正确的标签做正确的事情。 100 | 101 | HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析； 102 | 即使在没有样式CSS的情况下也能以一种文档格式显示，并且是容易阅读的； 103 | 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO； 104 | 使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。 105 | ``` 106 | 107 | 108 | - HTML5的离线存储怎么使用？能否解释一下工作原理？ 109 | ``` 110 | 在用户没有连接英特网时，可以正常访问站点和应用；在用户连接英特网时，更新用户机器上的缓存文件。 111 | 112 | 原理：HTML5的离线存储是基于一个新建的 `.appcache` 文件的缓存机制（并非存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。 113 | 114 | 使用方法： 115 | 1. 在页面头部像下面一样加入一个 manifest 的属性； 116 | 2. 在 cache.manifest 文件里编写离线存储资源； 117 | CACHE MANIFEST 118 | #v0.11 119 | CACHE： 120 | js/app.js 121 | css/style.css 122 | NETWORK: 123 | resource/logo.png 124 | FALLBACK： 125 | / /offline.html 126 | 3. 在离线状态时，操作 window.applicationCache 进行需求实现 127 | ``` 128 | 详细使用教程：[有趣的HTML5：离线存储——segmentfault](https://segmentfault.com/a/1190000000732617) 129 | 130 | - 浏览器是怎么对HTML5的离线存储资源进行管理和加载的？ 131 | ``` 132 | 在线情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 133 | 134 | 离线情况下，浏览器就直接使用离线存储的资源。 135 | ``` 136 | 137 | 138 | - 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ 139 | ``` 140 | `cookie`是网站为了标识用户身份而储存在用户本地终端（Client Side）上的数据（通常已经过加密）。cookie数据始终在同源的http请求中携带（即使不需要），也会在浏览器和服务器间来回传递。 141 | `sessionStorage`和`localStorage`不会自动把数据发给服务器，仅在本地保存。 142 | 143 | 存储大小： 144 | cookie数据大小不能超过4K。 145 | sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 146 | 147 | 有效时间： 148 | cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 149 | sessionStorage 数据在当前浏览器窗口关闭后自动删除 150 | localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 151 | ``` 152 | 153 | 154 | - iframe 有哪些缺点？ 155 | ``` 156 | iframe会阻塞主页面的Onload事件； 157 | 搜索引擎的检索程序无法解读这种页面，不利于SEO； 158 | iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 159 | 160 | 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好通过JavaScript动态给iframe添加src属性值，这样可以绕开以上两个问题。 161 | ``` 162 | 163 | 164 | - Label的作用是什么？如何使用？ 165 | ``` 166 | label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。 167 | 168 | 169 | 170 | 171 | 172 | ``` 173 | 174 | 175 | - HTML5的form如何关闭自动完成功能？ 176 | ``` 177 | 给不想要提示的 form 或下面某个 input 设置为 `autocomplete = off`。 178 | ``` 179 | 180 | 181 | - 如何实现浏览器内多个标签页之间的通信？（阿里） 182 | ``` 183 | 调用 localStorage、cookies 等本地存储方式 184 | ``` 185 | 186 | 187 | - webSocket 如何兼容低浏览器？（阿里） 188 | ``` 189 | Adobe Flash Socket 190 | ActiveX HTMLFile（IE） 191 | 基于 multipart 编码发送 XHR 192 | 基于长轮询的 XHR 193 | ``` 194 | 195 | 196 | - 页面可见性（Page Visibility） API可以有哪些用途？ 197 | ``` 198 | 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放。 199 | ``` 200 | 201 | 202 | - 如何在页面上实现一个圆形的可点击区域？ 203 | ``` 204 | 1. map + area 或者 svg 205 | 2. border-radius 206 | 3. 纯js实现，需要求一个点在不在圆上的简单算法、获取鼠标坐标等等 207 | ``` 208 | 209 | 210 | - 实现 不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。 211 | ``` 212 |
213 | ``` 214 | 215 | 216 | - 网页验证码是干什么用的？是为了解决什么安全问题？ 217 | ``` 218 | 区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水； 219 | 有效防止黑客对某一个特定注册用户用特定程序通过暴力破解的方式进行不断的登录尝试。 220 | ``` 221 | -------------------------------------------------------------------------------- /front-end/前端开发面试题之综合篇.md: -------------------------------------------------------------------------------- 1 | ![](http://upload-images.jianshu.io/upload_images/1714316-45193b0635e5dcae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 2 | 3 | 4 | > “每18至24个月，前端都会难一倍” 5 | > 6 | > ——赫门 “2015深JS大会《前端服务化之路》主题演讲” 7 | 8 | 9 | 10 | #### 题目&答案 11 | - 你遇到过比较难的技术问题是什么？你是如何解决的？ 12 | 13 | 14 | 15 | - 是否知道关于设计模式中的Singleton，Factory，Strategy，Decrator？ 16 | 17 | 18 | 19 | - 常使用的库有哪些？常使用的前端开发工具有哪些？开发过什么应用或组件？ 20 | 21 | 22 | 23 | - 页面重构怎么操作？ 24 | ``` 25 | 网站重构： 26 | 在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。 27 | 也就是说在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。 28 | // 29 | 传统网站的重构通常是： 30 | 表格（table）布局改为 div+css 31 | 使网站前端兼容于现代浏览器（针对于不合规范的css） 32 | 对于移动平台的优化 33 | 针对SEO进行优化 34 | // 35 | 深层次的网站重构应该考虑的方面： 36 | 减少代码间的耦合 37 | 让代码保持弹性 38 | 严格按规范编写代码 39 | 设计可扩展的API 40 | 代替旧有的框架、语言（如 VB） 41 | 增强用户体验 42 | // 43 | 通常来说对于速度的优化也包含在重构中 44 | 压缩js、css、image等前端资源（通常由服务器来解决） 45 | 程序的性能优化（如数据读写） 46 | 采用CDN来加速资源加载 47 | 对于js、DOM的优化 48 | HTTP服务器的文件缓存 49 | ``` 50 | 51 | 52 | - 列举IE与其他浏览器不一样的特性 53 | ``` 54 | 触发事件的元素被认为是目标（target）。而在IE中，目标包含在event对象的srcElement属性； 55 | 获取字符代码、如果按键代表一个字符（shift、ctrl、alt除外），IE的keyCode会返回字符代码（Unicode），DOM中按键的代码和字符是分离的，要获取字符代码，需要使用charCode属性； 56 | 阻止某个事件的默认行为，IE 中阻止某个事件的默认行为，必须将 returnValue 属性设置为 false，Mozilla 中，需要调用 preventDefault() 方法； 57 | 停止事件冒泡，IE 中阻止事件进一步冒泡，需要设置 cancelBubble 为 true，Mozzilla 中，需要调用 stopPropagation()； 58 | ``` 59 | 60 | 61 | - “99%的网站都需要被重构”是哪本书上写的？ 62 | ``` 63 | 《网站重构:应用Web标准进行设计(第2版)》 64 | ``` 65 | 66 | 67 | - 什么叫优雅降级和渐进增强？ 68 | ``` 69 | 优雅降级： 70 | Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。 71 | 如：border-shadow 72 | // 73 | 渐进增强： 74 | 从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。 75 | 如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验； 76 | ``` 77 | 78 | 79 | - 是否了解公钥加密和私钥加密？ 80 | ``` 81 | 一般情况下私钥用于对数据进行签名，公钥用于对签名进行验证； 82 | HTTP网站在浏览器端用公钥加密敏感数据，然后在服务器端再用私钥解密。 83 | ``` 84 | 85 | 86 | - Web应用从服务器主动推送Data到客户端有哪些方式？ 87 | ``` 88 | HTML5提供的WebSocket 89 | 不可见的iframe 90 | WebSocket通过Flash 91 | XHR长时间连接 92 | XHR Multipart Streaming 93 | 321 | ``` 322 | 323 | 324 | - JavaScript 代码中的 "use strict"; 是什么意思？使用它的区别是什么？ 325 | ``` 326 | use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。 327 | 默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值; 328 | 全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用； 329 | 消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同; 330 | 提高编译器效率，增加运行速度； 331 | 为未来新版本的Javascript标准化做铺垫。 332 | ``` 333 | 334 | 335 | 336 | - new 操作符具体干了什么呢？ 337 | ``` 338 | (1)创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。 339 | (2)属性和方法被加入到 this 引用的对象中。 340 | (3)新创建的对象由 this 所引用，并且最后隐式的返回 this 。 341 | // 342 | var obj = {}; 343 | obj.__proto__ = Base.prototype; 344 | Base.call(obj); 345 | ``` 346 | 347 | 348 | 349 | - 用原生的 JavaScript 实现过什么功能吗？ 350 | 351 | 352 | 353 | - JavaScript 中，有一个函数，执行对象查找时，永远不会去查找原型，这个函数是哪个？ 354 | ``` 355 | hasOwnProperty 356 | // 357 | JavaScript 中 hasOwnProperty 函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。 358 | // 359 | 使用方法： 360 | object.hasOwnProperty(proName) 361 | 其中参数object是必选项，一个对象的实例。 362 | proName是必选项，一个属性名称的字符串值。 363 | // 364 | 如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。 365 | ``` 366 | 367 | 368 | 369 | - 你对 JSON 了解吗？ 370 | ``` 371 | JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。 372 | 它是基于JavaScript的一个子集。数据格式简单，易于读写，占用带宽小。 373 | 如： 374 | {"age":"12", "name":"back"} 375 | ``` 376 | 377 | 378 | 379 | - js延迟加载的方式有哪些？ 380 | ``` 381 | defer和async、动态创建DOM方式（用得最多）、按需异步载入js 382 | ``` 383 | 384 | 385 | 386 | - Ajax 是什么？如何创建一个 Ajax ？ 387 | ``` 388 | ajax的全称：Asynchronous Javascript And XML。 389 | 异步传输+js+xml。 390 | 所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。 391 | // 392 | (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象 393 | (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息 394 | (3)设置响应HTTP请求状态变化的函数 395 | (4)发送HTTP请求 396 | (5)获取异步调用返回的数据 397 | (6)使用JavaScript和DOM实现局部刷新 398 | ``` 399 | 400 | 401 | 402 | - 同步和异步的区别？ 403 | ``` 404 | 同步的概念应该是来自于操作系统中关于同步的概念: 405 | 不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式)。同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。 406 | // 407 | 同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。 408 | // 409 | 异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。 410 | ``` 411 | 412 | 413 | 414 | - 如何解决跨域问题？ 415 | ``` 416 | jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面 417 | ``` 418 | 419 | 420 | 421 | - 页面编码和被请求的资源编码如果不一致如何处理？ 422 | 423 | 424 | 425 | - 谈一谈你对 ECMAScript6 的了解？ 426 | ``` 427 | ECMAScript 6 是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 428 | 标准的制定者有计划，以后每年发布一次标准，使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015 429 | ``` 430 | 431 | 432 | 433 | - ECMAScript 6 怎么写 class ，为何会出现 class？ 434 | ``` 435 | ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 436 | //定义类 437 | class Point { 438 | constructor(x,y) { //构造方法 439 | this.x = x; //this关键字代表实例对象 440 | this.y = y; 441 | } 442 | toString() { 443 | return '(' + this.x + ',' + this.y + ')'; 444 | } 445 | } 446 | ``` 447 | 448 | 449 | 450 | - 异步加载 JS 的方式有哪些？ 451 | ``` 452 | (1)defer，只支持 IE 453 | (2)async: 454 | (3)创建 script，插入到 DOM 中，加载完毕后 callBack 455 | ``` 456 | 457 | 458 | 459 | - document.write 和 innerHTML 有何区别？ 460 | ``` 461 | document.write 只能重绘整个页面 462 | innerHTML 可以重绘页面的一部分 463 | ``` 464 | 465 | 466 | 467 | - DOM 操作——怎样添加、移除、移动、复制、创建和查找节点？ 468 | ``` 469 | (1)创建新节点 470 | createDocumentFragment() //创建一个DOM片段 471 | createElement() //创建一个具体的元素 472 | createTextNode() //创建一个文本节点 473 | (2)添加、移除、替换、插入 474 | appendChild() 475 | removeChild() 476 | replaceChild() 477 | insertBefore() //在已有的子节点前插入一个新的子节点 478 | (3)查找 479 | getElementsByTagName() //通过标签名称 480 | getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的) 481 | getElementById() //通过元素Id，唯一性 482 | ``` 483 | 484 | 485 | 486 | - 数组和对象有哪些原生方法？能否列举一下？ 487 | 488 | 489 | 490 | - 如何编写高性能 JavaScript ？ 491 | 详细文章：[浅谈编写高性能的Javascript代码](http://developer.51cto.com/art/200906/131335.htm) 492 | 493 | 494 | - 哪些操作会造成内存泄漏？ 495 | ``` 496 | 内存泄漏是指任何对象在您不再拥有或需要它之后任然存在。 497 | 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量，如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。 498 | // 499 | setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。 500 | 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环） 501 | ``` 502 | 503 | 504 | 505 | - 是否看过 jQuery 的源码？能否简单概括一下它的实现原理？ 506 | 507 | 508 | 509 | - jQuery.fn 的 init 方法返回的 this 指的是什么对象？为什么要返回 this ？ 510 | 511 | 512 | 513 | - jQuery 中如何将数组转化为 json 字符串，然后再转化回来？ 514 | ``` 515 | jQuery 中没有提供这个功能，所以需要先编写两个 jQuery 的扩展： 516 | $.fn.stringifyArray = function(array) { 517 | return JSON.stringify(array) 518 | } 519 | $.fn.parseArray = function(array) { 520 | return JSON.parse(array) 521 | } 522 | // 523 | 然后调用: 524 | $("").stringifyArray(array) 525 | ``` 526 | 527 | 528 | 529 | - jQuery 的属性拷贝（extend）的实现原理是什么？如何实现深拷贝？ 530 | 531 | 532 | 533 | - jQuery.extend 与 jQuery.fn.extend 有何区别？ 534 | 535 | 536 | 537 | - jQuery 的队列是如何实现的？队列可以用在哪些地方？ 538 | 539 | 540 | 541 | - jQuery 中一个对象可以同时绑定多个事件，这是如何实现的？ 542 | 543 | 544 | 545 | - 是否了解针对 jQuery 性能的优化方法？ 546 | ``` 547 | 基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。 548 | // 549 | 频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。 550 | 比如：var str=$("a").attr("href"); 551 | // 552 | for (var i = size; i < arr.length; i++) {} 553 | for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快： 554 | for (var i = size, length = arr.length; i < length; i++) {} 555 | ``` 556 | 557 | 558 | 559 | - jQuery 与 jQuery UI 有何区别？ 560 | ``` 561 | `jQuery`是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。 562 | `jQuery UI`则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等 563 | ``` 564 | 565 | 566 | 567 | - jQuery UI 如何自定义组件？ 568 | 569 | 570 | 571 | - 如何判断当前脚本运行在浏览器还是 node 环境中？（阿里） 572 | ``` 573 | 通过判断 Global 对象是否为 window ，如果不为 window ，当前脚本没有运行在浏览器中 574 | ``` 575 | 576 | 577 | 578 | - 什么是“前端路由”？什么时候适合使用“前端路由”？“前端路由”有哪些优点和缺点？ 579 | 580 | 581 | 582 | - 怎样用js实现千位分隔符？ 583 | ``` 584 | 正则 + replace 585 | function commafy(num) { 586 | num = num + ''; 587 | var reg = /(-?d+)(d{3})/; 588 | if (reg.test(num)) { 589 | num = num.replace(reg, '$1,$2'); 590 | } 591 | return num; 592 | } 593 | ``` 594 | 595 | 596 | 597 | - 检测浏览器版本有哪些方式？ 598 | ``` 599 | 功能检测、userAgent 特征检测 600 | 比如：navigator.userAgent 601 | //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36" 602 | ``` 603 | 604 | 605 | 606 | - 谈谈你对 JavaScript 中的模块规范 CommonJS、AMD、CMD 的了解？ 607 | ``` 608 | //个人拙见 609 | | CommonJS | AMD | CMD | 610 | |--------------|---------|---------| 611 | | Node.js |RequireJS| SeaJS | 612 | ``` 613 | 详细文章：[浅析JS中的模块规范（CommonJS，AMD，CMD）](http://www.2cto.com/kf/201411/348276.html)、[关于 CommonJS AMD CMD UMD](http://my.oschina.net/felumanman/blog/263330?p=1) 614 | 615 | 616 | 617 | - 前端 MVC、MVVM 618 | 1、MVC 619 | ![MVC](http://upload-images.jianshu.io/upload_images/1714316-f5f3378c71fa8a2c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 620 | ``` 621 | 模型（Model）：数据保存 622 | 视图（View）：用户界面 623 | 控制器（Controller）：业务逻辑 624 | (1)View 传送指令到 Controller 625 | (2)Controller 完成业务逻辑后，要求 Model 改变状态 626 | (3)Model 将新的数据发送到 View ，用户得到反馈 627 | 所有通信都是单向的。 628 | ``` 629 | 2、MVVM 630 | ![MVVM](http://upload-images.jianshu.io/upload_images/1714316-235c293d0a018e28.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 631 | ``` 632 | 模型（Model） 633 | 视图（View） 634 | 视图模型（ViewModel） 635 | (1)各部分间都是双向通信 636 | (2)View 与 Model 不发生联系，都通过 ViewModel 传递 637 | (3)View 非常薄，不部署任何业务逻辑，称为“被动视图”（Passive View），即没有任何主动性；而 ViewModel 非常厚，所有逻辑都部署在那里 638 | 采用双向绑定（data-binding）：View 的变动，自动反映在 ViewModel ，反之亦然。 639 | ``` 640 | --------------------------------------------------------------------------------