面试指导

朴灿烈づ我的快乐病毒、 2022-05-17 23:41 174阅读 0赞

**(四)：面试前准备-有备而去百战百胜**

**4.1** **步了解公司情况，准备三个问题向对方提问**

ü 公司产品介绍

ü 营利模式

ü 发展方向

**4.2** **项目准备和可能会问到的技术点复习**

ü 盒子模型

ü 异步处理

ü 跨域请求

ü JSON格式

**4.3** **准备几个可能会问到的问题**

ü 你在项目中遇到哪些难以解决的问题，你是如何处理的？

ü 你是如何带领团队的？

回答思路：

人的因素

把合适的人放在合适的位置

善于沟通和协调

注意团队的和谐和团结

以结果为导向（奖惩分明）

ü 你是如何作风险把控的？

做好工作计划，精确到人和时间

及时监控跟踪完成的情况

对于异常的情况要进行沟通了解情况，并做出对应的调整

ü 我们为什么要录用你？

从两个角度

能力

态度

ü 是否有其他家的Offer，如果有，为什么还要来我们公司面试，其他家公司给多少钱？

回答思路：现在我才刚开始找工作

**4.4** **准备对项目的描述**

最好先说一下项目的背景，然后才是:

功能介绍-->你所做的部分-->你都用了哪些技术-->遇到的问题-->解决办法。

介绍项目是面试中的重点，一定要说的深入一些。许多面试官直接就问：

给我说一下你这个项目里面，用到的最牛的技术是什么？

或是最难的是什么？

**4.5** **着装准备**

**4.6** **心态调整**

ü 面试就是一个学习的过程

ü 告诉自己不要紧张，面试不上不要紧，只要自己正常发挥就好了，找到工作是迟早的事情。

**(****五)：掌握面试技巧，让面试变得轻松**

**5.1** **面试形式**

1) 一般而言，小公司做笔试题；大公司面谈项目经验；做地图的一定考算法

2) 面试官喜欢什么样的人

ü 技术好、自信、谦虚、善于沟通、表达。

ü 喜欢追究原理

**5.2** **面试内容**

1.2.1简历上的项目

ü 介绍下你的项目吧？

1) 第一步：介绍你项目是干嘛的

2) 第二步：介绍下你负责的是哪块

3) 第三步：介绍下里面都有什么功能，你是怎么实现的，怎么分层的？

1.2.2非技术=处事方法+表达+态度+忠诚度

ü 请你做一下自我介绍

ü 你在找工作时，最重要的考虑因素是什么？

ü 你对我们公司了解多少？你为什么想来我们公司工作？

ü 请谈谈你的优点和缺点？

ü 你为什么离开上一家公司？

ü 工作中曾面临的最大困难是什么？如何解决的？

ü 你的职业目标是什么？（短期和长期）

ü 你是应届生，缺乏经验，如何胜任这份工作？

ü 你对加班的看法？

ü 你对薪资的要求？

ü 你最擅长的技术方向是什么？谈谈你之前做的项目？

ü 你有什么问题要问我？(参考下面思路)

n 我们公司有哪些项目要做了？

n 项目中使用什么技术来开发？

n 我们公司上班时间是怎样的？

n 前端开发目前有多少人在做？

**5.3** **面试技巧**

Ø 1靠的是技术 2靠技巧 3玩的是心理

Ø 怎么回答问题

Ø 知道的问题正面回答，用案例去展示

Ø 不知道的问题说解决思路

Ø 原理性的知识，必须背下来，代码不需要会写，没人要求写原理、底层的代码(这是一个空子，可以钻)

Ø 面试始终保持平静，冷静，镇静，面试再刁难也要保持端坐，面带一丝微笑

Ø 对喜欢的公司最好能表现出对加入目标公司的渴望，对技术的追求

Ø 不能说不知道，可以说：之前了解过，做过这种练习，但没有拿到项目中来用。如果你回答了不知道，那面试官直接就否定你了

Ø 面试官给你出题时，回答问题要思考一段时间，提出思路(这样表现出你是善于思考，交流，有思路)。间接性的试探答案，要的就是这种交互性，注意交流很重要

Ø 加分的地方：对简历上的项目很熟悉，技术点都有所研究，包括封装，细节实现，以及自己编写的小工具

Ø 回答问题后，可再加一些个人看法～比如：json用过吗？怎么用？回答时，可把jsonp也叙述一下

Ø 不想去的公司（小公司，刚刚组建开发团队……）也尽量去面试，为的是积累经验。不同公司会问不同类型的问题，经历多了，你会发现面试很爽，尤其是秒杀他们的时候。

Ø 主管和你谈话～是探测你这个人是否可用……，回答问题要表现良好的一面，一般会问～你将来怎么规划的？回答：三年达到技术总监的水平。技术总监需要做到什么？1.技术过硬2.沟通交流，带领团队……

Ø 你在工作中遇到了哪些难题？？ 一定要提前准备两道，忽悠他！

Ø 为什么离开上家公司？业务单一，太闲了，项目太少，想要更大的提升空间，这时对方肯定会想～你喜欢忙一些是吧，我们这里好多项目让你忙个够。你最好也表现出来～你要努力提升自己，不断超越的念头。

Ø 要有底线别把自己的底线出卖了，要有底气。面试官可能一个劲的谈你的弱点，打击你的心里，这时千万不要乱了阵脚，不要把底线出卖了。既然面试官一直和你聊，那就证明你在他眼中是有价值的。薪资方面该怎么要就怎么要。

Ø 你给自己评个等级，初，中，高，你最次也要说中级，好一点说中级偏上。

Ø 谈薪资：这一步你能多拿1000-2000元，你想：对方都和你谈薪资了，证明你这个人有可用价值。 Eg.对方说给你8K，你完全能再多要1-2K，公司不差那点钱，只要你能给公司带来N多K的利益。

Ø 态度很重要：没人查个人背景(这点不用太担心，大不了重新找)；上班后勤勉工作，最好不要泡在QQ上，不懂赶紧问，别拖延时间，转正期也是适应期多，花点时间在工作上，工作态度非常非常重要

Ø 不见得你会这项技术就录用你，也不见得你不会某项技术就不录用你。面试中要注意和面试官交流，在交流中让对方感触到你基础不错，你有潜力，你逻辑思维不错。以上这些你做到了，如果不是那家公司只招一个某个专项技术的人，那你百分之八九十会被录用的。

**5.4** **面试中需要注意的问题**

Ø 音量大小

Ø 语速控制

Ø 不说“我想想”，“好像是”，“可能”，“应该”，“估计”。。。等不肯定的语汇

Ø 用讲故事的方式主导面试官司的思维

Ø 面试的基本流程

1) 自我介绍

姓名、年龄、哪年毕业、哪年哪月入职第一家公司第一个项目开始介绍。。。

为何离职？介绍到最后一个项目的时候开始拿出来演示

2) 技术面试

用项目中的实例来回答面试官的问题

3) 谈薪

上家公司的薪资是多少？期望薪资是多少？

**(****六)：面试后需要总结和交流**

提示：面试后请将题目上传到QQ群 【490916635(Web前端面试权威指导)】  
将有专业老师作答，解答你们面试上遇到的疑惑。  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Ø 记下这次面试的题目，回家后把面试题做一遍。每次面试的题目发给老师。 老师把面试题的答案上传到【Web前端面试权威指导490916635】群

Ø 总结自己面试不足的地方

ü 简历没有写好

ü 面试没有调整心态，过于紧张

ü 表达能力，没有很好的将自己想说的意思准确的表达出来

ü 对简历上的项目不清楚，没有描述好

ü 面试中提到的问题没有答上来。与老师和同学沟通交流解决办法

Ø 面试后和老师同学分享面试的心得，不断地在面试中成长

Ø 面试的建议

ü 对外包公司的偏见

有些同学觉得外包公司不能去，因为不稳定，干二三个月可能就会被辞。

其实这是一种误解，你在公司入职的时候，同样会签合同，如果公司要辞人的话，那就得按合同办事，额外支付二个月的工资。

其实，只要你有技术，有能力，公司是不会主动辞人的，现在公司都是招不来合适的。

其实第一份工作是外包也挺好，这样能接触到各种各样的项目，对个人技术的提高，会很有帮助。

ü 独立开发的能力

现在公司招开发人员，普遍都有一个要求，你一个人能不能独立的完成一个项目，如果能，OK，工作就搞定，如果不能，那我们得再考滤一下。

**(****七)：入职后的建议**

**7.1** **离职证明**

大家自己从百度下离职证明，自己填，淘宝买印章

**7.2** **关于合同**

签合同的时候，看公司要求，有些是3年，有些是5年，不要怕，签了就是了，真到想走的时候，提前说一声，随时可以走，不存在什么违约赔偿。

注意：你的合同和薪资都是属于保密的，不能让公司其他同事知道。

**7.3** **编码规范**

代码做好注释，命名要规范，代码结构要有层次

**7.4** **怎么和团队成员沟通问题**

问题纠结了30分钟后不能解决的要先同事请教，仍然不能解决的要向你的上级反应情况，争取早点解决问题。

**7.5** **少说话，多做事**

职后第一个月，压力会非常大。咬紧牙，扛过来，什么都好办了。

少说话，多干活，言多必失。

#  **(八)：iframe有那些缺点** #

## **本题的特点** ##

这道题目的特点就是不按照正常的套路来提问，一般都是问优点，这里比较反常问iframe的缺点，很多同学肯定很不习惯这种问答，因为平时只关注有点，这么一问就懵逼了！

## **本题解答的思路及要点** ##

① iframe会阻塞主页面的Onload事件；

② 搜索引擎的检索程序无法解读这种页面，不利于SEO;

③ 会影响页面的并行加载。

**知识补充：**什么是并行加载？

并行加载：同一时间针对同一域名下的请求。一般情况，iframe和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的。如下图

![/images/20220518/791ae434055b4f71840b04866700a22d.png][https_img-blog.csdn.net_20160922091202227_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQv_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_Center]

## **答题加分（提出解决方案，这才是面试官想让你回答的）** ##

使用js动态给iframe的src加载页面内容，示例代码如下：

**\[html\]** [view plain][] [copy][view plain]

1.  **<****iframe** id="fram"**></****iframe****>**
2.   document.getelementbyid("fram").src="a2.html"

# **+ (九)：盒子模型你是怎么理解的？** #

# **问题分析** #

这道题问得比较宽泛，一定要找准切入点，如果切入点找不准，很容易乱答，甚至答偏，所以找准切入点是非常的重要的。

## **解答思路** ##

1）盒子模型有两种，W3C和IE盒子模型

（1）W3C定义的盒子模型包括margin、border、padding、content ，元素的width=content的宽度

![/images/20220518/0e03c19a886045529e290a35b842bf61.png][https_img-blog.csdn.net_20160922110802189_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQv_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_Center]

（2）IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border

![/images/20220518/48b1a7aec7194c71b1ca3413612e7120.png][https_img-blog.csdn.net_20160922110926392_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQv_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_Center]

2）个人理解和心得，要记住在面试时，我们和面试官是平等的，而且面试官也非常欣赏喜欢交谈的人，在面试的时候能够去表达自己的想法，往往会给面试官留下非常好的印象。例如上面的盒子模型，示范如下：

我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。

（1）**content-box** 元素的width=content+padding+border

**\[css\]** [view plain][view plain 1] [copy][view plain 1]

1.  .test1\{ 
2.   box-sizing:content-box; 
3.  **width**:200px; 
4.  **padding**:10px; 
5.  **border**:15px solid \#eee; 
6.  \}

![/images/20220518/7ac2747dd83c4406b3d17e49bd0a05fb.png][https_img-blog.csdn.net_20160922115220806_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQv_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_Center]

（2）**border-box** 元素的width=width（用样式指定的宽度）

**\[css\]** [view plain][view plain 1] [copy][view plain 1]

1.  .test1\{ 
2.   box-sizing:border-box; 
3.  **width**:200px; 
4.  **padding**:10px; 
5.  **border**:15px solid \#eee; 
6.  \}

![/images/20220518/feeb4aa120dc423f9cff04f678a01c87.png][https_img-blog.csdn.net_20160922115316708]

## **加分项回答（自己比较独到理解）** ##

1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效

2.对于相邻的块级元素margin-bottom和margin-top 取值方式

1） 都是正数： 取最大值

距离=Math.max(margin-botton,margin-top)

2） 都是负数： 取最小值

距离=Math.min(margin-botton,margin-top)

3）上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加

距离=margin-botton+margin-top

**(****十)：元素定位有哪些？**

## **本题点评** ##

在web前端中，元素定位是必须掌握的，是网页制作的必备技能，也是衡量是否为一个合格的web前端开发的标准之一，在网页设计中，很多地方都需要使用定位，例如菜单弹出，提示信息层等都需要定位。所以本题的难易程度为简单。

## **解题思路** ##

position为元素定位属性，包含以下属性值

1. **absolute**绝对定位

相对位置为父元素为非static的第一个父元素进行定位。

![/images/20220518/92a045893b3f43b0ae95e07e3ce90bf0.png][https_img-blog.csdn.net_20160923112848345_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQv_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_Center]

2. **fixed** 固定定位（老IE6不支持）

相对于浏览器窗口进行定位。

![/images/20220518/9bad9dbe4bda44c7a0b69b075afd7d52.png][https_img-blog.csdn.net_20160923112932846]

3. **relative**相对定位

相对于其正常（默认布局）位置进行定位。

![/images/20220518/e8d5306b3ded4aa085935452c2d43a20.png][https_img-blog.csdn.net_20160923113003065]

4. **static**

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）

## **加分项** ##

1.  所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
2.  absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
3.  absolute定位忽略padding，相对位置为相对定位容器的左上角内边框，

![/images/20220518/154dae08a627496181dfb4c512c2cc5b.png][https_img-blog.csdn.net_20160923113032575]

\-------------------------------------------------------------------------------------

**(****十一)：样式导入有哪些方式？**

## **样式导入方式** ##

*  link
 *  import

## **使用方式** ##

*  link的使用

**\[css\]** [view plain][view plain 2] [copy][view plain 2]

1.  <link href="index.css" rel="stylesheet">

*  import的使用

**\[css\]** [view plain][view plain 2] [copy][view plain 2]

1.  <style type="text/css"> 
2.  @import "index.css"; 
3.  </style>

## **不同点** ##

*  link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件

*  兼容性不同，link不存在兼容性的问题，import在IE5以上支持，是css2.1新增的
 *  在样式表文件可以使用import导入其它的样式表文件，而link不可以
 *  link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
 *  link支持使用Javascript控制DOM去改变样式；而@import不支持。

## **加分项** ##

import的写法比较多

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别  
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别  
@import url(style.css) //Windows NS4, Macintosh NS4不识别  
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别  
@import url("style.css") //Windows NS4, Macintosh NS4不识别

推荐使用 @import url(index.css);

**(****十二)：::before 和:before有什么区别？**

## **题目点评** ##

这个问题看来很简单，但如果之前没有琢磨这个问题，给人感觉也是门头一垂，听到这个题目就懵逼了，因为原来从来没有注意过这个问题，即便有注意这个问题也不能很好的回答清楚。回答的技巧就是从相同点和不同点，以及他们的作用，及注意事项上去回答。

## **解答要点** ##

*  **相同点**

1.  1.  都可以用来表示伪类对象，用来设置对象前的内容
    2.  :befor和::before写法是等效的

*  **不同点**

1.  1.  :befor是Css2的写法，::before是Css3的写法
    2.  :before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

**伪元素选择器**

重点：E::before、E::after

是一个行内元素，需要转换成块元素

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。

E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解

E::first-letter文本的第一个字母或字（如中文、日文、韩文等）；

案例：首字下沉

E::first-line 文本第一行； 文本第一行高亮..

E::selection 可改变选中文本的样式；

":" 与 "::" 区别在于区分伪类和伪元素

关于before和after
    
          CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念
    
          CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者   E:after伪类;

1.  1.

## **加分项** ##

1.  伪类对象要配合content属性一起使用  
    
2.  伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
3.  伪类对象的特效通常要使用:hover伪类样式来激活

**\[css\]** [view plain][view plain 3] [copy][view plain 3]

1.  1.  .test:hover::before \{ /\* 这时animation和transition才生效 \*/ \}

**(****十三)：css样式的优先级是怎么样的？**

## **题目点评** ##

CSS样式的优先级规则给人的感觉总是摸不透，更不用说怎么去表达了，在网络上流传着很多版本，描述的都很复杂也不全面，看了之后还是不满意。我来给大家介绍一个比较系统、全面有比较容易记住的规则吧！

## **解答思路** ##

*  样式优先级规则

1.优先级顺序为：**!important>style>****权重值**

2. 如果权重相同，则最后定义的样式的起作用，应该避免这种情况出现

## **权重规则** ##

*  标签的权重为1
 *  class的权重为10
 *  id的权重为100

## **权重取值示例**  ##

**\[css\]** [view plain][view plain 4] [copy][view plain 4]

1.  /\*权重为1\*/
2.  div\{ 
3.  \} 
4.  /\*权重为10\*/
5.  .class1\{ 
6.  \} 
7.  /\*权重为100\*/
8.  \#id1\{ 
9.  \} 
10. /\*权重为100+1=101\*/
11. \#id1 div\{ 
12. \} 
13. /\*权重为10+1=11\*/
14. .class1 div\{ 
15. \} 
16. /\*权重为10+10+1=21\*/
17. .class1 .class2 div\{ 
18. \}

**(****十四)：如何居中一个元素（正常、绝对定位、浮动元素）?**

## **题目点评** ##

这道题目的提问比较多，连续问了三个问题，正常元素、绝对定位元素、互动元素如何居中，而且居中没有说清楚是垂直居中还是水平居中，要回答清楚这个问题，必须得有深厚的功底，而且要分类的来回答，条理要清楚。可以先把水平居中各种情况说清楚，然后在把垂直居中说清楚。

## **（一）元素水平居中的方式** ##

1）行级元素水平居中对齐（父元素设置 text-align:center）

**\[html\]** [view plain][view plain 5] [copy][view plain 5]

1.  **<div** style="width: 200px; height: 100px;border: 1px solid;text-align:center;"**>**
2.  **<span>**行级元素垂直居中**</span>**
3.  **</div>**

![/images/20220518/1420f5123aa54fdab1713dd2a6fca74d.png][https_img-blog.csdn.net_20160926161339890]

2) 块级元素水平居中对齐（margin: 0 auto）

**\[html\]** [view plain][view plain 5] [copy][view plain 5]

1.  **<div** style="width: 200px; height: 100px;border: 1px solid;text-align: center;"**>**
2.  **<div** style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"**>** 块级元素水平居中**</div>**
3.  **</div>**

![/images/20220518/008d770db9b04ddb982e2148eed7f69a.png][https_img-blog.csdn.net_20160926161626225]

3）浮动元素水平居中

*  宽度不固定的浮动元素

html代码

**\[html\]** [view plain][view plain 5] [copy][view plain 5]

1.  **<div** class="outerbox"**>**
2.  **<div** class="innerbox"**>**我是浮动的**</div>**
3.  **</div>**

CSS样式

**\[css\]** [view plain][view plain 5] [copy][view plain 5]

1.  .outerbox\{ 
2.  **float**:left; 
3.  **position**:relative; 
4.  left:50%; 
5.  \} 
6.  .innerbox\{ 
7.  **float**:left; 
8.  **position**:relative; 
9.  right:50%; 
10. \}

![/images/20220518/bf14a64fcd1640629c5d078330b3414c.png][https_img-blog.csdn.net_20160926172110063]

*  宽度固定的互动元素

html代码

**\[html\]** [view plain][view plain 5] [copy][view plain 5]

1.  **<div** class="outerbox"**>**
2.  **<div>**我是浮动的**</div>**
3.  **</div>**

css代码

**\[css\]** [view plain][view plain 5] [copy][view plain 5]

1.  .outerbox\{ 
2.  **background-color**:pink; /\*方便看效果 \*/
3.  **width**:500px ; 
4.  **height**:300px; /\*高度可以不设\*/
5.  **margin**: -150px 0 0 -250px; /\*使用marin向左移动250px，保证元素居中\*/
6.  **position**:relative; /\*相对定位\*/
7.   left:50%; 
8.   top:50%; 
9.  \}

![/images/20220518/fc07ba73c85544babd0f26cd4de3df9c.png][https_img-blog.csdn.net_20160926172222172]

4）让绝对定位的元素水平居中对齐

这种方式非常独特，大家一定要记牢这种方式，会用这种方式的薪资待遇必然高出几千¥

**\[css\]** [view plain][view plain 5] [copy][view plain 5]

1.  .center\{ 
2.  **position**: absolute; /\*绝对定位\*/
3.  **width**: 500px; 
4.  **height**:300px; 
5.  **background**: red; 
6.  **margin**: 0 auto; /\*水平居中\*/
7.   left: 0; /\*此处不能省略，且为0\*/
8.   right: 0; /\*此处不能省略，且为0\*/
9.  \}

**经验分享：**水平居中的主要属性有

1. text-alin:center;

2. margin:0 auto

3. position:relative|absolute; left:50%;

## **（二）元素垂直居中对齐** ##

1）对**行级**元素垂直居中（heiht与line-height的值一样）

**\[css\]** [view plain][view plain 5] [copy][view plain 5]

1.  **height**:300px; 
2.  **line-height**:300px;

![/images/20220518/5b8cac8538884798bd5312947511c488.png][https_img-blog.csdn.net_20160926161043546]

2）对**块级**元素垂直居中对齐

2.1 父元素高度固定的情况

1）父元素的height与line-height值相同

2）需要垂直居中的元素

vertical-align:middle;// 垂直居中对齐

display:inline|inline-block 块级元素转行级元素

HTML代码

**\[html\]** [view plain][view plain 5] [copy][view plain 5]

1.  **<div** class="center"**>**
2.  **<div** class="inner"**></div>**
3.  **</div>**

CSS代码

**\[css\]** [view plain][view plain 5] [copy][view plain 5]

1.  .center\{ 
2.  **width**: 500px; 
3.  **height**:300px; 
4.  **line-height**: 300px; 
5.  **border**:1px solid; 
6.  \} 
7.   .inner\{ 
8.  **background**: blue; 
9.  **width**: 300px; 
10. **height**: 100px; 
11. **display**: inline-block; 
12. **vertical-align**: middle; 
13.  \}

2.2 父元素高度不固定的情况

父元素的padding-top和padding-bottom一样

\-------------------------------------------------------------------------------------

**(****十五)：CSS样式-display有哪些作用？**

## **题目点评** ##

其实就是要你说清楚该属性有哪些值，每个值都有什么作用，这个题目可以答得很简单，但要答全也并非是一件容易的事情。

## **元素默认的display值的情况如下（这个一般很少人注意这一点）** ##

*   block(块级元素)

<div>、<p> <ul> <ol> <form> ……

*   inline（内联元素）

<span> <a> <img> <input> <select> <label> ……

*   list-item（项目列表）

<li>

*   none(不显示)

<head>（头部元素都是） <title> <br> <thead> <tbody> <tfoot>

## **常见的属性值（属性值太多，只要说常用的就好）** ##

*   none：元素隐藏
 *   block：块级元素
 *   inline-block：内联块级元素
 *   list-item:列表项目
 *  表格系列方面的显示
 *   table
 *   table-row

示例：**div+css****制作表格**

html代码

**\[html\]** [view plain][view plain 6] [copy][view plain 6]

1.  **<div** class="table"**>**
2.  **<h2** class="table-caption"**>**花名册：**</h2>**
3.  **<div** class="table-column-group"**>**
4.  **<div** class="table-column"**></div>**
5.  **<div** class="table-column"**></div>**
6.  **<div** class="table-column"**></div>**
7.  **</div>**
8.  **<div** class="table-header-group"**>**
9.  **<ul** class="table-row"**>**
10. **<li** class="table-cell"**>**序号**</li>**
11. **<li** class="table-cell"**>**姓名**</li>**
12. **<li** class="table-cell"**>**年龄**</li>**
13. **</ul>**
14. **</div>**
15. **<div** class="table-footer-group"**>**
16. **<ul** class="table-row"**>**
17. **<li** class="table-cell"**>**footer**</li>**
18. **<li** class="table-cell"**>**footer**</li>**
19. **<li** class="table-cell"**>**footer**</li>**
20. **</ul>**
21. **</div>**
22. **<div** class="table-row-group"**>**
23. **<ul** class="table-row"**>**
24. **<li** class="table-cell"**>**1**</li>**
25. **<li** class="table-cell"**>**John**</li>**
26. **<li** class="table-cell"**>**19**</li>**
27. **</ul>**
28. **<ul** class="table-row"**>**
29. **<li** class="table-cell"**>**2**</li>**
30. **<li** class="table-cell"**>**Mark**</li>**
31. **<li** class="table-cell"**>**21**</li>**
32. **</ul>**
33. **<ul** class="table-row"**>**
34. **<li** class="table-cell"**>**3**</li>**
35. **<li** class="table-cell"**>**Kate**</li>**
36. **<li** class="table-cell"**>**26**</li>**
37. **</ul>**
38. **</div>**
39. **</div>**

CSS代码

**\[html\]** [view plain][view plain 6] [copy][view plain 6]

1.  ul\{margin:0;padding:0;list-style:none;\} 
2.  .table\{display:table;border-collapse:collapse;border:1px solid \#ccc;\} 
3.  .table-caption\{display:table-caption;margin:0;padding:0;font-size:16px;\} 
4.  .table-column-group\{display:table-column-group;\} 
5.  .table-column\{display:table-column;width:100px;\} 
6.  .table-row-group\{display:table-row-group;\} 
7.  .table-row\{display:table-row;\} 
8.  .table-row-group .table-row:hover,.table-footer-group .table-row:hover\{background:\#f6f6f6;\} 
9.  .table-cell\{display:table-cell;padding:0 5px;border:1px solid \#ccc;\} 
10. .table-header-group\{display:table-header-group;background:\#eee;font-weight:bold;\} 
11. .table-footer-group\{display:table-footer-group;\}

效果图

![/images/20220518/a554bd2033ee40b998f27d9c7a9837f3.png][https_img-blog.csdn.net_20160926194925636]

## **加分项** ##

*  行级元素浮动之后，display为block。
 *  flex（弹性盒子）  
    不过要结合相关的属性一起，flex-flow和flex。在响应式开发中flex非常有用。

行式布局 flex-flow: row;

html代码

**\[html\]** [view plain][view plain 6] [copy][view plain 6]

1.  **<div** class="div-flex-box"**>**
2.  **<div** class="flex-1" **></div>**
3.  **<div** class="flex-2"**></div>**
4.  **<div** class="flex-3"**></div>**
5.  **</div>**

css代码

**\[css\]** [view plain][view plain 6] [copy][view plain 6]

1.  .div-flex-box \{ 
2.  **display**: flex; 
3.   flex-flow: row; /\*行式布局\*/
4.  \} 
5.  .flex-1\{ 
6.   flex:1; /\*占1份，共4份\*/
7.  **height**: 60px; 
8.  **background-color**: aquamarine; 
9.  \} 
10. .flex-2\{ 
11.  flex:2; /\*占2份，共4份\*/
12. **height**: 60px; 
13. **background-color**: chocolate; 
14. \} 
15. .flex-3\{ 
16.  flex:1; /\*占1份，共4份\*/
17. **height**: 60px; 
18. **background-color**: darkcyan; 
19. \}

**效果图**

![/images/20220518/493af0727fcc4b38a4880709586308c5.png][https_img-blog.csdn.net_20160926205657700]

\------------------------------------------------

**(****十六)：为什么要初始化CSS样式？**

## **题目点评** ##

这个题目乍一看感觉怪怪的，什么叫初始化样式了？如果换一句话你可能就理解了，就是通用样式。这道题目主要涉及的是理论方面的知识，不用写代码，只要描述清楚就可以了

## **初始化样式的原因** ##

因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

**\[html\]** [view plain][view plain 7] [copy][view plain 7]

1.  **<h1>**标题1标签在不同浏览器的盒子模型**</h1>**

<table> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;"><img alt="https://img-blog.csdn.net/20160927111945775" src="https://img-blog.csdn.net/20160927111945775"></span></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;"><img alt="https://img-blog.csdn.net/20160927111953353" src="https://img-blog.csdn.net/20160927111953353"></span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;">&nbsp; <span style="color:#4f4f4f;">火狐浏览器</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">谷歌浏览器</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;"><img alt="https://img-blog.csdn.net/20160927111958822" src="https://img-blog.csdn.net/20160927111958822"></span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;"><img alt="https://img-blog.csdn.net/20160927112004119" src="https://img-blog.csdn.net/20160927112004119"></span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">IE7</span><span style="color:#4f4f4f;">浏览器</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">IE9</span><span style="color:#4f4f4f;">浏览器</span></p> </td> 
  </tr> 
 </tbody> 
</table>

从上面可以看出，同一个标签，不同的浏览器解析的数据是不一样的，这样就会导致显示的差异了。

**弊端**

初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

## **淘宝初始化代码** ##

**\[css\]** [view plain][view plain 7] [copy][view plain 7]

1.  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td \{ **margin**:0; **padding**:0; \} 
2.  body, button, input, select, textarea \{ **font**:12px/1.5tahoma, arial, \\5b8b\\4f53; \} 
3.  h1, h2, h3, h4, h5, h6\{ **font-size**:100%; \} 
4.  address, cite, dfn, em, var \{ **font-style**:normal; \} 
5.  code, kbd, pre, samp \{ **font-family**:couriernew, courier, monospace; \} 
6.  small\{ **font-size**:12px; \} 
7.  ul, ol \{ **list-style**:none; \} 
8.  a \{ **text-decoration**:none; \} 
9.  a:hover \{ **text-decoration**:underline; \} 
10. sup \{ **vertical-align**:text-top; \} 
11. sub\{ **vertical-align**:text-bottom; \} 
12. legend \{ **color**:\#000; \} 
13. fieldset, img \{ **border**:0; \} 
14. button, input, select, textarea \{ **font-size**:100%; \}

\-------------------------------------------------

**(****十七)：一个满屏 品 字布局 如何设计?**

## **题目点评** ##

这道题目有可能是笔试题，有可能面谈的时候进行叙述，如果是笔试题要求对css样式代码非常熟练，如果是面谈叙述，就需要你的表达能力非常强，要抓住要点，把需要用到的技能点讲清楚就可以了。

## **需要用到技术** ##

1. 元素水平居中对齐

1) 使用margin对齐(推荐)

2) 使用left：50%

3) 使用text-align

2. 元素对相对窗口定位

1) 使用filxed（推荐）

2) 使用absolute定位

3) 使用html和body的width和height填?这个窗口

3. 元素左右定位

1) 使用float左右浮动

2) 使用绝对定位进行左右定位（推荐）

## **具体实现的代码** ##

html代码

**\[html\]** [view plain][view plain 8] [copy][view plain 8]

1.  **<div** class="main"**>**
2.  **<div** class="wrapper-up"**>**
3.  **<div** class="div-square-up"**></div>**
4.  **</div>**
5.  **<div** class="wrapper-down"**>**
6.  **<div** class="div-square-left"**></div>**
7.  **<div** class="div-square-right"**></div>**
8.  **</div>**
9.  **</div>**

CSS样式

**\[css\]** [view plain][view plain 8] [copy][view plain 8]

1.  body\{ 
2.  **height**: 1200px; 
3.   \} 
4.   .main \{ 
5.  **position**: fixed; 
6.   left: 0; 
7.   top: 0; 
8.  **height**: 100%; 
9.  **width**: 100%; 
10.  \} 
11.  .wrapper-up \{ 
12. **height**: 50%; 
13.  \} 
14. 
15.  .wrapper-down \{ 
16. **height**: 50%; 
17. **position**: relative; 
18.  \} 
19.  .div-square-up \{ 
20. **width**: 50%; 
21. **margin**: 0 auto; 
22. **border**: 2px solid red; 
23. **height**: 96%; 
24.  box-sizing: border-box; 
25.  \} 
26. 
27.  .div-square-left \{ 
28. **position**: absolute; 
29.  left: 0; 
30. **width**: 48%; 
31. **height**: 100%; 
32.  box-sizing: border-box; 
33. **border**: 2px solid red; 
34.  \} 
35. 
36.  .div-square-right \{ 
37. **position**: absolute; 
38.  right: 0; 
39. **width**: 48%; 
40. **height**: 100%; 
41. **border**: 2px solid red; 
42.  box-sizing: border-box; 
43.  \}

#    **(十八)：用纯CSS创建一个三角形的原理是什么？** #

## **题目点评** ##

三角形的图标在网页设计是很常见的，属于基本常识题，只要在练习做到过这个功能都能回答出来，可以把你做过的思路描述出来就可以了，本题的难易程度为简单

## **答题要点** ##

1.采用的是均分原理

盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部

![/images/20220518/b1a249f10a08402fa7b9eb48c3aecfcc.png][https_img-blog.csdn.net_20160928120730295]

2.代码的实现

第一步 保证元素是块级元素

第二步 设置元素的边框

第三步 不需要显示的边框使用透明色

示例代码

**\[css\]** [view plain][view plain 9] [copy][view plain 9]

1.  .square\{ 
2.  **width**:0; 
3.  **height**:0; 
4.  **margin**:0 auto; 
5.  **border**:6px solid transparent; 
6.  **border-top**: 6px solid red; 
7.   \}

效果图

![/images/20220518/4e6f83d863f7444ca56113eada6a0347.png][https_img-blog.csdn.net_20160928120911279]

加分项

描述自己的心得：在开发中我们也经常设计一个带缺口的三角形效果，如下图所示。

![/images/20220518/0c3c8ea407cd44ee997b106a52fff492.png][https_img-blog.csdn.net_20160928123828528]

上图效果的做法是这样的：

1.、两个三角形（底边框）的位置、大小要一致

2、里面的三角形的底边框颜色为黑色（也可以为其它颜色），外面三角形边框颜色为白色的背景

3、白色三角形要覆盖黑色三角形就能形成这样的形状了，关于覆盖的问题可以使用标签的位置或z-index来改变。

html代码

**\[html\]** [view plain][view plain 9] [copy][view plain 9]

1.  **<div** class="box b1"**></div>**
2.  **<div** class="box b2"**></div>**

css代码

**\[css\]** [view plain][view plain 9] [copy][view plain 9]

1.   .box\{ 
2.  **position**: absolute; 
3.   left: 0; 
4.   top: 0; 
5.  **width**: 0; 
6.  **height**:0; 
7.  **border**: 6px solid transparent; 
8.   \} 
9.  .b1\{ 
10. **border-bottom-color**:\#000 ; 
11. \} 
12. .b2\{ 
13. **border-bottom-color**:\#fff ; 
14. \}

感谢：

#    **Web前端面试指导(十九)：CSS样式-如何清除元素浮动？** #

**题目点评**

本题属于比较常问的题目，也是在网页设计中经常遇到的问题，面试官希望通过这样的面试题来了解你对网页设计的基本功底，如果这样的题目答不出来，必会让面试官大失所望，面试成功的概率是非常小的。

**答题思路**

可以先回答在工作上常用的清除方法，并说明为什么使用它，然后在讲一些其它的清除方法来说明你的思维广阔，知识丰富的一面。 浮动的方式有以下**4****种**。

**1.****使用****clear:both****清除浮动**

<table> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#0000ff;">示例</span><span style="color:#0000ff;">1</span><span style="color:#0000ff;">：使用</span><span style="color:#0000ff;">div</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#c00000;">html</span><span style="color:#c00000;">代码</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#c00000;">css</span><span style="color:#c00000;">代码</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;div class="box"&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&nbsp;&lt;div class="div"&gt;&lt;/div&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&nbsp;&lt;div class="clear"&gt;&lt;/div&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;/div&gt;</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.box{ width:300px;margin:0 auto;border:10px solid #000;}</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.div{ width:200px;height:200px;background:red;float:left;}</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.clear{ height:0px;font-size:0;clear:both;overflow: hidden;}</span></p> </td> 
  </tr> 
  <tr> 
   <td colspan="2" style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#0000ff;">示例</span><span style="color:#0000ff;">2:</span><span style="color:#0000ff;">使用</span><span style="color:#0000ff;">&lt;br clear="all"&gt;</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;div class="box"&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&nbsp;&lt;div class="div"&gt;&lt;/div&gt;</span></p> <p style="margin-left:0cm;">&nbsp;&nbsp;<span style="color:#ff0000;">&nbsp;&lt;br clear="all"/&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;/div&gt;</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.box{ width:300px;margin:0 auto;border:10px solid #000;}</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.div{ width:200px;height:200px;background:red;float:left;}</span></p> </td> 
  </tr> 
  <tr> 
   <td colspan="2" style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#0000ff;">示例</span><span style="color:#0000ff;">3</span><span style="color:#0000ff;">：伪类对象</span><span style="color:#0000ff;">::after+zoom:1(</span><span style="color:#0000ff;">推荐使用</span><span style="color:#0000ff;">)</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;div class="box clear"&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&nbsp;&lt;div class="div"&gt;&lt;/div&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;/div&gt;</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.box{margin:0 auto;border:10px solid #000;}</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.div{ width:200px;height:200px;background:red;float:left;}</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.clear{zoom:1;}</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}</span></p> </td> 
  </tr> 
 </tbody> 
</table>

**2.****使用****overflow****属性**

<table> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#c00000;">html</span><span style="color:#c00000;">代码</span></p> </td> 
   <td colspan="2" style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#c00000;">css</span><span style="color:#c00000;">代码</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;div class="box"&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&nbsp;&lt;div class="div1"&gt;&lt;/div&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;/div&gt;</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.box{ width:300px;border:1px solid #000;<strong>overflow:auto;</strong>}</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.div1{ width:260px;height:400px;background:Red;float:left;}</span><br><strong><span style="color:#ff0000;">注意：</span></strong><strong><span style="color:#ff0000;">overflow:auto;</span></strong><strong><span style="color:#ff0000;">、</span></strong><strong><span style="color:#ff0000;">overflow:hidden;</span></strong><strong><span style="color:#ff0000;">都可以</span></strong></p> </td> 
   <td style="background-color:#f7f7f7;width:345pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;width:150pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="background-color:#ffffff;width:342pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="background-color:#ffffff;width:345pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

**3.****使用****display****属性**

<table> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#c00000;">html</span><span style="color:#c00000;">代码</span></p> </td> 
   <td colspan="2" style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#c00000;">css</span><span style="color:#c00000;">代码</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;div class="box"&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&nbsp;&lt;div class="div"&gt;&lt;/div&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;/div&gt;</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.div{ width:200px;height:200px;background:red;float:left;}</span></p> <p style="margin-left:0cm;"><span style="color:#ff0000;">注意：父元素不能水平居中，在父元素使用</span><span style="color:#ff0000;">text-align:center</span><span style="color:#ff0000;">解决</span>&nbsp;&nbsp;&nbsp;</p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;width:147.75pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="background-color:#ffffff;width:344.25pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

**4.****父级元素浮动**

<table> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#c00000;">html</span><span style="color:#c00000;">代码</span></p> </td> 
   <td colspan="2" style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#c00000;">css</span><span style="color:#c00000;">代码</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;div class="box"&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&nbsp;&lt;div class="div"&gt;&lt;/div&gt;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&lt;/div&gt;</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">.div{ width:200px;height:200px;background:red;float:left;}</span></p> <p style="margin-left:0cm;"><span style="color:#ff0000;">注意：父元素不能水平居中，可以使用定位解决</span>&nbsp;&nbsp;&nbsp;&nbsp;</p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">position: relative;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">left: 50%;</span></p> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">margin-left: -150px;</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;width:148.5pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="background-color:#ffffff;width:343.5pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

**(****二十)：JavaScript中如何翻转一个字符串？**

## **题目点评** ##

字符串作在程序中是非常常见的，因为程序中绝大部分的数据都可以当作字符串来处理。需要对字符的处理方法比较熟悉，在回答的时候尽量能够说出多种解决方法更好！

## **字符串翻转的方法** ##

1）使用字符串函数

**\[javascript\]** [view plain][view plain 10] [copy][view plain 10]

1.  //str=hello 
2.  **function** reverseString(str) \{ 
3.  **var** array = str.split('');//\['h','e','l','l','o'\];
4.   array = array.reverse();// \['o','l','l','e','h'\];
5.   str = array.join('');//"olleh"
6.  **return** str; 
7.  \}

上面代码可以合并一行代码

**\[javascript\]** [view plain][view plain 10] [copy][view plain 10]

1.  //str=hello
2.  **function** reverseString(str) \{ 
3.  **return** str.split('').reverse().join('');; 
4.   \}

2）使用for循环

**\[javascript\]** [view plain][view plain 10] [copy][view plain 10]

1.  **function** reverseString(str) \{ 
2.  **var** newStr=""; 
3.  **for**(**var** i=str.length-1;i>=0;i--)\{ 
4.  newStr+=str\[i\]; 
5.  \} 
6.  **return** newStr; 
7.  \}

使用逆序遍历字符串，从后面将字符串累加起来。  
3）使用递归

**\[javascript\]** [view plain][view plain 10] [copy][view plain 10]

1.  **function** reverseString(str) \{ 
2.  **if** (str === "") \{ 
3.  **return** ""; 
4.   \} **else** \{ 
5.  **return** reverseString(str.substr(1)) + str.charAt(0); 
6.   \} 
7.  \} 
8.  reverseString("hello"); // => olleh

第一部分的递归方法。你需要记住，你不会只调用一次，你将会有几个嵌套的调用。

<table> 
 <thead> 
  <tr> 
   <td style="background-color:#eeeeee;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">每次调用str === "?"</span></p> </td> 
   <td style="background-color:#eeeeee;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString(str)</span></p> </td> 
   <td style="background-color:#eeeeee;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">+ str.charAt(0)</span></p> </td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">第一次调用</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("Hello")</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("ello") + "h"</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">第二次调用</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("ello")</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("llo") + "e"</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">第三次调用</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("llo")</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("lo") + "l"</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">第四次调用</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("lo")</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("o") + "l"</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">第五次调用</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("o")</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("") + "o"</span></p> </td> 
  </tr> 
 </tbody> 
</table>

第二部分的递归方法。

<table> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">每次调用</span></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">返回</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">第五次调用</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("") + "o" = "o"</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">第四次调用</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("o") + "l" = "o" + "l"</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">第三次调用</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverseString("lo") + "l" = "o" + "l" + "l"</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">第二次调用</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverserString("llo") + "e" = "o" + "l" + "l" + "e"</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#595959;">第一次调用</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#595959;">reverserString("ello") + "h" = "o" + "l" + "l" + "e" + "h"</span></p> </td> 
  </tr> 
 </tbody> 
</table>

上面的方法还可以继续改良一下，改成三元操作符：

**\[javascript\]** [view plain][view plain 10] [copy][view plain 10]

1.  **function** reverseString(str) \{ 
2.  **return** (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0); 
3.  \} 
4.  reverseString("hello"); // => olleh

#  **(二十一)：如何向数组中间插入或删除元素？** #

## **题目点评** ##

目的是考察对字符串的API是否熟悉，很多课程都只是讲一些比较普通方法的使用，但对于比较生僻一点的方法就没有涉及到了。主要考察知识面是否宽广。

## **解题思路** ##

比较独特的方法作为第一种解决方案进行简述，大家都能想到的方法放到后面。

### **第一种方法 使用splice方法** ###

语法介绍

**\[javascript\]** [view plain][view plain 11] [copy][view plain 11]

1.  splice(start, deleteCount, value, ...)

参数说明

start

开始插入和(或)删除的数组元素的下标。

deleteCount

从start开始，包括start所指的元素在内要删除的元素个数。这个参数是可选的，如果没有指定它，splice()将删除从start开始到原数组结尾的所有元素。

value, ...

要插入数组的零个或多个值，从start所指的下标处开始插入。

示例

**\[javascript\]** [view plain][view plain 11] [copy][view plain 11]

1.  **var** a = \[1,2,3,4,5,6,7,8\] 
2.  a.splice(4); // 返回 \[5,6,7,8\]; a is \[1,2,3,4\]
3.  a.splice(1,2); // 返回 \[2,3\]; a is \[1,4\]
4.  a.splice(1,0,2,3) // \[\] a is \[1, 2, 3, 4\]

### **第二种方法 比较常规** ###

**\[javascript\]** [view plain][view plain 11] [copy][view plain 11]

1.  **var** str = \[0, 1, 3, 4, 6, 7\];//原始字符串
2.  **var** insWord = 5;//待插入字符串
3.  **var** index = 4;//待插入位置
4.  //待插入位置的元素全部向后移动一位
5.  **for**(**var** i=str.length-1;i>=index;i--)\{ 
6.   str\[i+1\]=str\[i\]; 
7.  \} 
8.  str\[index\]=insWord;//移动完后，将待插入的位置赋值为待插入的值
9.  console.log(str);//\[0, 1, 3, 4, 5, 6, 7\]

**(****二十二)：用js实现千位分隔符，怎么实现?**

## **题目点评** ##

本题的难度偏高，涉及到的算法确实有一点的小复杂，这种题目一般出现在笔试题上，不会出现在面谈上。这道题主要的目的应该是考察你是否有一题多解的思路，特别是正则表达式的使用，如果你能使用正则表达式做出来，面试官应该会被你深深地镇住！

## **解题思路** ##

**方法一：**使用正则表达式

**\[javascript\]** [view plain][view plain 12] [copy][view plain 12]

1.  <span style="font-size:14px;">**function** format (num) \{ 
2.  **var** reg=/\\d\{1,3\}(?=(\\d\{3\})+$)/g; 
3.  **return** (num + '').replace(reg, '$&,'); 
4.  \}</span>

解释

正则表达式 \\d\{1,3\}(?=(\\d\{3\})+$) 表示前面有1~3个数字，后面的至少由一组3个数字结尾。

?=表示正向引用，可以作为匹配的条件，但匹配到的内容不获取，并且作为下一次查询的开始。

$& 表示与正则表达式相匹配的内容，具体的使用可以查看字符串replace()方法的

运行的过程看下图

假如有数字13123903243，则正则表达式查找与替换的过程，如下图所示

![/images/20220518/0b23bc1d26d24d9e8df8301fbea0d013.png][https_img-blog.csdn.net_20161003155012112]

**第二种：**方法-正常思维算法

**\[javascript\]** [view plain][view plain 12] [copy][view plain 12]

1.  **function** format(num)\{ 
2.   num=num+'';//数字转字符串
3.  **var** str="";//字符串累加
4.  **for**(**var** i=num.length- 1,j=1;i>=0;i--,j++)\{ 
5.  **if**(j%3==0 && i!=0)\{ //每隔三位加逗号，过滤正好在第一个数字的情况
6.   str+=num\[i\]+",";//加千分位逗号
7.  **continue**; 
8.   \} 
9.   str+=num\[i\];//倒着累加数字
10.  \} 
11. **return** str.split('').reverse().join("");//字符串=>数组=>反转=>字符串
12. \}

基本思路

# **![/images/20220518/d26b7a1eb1d24b3d838c50296224e093.png][https_img-blog.csdn.net_20161003162919302]      (二十三)：怎样创建、添加、移除、移动、和查找节点?** #

## **创建元素** ##

**1.createDocumentFragment()**

创建一个虚拟节点对象,对于频繁操作DOM时推荐使用，减少对页面重绘频率从而提高页面响应的速度。

例证

示例1 使用DOM频繁创建、添加节点

**\[javascript\]** [view plain][view plain 13] [copy][view plain 13]

1.  console.time("纯DOM操作"); 
2.  **for** (**var** i = 0; i < 10000; i++) \{ 
3.   vardiv = document.createElement("div"); 
4.   div.innerHTML = "你好" \+ i; 
5.  //dom.appendChild(div)
6.   document.body.appendChild(div); 
7.  //console.log(dom);
8.  \} 
9.  console.timeEnd("纯DOM操作");

示例2：使用Fragment频繁创建、添加节点

**\[javascript\]** [view plain][view plain 13] [copy][view plain 13]

1.  console.time("Fragment操作") 
2.  **var** fragment = document.createDocumentFragment(); 
3.  **for** (**var** i = 0; i < 10000; i++) \{ 
4.   vardiv = document.createElement("div"); 
5.   div.innerHTML = "你好" \+ i; 
6.  //dom.appendChild(div)
7.   fragment.appendChild(div); 
8.  //console.log(dom);
9.  \} document.body.appendChild(fragment); 
10. console.timeEnd("Fragment操作")

**耗时对比**

<table> 
 <tbody> 
  <tr> 
   <td colspan="2" style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">DOM</span><span style="color:#4f4f4f;">操作耗时</span></p> </td> 
   <td colspan="2" style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">Fragment</span><span style="color:#4f4f4f;">操作耗时</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">Firefox</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">Chrome</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">Firefox</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">Chrome</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">38.44ms</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&nbsp;83.720ms</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">&nbsp;27.13ms</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">76.589ms</span></p> </td> 
  </tr> 
 </tbody> 
</table>

**2.createElement()**

根据标签名称创建一个具体的元素，对应的属性为innerHTML，此方法使用的频率高，创建元素基本上都会选择这种方法。

**3.createTextNode()**

创建一个文本节点，对应的属性为innerText。

**移除元素**

parentNode.removeChild(childNode)

**替换元素**

parentNode.replaceChild(newChild,oldChild);//替换元素

**插入元素**

parentNode.insertBefore(newChild,refChild)//在refChild前插入节点

**追加元素**

parentNode.appendChild(childNode)

**查找**

1) parentNode.getElementsByTagName(tagName)获取所在父节点下的指定标签名节点,返回HTMLCollection类型

2) document.getElementsByClassName(className)//根据类名获取节点，返回HTMLCollection

3) document.getElementById(id)//通过元素Id，唯一性

4) 高级选择器 document.querySelector

语法：document.querySelector(CSS selectors)

jQuery底层的选择器就是利用它来的，可以根据标签、id、类选择器一起使用。

document.querySelector("p");//选择<p>元素

document.querySelector(".wrapper");//选择类名为wrapper

document.querySelector("\#div");//选择ID名为div的元素

document.querySelector("a\[target\]");//选择a标签有target属性元素

**(****二十四)：事件是什么？如何阻止事件冒泡？**

## **题目点评** ##

这题目的问题是一脉相承的，第一个问题和后面的问题有关联，所以回答第一个问题时一定要涉及到事件执行的原理和过程，必须引出事件冒泡，有了事件冒泡才有第二问题如何阻止冒泡。

## **回答思路** ##

**事件是什么？**

事件用于监听浏览器的操作行为，浏览器触发动作时被捕捉到而调用相应的函数。

**事件执行三个阶段**

① 事件捕获阶段  
② 处于目标阶段  
③ 事件冒泡阶段  
捕获型事件是自上而下，而冒泡型事件是自下而上的，而我们程序员通常要做的就是第二阶段，完成事件的动作。而第一、三阶段由系统封装自动调用完成。

![/images/20220518/02fd832222c34a9787c6f85a1dac99c0.png][https_img-blog.csdn.net_20161004140636813]

**冒泡阻止**  
event.stopPropagation()  
IE浏览器  
event.cancelBubble = true;

#  **(二十五)：谈一下Jquery中的bind,live,delegate,on的区别？** #

## **题目点评** ##

该题难度不是很大，主要考察我们的叙述能力，对这些事件是否能够全面、系统的理解，以及表达的思路是否清晰。

## **解题思路** ##

**bind**：把事件绑定到每一个匹配的元素上，主要特点

1.兼容性比较好

2.绑定事件到所有选出来的元素上

3.不会绑定事件到动态添加的那些元素上

4.当元素很多时，会出现效率问题，特别是嵌套层次比较深的元素。

**html****代码**

**\[html\]** [view plain][view plain 14] [copy][view plain 14]

1.  **<ul** id="ul"**>**
2.  **<li>**NO1**</li>**
3.  **<li>**NO2**</li>**
4.  **<li>**NO3**</li>**
5.  **<li>**NO4**</li>**
6.  **<li>**NO5**</li>**
7.  **</ul>**

**JavaScript****代码**

**\[javascript\]** [view plain][view plain 14] [copy][view plain 14]

1.  $("li").bind("click", **function** (event) \{ 
2.   alert("OK"); 
3.  \});

**jquery****源码**

![/images/20220518/9f05ede55beb4b33accbeca1765b81bf.png][https_img-blog.csdn.net_20161004194810544]

**调试数据**

![/images/20220518/b5889827b82b4152b54b61f14aa15ed5.png][https_img-blog.csdn.net_20161004194852389]

**总结：需要循环5次来绑定事件！**

**live****：**把所有的事件都绑定到jquery对象$(document) ，主要特点：

1.事件只需要绑定一次，不需要绑定到筛选出来的元素上。

2.动态添加元素后依然拥有绑定事件。

3.不能使用event.stopPropagation() 来阻止事件的冒泡。

**JavaScript****代码**

**\[javascript\]** [view plain][view plain 14] [copy][view plain 14]

1.  $("li").live("click", **function** (event) \{ 
2.   alert("OK"); 
3.  \});

**jquery****源码同****bind**

调试数据

![/images/20220518/c31022d395534fc0ba4524c6e08768b5.png][https_img-blog.csdn.net_20161004195030780]

**总结：只执行一次，事件绑定在根节点对象上。**

**delegate****：**将事件绑定到指定的父元素上，和live类似但比较能活。主要特点：

1.可以用在动态添加的元素上

2.绑定的父元素可以采用就近原则，减少查询的次数，比live的性能好

3.在live和delegate两者推荐使用delegate

**JavaScript****代码**

**\[javascript\]** [view plain][view plain 14] [copy][view plain 14]

1.  $("\#ul").delegate("li", "click", **function** (event) \{ 
2.   alert("OK"); 
3.  \});

**调试****数据**

![/images/20220518/35a52ad9fdb54b049bc3060c264e3dde.png][https_img-blog.csdn.net_20161004195450298]

**总结：只执行一次，事件绑定在调用对象上。**

**On****：**是jQuery1.7中新增的，前面的三种方法都是依赖on方法来实现的。，主要特点：

1.事件的添加和卸载都要是通过on来实现的，提供一种统一的事件处理方法。

2.增加了使用的难度，对于不熟悉on的使用的，很有可能就勿用，导致性能下降。

**经验：on方法的正确使用**

1.使用on方法，如果第二个参数使用null，则作用与bind( )相同；参考jquery1.7源码。

![/images/20220518/33404f5cef814e898f5b241902b8c240.png][https_img-blog.csdn.net_20161004195510677]

2.如果第二个参数适用了选择器，就要看调用对象

i.如果调用对象是$(document)，则作用与live( )相同，参考jquery1.7源码。

![/images/20220518/b2823195a1f548df8e4384009356bc89.png][https_img-blog.csdn.net_20161004195534506]

ii.否则与delegate()相同，参考jquery1.7源码。

![/images/20220518/b001c572ef054cb7bbfab42f1b7e012c.png][https_img-blog.csdn.net_20161004195600115]

**(****二十六)：JSON 格式是什么？你了解吗？**

**题目点评**

这道题目问得比较抽象，像这种比较抽象的提问，在面试的时候是非常常见的，面试官喜欢就抽象到具体，然后不断地追问，试图通过追问的方式打断你的思路，顺便观察你的应变能力和技术实力。建议在回答的时候尽量详尽，不要给面试官穷追猛打的机会。

**JSON****是什么**

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。是前后台数据交互最常见的一种数据格式。

**JSON****语法**

1.数据在键值对中，如： key:value 使用冒号分隔。

2.数据由逗号分隔

3.花括号保存对象

4.方括号保存数组

如：\{"age":"12", "name":"back","phone"\};

![/images/20220518/40354fa4cee142039377a811efd4b13b.png][https_img-blog.csdn.net_20161004215542481]

**数据格式转换**

1.JSON字符串转换为JSON对象:

var obj =eval('('+ str +')');

var obj = JSON.parse(str);

2.JSON对象转换为JSON字符串：

var last=JSON.stringify(obj);

3.数组转json字符串

var array=\[1,2,3,4\];

JSON.stringify($(array));

4.json字符串转数组，使用jquery

$(JSON.parse('\{"0":1,"1":2,"2":3,"length":3\}'));

**(****二十七)：原型是什么？原型链是什么？**

题目点评

这道题目是属于JavaScript比较难理解的知识点，涉及到的知识也非常抽象深奥，属于JavaScript面向对象思维范畴，如果没有一点面向对象的编程思维的同学，想必是难倒了，即使有一定OOP的同学要回答起来也是比较费劲，不是一时半会能说清楚。但面试官问到了，说明他是懂技术的，用比较专业的术语来回答就好，这样会比较言简意赅。

## **解题思路** ##

## **原型是什么？** ##

在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。

## **原型链是什么？** ##

JavaScript万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

## **举例说明** ##

Student → Person → Object ，学生继承人类，人类继承对象类

代码

**\[javascript\]** [view plain][view plain 15] [copy][view plain 15]

1.  <span style="font-size:14px;">varPerson=**function**()\{ **this**.age="匿名"\}; 
2.  varStudent=**function**()\{\}; 
3.  //创建继承关系,prototype执行Person的一个实例对象
4.  Student.prototype=**new** Person();</span>

原型API关系图

![/images/20220518/828e849574134c50a023b53acdccb4c5.png][https_img-blog.csdn.net_20161006122801332]

精简图

![/images/20220518/5a04bdb27e4f4f6e81e2110979d1cf29.png][https_img-blog.csdn.net_20161006122746325]

**(****二十八)：什么是闭包，为什么要用它？**

**题目点评**

闭包这个概念也是JavaScript中比较抽象的概念，也是JavaScript中的一个难点，要求对理论知识理解的比较透彻，概念性的东西一两句就讲完了，所以这道题目可以死记硬背，如果实在不能理解的话。

解题思路

**闭包是什么**

你可以这样回答：

我个人理解，闭包是就是函数中的函数，里面的函数可以访问外面函数的变量，外面的变量的是这个内部函数的一部分。

辅助理解

**\[javascript\]** [view plain][view plain 16] [copy][view plain 16]

1.  <script> 
2.  **function** outer()\{ 
3.  **var** num=0;//内部变量
4.  **return** **function** add()\{ //通过return返回add函数，就可以在outer函数外访问了。
5.   num++;//内部函数有引用，作为add函数的一部分了
6.   console.log(num); 
7.   \}; 
8.   \} 
9.  **var** func1=outer();//
10.  func1();//实际上是调用add函数， 输出1
11.  func1();//输出2
12. **var** func2=outer(); 
13.  func2();// 输出1
14.  func2();// 输出2
15. </script>

![/images/20220518/b2372c1396a942a397f84cd6a2cd5275.png][https_img-blog.csdn.net_20161006175821807]

**关系示意图**

**闭包的作用**

1.使用闭包可以访问函数中的变量。

2.可以使变量长期保存在内存中，生命周期比较长。

**加分项**

闭包不能滥用，否则会导致内存泄露，影响网页的性能。闭包使用完了后，要立即释放资源，将引用变量指向null。

**(****二十九)：Ajax 是什么? 如何创建一个Ajax？**

**题目点评**

Ajax 是在工作中是必用的技术，在面试中十有八九会问的，答题的思路最好先回答原生态Ajax使用的步骤，最后告诉面试官，我们在工作中是使用Jquery来实现Ajax请求和处理的。在回答的时候尽量详尽，包括方法的参数的个数，顺序和作用，以免被面试官抓住不放。不给面试官提问的机会，那你的回答就牛逼了！

**Ajax****是什么**

我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。

**Ajax****的使用**

以下步骤，如果不能理解你死记硬背都要记下来，总比你答不出来要好吧！

1.创建Ajax核心对象XMLHttpRequest

**\[javascript\]** [view plain][view plain 17] [copy][view plain 17]

1.  **var** xmlhttp; 
2.  **if** (window.XMLHttpRequest) 
3.   \{ // 兼容 IE7+, Firefox, Chrome, Opera, Safari
4.   xmlhttp=**new** XMLHttpRequest(); 
5.   \} 
6.  **else**
7.   \{ // 兼容 IE6, IE5
8.   xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); 
9.   \}

2.向服务器发送请求

**\[javascript\]** [view plain][view plain 17] [copy][view plain 17]

1.  xmlhttp.open(method,url,async); 
2.  send(string)

**注意：**open 的参数要牢记，很多面试官爱问这样的细节

*  method：请求的类型；GET 或 POST
 *  url：文件在服务器上的位置
 *  async：true（异步）或 false（同步）

send(string)方法post请求时才使用字符串参数，否则不用带参数。

**注意：**post请求一定要设置请求头的格式内容

**\[javascript\]** [view plain][view plain 17] [copy][view plain 17]

1.  xmlhttp.open("POST","ajax\_test.html",**true**); 
2.  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
3.  xmlhttp.send("fname=Henry&lname=Ford");

3.服务器响应处理

responseText 获得字符串形式的响应数据。

responseXML 获得XML 形式的响应数据。

**3.1** **同步处理**

**\[javascript\]** [view plain][view plain 17] [copy][view plain 17]

1.  xmlhttp.open("GET","ajax\_info.txt",**false**); 
2.  xmlhttp.send(); 
3.  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

直接在send()后面处理返回来的数据。

**3.2** **异步处理**

异步处理相对比较麻烦，要在请求状态改变事件中处理。

**\[javascript\]** [view plain][view plain 17] [copy][view plain 17]

1.  xmlhttp.onreadystatechange=**function**() 
2.   \{ 
3.  **if** (xmlhttp.readyState==4 &&xmlhttp.status==200) 
4.   \{ 
5.   document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
6.   \} 
7.   \}

一共有5中请求状态，从0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

**xmlhttp.status****：**响应状态码。这个也是面试比较爱问的，这个必须知道4个以上，比较常见的有：

200: "OK"

403 （禁止） 服务器拒绝请求。

404 （未找到） 服务器找不到请求的网页。

408 （请求超时） 服务器等候请求时发生超时。

500 （服务器内部错误） 服务器遇到错误，无法完成请求。

**(****三十)：JavaScript有几种类型的值？你能画一下他们的内存图吗？**

**题目点评**

数据类型是所有程序都会涉及到的，是计算机语言比较基础知识，这种问题被问到的可能性其实并不大，这样的题目只要花点时间把它记下来就好了，难易程度一般。

**两大类：**

栈：原始数据类型（Undefined，Null，Boolean，Number、String）

堆：引用数据类型（对象、数组和函数）

**区别：**

两种类型的区别是：存储位置不同；

原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；

引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其

在栈中的地址，取得地址后从堆中获得实体

![/images/20220518/2b9ee48c2cfb4ec59e3d312f718d4db1.png][https_img-blog.csdn.net_20161007143531197]

**(****三十一)：谈谈你对this的理解**

**题目点评**

主要考察你对面向对象编程的理解，特别是对象的指向问题，如果连对象的指向都搞不清楚，很难说明你是一个优秀的前端开发人员，所以回答this的知识点是体现你的身价的时候到来了！如果能够回答好这个问题，那么在面试上你是增值的。个人建议，可以先回答this在不同的场合指向的是什么，在来回答什么时候用到this，这样回答的逻辑会比较好。

**this****的指向**

this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写，例如：

this.alert() <=> window.alert()<=> alert();

调用的上下文环境包括**全局**和**局部**

**全局环境**

全局环境就是在<script></script>里面，这里的**this**始终指向的是window对象，

**\[javascript\]** [view plain][view plain 18] [copy][view plain 18]

1.  <script> 
2.   console.log(<strong>**this**</strong>);//指向window对象
3.  </script>

![/images/20220518/00a01c96b4084279864531bbefc9a473.png][https_img-blog.csdn.net_20161007172511031]

**局部环境**

**1****）**在全局作用域下直接调用函数，this指向window

**\[javascript\]** [view plain][view plain 18] [copy][view plain 18]

1.  **function** func()\{ 
2.   console.log(**this**) ;//this指向的还是window对象
3.  \} 
4.  func();

2）对象函数调用，哪个对象调用就指向哪个对象

**\[javascript\]** [view plain][view plain 18] [copy][view plain 18]

1.  <input type="button"id="btnOK" value="OK"> 
2.  <script> 
3.  varbtnOK=document.getElementById("btnOK"); 
4.  btnOK.οnclick=**function**()\{ 
5.  console.log(**this**);//this指向的是btnOK对象
6.  \} 
7.  </script>

3）使用 new 实例化对象，在构造函数中的this指向实例化对象。

**\[javascript\]** [view plain][view plain 18] [copy][view plain 18]

1.  **var** Show=**function**()\{ 
2.  **this**.myName="Mr.Cao"; //这里的this指向的是obj对象
3.  \} 
4.  **var** obj=**new** Show();

4）使用call或apply改变this的指向

**\[javascript\]** [view plain][view plain 18] [copy][view plain 18]

1.  **var** Go=**function**()\{ 
2.  **this**.address="深圳"; 
3.  \} 
4.  **var** Show=**function**()\{ 
5.   console.log(**this**.address);//输出 深圳
6.  \} 
7.  **var** go=**new** Go(); 
8.  Show.call(go);//改变Show方法的this指向go对象

**加分项**

1. 用于区分全局变量和局部变量，需要使用this

**\[javascript\]** [view plain][view plain 18] [copy][view plain 18]

1.  **var** age=20; 
2.  **function** show(age)\{ 
3.  **this**.age=age; 
4.  \}

2.返回函数当前的对象，看jquery1.8.3源码。

![/images/20220518/2797c4fc1c03427eac528e38d1d2c463.png][https_img-blog.csdn.net_20161007172623287]

3.将当前的对象传递到下一个函数，看jquery1.8.3源码。

![/images/20220518/100d52f30aab438492905dd959bd9529.png][https_img-blog.csdn.net_20161007172644803]

**(****三十二)：同步和异步有什么区别？**

## **题目点评** ##

这种问题也不是很复杂，建议在回答的时候最好结合自己的实际项目开发以及自己的理解来回答，这样的效果会比较好，面试上提的问题本来目的就是想考察你是否熟悉，是否有用到过，如果你是结合你的项目来回答问题的，很显然向面试官传递了一个信息就是你是有开发经验的。

## **同步的概念** ##

同步，我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作。

## **异步的概念** ##

异步，是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。在程序中异步处理的结果通常使用回调函数来处理结果。在JavaScript中实现异步的方式主要有Ajax和H5新增的Web Worker。

## **辅助理解（可以不在面试现场上使用）** ##

比方说一个人边吃饭，边看手机，边说话，就是异步处理的方式。

同步处理就不一样了，说话后在吃饭，吃完饭后在看手机，必须等待上一件事完了，才执行后面的事情。

**(****三十三)：谈谈你对模块化开发的理解？**

**题目点评**

主要考察你是否有做过比较复杂、庞大的项目，是否具备一定的编程思想。随着前端技术的发展,前端编写的代码量也越来越大，就需要对代码有很好的管理。目前比较好的开发语言就是OOP（面向对象编程）编程语言，例如java语言、C\#语言。从JavaScript新的版本来看，要求JavaScript具有封装、继承、多态这样的优点需求越来越明显。这道题属于编程思想上范畴。

**什么是模块化**

所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数

**（一）使用函数封装**

**\[javascript\]** [view plain][view plain 19] [copy][view plain 19]

1.  functionfunc1()\{ 
2.  　　　　//...
3.  \} 
4.  functionfunc2()\{ 
5.  　　　　//...
6.  \}

上面的函数func1 ()和func2 ()，组成一个模块。使用的时候，直接调用就行了。这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

**（二）使用对象封装**

为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

**\[javascript\]** [view plain][view plain 19] [copy][view plain 19]

1.  varobj = \{ 
2.   age : 0, 
3.   func1 : **function** ()\{ 
4.  //...
5.   \}, 
6.   func2 : **function** ()\{ 
7.  //...
8.   \} 
9.  \};

上面的函数func1 ()和func2 (），都封装在obj对象里。使用的时候，就是调用这个对象的属性。

obj.func1();

这样做也是有问题的，变量可以被外面随意改变而导致不安全。比如，年龄被修成负数。

obj.age = -100;

如何保证对象的属性不被访问了？

**（三）立即执行函数写法**

使用"立即执行函数"（Immediately-Invoked FunctionExpression，IIFE），可以达到不暴露私有成员的目的。这个也是闭包处理的一种方式。

**\[javascript\]** [view plain][view plain 19] [copy][view plain 19]

1.  **var** oj= (**function**()\{ 
2.  　　　　**var** \_age= 0; 
3.  　　　　**var** func1= **function**()\{ 
4.  　　　　　　//...
5.  　　　　\}; 
6.  　　　　**var** func2= **function**()\{ 
7.  　　　　　　//...
8.  　　　　\}; 
9.  　　　　**return** \{ 
10. 　　　　　　m1 : func1, 
11. 　　　　　　m2 : func2 
12. 　　　　\}; 
13. \})();

使用上面的写法，外部代码无法读取内部的age变量。

console.info(obj.age);//undefined

（四）放大模式

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。在原有的基础上扩展更多的方法。

**\[javascript\]** [view plain][view plain 19] [copy][view plain 19]

1.  **var** obj =(**function** (mod)\{ 
2.  　　　　mod.func3= **function** () \{ 
3.  　　　　　　//...
4.  　　　　\}; 
5.  　　　　returnmod;//方便方法连续调用
6.  \})(obj);

上面的代码为obj模块添加了一个新方法func3 ()，然后返回新的obj模块，方便方法连续调用。如何防止obj为null或underfined的情况了？

**（五）宽放大模式（Loose augmentation）**

在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。

**\[javascript\]** [view plain][view plain 19] [copy][view plain 19]

1.  **var** obj =( **function** (mod)\{ 
2.  　　//...
3.  　　returnmod; 
4.  \})(window.obj|| \{\});//确保对象不为空

与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象，解决了非空问题。

**（六）输入全局变量**

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

**\[javascript\]** [view plain][view plain 19] [copy][view plain 19]

1.  (**function**(window, undefined ) \{ 
2.   …… 
3.  \})(window );

这是jQuery框架的源码，将window对象作为参数传入，这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

目前，通行的JavaScript模块规范共有两种：CommonJS和AMD。关于模块化开发在以后的专题里进行详解。

**(****三十四)：如何实现浏览器内多个标签页之间的通信?**

**题目点评**

本题主要考察数据存储的知识，数据存储有本地和服务器存储两种方式，对于前端开发来讲，只需要讲解用本地存储的方式来解决就好。当然也能知道服务器端的方式更好。本题的难易程度一般，只要能够说出思路就可以，至少说两种解决方法。

解题方法

**方法一：使用localStorage**

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作

**\[javascript\]** [view plain][view plain 20] [copy][view plain 20]

1.  window.addEventListener("storage",**function**(event)\{ 
2.   $("\#name").val(event.key+”=”+event.newValue); 
3.  \}); 
4.

**方法二、使用cookie+setInterval**

HTML代码

**\[html\]** [view plain][view plain 20] [copy][view plain 20]

1.  **<**inputid**inputid**="name"**><input** type="button" id="btnOK"value="发送"**>**

JS代码-页面1

**\[javascript\]** [view plain][view plain 20] [copy][view plain 20]

1.  $(**function**()\{ 
2.   $("\#btnOK").click(**function**()\{ 
3.   varname=$("\#name").val(); 
4.   document.cookie="name="\+name; 
5.   \}); 
6.   \});

JS代码-页面2

**\[javascript\]** [view plain][view plain 20] [copy][view plain 20]

1.  //获取Cookie天的内容
2.  **function** getKey(key) \{ 
3.  **return** JSON.parse("\{\\""\+ document.cookie.replace(/;\\s+/gim,"\\",\\"").replace(/=/gim, "\\":\\"") +"\\"\}")\[key\]; 
4.  \} 
5.  //每隔1秒获取Cookie的内容
6.  setInterval(**function**()\{ 
7.   console.log(getKey("name")); 
8.   \},1000);

**(****三十五)：call() 和 apply() 的区别？**

## **题目点评** ##

本题属于比较一般性的问题，稍有接触的同学都是能够掌握的，先说清楚他们的相同点，方法的作用的，在把它们的差异讲清楚。

解题方法

**相同点**：两个方法产生的作用是完全一样的，都用来改变当前函数调用的对象。

**不同点：**调用的参数不同，比较精辟的总结：

foo.call(this,arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

具体的使用

**1.call****的使用**

语法

call(\[thisObj\[,arg1\[, arg2\[, \[,.argN\]\]\]\]\])

参数

thisObj 可选项。将被用作当前对象的对象。

arg1,arg2, , argN 可选项。将被传递方法参数序列。

说明

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

示例

**\[javascript\]** [view plain][view plain 21] [copy][view plain 21]

1.  <input id="myText"> 
2.  <script> 
3.  **function** Obj() 
4.   \{ 
5.  **this**.value="对象！"; 
6.   \} 
7.   varvalue="global 变量"; 
8.  **function** Fun1(a,b)\{ 
9.   alert(**this**.value); 
10.  \} 
11.  window.Fun1(); //global 变量
12.  Fun1.call(window,1,2); //global 变量
13.  Fun1.call(document.getElementById('myText')); //input text
14.  Fun1.call(**new** Obj()); //对象！
15. </script>

**2.apply()**

apply与call的功能几乎一样，第一个参数意义都一样，只是第二个参数有点不同apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，call从第二个参数开始，依次传值给调用函数的参数

**3.****代码比较**

**\[javascript\]** [view plain][view plain 21] [copy][view plain 21]

1.  **function** print(a, b, c, d)\{ 
2.   alert(a + b + c + d); 
3.  \} 
4.  functionexample(a, b , c , d)\{ 
5.  //用call方式借用print,参数显式打散传递
6.   print.call(**this**, a, b, c, d); 
7.  //用apply方式借用print, 参数作为一个数组传递,
8.  //这里直接用JavaScript方法内本身有的arguments数组
9.   print.apply(**this**, arguments); 
10. //或者封装成数组
11.  print.apply(**this**, \[a, b, c, d\]); 
12. \} 
13. //下面将显示”智学无忧”
14. example("智" , "学" , "无", "忧");

**(****三十六)：\["1", "2", "3"\].map(parseInt) 答案是多少？**

## **题目点评** ##

这道题目要求对ECMAScript5版本的函数比较熟悉才能够正确的解答出来，重点考察的就是map函数，这个函数就是ECMAScript5（最新版本）新增的，在加上parseInt这个函数本身也很难理解，该题目难易程度偏难！

**map****方法的使用**

语法

array.map(callback\[,thisArg\]);

对数组的重新映射。将数组的各个元素依次传入到回调函数callback，回调函数返回的结果依次替换原数组对应的元素。

回调函数callback 会被自动传入三个参数：数组元素，元素索引，原数组本身。

map(function(T=,number=, Array.<T>=))

T:表示元素

number:元素的下标

Array.<T>：表示数组原始值

<T>看到这个越来越感觉JavaScript在向OOP编程语言Java、C\#靠近。个人感想，不由自发，看不懂的可以忽略。

**parseInt()****方法的使用**

语法

parseInt(s,radix)解析一个字符串，并返回一个整数。

参数

s：表示字符串

radix：表示其它进制转十进制的基数，范围在2~36，不在这个范围的返回NaN。该参数可以省略或为0，这种情况会根据字符串的开头来判断基数，规则如下：

1）字符串以"0x" 开头，基数为16

2）字符以"0"开头，版本低于ECMAScript 5的，基数为8。版本为ECMAScript 5的，基数为10

3）以 1 ~ 9 的数字开头，基数为10。

**基数是什么？**

基数：是其它进制转十进制数的公式里的组成部分，公式如下：

**位数1** \* **基数****0**\+**位数2** \* **基数****1**\+ **位数3** \* **基数****2**\+ **位数n** \* **基数****n-1**

以二进制101转十进制为例，二进制的基数为2。（估计看到这里的很多同学几乎晕倒，看不明白了，看不明白的请看视频演示和讲解 http://www.chuanke.com/3885380-190205.html）

101=1\*20+0\*21+1\*22=1+0+4=5

所以 parseInt(“101”,2)返回5

由此我们可以推到出parseInt(“210”,3)的结果

parseInt("210",3)=0\*30+1\*31+2\*32=0+3+18=21

**懵逼了：**2~36进制都是有效的，我们只听过二进制、八进制、十进制、十六进制，三十六进制是什么鬼？请看parseInt函数的详解【任你百度都没有看不懂的，老曹给你做详解便知其奥妙】。

**题目的结果推导**

\["1","2", "3"\].map(parseInt)

\[0\]=parseInt(“1”,0);//1\*100=1\*1=1

\[1\]=parseInt(“2”,1);//radix不在2~36的返回NaN

\[2\]=parseInt(“3”,2);//二进制数没有3，只有0 1 ，所以NaN

**所以最终的结果是 \[1,NaN,NaN\]**

**(****三十七)：eval是做什么的？**

**题目点评**

这题目的看起来比较简单，但是总感觉有没有那么简单，确实是这样子。所以回答这个题目要从不同的角度去回答。首先回答清楚它是干什么的有什么用，然后在谈谈它对作用域的影响，然后就是执行效率的问题，最后谈谈eval()的其它作用。这样答下来自己都觉得满意了吧！

**eval()****的作用**

把字符串参数解析成JS代码并运行，并返回执行的结果；

例如：

**\[javascript\]** [view plain][view plain 22] [copy][view plain 22]

1.  eval("2+3");//执行加运算，并返回运算值。
2.  eval("varage=10");//声明一个age变量

**eval****的作用域**

**\[javascript\]** [view plain][view plain 22] [copy][view plain 22]

1.  functiona()\{ 
2.   eval("var x=1"); //等效于 var x=1;
3.   console.log(x); //输出1
4.  \} 
5.  a(); 
6.  console.log(x);//错误 x没有定义

说明作用域在它所有的范围内容有效

**示例2：**

**\[javascript\]** [view plain][view plain 22] [copy][view plain 22]

1.  functiona()\{ 
2.   window.eval("var x=1"); // 等效于window.x=1;定义了全局变量
3.   console.log(x); //输出1
4.  \} 
5.  a(); 
6.  console.log(x);//输出1

这段代码悲剧了？在IE8及IE8一下的版本就不支持了。

![/images/20220518/810b3ba223a549ec81f5582fc2b0ce04.png][https_img-blog.csdn.net_20161010230524469]

解决方法：

**\[javascript\]** [view plain][view plain 22] [copy][view plain 22]

1.  functiona()\{ 
2.  **if**(window.execScript)\{ // 支持IE8及以下的版本
3.   window.execScript("var x=1"); 
4.   \} 
5.  **else**\{ //常用的浏览器都支持
6.   window.eval("var x=1"); 
7.   \} 
8.   console.log(x); 
9.  \} 
10. a(); 
11. console.log(x);

**注意事项**

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

**其它作用**

由JSON字符串转换为JSON对象的时候可以用eval，例如：

**\[javascript\]** [view plain][view plain 22] [copy][view plain 22]

1.  varjson="\{name:'Mr.CAO',age:30\}"; 
2.  varjsonObj=eval("("\+json+")"); 
3.  console.log(jsonObj);

**(****三十八)：js延迟加载的方式有哪些？**

## **题目点评** ##

主要考察对程序的性能方面是否有研究，程序的性能是一个项目不断地追求的，通常也是项目完成后需要长期做的一件事情，像腾讯QQ依然对程序的性能不断地做优化，让用户的体验更好，性能优化的核心思想就是快，可以预先准备数据（如缓存的使用），可以按需获取，可以分段获取等都是常见的优化手段。

解题思路

## **1.defer 属性** ##

**\[javascript\]** [view plain][view plain 23] [copy][view plain 23]

1.  <scriptsrc="file.js" defer></script>

浏览器会并行下载 file.js和其它有 defer 属性的script，而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了，超过10多年了！Firefox从 3.5 开始支持defer属性 。

**注：**所有的defer脚本保证是**按顺序依次执行**的。

## **2.async 属性** ##

**\[javascript\]** [view plain][view plain 23] [copy][view plain 23]

1.  <scriptsrc="file.js" async></script>

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，**不能保证脚本会按顺序执行**。它们将在onload 事件之前完成。

Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有IE 都支持异步加载。

**3.****动态创建DOM方式**

**\[javascript\]** [view plain][view plain 23] [copy][view plain 23]

1.  <script type="text/javascript"> 
2.  **function** downloadJSAtOnload() \{ 
3.   varelement = document.createElement("script"); 
4.   element.src = "defer.js"; 
5.   document.body.appendChild(element); 
6.   \} 
7.  **if** (window.addEventListener) 
8.   window.addEventListener("load",downloadJSAtOnload, **false**); 
9.  **else** **if** (window.attachEvent) 
10.  window.attachEvent("onload",downloadJSAtOnload); 
11. **else** window.onload =downloadJSAtOnload; 
12. </script>

4.使用Jquery的getScript()方法

**\[javascript\]** [view plain][view plain 23] [copy][view plain 23]

1.  $.getScript("outer.js",**function**()\{ //回调函数，成功获取文件后执行的函数
2.   console.log("脚本加载完成") 
3.  \});

从源码可以看出，这个方法最后还是调用了jQuery.ajax()来请求了js文件的。

**(****三十九)：new操作符具体干了什么呢?**

**题目点评**

考察对new关键的深刻认识，是否对前端知识有专研，如果没有专研的人，肯定说创建了一个对象，恭喜你面试官知道你是小菜鸟来的，这次面试基本上没有太大的希望了。一定要对new过程的4个步骤非常清楚，这样才能深深地抓住面试官的心！

**题目解析**

先看代码

**\[javascript\]** [view plain][view plain 24] [copy][view plain 24]

1.  **var** Func=**function**()\{ 
2.  \}; 
3.  **var** func=**new** Func ();

new共经过了4几个阶段

1、创建一个空对象

**\[javascript\]** [view plain][view plain 24] [copy][view plain 24]

1.  varobj=**new** Object();

2、设置原型链

**\[javascript\]** [view plain][view plain 24] [copy][view plain 24]

1.  obj.\_\_proto\_\_= Func.prototype;

3、让Func中的this指向obj，并执行Func的函数体。

**\[javascript\]** [view plain][view plain 24] [copy][view plain 24]

1.  **var** result =Func.call(obj);

4、判断Func的返回值类型：

如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

**\[javascript\]** [view plain][view plain 24] [copy][view plain 24]

1.  **if** (**typeof**(result) == "object")\{ 
2.   func=result; 
3.  \} 
4.  **else**\{ 
5.   func=obj;; 
6.  \}

**(****四十)：CSS3有哪些新特性？**

**题目点评**

CSS3的特性那么多该从哪里说起了？很显然这道题目是有陷阱的，你不可能将所有的特性一个不漏的说出来，就算你说出来，别人还认为你是背的了！所以你主要讲一下在项目中经常用到的Css3的属性就可以，以第一人称来回答这个问题，例如：在我们的项目中经常用CSS3中的XX属性来实现XX特效。

题目解析

在项目开发中我们采用的CSS3新特性有

**1.CSS3****的选择器**

1）E:last-child 匹配父元素的最后一个子元素E。  
2）E:nth-child(n)匹配父元素的第n个子元素E。  
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

**2. @Font-face** **特性**

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

**\[css\]** [view plain][view plain 25] [copy][view plain 25]

1.  @font-face \{ 
2.  **font-family**: BorderWeb; 
3.  **src**:url(BORDERW0.eot); 
4.   \} 
5.   @font-face \{ 
6.  **font-family**: Runic; 
7.  **src**:url(RUNICMT0.eot); 
8.   \} 
9.   .border \{ FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" \} 
10.  .event \{ FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" \}

淘宝网字体使用

**\[css\]** [view plain][view plain 25] [copy][view plain 25]

1.  @font-face \{ 
2.  **font-family**: iconfont; 
3.  **src**: url(//at.alicdn.com/t/font\_1465189805\_4518812.eot); 
4.  \}

**3.** **圆角**

**\[css\]** [view plain][view plain 25] [copy][view plain 25]

1.  border-radius: 15px;

**4.** **多列布局****（****multi-column layout****）**

**\[html\]** [view plain][view plain 25] [copy][view plain 25]

1.  **<div** class="mul-col"**>**
2.  **<div>**
3.  **<h3>**新手上路**</h3>**
4.  **<p>**新手专区 消费警示 交易安全 24小时在线帮助 免费开店**</p>**
5.  **</div>**
6.  **<div>**
7.  **<h3>**付款方式**</h3>**
8.  **<p>**快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款**</p>**
9.  **</div>**
10. **<div>**
11. **<h3>**淘宝特色**</h3>**
12. **<p>**手机淘宝 旺信 大众评审 B格指南**</p>**
13. **</div>**
14. **</div>**

**\[css\]** [view plain][view plain 25] [copy][view plain 25]

1.  .mul-col\{ 
2.   column-count: 3; 
3.   column-gap: 5px; 
4.   column-rule: 1px solid gray; 
5.   border-radius: 5px; 
6.  **border**:1px solid gray; 
7.  **padding**: 10px ; 
8.  \}

兼容性不好，还不够成熟。还不能用在实际项目中。

**5.****阴影（****Shadow****）**

**\[css\]** [view plain][view plain 25] [copy][view plain 25]

1.  .class1\{ 
2.  **text-shadow**:5px 2px 6px rgba(64, 64, 64, 0.5); 
3.  \}

![/images/20220518/278dbdb99ee4402e98dd7361ba076162.png][http_images2015.cnblogs.com_blog_204255_201610_204255-20161012162130796-474707361.png]

OPPO官网的阴影特效[ http://www.oppo.com/cn/products.html][http_www.oppo.com_cn_products.html]

**6.CSS3** **的渐变效果**

**\[css\]** [view plain][view plain 25] [copy][view plain 25]

1.  **background-image**:-webkit-gradient(linear,0% 0%,100% 0%,from(\#2A8BBE),to(\#FE280E));

这里 linear 表示线性渐变，从左到右，由蓝色（\#2A8BBE）到红色（\#FE280E）的渐变。效果图如下：

![/images/20220518/b8f9b70fcd9e4d17b56e82b468fb23ee.png][http_images2015.cnblogs.com_blog_204255_201610_204255-20161012172401921-1071175423.png]

**7.css****弹性盒子模型**

**\[html\]** [view plain][view plain 25] [copy][view plain 25]

1.  **<div** class="boxcontainer"**>**
2.  **<div** class="item"**>**1**</div>**
3.  **<div** class="item"**>**2**</div>**
4.  **<div** class="item"**>**3**</div>**
5.  **<div** class="item"**>**4**</div>**
6.  **</div>**
7.  .boxcontainer \{ 
8.   width: 1000px; 
9.   display: -webkit-box; 
10.  display: -moz-box; 
11.  \-webkit-box-orient: horizontal; 
12.  \-moz-box-orient: horizontal; 
13. \} 
14. 
15.  .item \{ 
16.  background: \#357c96; 
17.  font-weight: bold; 
18.  margin: 2px; 
19.  padding: 20px; 
20.  color: \#fff; 
21.  font-family: Arial, sans-serif; 
22. \}

效果图

![/images/20220518/b163da624e814adf8d2de6028db826ee.png][http_images2015.cnblogs.com_blog_204255_201610_204255-20161012172651140-1667867721.png]

**8. CSS3****制作特效**

**1) Transition** **对象变换时的过渡效果**

*   transition-property 对象参与过渡的属性
 *   transition-duration 过渡的持续时间
 *   transition-timing-function 过渡的类型
 *   transition-delay 延迟过渡的时间

**缩写方式：**

**\[css\]** [view plain][view plain 25] [copy][view plain 25]

1.  transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

**拆分方式：**

**\[css\]** [view plain][view plain 25] [copy][view plain 25]

1.  transition-property:border-color, background-color, color; 
2.  transition-duration:.5s, .5s, .5s; 
3.  transition-timing-function:ease-in, ease-in, ease-in; 
4.  transition-delay:.1s, .1s, .1s;

**示例代码**

**\[html\]** [view plain][view plain 25] [copy][view plain 25]

1.  **<style** type="text/css"**>**
2.   .main\{ 
3.   position: relative; 
4.   margin: 0 auto; 
5.   height:45px; 
6.   width: 300px; 
7.   background-color:lightgray; 
8.   transition:background-color .6s ease-in 0s; 
9.   \} 
10.  .main:hover\{ 
11.  background-color: dimgray; 
12.  \} 
13. **</style>**
14. **<div** class="main"**></div>**

**效果显示**

![/images/20220518/33680d30a7554a97949928ff0003e9bd.png][https_img-blog.csdn.net_20161012184459150]

**2) Transforms 2D****转换效果**

主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）

**\[html\]** [view plain][view plain 25] [copy][view plain 25]

1.  **<style** type="text/css"**>**
2.   .main\{ 
3.   position: relative; 
4.   top:200px; 
5.   margin: 0 auto; 
6.   height:45px; 
7.   width: 300px; 
8.   background-color:dimgray; 
9.   transition:transform .6s ease 0s; 
10.  transform: rotate(0deg); 
11.  \} 
12.  .main:hover\{ 
13.  transform: rotate(180deg); 
14.  \} 
15. **</style>**
16. **<div** class="main"**></div>**

**效果显示**

![/images/20220518/38f8c52ae9394128ad39b100223ab947.png][https_img-blog.csdn.net_20161012184104224]

**3) Animation****动画特效**

**代码比较多不想解释了，要想弄明白看视频吧！****（**[http://www.chuanke.com/3885380-190205.html][http_www.chuanke.com_3885380-190205.html]**）**

**\[html\]** [view plain][view plain 25] [copy][view plain 25]

1.  **<style** type="text/css"**>**
2.   .main\{ 
3.   position: absolute; 
4.   left: 10px; 
5.   top:200px; 
6.   height:45px; 
7.   width: 300px; 
8.   background-color:cadetblue; 
9.   \} 
10.  .main:hover\{ 
11.  animation: animations 2s ease 0s; 
12.  \} 
13.  @keyframes animations \{ 
14.  0%\{ 
15.  left: 10px; 
16.  opacity: 1; 
17.  \} 
18.  50%,70%\{ 
19.  left: 50%; 
20.  opacity: .7; 
21.  margin-left:-150px; 
22.  \} 
23.  100%\{ 
24.  left: 100%; 
25.  opacity: 0; 
26.  margin-left:-300px; 
27.  \} 
28.  \} 
29. **</style>**
30. **<div** class="main"**></div>**

**效果显示**

**(****四十一)：html5有哪些新特性、移除了那些元素？**

## **题目点评** ##

题目涉及到范围非常的大，如果要面面俱到显然半天都答不完，可以先罗列出H5的一些新特性，不要回答那么具体，等面试官提具体的问题，所以在面试之前也要把这里的技术过一遍，至少每个技术也要做个小程序出来体验一下。

## **（一）.H5新特性** ##

增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

**1)** **绘画 canvas;**

类似windows自带的画图板，可绘制线、框、路径、图……，InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

画图需要的要素

a) 笔，用笔可以画线、圆、矩形、文本等

b) 颜色

c) 画板

由于画布案例比较多，代码比较复杂，请看视频学习[http://www.chuanke.com/3885380-190205.html][http_www.chuanke.com_3885380-190205.html]

**2)** **本地离线存储 localStorage**

长期存储数据，浏览器关闭后数据不丢失;

1.特点

数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串。

2.数据存取方式

**\[javascript\]** [view plain][view plain 26] [copy][view plain 26]

1.  localStorage.a = 3;//设置a为"3"
2.  localStorage\["a"\] = "sfsf";//设置a为"sfsf"，覆盖上面的值
3.  localStorage.setItem("b","isaac");//设置b为"isaac"
4.  **var** a1 = localStorage\["a"\];//获取a的值
5.  **var** a2 = localStorage.a;//获取a的值
6.  **var** b = localStorage.getItem("b");//获取b的值
7.  **var** b2= localStorage.key(0);//获取第一个key的内容
8.  localStorage.removeItem("c");//清除c的值
9.  localStorage.clear();//清除所有的数据

推荐使用：

getItem()

setItem()

removeItem()

3.事件监听

**\[javascript\]** [view plain][view plain 26] [copy][view plain 26]

1.  **if**(window.addEventListener)\{ 
2.   window.addEventListener("storage",handle\_storage,**false**);//
3.  \}**else** **if**(window.attachEvent)\{ //兼容IE
4.   window.attachEvent("onstorage",handle\_storage); 
5.  \} 
6.  **function** handle\_storage(e)\{ 
7.   \}

对象e为localStorage对象，Chrome、Firefox支持差，IE支持较好。

**3) sessionStorage**的数据在浏览器关闭后自动删除;操作参考localStorage

**4)** 用于媒介回放的 **video和 audio** 元素;

**5)** 语意化更好的内容元素，比如**article、footer、header、nav、section;**

**6)**  表单控件，**calendar、date、time、email、url、search;**

**7)** 新的技术**webworker**(专用线程)

**8) websocket**socket通信

**9) Geolocation** 地理定位

**（二）移除的元素**

纯表现的元素

*   <basefont> 默认字体，不设置字体，以此渲染
 *   <font> 字体标签
 *   <center> 水平居中
 *   <u> 下划线
 *   <big> 大字体
 *   <strike> 中横线
 *   <tt> 文本等宽

框架集

*   <frameset>
 *   <noframes>
 *   <frame>

**(****四十二)：如何在页面上实现一个圆形的可点击区域？**

## **题目点评** ##

这道题目是比较开放的题目，答案显然是不只一个的，考察你的应变能力，要能拿出多几个解决方案，获取面试官的芳心。以下给大家讲解三种解决方案。

解决方法

**1. map+area**

**\[html\]** [view plain][view plain 27] [copy][view plain 27]

1.  **<img** src="t.jpg" width="1366" height="768" border="0" usemap="\#Map" **/>**
2.  **<map** name="Map" id="Map"**>**
3.  **<area** shape="circle" coords="821,289,68" href="www.baidu.com" target="\_blank" **/>**
4.  **</map>**

![/images/20220518/4daefc324eef4d1299ac15e319090708.png][https_img-blog.csdn.net_20161013190301554]

使用Dreamweaver制作热点会变得非常的容易，最终会形成上面的代码，具体的操作，可以参考视频，http://www.chuanke.com/3885380-190205.html。

**2. border-radius****（H5）**

**\[html\]** [view plain][view plain 27] [copy][view plain 27]

1.  **<style>**
2.   .disc\{ 
3.   width:100px; 
4.   height:100px; 
5.   background-color:dimgray; 
6.   border-radius: 50%; 
7.   cursor: pointer; 
8.   position: absolute; 
9.   left:50px; 
10.  top:50px; 
11.  line-height: 100px; 
12.  text-align: center; 
13.  color: white; 
14.  \} 
15. **</style>**
16. **<div** class="disc"**>**智学无忧**</div>**

运行效果  
![/images/20220518/2ac013a8fccc429994c3c5f5c8ff4190.png][https_img-blog.csdn.net_20161013190338210]  
  
**3.** **纯js实现**   
需要求一个点在不在圆上简单算法、获取鼠标坐标等等  
两点之间的距离计算公式

上面公式对于JavaScript代码如下：

![/images/20220518/9a2b5b3b8d7b49ee95df5e0b0667e825.png][https_img-blog.csdn.net_20161013190403664]  
|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))  
Math.abs()求绝对值  
Math.pow(底数,指数)  
Math.sqrt()求平方根  
**示例：**  
假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息

**\[javascript\]** [view plain][view plain 27] [copy][view plain 27]

1.  document.οnclick=**function**(e)\{ 
2.  **var** r=50;//圆的半径
3.  **var** x1=100,y1=100,x2= e.clientX;y2= e.clientY; 
4.  //计算鼠标点的位置与圆心的距离
5.  **var** len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2))); 
6.  **if**(len<=50)\{ 
7.   console.log("内") 
8.   \}**else**\{ 
9.   console.log("外") 
10.  \} 
11.  \}

**(****四十三)：请描述一下 cookies，sessionStorage 和 localStorage 的区别？**

## **题目点评** ##

这是一种对比性比较强的问题，可以先说他们的相同点，然后就是要详细阐述他们的不同点，而不同点不要刻意去对比，只要说出各自的特点，自然他们的不同点就出来了。  
解决方法  
**相同点：**都存储在客户端  
**不同点：**

1.存储大小

*  cookie数据大小不能超过4k。
 *  sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

*  localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
 *  sessionStorage 数据在当前浏览器窗口关闭后自动删除。
 *  cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

*  cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
 *  sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

**----------------------------------------------------------------------------------------------------------------------------------------**

**额外拓展【加分项】：**Cookie的操作（有点小难度）防止面试官细问cookie的操作。

**设置Cookie**

**cookie****的几个要素**

cookie的内容：采用 key=value;key=value……存储，参数名自定义

cookie的过期时间：使用参数expires

cookie的路径：使用参数path，"/"表示这个网站的页面，不推荐!容易产生冲突

**注意：**形如“/pro/index.html”路径，在google浏览器正常，在IE浏览器得不到值

**cookie****的表示方式示例**

**\[javascript\]** [view plain][view plain 28] [copy][view plain 28]

1.  **var** name = "jack"; 
2.  **var** pwd = "123"; 
3.  **var** now = **new** Date(); 
4.  now.setTime(now.getTime() +1 \* 24 \* 60 \* 60 \* 1000);//转毫秒
5.  **var** path = "/";//可以是具体的网页
6.  document.cookie = "name=" \+ name + ";expires=" \+ now.toUTCString() + ";path=" \+ path;//姓名
7.  document.cookie= "pwd=" \+ pwd + ";expires=" \+ now.toUTCString()+ ";path=" \+ path; //密码

**读取cookie**

获取cookie内容

**\[html\]** [view plain][view plain 28] [copy][view plain 28]

1.  vardata=document.cookie;//获取对应页面的cookie

解析cookie

方式1：截取字符串

**\[javascript\]** [view plain][view plain 28] [copy][view plain 28]

1.  **function** getKey(key) \{ 
2.  **var** data = document.cookie; 
3.  **var** findStr = key + "="; 
4.  //找到key的位置
5.  **var** index = data.indexOf(findStr); 
6.  **if** (index == -1) 
7.  **return** **null**; 
8.  **var** subStr = data.substring(index +findStr.length); 
9.  **var** lastIndex = subStr.indexOf(";"); 
10. **if** (lastIndex == -1) \{ 
11. **return** subStr; 
12.  \} **else** \{ 
13. **return** subStr.substring(0,lastIndex); 
14.  \} 
15. \}

方式2：使用正则表达式+JSON

**\[javascript\]** [view plain][view plain 28] [copy][view plain 28]

1.  **function** getKey(key) \{ 
2.  **return** JSON.parse("\{\\"" \+document.cookie.replace(/;\\s+/gim, "\\",\\"").replace(/=/gim, "\\":\\"") + "\\"\}")\[key\]; 
3.  \}

**清除cookie**

**\[javascript\]** [view plain][view plain 28] [copy][view plain 28]

1.  **var** name = **null**; 
2.  **var** pwd = **null**; 
3.  **var** now = **new** Date(); 
4.  **var** path = "/";//可以是具体的网页
5.  document.cookie= "name=" \+ name + ";expires=" \+ now.toUTCString()+ ";path=" \+ path;//姓名
6.  document.cookie = "pwd=" \+ pwd + ";expires=" \+ now.toUTCString()+ ";path=" \+ path; //密码

**(****四十四)：什么是响应式开发？**

## **题目点评** ##

响应式开发是前端开发工作比较常见的工作内容，随着移动端的发展，网页设计必须考虑到移动端的设计，同一个网站为了兼容PC端和移动端显示，响应式开发是前端开发人员必备的技术，所以响应式开发的技术必须掌握。

## **什么是响应式** ##

顾名思义，同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格。

![/images/20220518/e0e6f1563b1a4c1799958ea5df8dba99.png][https_img-blog.csdn.net_20161018214205722]

## **需要用到的技术** ##

1. Media Query（媒体查询）

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。

2. 使用em或rem做尺寸单位

用于文字大小的响应和弹性布局。

3. 禁止页面缩放

**\[html\]** [view plain][view plain 29] [copy][view plain 29]

1.  **<meta** name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" **/>**

4. 屏幕尺寸响应

a) 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。

b) 流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。

c) 自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

d) 栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。

## **响应式设计注意事项**  ##

1.宽度不固定，可以使用百分比

**\[css\]** [view plain][view plain 29] [copy][view plain 29]

1.  \#head\{ **width**:100%;\} 
2.  \#content\{ **width**:50%;\}

2. 图片处理

图片的宽度和高度设置等比缩放，可以设置图片的width为百分比，height:auto;

背景图片可以使用background-size 指定背景图片的大小。

**(****四十五)：页面渲染原理是什么？**

## **题目点评** ##

这是一道纯理论的题目，只要能够将浏览器的渲染过程很专业的表述出来，一定会得到面试官的青睐，作为一枚前端人员确实有必要了解一下浏览器的渲染过程是怎样的，对于页面性能的提升是有帮助的。

## **解题思路** ##

渲染引擎是干什么的  
渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件可以显示PDF格式。

## **题目点评** ##

页面优化的方法非常多，最好能够对这些优化方案进行分类，这些方案最好能够结合实际开发遇到的问题来表述。

优化的方案

## **渲染引擎** ##

不同的浏览器有不同的渲染引擎，对于渲染引擎的使用总结如下：  
Trident(MSHTML)内核：IE,MaxThon,TT,The World,360,搜狗浏览器等  
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等  
Presto内核：Opera7及以上  
Webkit内核：Safari,Chrome等

## **渲染主流程** ##

渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程：

![/images/20220518/c6d3072011374690a8e06f08a71225b6.png][https_img-blog.csdn.net_20161026094928925_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQv_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast]  
  
  
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树  
  
步骤详细解释  
第一步：渲染引擎开始解析html，根据标签构建DOM节点  
第二步：根据css样式构建渲染树，包括元素的大小、颜色，隐藏的元素不会被构建到该树中。  
第三步：根据css样式构建布局树，主要是确定元素要显示的位置。  
第四步：根据前面的信息，绘制渲染树。

**(****四十六)：你了解跨域请求吗？**

## **题目点评** ##

主要考察对web安全是否有接触 ，关于安全方面的在面试时是经常被问到的。同一个意思可能问法也不同，比如说：“你对跨域了解吗？”“什么是跨域请求了？”其实都是同一个意思，回答思路可以先回答什么是跨域请求，有什么方式可以实现跨域请求基本上就可以了。

## **（一）JSONP** ##

情景：网站http://localhost:63342/ 页面要请求http://localhost:3000/users/userlist 页面，userlist页面返回json字符串格，如下图：

![/images/20220518/998032bfb5aa4c9c8a8163851d4f9fa5.png][https_img-blog.csdn.net_20161027164924718]

端口号为63342网站的一个页面index.html通过ajax请求url http://localhost:3000/users/userlist ，这个明显的出现了跨域请求，因为端口号不一样。请求时发生的错误如下：

![/images/20220518/3b15fc1323eb4705a7a6c99167638e40.png][https_img-blog.csdn.net_20161027165032127]

解决方式，采用JSONP方式来请求  
index.html

**\[javascript\]** [view plain][view plain 30] [copy][view plain 30]

1.  <script> 
2.   $.ajax(\{ 
3.   url:"http://localhost:3000/users/userlist", 
4.   type:"get", 
5.   dataType:"jsonp", 
6.   success:**function**(e)\{ 
7.   console.log(e); 
8.   \} 
9.   \}); 
10. </script>

Node.js 服务器代码

**\[javascript\]** [view plain][view plain 30] [copy][view plain 30]

1.  router.get("/userlist", **function** (req, res, next) \{ 
2.  **var** callback=req.query\["callback"\]; 
3.  **var** user = \{name: 'Mr.Cao', gender: 'male', career: 'IT Education'\}; 
4.   res.write(callback+"("\+ JSON.stringify(user)+")"); 
5.   res.end(); 
6.  \});

成功请求的结果

![/images/20220518/beeafb78a7014163a45d6cc99a57b31b.png][https_img-blog.csdn.net_20161027165117456]

缺点：  
1、这种方式无法发送post请求  
有点  
1.使用比较方便  
2.很多大型的网站也是采用这种方式

**（二）在服务器端设置同源策略地址**

**\[javascript\]** [view plain][view plain 30] [copy][view plain 30]

1.  router.get("/userlist", **function** (req, res, next) \{ 
2.  **var** user = \{name: 'Mr.Cao', gender: 'male', career: 'IT Education'\}; 
3.   res.writeHeader(200,\{ "Access-Control-Allow-Origin":'http://localhost:63342'\}); 
4.   res.write(JSON.stringify(user)); 
5.   res.end(); 
6.  \});

在响应头上添加Access-Control-Allow-Origin属性，指定同源策略的地址。同源策略默认地址是网页的本身。

![/images/20220518/7636f85322e24727805733a99cde4ce6.png][https_img-blog.csdn.net_20161027165300846]

缺点  
1.目前IE浏览器的老版本还不支持

**（三）H5新特性postMessage**  
发送信息页面 http://localhost:63342/index.html

**\[html\]** [view plain][view plain 30] [copy][view plain 30]

1.  **<html** lang="en"**>**
2.  **<head>**
3.  **<meta** charset="UTF-8"**>**
4.  **<title>**跨域请求**</title>**
5.  **</head>**
6.  **<body>**
7.  **<iframe** src="http://localhost:3000/users/reg" id="frm"**></iframe>**
8.  **<input** type="button" value="OK" onclick="run()"**>**
9.  **</body>**
10. **</html>**
11. **<script>**
12.  function run()\{ 
13.  var frm=document.getElementById("frm"); 
14.  frm.contentWindow.postMessage("跨域请求信息：智学无忧IT教育","http://localhost:3000"); 
15.  \} 
16. **</script>**

接收信息页面 http://localhost:3000/message.html

**\[javascript\]** [view plain][view plain 30] [copy][view plain 30]

1.  window.addEventListener("message",**function**(e)\{ 
2.   console.log(e.data); 
3.   \},**false**);

**(****四十七)：页面优化有哪些方法**

## **一、减少操作量** ##

1.  尽量减少 HTTP 请求  
    1) 合并文件，比如把多个 CSS 文件合成一个；  
    2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位； 
2.  不要在 HTML 中使用缩放图片  
    缩放图片并没有减少图片的容量，只是控制了图片的大小。
3.  Image压缩  
    使用工具对图片进行压缩，保证质量的同时减少了图片的大小。
4.  减少对DOM的操作  
    减少对DOM的操作，减少页面的重绘。

## **二、提前做加载操作** ##

1.  对域名进行预解析  
    例如京东的做法  
    <link rel="dns-prefetch" href="//misc.360buyimg.com" />   
    
2.  预载入组件或延迟载入组件  
    
3.  把 CSS 放到代码页上端  
    CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。  
    
4.  使用 new Image对象，对图片进行缓存

## **三、提升并行加载** ##

切分组件到多个域 ，提升服务器的响应能力

## **四、JavaScript和CSS优化** ##

1.  从页面中剥离 JavaScript 与 CSS  
    剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。  
    
2.  精简 JavaScript 与 CSS  
    使用工具压缩JavaScript和CSS文件
3.  脚本放到 HTML 代码页底部  
    减少对页面的阻塞。

## **五、异步加载** ##

使用Ajax实现异步加载，例如，滚动页面加载后面的内容，这种也比较常见。

**(****四十八)：谈谈浏览器的兼容性**

**题目点评**

这个问题是非常抽象的，越是抽象的问题越能表现出我们的表达能力，而面试官就喜欢根据你的回答来追问，不断地打断你的思路，这个时候不要慌，一定要坚信自己。  
  
**回答思路**  
  
我们在开发的时候会明确项目要兼容哪些浏览器的最低版本，我之前的项目要求兼容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。有了这些最基本的要求，在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了  
  
**（一）html部分**  
  
1.H5新标签在IE9以下的浏览器识别

<!--\[if lt IE 9\]>

<!\[endif\]\-->

html5shiv.js下载地址

[https://github.com/aFarkas/html5shiv/releases][https_github.com_aFarkas_html5shiv_releases]  
  
2.ul标签内外边距问题ul标签在IE6\\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0  
  
**（二）CSS样式的兼容性**   
  
1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同  
IE的条件注释hack：  
  
  
  
2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍  
解决办法：display:block;  
  
3.IE6下图片的下方有空隙  
解决方法：给img设置display:block;  
  
4.IE6下两个float之间会有个3px的bug  
解决办法：给右边的元素也设置float:left;  
  
5.IE6下没有min-width的概念，其默认的width就是min-width  
  
6.IE6下在使用margin:0 auto;无法使其居中  
解决办法：为其父容器设置text-align:center;  
  
7.被点击过后的超链接不再具有hover和active属性  
解决办法:按lvha的顺序书写css样式，  
":**l**ink": a标签还未被访问的状态；  
":**v**isited": a标签已被访问过的状态；  
":**h**over": 鼠标悬停在a标签上的状态；  
":**a**ctive": a标签被鼠标按着时的状态；  
  
8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序  
  
9.IE6下无法设置1px的行高，原因是由其默认行高引起的  
解决办法：为期设置overflow:hidden;或者line-height:1px;  
  
**（三）JavaScript的兼容性**  
  
1.标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；  
  
2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准  
  
3.window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement  
  
4.在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。  
比如：var year= new Date().getYear();  
  
5.ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject  
  
6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同  
其他浏览器：parentNode parentNode.childNodes  
IE：parentElement parentElement.children

**(****四十九)：web前端项目的结构是怎样的？文件有哪些命名规范？**

**项目结构规范**

页面文件：以项目名命名，例如：shop

js文件：命名为js

css文件：命名为css

图片文件：命名为images

数据文件：命名为data

文件存储规范：按项目模块分类存储，例如：用户信息管理

页面文件存放： shop/userinfo/userlist.html

js文件：js/userinfo/userlist.js

css样式：css/userinfo/userlist.css

注意：图片的分类一般按照功能作用划分，比如： 小图标、动画图片

动画图片：images/gif/…

图标库：images/flags/…

**项目文件命名规范**

页面/js/css文件规范：项目名称\-模块名称\-页面名称，例如：shop-user-index.html用户模块的首页。

注意：js一般会包含 公共js 习惯命名commo.js；css样式会包含公共css，习惯命名为 common.css，

**(****五十)：CSS样式书写有哪些规范？**

**一、****CSS****书写顺序**

1.位置属性(position, top, right,z-index, display, float等)

2.大小(width, height, padding,margin)

3.文字系列(font, line-height,letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

![/images/20220518/6e17aa3bd1c145d99236ec1b098fcd9f.png][https_img-blog.csdn.net_20161102090105959]

**二、****CSS****书写规范**

1.使用CSS缩写属性

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

![/images/20220518/fce559d71e6244bcb3312925ec4fda9b.png][https_img-blog.csdn.net_20161102090145149]

2.去掉小数点前的“0”

![/images/20220518/a560c70a447a4ee4886e49daa7682114.png][https_img-blog.csdn.net_20161102090216228]

3.简写命名

很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！

![/images/20220518/aed0e61657e34a929f4e833715bf2853.png][https_img-blog.csdn.net_20161102090243650]

4.16进制颜色代码缩写

有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。

![/images/20220518/b3cb807ae3c34d659dfc2520306b40b6.png][https_img-blog.csdn.net_20161102090312663]

5连字符CSS选择器命名规范

1）长名称或词组可以使用中横线来为选择器命名。

2）不建议使用“\_”下划线来命名CSS选择器，为什么呢？

输入的时候少按一个shift键；浏览器兼容问题（比如使用\_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用“\_”）

6.不要随意使用id

id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

![/images/20220518/eb5ac05ee16042598d085d191d83f1c5.png][https_img-blog.csdn.net_20161102090341601]

7.为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。

![/images/20220518/409c11ea31394b7fae6c6ab2b9e419c7.png][https_img-blog.csdn.net_20161102090409789]

**三、****CSS****命名规范**

<table> 
 <tbody> 
  <tr> 
   <td colspan="3" style="background-color:#ffffff;border-color:#dddddd;width:431.25pt;"> <p style="margin-left:0cm;"><span style="color:#c00000;">常用的CSS命名规则</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">头：header</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">内容：content/container</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">尾：footer</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">导航：nav</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">侧栏：sidebar</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">栏目：column</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">页面外围控制整体佈局宽度：wrapper</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">左右中：left right center</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">登录条：loginbar</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">标志：logo</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">广告：banner</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">页面主体：main</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">热点：hot</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">新闻：news</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">下载：download</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">子导航：subnav</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">菜单：menu</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">子菜单：submenu</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">搜索：search</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">友情链接：friendlink</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">页脚：footer</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">版权：copyright</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">滚动：scroll</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">内容：content</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">标签：tags</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">文章列表：list</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">提示信息：msg</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">小技巧：tips</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">栏目标题：title</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">加入：joinus</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">指南：guide</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">服务：service</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">注册：regsiter</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">状态：status</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">投票：vote</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">合作伙伴：partner</span></p> </td> 
  </tr> 
  <tr> 
   <td colspan="3" style="background-color:#f7f7f7;border-color:#dddddd;width:431.25pt;"> <p style="margin-left:0cm;"><span style="color:#c00000;">ID</span><span style="color:#c00000;">的命名</span><span style="color:#4f4f4f;">-</span><span style="color:#c00000;">页面结构</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">容器: container</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">页头：header</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">内容：content/container</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">页面主体：main</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">页尾：footer</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">导航：nav</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">侧栏：sidebar</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">栏目：column</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">页面外围控制整体佈局宽度：wrapper</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">左右中：left right center</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td colspan="3" style="background-color:#ffffff;border-color:#dddddd;width:431.25pt;"> <p style="margin-left:0cm;"><span style="color:#c00000;">ID</span><span style="color:#c00000;">的命名</span><span style="color:#4f4f4f;">-</span><span style="color:#c00000;">导航</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">导航：nav</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">主导航：mainnav</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">子导航：subnav</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">顶导航：topnav</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">边导航：sidebar</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">左导航：leftsidebar</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">右导航：rightsidebar</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">菜单：menu</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">子菜单：submenu</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">标题: title</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">摘要: summary</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td colspan="3" style="background-color:#f7f7f7;border-color:#dddddd;width:431.25pt;"> <p style="margin-left:0cm;"><span style="color:#c00000;">ID</span><span style="color:#c00000;">的命名</span><span style="color:#4f4f4f;">-</span><span style="color:#c00000;">功能</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">标志：logo</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">广告：banner</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">登陆：login</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">登录条：loginbar</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">注册：register</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">搜索：search</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">功能区：shop</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">标题：title</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">加入：joinus</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">状态：status</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">按钮：btn</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">滚动：scroll</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">标签页：tab</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">文章列表：list</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">提示信息：msg</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">当前的: current</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">小技巧：tips</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">图标: icon</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">注释：note</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">指南：guild</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">服务：service</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">热点：hot</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">新闻：news</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">下载：download</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">投票：vote</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">合作伙伴：partner</span></p> </td> 
   <td style="background-color:#ffffff;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">友情链接：link</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:144pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">版权：copyright</span></p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="background-color:#f7f7f7;width:144pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

**四、注释规范**

/\* Header \*/

内容区

/\* End Header \*/

**五、注意事项**

1.一律小写;

2.尽量用英文;

3.尽量不缩写，除非一看就明白的单词。

**六、****CSS****样式表文件命名**

<table style="margin-left:13.95pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:143.25pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">主要的&nbsp;master.css</span></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:136.5pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">模块&nbsp;module.css</span></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:137.25pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">基本共用&nbsp;base.css</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:143.25pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">布局、版面&nbsp;layout.css</span></p> </td> 
   <td style="background-color:#f7f7f7;width:136.5pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">主题&nbsp;themes.css</span></p> </td> 
   <td style="background-color:#f7f7f7;width:137.25pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">专栏&nbsp;columns.css</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:143.25pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">文字&nbsp;font.css</span></p> </td> 
   <td style="background-color:#ffffff;width:136.5pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">表单&nbsp;forms.css</span></p> </td> 
   <td style="background-color:#ffffff;width:137.25pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">补丁&nbsp;mend.css</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;width:143.25pt;"> <p style="margin-left:0cm;"><span style="color:#4f4f4f;">打印&nbsp;print.css</span></p> </td> 
   <td style="background-color:#f7f7f7;width:136.5pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="background-color:#f7f7f7;width:137.25pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

#  **(五十一)：javascript的编写规范有哪些？** #

## **什么是跨域请求** ##

基于JavaScript的安全，JavaScript同源策略要求一个网站不能调用其它网站的js对象。构成跨域的条件就是一个页面的URL协议、域名、端口与另一个页面的URL只要有一个不同就构成了跨域请求。为了辅助大家的理解，看下面的表格就是知道是什么意思了！

<table> 
 <tbody> 
  <tr> 
   <td style="background-color:#dee7ec;border-color:#dddddd;"> <p style="margin-left:0cm;"><strong><span style="color:#4f4f4f;">URL</span></strong></p> </td> 
   <td style="background-color:#dee7ec;border-color:#dddddd;"> <p style="margin-left:0cm;"><strong><span style="color:#4f4f4f;">说明</span></strong></p> </td> 
   <td style="background-color:#dee7ec;border-color:#dddddd;"> <p style="margin-left:0cm;"><strong><span style="color:#4f4f4f;">是否允许通信</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/a.js<br> http://www.a.com/b.js</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#333333;">同一域名下</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#333333;">允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/lab/a.js<br> http://www.a.com/script/b.js</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#333333;">同一域名下不同文件夹</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#333333;">允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com:8000/a.js<br> http://www.a.com/b.js</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#333333;">同一域名，不同端口</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/a.js<br> https://www.a.com/b.js</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#333333;">同一域名，不同协议</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/a.js<br> http://70.32.92.74/b.js</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#333333;">域名和域名对应ip</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/a.js<br> http://script.a.com/b.js</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#333333;">主域相同，子域不同</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f7f7f7;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/a.js<br> http://a.com/b.js</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#333333;">同一域名，不同二级域名（同上）</span></p> </td> 
   <td style="background-color:#f7f7f7;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许（cookie这种情况下也不允许访问）</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.cnblogs.com/a.js<br> http://www.a.com/b.js</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#333333;">不同域名</span></p> </td> 
   <td style="background-color:#ffffff;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许</span></p> </td> 
  </tr> 
 </tbody> 
</table>

特别注意两点：  
第一：如果是协议和端口造成的跨域问题“前台”是无能为力的，  
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。  
“URL的首部”可以理解为“协议, 域名 和 端口 必须匹配”。  
  
  
解决跨域请求的方式

### **全局命名空间污染与 IIFE** ###

总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。

IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **var** x = 10, 
2.   y = 100; 
3.  
4.  // Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
5.  // will be stored in the window object. This is very unclean and needs to be avoided.
6.  console.log(window.x + ' ' \+ window.y);

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  / We declare a IIFE and pass parameters into the **function** that we will use from the global space 
2.  (**function**(log, w, undefined)\{ 
3.  'use strict'; 
4.  
5.  **var** x = 10, 
6.   y = 100; 
7.  
8.  // Will output 'true true'
9.   log((w.x === undefined) + ' ' \+ (w.y === undefined)); 
10. 
11. \}(window.console.log, window));

### **IIFE（立即执行的函数表达式）** ###

无论何时，想要创建一个新的封闭的定义域，那就用 IIFE。它不仅避免了干扰，也使得内存在执行完后立即释放。

所有脚本文件建议都从 IIFE 开始。

立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**()\{\})();

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**()\{\}());

so，用下列写法来格式化你的 IIFE 代码：

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**()\{ 
2.  'use strict'; 
3.  
4.  // Code goes here
5.  
6.  \}());

如果你想引用全局变量或者是外层 IIFE 的变量，可以通过下列方式传参：

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**($, w, d)\{ 
2.  'use strict'; 
3.  
4.   $(**function**() \{ 
5.   w.alert(d.querySelectorAll('div').length); 
6.   \}); 
7.  \}(jQuery, window, document));

### **严格模式** ###

ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮，运行的也更加快速。

严格模式会阻止使用在未来很可能被引入的预留关键字。

你应该在你的脚本中启用严格模式，最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式，这有可能会引发一些第三方类库的问题。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  // Script starts here
2.  'use strict'; 
3.  
4.  (**function**()\{ 
5.  
6.  // Your code starts here
7.  
8.  \}());

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**()\{ 
2.  'use strict'; 
3.  
4.  // Your code starts here
5.  
6.  \}());

### **变量声明** ###

总是使用 `var` 来声明变量。如不指定 var，变量将被隐式地声明为全局变量，这将对变量难以控制。如果没有声明，变量处于什么定义域就变得不清（可以是在 Document 或 Window 中，也可以很容易地进入本地定义域）。所以，请总是使用 var 来声明变量。

采用严格模式带来的好处是，当你手误输入错误的变量名时，它可以通过报错信息来帮助你定位错误出处。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  x = 10; 
2.  y = 100;

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **var** x = 10, 
2.   y = 100;

### **理解 JavaScript 的定义域和定义域提升** ###

在 JavaScript 中变量和方法定义会自动提升到执行之前。JavaScript 只有 function 级的定义域，而无其他很多编程语言中的块定义域，所以使得你在某一 function 内的某语句和循环体中定义了一个变量，此变量可作用于整个 function 内，而不仅仅是在此语句或循环体中，因为它们的声明被 JavaScript 自动提升了。

我们通过例子来看清楚这到底是怎么一回事：

原 function

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  **var** a = 10; 
5.  
6.  **for**(**var** i = 0; i < a; i++) \{ 
7.  **var** b = i \* i; 
8.   log(b); 
9.   \} 
10. 
11. **if**(a === 10) \{ 
12. **var** f = **function**() \{ 
13.  log(a); 
14.  \}; 
15.  f(); 
16.  \} 
17. 
18. **function** x() \{ 
19.  log('Mr. X!'); 
20.  \} 
21.  x(); 
22. 
23. \}(window.console.log));

**被 JS 提升过后**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  // All variables used in the closure will be hoisted to the top of the function
4.  **var** a, 
5.   i, 
6.   b, 
7.   f; 
8.  // All functions in the closure will be hoisted to the top
9.  **function** x() \{ 
10.  log('Mr. X!'); 
11.  \} 
12. 
13.  a = 10; 
14. 
15. **for**(i = 0; i < a; i++) \{ 
16.  b = i \* i; 
17.  log(b); 
18.  \} 
19. 
20. **if**(a === 10) \{ 
21. // Function assignments will only result in hoisted variables but the function body will not be hoisted
22. // Only by using a real function declaration the whole function will be hoisted with its body
23.  f = **function**() \{ 
24.  log(a); 
25.  \}; 
26.  f(); 
27.  \} 
28. 
29.  x(); 
30. 
31. \}(window.console.log));

根据以上提升过程，你是否可理解以下代码？

**有效代码**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  **var** a = 10; 
5.  
6.   i = 5; 
7.  
8.   x(); 
9.  
10. **for**(**var** i; i < a; i++) \{ 
11.  log(b); 
12. **var** b = i \* i; 
13.  \} 
14. 
15. **if**(a === 10) \{ 
16.  f = **function**() \{ 
17.  log(a); 
18.  \}; 
19.  f(); 
20. 
21. **var** f; 
22.  \} 
23. 
24. **function** x() \{ 
25.  log('Mr. X!'); 
26.  \} 
27. 
28. \}(window.console.log));

正如你所看到的这段令人充满困惑与误解的代码导致了出人意料的结果。只有良好的声明习惯，也就是下一章节我们要提到的声明规则，才能尽可能的避免这类错误风险。

提升声明

为避免上一章节所述的变量和方法定义被自动提升造成误解，把风险降到最低，我们应该手动地显示地去声明变量与方法。也就是说，所有的变量以及方法，应当定义在 function 内的首行。

只用一个 `var` 关键字声明，多个变量用逗号隔开。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  **var** a = 10; 
5.  **var** b = 10; 
6.  
7.  **for**(**var** i = 0; i < 10; i++) \{ 
8.  **var** c = a \* b \* i; 
9.   \} 
10. 
11. **function** f() \{ 
12. 
13.  \} 
14. 
15. **var** d = 100; 
16. **var** x = **function**() \{ 
17. **return** d \* d; 
18.  \}; 
19.  log(x()); 
20. 
21. \}(window.console.log));

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  **var** a = 10, 
5.   b = 10, 
6.   i, 
7.   c, 
8.   d, 
9.   x; 
10. 
11. **function** f() \{ 
12. 
13.  \} 
14. 
15. **for**(i = 0; i < 10; i++) \{ 
16.  c = a \* b \* i; 
17.  \} 
18. 
19. 
20. 
21.  d = 100; 
22.  x = **function**() \{ 
23. **return** d \* d; 
24.  \}; 
25.  log(x()); 
26. 
27. \}(window.console.log));

把赋值尽量写在变量申明中。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **var** a, 
2.   b, 
3.   c; 
4.  
5.  a = 10; 
6.  b = 10; 
7.  c = 100;

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **var** a = 10, 
2.   b = 10, 
3.   c = 100;

### **总是使用带类型判断的比较判断** ###

总是使用 `===` 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。

如果你使用 `===` 操作符，那比较的双方必须是同一类型为前提的条件下才会有效。

在只使用 `==` 的情况下，JavaScript 所带来的强制类型转换使得判断结果跟踪变得复杂，下面的例子可以看出这样的结果有多怪了：

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.   log('0' == 0); // true
5.   log('' == **false**); // true
6.   log('1' == **true**); // true
7.   log(**null** == undefined); // true
8.  
9.  **var** x = \{ 
10.  valueOf: **function**() \{ 
11. **return** 'X'; 
12.  \} 
13.  \}; 
14. 
15.  log(x == 'X'); 
16. 
17. \}(window.console.log));

### **明智地使用真假判断** ###

当我们在一个 if 条件语句中使用变量或表达式时，会做真假判断。`if(a == true)` 是不同于 `if(a)` 的。后者的判断比较特殊，我们称其为真假判断。这种判断会通过特殊的操作将其转换为 true 或 false，下列表达式统统返回 false：`false`,`0`, `undefined`, `null`, `NaN`, `''`（空字符串）.

这种真假判断在我们只求结果而不关心过程的情况下，非常的有帮助。

以下示例展示了真假判断是如何工作的：

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  **function** logTruthyFalsy(expr) \{ 
5.  **if**(expr) \{ 
6.   log('truthy'); 
7.   \} **else** \{ 
8.   log('falsy'); 
9.   \} 
10.  \} 
11. 
12.  logTruthyFalsy(**true**); // truthy
13.  logTruthyFalsy(1); // truthy
14.  logTruthyFalsy(\{\}); // truthy
15.  logTruthyFalsy(\[\]); // truthy
16.  logTruthyFalsy('0'); // truthy
17. 
18.  logTruthyFalsy(**false**); // falsy
19.  logTruthyFalsy(0); // falsy
20.  logTruthyFalsy(undefined); // falsy
21.  logTruthyFalsy(**null**); // falsy
22.  logTruthyFalsy(NaN); // falsy
23.  logTruthyFalsy(''); // falsy
24. 
25. \}(window.console.log));

### **变量赋值时的逻辑操作** ###

逻辑操作符 `||` 和 `&&` 也可被用来返回布尔值。如果操作对象为非布尔对象，那每个表达式将会被自左向右地做真假判断。基于此操作，最终总有一个表达式被返回回来。这在变量赋值时，是可以用来简化你的代码的。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **if**(!x) \{ 
2.  **if**(!y) \{ 
3.   x = 1; 
4.   \} **else** \{ 
5.   x = y; 
6.   \} 
7.  \}

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  x = x || y || 1;

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  这一小技巧经常用来给方法设定默认的参数。

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  **function** multiply(a, b) \{ 
5.   a = a || 1; 
6.   b = b || 1; 
7.  
8.   log('Result ' \+ a \* b); 
9.   \} 
10. 
11.  multiply(); // Result 1
12.  multiply(10); // Result 10
13.  multiply(3, NaN); // Result 3
14.  multiply(9, 5); // Result 45
15. 
16. \}(window.console.log));

### **分号** ###

总是使用分号，因为隐式的代码嵌套会引发难以察觉的问题。当然我们更要从根本上来杜绝这些问题\[1\] 。以下几个示例展示了缺少分号的危害：

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  // 1.
2.  MyClass.prototype.myMethod = **function**() \{ 
3.  **return** 42; 
4.  \} // No semicolon here.
5.  
6.  (**function**() \{ 
7.  // Some initialization code wrapped in a function to create a scope for locals.
8.  \})(); 
9.  
10. 
11. **var** x = \{ 
12. 'i': 1, 
13. 'j': 2 
14. \} // No semicolon here.
15. 
16. // 2. Trying to do one thing on Internet Explorer and another on Firefox.
17. // I know you'd never write code like this, but throw me a bone.
18. \[ffVersion, ieVersion\]\[isIE\](); 
19. 
20. 
21. **var** THINGS\_TO\_EAT = \[apples, oysters, sprayOnCheese\] // No semicolon here.
22. 
23. // 3. conditional execution a la bash
24. \-1 == resultOfOperation() || die();

**So what happens?**

1.  JavaScript 错误 —— 首先返回 42 的那个 function 被第二个 function 当中参数传入调用，接着数字 42 也被“调用”而导致出错。
2.  八成你会得到 ‘no such property in undefined’ 的错误提示，因为在真实环境中的调用是这个样子：`x[ffVersion, ieVersion][isIE]()`.
3.  `die` 总是被调用。因为数组减 1 的结果是 `NaN`，它不等于任何东西（无论 `resultOfOperation` 是否返回`NaN`）。所以最终的结果是 `die()` 执行完所获得值将赋给 `THINGS_TO_EAT`.

**Why?**

JavaScript 中语句要以分号结束，否则它将会继续执行下去，不管换不换行。以上的每一个示例中，函数声明或对象或数组，都变成了在一句语句体内。要知道闭合圆括号并不代表语句结束，JavaScript 不会终结语句，除非它的下一个 token 是一个中缀符\[2\] 或者是圆括号操作符。

这真是让人大吃一惊，所以乖乖地给语句末加上分号吧。

**澄清：分号与函数**

分号需要用在表达式的结尾，而并非函数声明的结尾。区分它们最好的例子是：

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **var** foo = **function**() \{ 
2.  **return** **true**; 
3.  \}; // semicolon here.
4.  
5.  **function** foo() \{ 
6.  **return** **true**; 
7.  \} // no semicolon here.

### **嵌套函数** ###

嵌套函数是非常有用的，比如用在持续创建和隐藏辅助函数的任务中。你可以非常自由随意地使用它们。

--------------------

### **语句块内的函数声明** ###

切勿在语句块内声明函数，在 ECMAScript 5 的严格模式下，这是不合法的。函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **if** (x) \{ 
2.  **function** foo() \{\} 
3.  \}

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **if** (x) \{ 
2.  **var** foo = **function**() \{\}; 
3.  \}

### **异常** ###

基本上你无法避免出现异常，特别是在做大型开发时（使用应用开发框架等等）。

在没有自定义异常的情况下，从有返回值的函数中返回错误信息一定非常的棘手，更别提多不优雅了。不好的解决方案包括了传第一个引用类型来接纳错误信息，或总是返回一个对象列表，其中包含着可能的错误对象。以上方式基本上是比较简陋的异常处理方式。适时可做自定义异常处理。

在复杂的环境中，你可以考虑抛出对象而不仅仅是字符串（默认的抛出值）。

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **if**(name === undefined) \{ 
2.  **throw** \{ 
3.   name: 'System Error', 
4.   message: 'A name should always be specified!'
5.   \} 
6.  \}

### **标准特性** ###

总是优先考虑使用标准特性。为了最大限度地保证扩展性与兼容性，总是首选标准的特性，而不是非标准的特性（例如：首选 `string.charAt(3)` 而不是`string[3]`；首选 DOM 的操作方法来获得元素引用，而不是某一应用特定的快捷方法）。

--------------------

### **简易的原型继承** ###

如果你想在 JavaScript 中继承你的对象，请遵循一个简易的模式来创建此继承。如果你预计你会遇上复杂对象的继承，那可以考虑采用一个继承库，比如 [Proto.js by Axel Rauschmayer][].

简易继承请用以下方式：

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  // Constructor function
5.  **function** Apple(name) \{ 
6.  **this**.name = name; 
7.   \} 
8.  // Defining a method of apple
9.   Apple.prototype.eat = **function**() \{ 
10.  log('Eating ' \+ **this**.name); 
11.  \}; 
12. 
13. // Constructor function
14. **function** GrannySmithApple() \{ 
15. // Invoking parent constructor
16.  Apple.prototype.constructor.call(**this**, 'Granny Smith'); 
17.  \} 
18. // Set parent prototype while creating a copy with Object.create
19.  GrannySmithApple.prototype = Object.create(Apple.prototype); 
20. // Set constructor to the sub type, otherwise points to Apple
21.  GrannySmithApple.prototype.constructor = GrannySmithApple; 
22. 
23. // Calling a super method
24.  GrannySmithApple.prototype.eat = **function**() \{ 
25. // Be sure to apply it onto our current object with call(this)
26.  Apple.prototype.eat.call(**this**); 
27. 
28.  log('Poor Grany Smith'); 
29.  \}; 
30. 
31. // Instantiation
32. **var** apple = **new** Apple('Test Apple'); 
33. **var** grannyApple = **new** GrannySmithApple(); 
34. 
35.  log(apple.name); // Test Apple
36.  log(grannyApple.name); // Granny Smith
37. 
38. // Instance checks
39.  log(apple **instanceof** Apple); // true
40.  log(apple **instanceof** GrannySmithApple); // false
41. 
42.  log(grannyApple **instanceof** Apple); // true
43.  log(grannyApple **instanceof** GrannySmithApple); // true
44. 
45. // Calling method that calls super method
46.  grannyApple.eat(); // Eating Granny Smith\\nPoor Grany Smith
47. 
48. \}(window.console.log));

### **使用闭包** ###

闭包的创建也许是 JS 最有用也是最易被忽略的能力了。[关于闭包如何工作的合理解释][Link 1]。

--------------------

### **切勿在循环中创建函数** ###

在简单的循环语句中加入函数是非常容易形成闭包而带来隐患的。下面的例子就是一个典型的陷阱：

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log, w)\{ 
2.  'use strict'; 
3.  
4.  // numbers and i is defined in the current function closure
5.  **var** numbers = \[1, 2, 3\], 
6.   i; 
7.  
8.  **for**(i = 0; i < numbers.length; i++) \{ 
9.   w.setTimeout(**function**() \{ 
10. // At the moment when this gets executed the i variable, coming from the outer function scope
11. // is set to 3 and the current program is alerting the message 3 times
12. // 'Index 3 with number undefined
13. // If you understand closures in javascript you know how to deal with those cases
14. // It's best to just avoid functions / new closures in loops as this prevents those issues
15. 
16.  w.alert('Index ' \+ i + ' with number ' \+ numbers\[i\]); 
17.  \}, 0); 
18.  \} 
19. 
20. \}(window.console.log, window));

接下来的改进虽然已经解决了上述例子中的问题或 bug，但还是违反了不在循环中创建函数或闭包的原则。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log, w)\{ 
2.  'use strict'; 
3.  
4.  // numbers and i is defined in the current function closure
5.  **var** numbers = \[1, 2, 3\], 
6.   i; 
7.  
8.  **for**(i = 0; i < numbers.length; i++) \{ 
9.  // Creating a new closure scope with an IIFE solves the problem
10. // The delayed function will use index and number which are
11. // in their own closure scope (one closure per loop iteration).
12. // ---
13. // Still this is not recommended as we violate our rule to not
14. // create functions within loops and we are creating two!
15. 
16.  (**function**(index, number)\{ 
17.  w.setTimeout(**function**() \{ 
18. // Will output as expected 0 > 1, 1 > 2, 2 > 3
19.  w.alert('Index ' \+ index + ' with number ' \+ number); 
20.  \}, 0); 
21.  \}(i, numbers\[i\])); 
22.  \} 
23. 
24. \}(window.console.log, window));

接下来的改进已解决问题，而且也遵循了规范。可是，你会发现看上去似乎过于复杂繁冗了，应该会有更好的解决方案吧。

**不完全推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log, w)\{ 
2.  'use strict'; 
3.  
4.  // numbers and i is defined in the current function closure
5.  **var** numbers = \[1, 2, 3\], 
6.   i; 
7.  
8.  // Create a function outside of the loop that will accept arguments to create a
9.  // function closure scope. This function will return a function that executes in this
10. // closure parent scope.
11. **function** alertIndexWithNumber(index, number) \{ 
12. **return** **function**() \{ 
13.  w.alert('Index ' \+ index + ' with number ' \+ number); 
14.  \}; 
15.  \} 
16. 
17. // First parameter is a function call that returns a function.
18. // ---
19. // This solves our problem and we don't create a function inside our loop
20. **for**(i = 0; i < numbers.length; i++) \{ 
21.  w.setTimeout(alertIndexWithNumber(i, numbers\[i\]), 0); 
22.  \} 
23. 
24. \}(window.console.log, window));

将循环语句转换为函数执行的方式问题能得到立马解决，每一次循环都会对应地创建一次闭包。函数式的风格更加值得推荐，而且看上去也更加地自然和可预料。

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log, w)\{ 
2.  'use strict'; 
3.  
4.  // numbers and i is defined in the current function closure
5.  **var** numbers = \[1, 2, 3\], 
6.   i; 
7.  
8.   numbers.forEach(**function**(number, index) \{ 
9.   w.setTimeout(**function**() \{ 
10.  w.alert('Index ' \+ index + ' with number ' \+ number); 
11.  \}, 0); 
12.  \}); 
13. 
14. \}(window.console.log, window));

### **eval 函数（魔鬼）** ###

`eval()` 不但混淆语境还很危险，总会有比这更好、更清晰、更安全的另一种方案来写你的代码，因此尽量不要使用 evil 函数。

--------------------

### **this 关键字** ###

只在对象构造器、方法和在设定的闭包中使用 `this` 关键字。this 的语义在此有些误导。它时而指向全局对象（大多数时），时而指向调用者的定义域（在 eval 中），时而指向 DOM 树中的某一节点（当用事件处理绑定到 HTML 属性上时），时而指向一个新创建的对象（在构造器中），还时而指向其它的一些对象（如果函数被`call()` 和 `apply()` 执行和调用时）。

正因为它是如此容易地被搞错，请限制它的使用场景：

*  在构造函数中
 *  在对象的方法中（包括由此创建出的闭包内）

--------------------

### **首选函数式风格** ###

函数式编程让你可以简化代码并缩减维护成本，因为它容易复用，又适当地解耦和更少的依赖。

接下来的例子中，在一组数字求和的同一问题上，比较了两种解决方案。第一个例子是经典的程序处理，而第二个例子则是采用了函数式编程和 ECMA Script 5.1 的数组方法。

例外：往往在重代码性能轻代码维护的情况之下，要选择最优性能的解决方案而非维护性高的方案（比如用简单的循环语句代替 forEach）。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  **var** arr = \[10, 3, 7, 9, 100, 20\], 
5.   sum = 0, 
6.   i; 
7.  
8.  
9.  **for**(i = 0; i < arr.length; i++) \{ 
10.  sum += arr\[i\]; 
11.  \} 
12. 
13.  log('The sum of array ' \+ arr + ' is: ' \+ sum) 
14. 
15. \}(window.console.log));

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  **var** arr = \[10, 3, 7, 9, 100, 20\]; 
5.  
6.  **var** sum = arr.reduce(**function**(prevValue, currentValue) \{ 
7.  **return** prevValue + currentValue; 
8.   \}, 0); 
9.  
10.  log('The sum of array ' \+ arr + ' is: ' \+ sum); 
11. 
12. \}(window.console.log));

另一个例子通过某一规则对一个数组进行过滤匹配来创建一个新的数组。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  **var** numbers = \[11, 3, 7, 9, 100, 20, 14, 10\], 
5.   numbersGreaterTen = \[\], 
6.   i; 
7.  
8.  
9.  **for**(i = 0; i < numbers.length; i++) \{ 
10. **if**(numbers\[i\] > 10) \{ 
11.  numbersGreaterTen.push(numbers\[i\]); 
12.  \} 
13.  \} 
14. 
15.  log('From the list of numbers ' \+ numbers + ' only ' \+ numbersGreaterTen + ' are greater than ten'); 
16. 
17. \}(window.console.log));

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  **var** numbers = \[11, 3, 7, 9, 100, 20, 14, 10\]; 
5.  
6.  **var** numbersGreaterTen = numbers.filter(**function**(element) \{ 
7.  **return** element > 10; 
8.   \}); 
9.  
10.  log('From the list of numbers ' \+ numbers + ' only ' \+ numbersGreaterTen + ' are greater than ten'); 
11. 
12. \}(window.console.log));

### **使用 ECMA Script 5** ###

建议使用 ECMA Script 5 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。

--------------------

### **数组和对象的属性迭代** ###

用 ECMA5 的迭代方法来迭代数组。使用 `Array.forEach` 或者如果你要在特殊场合下中断迭代，那就用 `Array.every`。

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  (**function**(log)\{ 
2.  'use strict'; 
3.  
4.  // Iterate over an array and break at a certain condition
5.   \[1, 2, 3, 4, 5\].every(**function**(element, index, arr) \{ 
6.   log(element + ' at index ' \+ index + ' in array ' \+ arr); 
7.  
8.  **if**(index !== 5) \{ 
9.  **return** **true**; 
10.  \} 
11.  \}); 
12. 
13. // Defining a simple javascript object
14. **var** obj = \{ 
15.  a: 'A', 
16.  b: 'B', 
17. 'c-d-e': 'CDE'
18.  \}; 
19. 
20. // Iterating over the object keys
21.  Object.keys(obj).forEach(**function**(element, index, arr) \{ 
22.  log('Key ' \+ element + ' has value ' \+ obj\[element\]); 
23.  \}); 
24. 
25. \}(window.console.log));

### **不要使用 switch** ###

switch 在所有的编程语言中都是个非常错误的难以控制的语句，建议用 if else 来替换它。

--------------------

### **数组和对象字面量** ###

用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  // Length is 3.
2.  **var** a1 = **new** Array(x1, x2, x3); 
3.  
4.  // Length is 2.
5.  **var** a2 = **new** Array(x1, x2); 
6.  
7.  // If x1 is a number and it is a natural number the length will be x1.
8.  // If x1 is a number but not a natural number this will throw an exception.
9.  // Otherwise the array will have one element with x1 as its value.
10. **var** a3 = **new** Array(x1); 
11. 
12. // Length is 0.
13. **var** a4 = **new** Array();

正因如此，如果将代码传参从两个变为一个，那数组很有可能发生意料不到的长度变化。为避免此类怪异状况，请总是采用更多可读的数组字面量。

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **var** a = \[x1, x2, x3\]; 
2.  **var** a2 = \[x1, x2\]; 
3.  **var** a3 = \[x1\]; 
4.  **var** a4 = \[\];

对象构造器不会有类似的问题，但是为了可读性和统一性，我们应该使用对象字面量。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **var** o = **new** Object(); 
2.  
3.  **var** o2 = **new** Object(); 
4.  o2.a = 0; 
5.  o2.b = 1; 
6.  o2.c = 2; 
7.  o2\['strange key'\] = 3;

应该写成这样：

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **var** o = \{\}; 
2.  
3.  **var** o2 = \{ 
4.   a: 0, 
5.   b: 1, 
6.   c: 2, 
7.  'strange key': 3 
8.  \};

### **修改内建对象的原型链** ###

修改内建的诸如 `Object.prototype` 和 `Array.prototype` 是被严厉禁止的。修改其它的内建对象比如`Function.prototype`，虽危害没那么大，但始终还是会导致在开发过程中难以 debug 的问题，应当也要避免。

--------------------

### **自定义 toString() 方法** ###

你可以通过自定义 `toString()` 来控制对象字符串化。这很好，但你必须保证你的方法总是成功并不会有其它副作用。如果你的方法达不到这样的标准，那将会引发严重的问题。如果`toString()` 调用了一个方法，这个方法做了一个断言\[3\] ，当断言失败，它可能会输出它所在对象的名称，当然对象也需要调用`toString()`。

--------------------

### **圆括号** ###

一般在语法和语义上真正需要时才谨慎地使用圆括号。不要用在一元操作符上，例如 `delete`, `typeof` 和`void`，或在关键字之后，例如 `return`, `throw`, `case`,`new` 等。

--------------------

### **字符串** ###

统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **var** msg = 'This is some HTML <div class="makes-sense"></div>';

### **三元条件判断（if 的快捷方法）** ###

用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。

**不推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **if**(x === 10) \{ 
2.  **return** 'valid'; 
3.  \} **else** \{ 
4.  **return** 'invalid'; 
5.  \}

**推荐**

**\[javascript\]** [view plain][view plain 31] [copy][view plain 31]

1.  **return** x === 10 ? 'valid' : 'invalid';

\[1\]：采用严格规范的语句写法，从根本上杜绝由分号缺失而引起的代码歧义。

\[2\]：中缀符，指的是像 `x + y` 中的 `+`。

\[3\]：断言一般指程序员在测试测序时的假设，一般是一些布尔表达式，当返回是 true 时，断言为真，代码运行会继续进行；如果条件判断为 false，代码运行停止，你的应用被终止。

# **前端开发工程师面试题2** #

## **　1、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?** ##

（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

## **　　2、行内元素有哪些？块级元素有哪些？**  ##

（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，

比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span img input select strong（强调的语气）

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

## **　　3、link 和@import 的区别是？** ##

（1）link属于XHTML标签，而@import是CSS提供的;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

（4）link方式的样式的权重 高于@import的权重.

## **　　4、浏览器的内核分别是什么?** ##

IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

## **　　5、HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？** ##

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画 canvas 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据，

浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，

比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search

新的技术webworker,

websockt, Geolocation

## **　　6、对语义化如何理解？** ##

用正确的标签做正确的事情！

HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，

并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

## **　　7、HTML5的离线储存有几种方式？** ##

localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。

## **　　8、iframe有那些缺点？** ##

iframe会阻塞主页面的Onload事件；

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。

如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

## **　　9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？** ##

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；

# **HTML/CSS部分** #

## **1、什么是盒子模型？** ##

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），

元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，

而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

## **2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？** ##

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

## **3、CSS实现垂直水平居中** ##

一道经典的问题，实现方法有很多种，以下是其中一种实现：

HTML结构：

</div>

CSS：

.wrapper\{position:relative;\}

.content\{

background-color:\#6699FF;

width:200px;

height:200px;

position: absolute; //父元素需要相对定位

top: 50%;

left: 50%;

margin-top:-100px ; //二分之一的height，width

margin-left: -100px;

## **4、简述一下src与href的区别** ##

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，

例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，

图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

## **5、什么是CSS Hack?** ##

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：

// 1、条件Hack

<!--\[if IE\]>

<style>

.test\{color:red;\}

</style>

<!\[endif\]-->

// 2、属性Hack

.test\{

color:\#0909; /\* For IE8+ \*/

\*color:\#f00; /\* For IE7 and earlier \*/

\_color:\#ff0; /\* For IE6 and earlier \*/

// 3、选择符Hack

\* html .test\{color:\#090;\} /\* For IE6 and earlier \*/

\* + html .test\{color:\#ff0;\} /\* For IE7 \*/

## **6、简述同步和异步的区别** ##

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，

直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，

这样可以提高执行的效率。

## **7、px和em的区别** ##

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，

并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

## **8、什么叫优雅降级和渐进增强？** ##

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

## **9、浏览器的内核分别是什么?** ##

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

# **CSS部分** #

## **1、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？** ##

1.id选择器（ \# myid） 　　　　2.类选择器（.myclassname）

3.标签选择器（div, h1, p） 　 　4.相邻选择器（h1 + p）

5.子选择器（ul < li） 　　　 　6.后代选择器（li a）

7.通配符选择器（ \* ） 　　　　8.属性选择器（a\[rel = "external"\]）

9.伪类选择器（a: hover, li: nth - child）

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

优先级就近原则，同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag important 比 内联优先级高

## **　　2、CSS3新增伪类举例：** ##

p:first-of-type 选择属于其父元素的首个元素的每个元素。

p:last-of-type 选择属于其父元素的最后元素的每个元素。

p:only-of-type 选择属于其父元素唯一的元素的每个元素。

p:only-child 选择属于其父元素的唯一子元素的每个元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。

:enabled :disabled 控制表单控件的禁用态。

:checked单选框或复选框被选中。

## **　　3、如何居中div？如何居中一个浮动元素？** ##

给div设置一个宽度，然后添加margin:0 auto属性

div\{ width:200px; margin:0 auto; \}

居中一个浮动元素

确定容器的宽高 宽500 高 300 的层 设置层的外边距 .div \{ Width:500px ; height:300px;//高度可以不设

Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%;\}

### **　　列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？** ###

1.block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。 inline-block 象行内元素一样显示，

但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。

2. absolute　生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。

relative 　生成相对定位的元素，相对于其正常位置进行定位。

static 默认值。没有定位，元素出现在正常的流中 \*（忽略 top, bottom, left, right z-index 声明）。

inherit 规定从父元素继承 position 属性的值。

## **4、为什么要初始化CSS样式？** ##

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法就是：

\* \{padding: 0; margin: 0;\} （不建议）淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,

dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button,

input, textarea, th, td \{ margin:0; padding:0; \}body, button, input, select, textarea \{ font:12px/1.5tahoma,

arial, /5b8b/4f53; \}h1, h2, h3, h4, h5, h6\{ font-size:100%; \}address, cite, dfn, em, var \{ font-style:normal; \}

code, kbd, pre, samp \{ font-family:couriernew,

courier, monospace; \}small\{ font-size:12px; \}ul, ol \{ list-style:none; \}a \{ text-decoration:none; \}

a:hover \{ text-decoration:underline; \}sup \{ vertical-align:text-top; \}sub\{ vertical-align:text-bottom; \}

legend \{ color:\#000; \}fieldset, img \{ border:0; \}button,

input, select, textarea \{ font-size:100%; \}table \{ border-collapse:collapse; border-spacing:0; \}

## **　　5、absolute的containing block计算方式跟正常流有什么不同？** ##

## **　　6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？** ##

## **　7、对BFC规范的理解？** ##

（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）

## **　　8、css定义的权重** ##

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/\*权重为1\*/div\{\}/\*权重为10\*/.class1\{\}/\*权重为100\*/\#id1\{\}/\*权重为100+1=101\*/\#id1 div\{\}/\*权重为10+1=11\*/.class1 div\{\}

/\*权重为10+10+1=21\*/.class1 .class2

div\{\} 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

## **　　9、解释下浮动和它的工作原理？清除浮动的技巧** ##

## **　　10、用过媒体查询，针对移动端的布局吗？** ##

## **　　11、使用 CSS 预处理器吗？喜欢那个？** ##

## **　　12、CSS3有哪些新特性？** ##

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px）， 对文字加特效（text-shadow、），

线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)

skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景

rgba

## **　　13、经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？** ##

## **　　14、介绍一下CSS的盒子模型？** ##

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

# **CSS部分2** #

## **1.对WEB标准以及W3C的理解与认识？** ##

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、

文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、

改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

## **　　2.XHTML和HTML有什么区别？** ##

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

## **　　3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?** ##

用于声明文档使用那种规范(HTML/XHTML)一般为 严格 过度 基于框架的html文档

加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

## **　　4.行内元素有哪些?块级元素有哪些?CSS的盒模型?** ##

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容，border ,margin，padding

## **　　5.CSS引入的方式有哪些? link和@import的区别是?** ##

内联 内嵌 外链 导入

区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

## **　　6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?** ##

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

## **　7.前端页面有哪三层构成，分别是什么?作用是什么?** ##

结构层 HTML 表示层 CSS 行为层 js

## **　8.CSS的基本语句构成是?** ##

选择器\{属性1:值1;属性2:值2;……\}

## **　　9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?** ##

Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

## **　　10.写出几种IE6 BUG的解决方法** ##

1.双边距BUG float引起的 使用display

2.3像素问题 使用float引起的 使用dislpay:inline -3px

3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

4.Ie z-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height 最小高度 !Important 解决’

7.select 在ie6下遮盖 使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)

9.ie 6 不支持!important

## **　　11.img标签上title与alt属性的区别是什么?** ##

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息

## **　　12.描述css reset的作用和用途。** ##

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

## **　　13.解释css sprites，如何使用。** ##

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

## **　　14.浏览器标准模式和怪异模式之间的区别是什么?** ##

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

## **　　15.你如何对网站的文件和资源进行优化?期待的解决方案包括：** ##

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

## **　　16.什么是语义化的HTML?** ##

直观的认识标签 对于搜索引擎的抓取有好处

## **　　17.清除浮动的几种方式，各自的优缺点** ##

1.使用空标签清除浮动 clear:both(理论上能清楚任何标签，增加无意义的标签)

2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)

3.是用afert伪元素清除浮动(用于非IE浏览器)

## **　　18.css hack** ##

\_marging \\\\IE 6

+margin \\\\IE 7

Marging:0 auto \\9 所有Ie

Margin \\0 \\\\IE 8

# **　　Javascript部分** #

## **　　1.javascript的typeof返回哪些数据类型** ##

Object number function boolean underfind

## **　　2.例举3种强制类型转换和2种隐式类型转换?** ##

强制（parseInt,parseFloat,number）

隐式（== – ===）

## **　　3.split() join() 的区别** ##

前者是切割成数组的形式，后者是将数组转换成字符串

## **　　4.数组方法pop() push() unshift() shift()** ##

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

## **　　5.事件绑定和普通事件有什么区别** ##

## **　　6.IE和DOM事件流的区别** ##

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

## **　　7.IE和标准下有哪些兼容性的写法** ##

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

## **　　8.ajax请求的时候get 和post方式的区别** ##

一个在url后面 一个放在虚拟载体里面

有大小限制

安全问题

应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

## **　　9.call和apply的区别** ##

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

## **　　10.ajax请求时，如何解释json数据** ##

使用eval parse 鉴于安全性考虑 使用parse更靠谱

## **　　11.b继承a的方法** ##

## **　　12.JavaScript this指针、闭包、作用域** ##

## **　　13.事件委托是什么** ##

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

## **　　14.闭包是什么，有什么特性，对页面有什么影响** ##

闭包就是能够读取其他函数内部变量的函数。

## **　　15.如何阻止事件冒泡和默认事件** ##

canceBubble return false

## **　　16.添加 删除 替换 插入到某个接点的方法** ##

obj.appendChidl()

obj.innersetBefore

obj.replaceChild

obj.removeChild

## **　　17.解释jsonp的原理，以及为什么不是真正的ajax** ##

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

## **　　18.javascript的本地对象，内置对象和宿主对象** ##

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

## **　　19.document load 和document ready的区别** ##

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有 $().ready(function)

## **　　20.”==”和“===”的不同** ##

前者会自动转换类型

后者不会

## **　　21.javascript的同源策略** ##

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

## **　　22.编写一个数组去重的方法** ##

function oSort(arr)

var result =\{\};

var newArr=\[\];

for(var i=0;i<arr.length;i++)

if(!result\[arr\])

newArr.push(arr)

result\[arr\]=1

return newArr

</arr.length;i++)

# **JavaScript部分2** #

## **　　1、eval是做什么的？** ##

它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，

非常耗性能（2次，一次解析成js语句，一次执行）。

## **　　2、Node.js的适用场景？** ##

高并发、聊天、实时消息推送

## **　　3、介绍js的基本数据类型。** ##

number,string,boolean,object,undefined

## **　　4、Javascript如何实现继承？** ##

通过原型和构造器

## **　5、如何创建一个对象? （画出此对象的内存图）** ##

function Person(name, age) \{ this.name = name; this.age = age;

this.sing = function() \{ alert(this.name) \} \}

## **　6、谈谈This对象的理解。** ##

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，

那就是this指的是调用函数的那个对象。this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象

## **　7、事件是什么？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？** ##

（1） 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。

是可以被 JavaScript 侦测到的行为。

（2） 事件处理机制：IE是事件冒泡、火狐是 事件捕获；

（3） ev.stopPropagation();

## **　8、什么是闭包（closure），为什么要用它？** ##

执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.

使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，因为say667()的内部函数的执行需要依赖say667()中的变量。

这是对闭包作用的非常直白的描述. function say667() \{ // Local variable that

ends up within closure var num = 666; var sayAlert = function() \{ alert(num); \}

num++; return sayAlert;\} var sayAlert = say667(); sayAlert()//执行结果应该弹出的667

## **　　9、如何判断一个对象是否属于某个类？** ##

使用instanceof （待完善） if(a instanceof Person)\{ alert('yes'); \}

## **　　10、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？** ##

hasOwnProperty

## **　　11、对JSON 的了解？** ##

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。

数据格式简单, 易于读写, 占用带宽小\{'age':'12', 'name':'back'\}

# **JavaScript部分** #

## **1、怎样添加、移除、移动、复制、创建和查找节点？** ##

1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

2、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。

/\*\*

\* 对象克隆

\* 支持基本数据类型及对象

\* 递归方法

\*/

function clone(obj) \{

var o;

switch (typeof obj) \{

case "undefined":

break;

case "string":

o = obj + "";

break;

case "number":

o = obj - 0;

break;

case "boolean":

o = obj;

break;

case "object": // object 分为两种情况 对象（Object）或数组（Array）

if (obj === null) \{

o = null;

\} else \{

if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") \{

o = \[\];

for (var i = 0; i obj.length; i++) \{

o.push(clone(obj\[i\]));

\} else \{

o = \{\};

for (var k in obj) \{

o\[k\] = clone(obj\[k\]);

break;

default:

o = obj;

break;

return o;

## **3、如何消除一个数组里面重复的元素？** ##

// 方法一：

var arr1 =\[1,2,2,2,3,3,3,4,5,6\],

arr2 = \[\];

for(var i = 0,len = arr1.length; i< len; i++)\{

if(arr2.indexOf(arr1\[i\]) < 0)\{

arr2.push(arr1\[i\]);

document.write(arr2); // 1,2,3,4,5,6

## **4、想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）。** ##

## **5、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？** ##

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。

典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,

它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

function log()\{

var args = Array.prototype.slice.call(arguments);

//为了使用unshift数组方法，将argument转化为真正的数组

args.unshift('(app)');

console.log.apply(console, args);

\};

## **6、Javascript中callee和caller的作用？** ##

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

## **7、请描述一下cookies，sessionStorage和localStorage的区别** ##

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且

当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，

并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，

不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，

getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，

而Web Storage仅仅是为了在本地“存储”数据而生。

## **8、手写数组快速排序** ##

关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序

“快速排序”的思想很简单，整个排序过程只需要三步：

（1）在数据集之中，选择一个元素作为”基准”（pivot）。

（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。

（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

## **9、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。** ##

var str = "aaaabbbccccddfgh";

var obj = \{\};

for(var i=0;istr.length;i++)\{

var v = str.charAt(i);

if(obj\[v\] & obj\[v\].value == v)\{

obj\[v\].count = ++ obj\[v\].count;

\}else\{

obj\[v\] = \{\};

obj\[v\].count = 1;

obj\[v\].value = v;

for(key in obj)\{

document.write(obj\[key\].value +'='+obj\[key\].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1

## **10、写一个function，清除字符串前后的空格。（兼容所有浏览器）** ##

function trim(str) \{

if (str & typeof str === "string") \{

return str.replace(/(^s\*)|(s\*)$/g,""); //去除前后空白符

# **综合问题** #

## **1.自我评价一下HTML/CSS/JS的掌握情况** ##

## **　　2.简述HTML经常使用的标签和作用。** ##

Div/a/p/span/li/ul/ol/table/tr/td

## **　　3.你认为最常遇到的兼容Bug有哪些?有哪些问题是你认为解决起来最麻烦的?** ##

IE6 PNG

IE6 Fixed

## **　　4.块级元素和行内元素都有哪些? 行内元素有哪些特点?** ##

## **　　5.介绍所知道的CSS hack技巧(如：\_， \*， +， \\9， !important 之类)** ##

## **　　6.CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?** ##

在CSS中关于定位的内容是：position:relative | absolute | static | fixed

? static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

? relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

? absolute 脱离文档流，通过 top,bottom,left,right 定位。选53D6其最近的父级定位元素，

当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

? fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

## **　　7.函数的几种定义方法？** ##

function a()\{\},

var a = function()\{\}

## **　　8.对象的定义方法？** ##

a = new Object(), a = \{\}

## **　　9.类的定义方法（prototype）（继承）** ##

Var a = function()\{\}

a.prototype = \{\}

new a();

## **　　10.this 关键字的指向** ##

obj.foo() == obj //方法调用模式,this指向obj

foo() == window; //函数调用模式,this指向window

new obj.foo() == obj //构造器调用模式, this指向新建立对象

foo.call(obj) == obj;//APPLY调用模式,this指向obj

## **　　11.什么是闭包，及其作用是什么？** ##

## **　　12.事件绑定的几种方法，事件冒泡？** ##

## **　　13.Ajax/json/json0070？** ##

## **　　14.异步ajax的优缺点都有什么？** ##

优点：

? 相对于同步ajax：不会造成UI卡死，用户体验好。

? 相对于刷新页面，省流量

缺点：

? 后退按钮无效；

? 多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需要复杂的判断机制。

? 搜索引擎不友好

? 数据安全

## **　　15.常用JS框架都有什么？是否使用过jQuery，以及jQuery的优点是什么？** ##

## **　　16.JS用了多久，介绍一下自己做过的JS项目？** ##

## **　　17.开发调试工具和方法都有什么（编辑器、浏览器）** ##

## **　　18.类、函数、对象（代码表达）** ##

19.闭包（setTimeout）（产生两个首尾相连的计时器）（使用for循环产生10个计时器）||

## **　　20.Jquery Mobile 相关** ##

## **　　21.HTML5/CSS3的掌握情况** ##

## **　　22.是否听说过和理解webapp？** ##

## **　　23.个人擅长的语言，优缺点都是什么？** ##

## **　　24.介绍一下曾经参与过的项目经验，合作开发、独立开发** ##

## **　　25.编程的重要知识？** ##

## **　　26.开发过程中遇到困难，如何解决？** ##

## **　　27.有没有个人/开源项目** ##

## **　　28.前端开发（HTML/CSS/）** ##

# **2016年Web前端面试题目汇总** #

以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题，通过对知识的整理以及经验的总结，

重新巩固自身的前端基础知识，如有错误或更好的答案，欢迎指正。:）

## **1、一次完整的HTTP事务是怎样的一个过程？** ##

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

## **2、对前端工程师这个职位你是怎么样理解的？** ##

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px；

c. 与团队成员，UI设计，产品经理的沟通；

d. 做好的页面结构，页面重构和用户体验；

e. 处理hack，兼容、写出优美的代码格式；

f. 针对服务器的优化、拥抱最新前端技术。

文章是之前看的别人的就保存下来了，原出处不记得了。跟原创说声抱歉。

# **[JS实现继承的几种方式][JS]** #

**前言**

JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。

## **JS继承的实现方式** ##

既然要实现继承，那么首先我们得有一个父类，代码如下：

// 定义一个动物类

function Animal (name) {

// 属性

this.name = name || 'Animal';

// 实例方法

this.sleep = function(){

console.log(this.name + '正在睡觉！');

}

// 原型方法

Animal.prototype.eat = function(food) {

console.log(this.name + '正在吃：' + food);

};

### **1、原型链继承** ###

**核心：** 将父类的实例作为子类的原型

function Cat(){

}

Cat.prototype = new Animal();

Cat.prototype.name = 'cat';

//　Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.eat('fish'));

console.log(cat.sleep());

console.log(cat instanceof Animal); //true

console.log(cat instanceof Cat); //true

特点：

1.  非常纯粹的继承关系，实例是子类的实例，也是父类的实例
2.  父类新增原型方法/原型属性，子类都能访问到
3.  简单，易于实现

缺点：

1.  要想为子类新增属性和方法，必须要在`new Animal()`这样的语句之后执行，不能放到构造器中
2.  无法实现多继承
3.  来自原型对象的引用属性是所有实例共享的（详细请看附录代码： 示例1）
4.  创建子类实例时，无法向父类构造函数传参

推荐指数：★★（3、4两大致命缺陷）

**2017-8-17 10:21:43****补充：感谢**[**MMHS**][MMHS]**指出。缺点****1****中描述有误：可以在****Cat****构造函数中，为****Cat****实例增加实例属性。如果要新增原型属性和方法，则必须放在**`new Animal()`**这样的语句之后执行。**

### **2、构造继承** ###

**核心：**使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name){

Animal.call(this);

this.name = name || 'Tom';

}

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // false

console.log(cat instanceof Cat); // true

特点：

1.  解决了1中，子类实例共享父类引用属性的问题
2.  创建子类实例时，可以向父类传递参数
3.  可以实现多继承（call多个父类对象）

缺点：

1.  实例并不是父类的实例，只是子类的实例
2.  只能继承父类的实例属性和方法，不能继承原型属性/方法
3.  无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

推荐指数：★★（缺点3）

### **3、实例继承** ###

**核心：**为父类实例添加新特性，作为子类实例返回

function Cat(name){

var instance = new Animal();

instance.name = name || 'Tom';

return instance;

}

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); // false

特点：

1.  不限制调用方式，不管是`new``子类``()`还是`子类``()`,返回的对象具有相同的效果

缺点：

1.  实例是父类的实例，不是子类的实例
2.  不支持多继承

推荐指数：★★

### **4、拷贝继承** ###

function Cat(name){

var animal = new Animal();

for(var p in animal){

Cat.prototype[p] = animal[p];

}

Cat.prototype.name = name || 'Tom';

}

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // false

console.log(cat instanceof Cat); // true

特点：

1.  支持多继承

缺点：

1.  效率较低，内存占用高（因为要拷贝父类的属性）
2.  无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

推荐指数：★（缺点1）

### **5、组合继承** ###

**核心：**通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){

Animal.call(this);

this.name = name || 'Tom';

}

Cat.prototype = new Animal();
    
    
    
    // 感谢 @学无止境c 的提醒，组合继承也是需要修复构造函数指向的。
    
    
    
    Cat.prototype.constructor = Cat;

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); // true

特点：

1.  弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
2.  既是子类的实例，也是父类的实例
3.  不存在引用属性共享问题
4.  可传参
5.  函数可复用

缺点：

1.  调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

推荐指数：★★★★（仅仅多消耗了一点内存）

### **6、寄生组合继承** ###

**核心：**通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Cat(name){

Animal.call(this);

this.name = name || 'Tom';

}

(function(){

// 创建一个没有实例方法的类

var Super = function(){};

Super.prototype = Animal.prototype;

//将实例作为子类的原型

Cat.prototype = new Super();

})();

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); //true
    
    
    
    感谢 @bluedrink 提醒，该实现没有修复constructor。
    
    
    
    Cat.prototype.constructor = Cat; // 需要修复下构造函数

特点：

1.  堪称完美

缺点：

1.  实现较为复杂

推荐指数：★★★★（实现复杂，扣掉一颗星）

## **附录代码：** ##

示例一：

function Animal (name) {

// 属性

this.name = name || 'Animal';

// 实例方法

this.sleep = function(){

console.log(this.name + '正在睡觉！');

}

//实例引用属性

this.features = [];

}

function Cat(name){

}

Cat.prototype = new Animal();

var tom = new Cat('Tom');

var kissy = new Cat('Kissy');

console.log(tom.name); // "Animal"

console.log(kissy.name); // "Animal"

console.log(tom.features); // []

console.log(kissy.features); // []

tom.name = 'Tom-New Name';

tom.features.push('eat');

//针对父类实例值类型成员的更改，不影响

console.log(tom.name); // "Tom-New Name"

console.log(kissy.name); // "Animal"

//针对父类实例引用类型成员的更改，会通过影响其他子类实例

console.log(tom.features); // ['eat']

console.log(kissy.features); // ['eat']

原因分析：

关键点：属性查找过程

执行tom.features.push，首先找tom对象的实例属性（找不到），

那么去原型对象中找，也就是Animal的实例。发现有，那么就直接在这个对象的

features属性中插入值。

在console.log(kissy.features); 的时候。同上，kissy实例上没有，那么去原型上找。

刚好原型上有，就直接返回，但是注意，这个原型对象中features属性值已经变化了。

# **[Js核心面向对象面试题][Js]** #

web开发面试题*（**3**）* ![https://csdnimg.cn/release/phoenix/images/arrow\_triangle%20\_down.jpg][https_csdnimg.cn_release_phoenix_images_arrow_triangle_20_down.jpg]

## **1.网页三要素是什么** ##

Icon

HTML(内容)  
CSS(外观)  
Javascript(行为)

## **2.JavaScript是什么** ##

Icon

JavaScript一门解释型(不是编译型)脚本语言,它的主要特点有:面向对象,弱类型,动态,基于原型的面向对象(对象)(不基于类)

## **3.讲下js的数据类型** ##

Icon

基本类型: 数值(number),字符串(string),布尔值(boolean),undefined  
对象类型: 对象(Object)，数组(Array)，函数(Function)

## **4.用什么方法来判断一个对象的数据类型,怎么样去判断数组** ##

Icon

typeof判断对象类型,用instanceOf判断是不是数组

## **5.分别讲下小括号,中括号,大括号,冒号在js中的作用** ##

Icon

1). 小括号: ()用来定义或调用一个函数  
2). 中括号运算符: \[ \]用来创建一个数组/获取数组元素  
3). 大括号运算符: \{ \}用来创建一个对象  
4). 冒号运算符: 冒号用来分隔对象的属性名和属性值

## **6.讲下函数的三种定义:** ##

Icon

1.function name()\{\}  
2. var name=function()\{\}  
3. var name=new Function("n","m","n+m")

## **7.函数的形参和实参是否可以不一样,如果不一样,通过什么调用** ##

Icon

可以不一样,每个函数里面都有个arguments数组类型的变量,可以拿到实参的个数

## **8.说几个系统预定义函数** ##

Icon

parseInt() / parseFloat() : 将一个字符串转为数字  
isNaN() : 判断是否不是一个数值或者数值类型字符串  
encodeURI() / decodeURI(): 对字符串进行编码与解码  
eval() : 将JS代码格式的字符串当作js执行  
setInterval(callback,m)间隔多久执行一次callback函数

## **9.讲下变量的作用域** ##

Icon

如果在函数里面用var声明,就是局部变量,如果在函数里面不用var声明,那就是全局变量,在函数外面用var定义都是全局变量

## **10.数组有哪两种声明方式** ##

Icon

1.直接用\[\]里面包含数据声明  
2.用new Array声明

## **11.数组用什么去访问** ##

Icon

用下标来访问 arr\[index\]

## **12.怎么样删除数组对象** ##

Icon

用 delete arra\[0\];

## **13.对象是怎么样定义的,属性是怎么定义的** ##

Icon

可以用function定义一个对象,然后根据形参在里面this.x=x可以定义属性,或者可以通过动态的添加一个属性

## **14.对象是怎么样创建的?** ##

Icon

1.用var obj=\{\}就可以创建一个对象 2.用new Object()也可以创建一个对象

## **15.怎么样给一个对象动态添加属性或者方法** ##

Icon

直接在对象上面用obj.属性="test",或 obj.方法名=function()\{\}定义一个方法

## **16.js里面的全局对象是什么,怎么调用的** ##

Icon

js里面的全局对象是window,在js里面直接调用的函数都是window对象里面的函数,  
默认的this也指向window,默认全局对象的属性和方法不用前面加window,可以直接调用

## **17.讲几个常见的js内置对象,他们有什么好处** ##

Icon

Object,Array,String,Number,Boolean,Date,Function  
可以方便的使用一些方法和常量,譬如String里面就有很多字符串函数 Date可以处理时间

## **19.prototype(原型)是什么,它是怎么使用的** ##

Icon

每个函数都有一个prototype属性, 它是一个引用变量, 默认指向一个空Object对象 ,有备用的意思,当调用一个对象的函数或者属性的时候,如果在当前对象里面找不到,那么就到原型里面去找

## **20.js是怎么样实现继承的?** ##

Icon

使用prototype属性就可以实现继承 一般是child.prototype=new parent()就可以实现

## **21 什么是DOM,DOM分为那三种** ##

Icon

DOM= Document Object Model，文档对象模型， DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：独立于平台和语言的接口. W3C DOM 标准被分为 3 个不同的部分：  
核心 DOM - 针对任何结构化文档的标准模型  
 XML DOM - 针对 XML 文档的标准模型  
 HTML DOM - 针对 HTML 文档的标准模型

## **22.DOM中有几种类型的节点** ##

Icon

整个文档是一个文档节点(Document)  
每个 HTML 标签是一个元素节点(Element)  
每一个 HTML 属性是一个属性节点(Attribute)  
包含在 HTML 元素中的文本是文本节点(Text)

## **23.讲下DOM对象的三种查询方式** ##

Icon

getElementById()根据元素id来查找 ,getElementsByTagName(tag):根据元素的tag名字来查找  
getElementsByName(name) 根据元素名字来查找

## **24.怎么样创建元素节点和文本节点,怎么样删除节点** ##

Icon

createElement("div")创建元素节点,createTextNode()创建一个文本节点,removeChild()可以用来删除节点

## **25.用那个属性可以快速的给一个节点加一段html内容** ##

Icon

innerHTML

## **26.如果我在js里面访问在js下面的html的tag,用什么技术实现** ##

Icon

默认js都是解释性语言,js不能访问后面定义的html元素的,但在window里面有个onload函数,把代码写在下面  
函数体里面就可以 window.οnlοad=function()\{\}

# **W3C盒模型和IE盒模型的区别** #

盒模型在初学css的时候就会接触到，其实很容易理解，这里也不多废话，但是实际上在布局的时候还是会出现很多问题。对于盒模型的认识不能只停留在知道一个盒模型由哪些部分构成，也要更多的了解如何在不同情况下利用盒模型的特点进行布局。  
这里讨论一下两种不同的盒模型： W3C盒模型和IE盒模型。  
其实IE的盒模型问题只会出现在IE5.5及其更早的版本中，因为在IE6及更新的版本在标准兼容模式下使用的是W3C的盒模型标准，但事实上不仅IE5.5，连IE6的使用率也很少了，这里对他们进行讨论只是为了更深刻的理解盒模型。  
对于两种模型这里有一张图：  
  
可以看到IE的盒模型与W3C盒模型的区别在与width的计算，这说明什么问题呢？我们在设置样式的时候经常会用到margin和padding还有width，对于下面html文件：

<html>

<style>

.box{

float:left;

width: 100px;

height: 100px;

background-color: #ff9000;

}

.container{

width: 200px;

padding: 10px;

background-color: #f00;

overflow: hidden;

}

</style>

</head>

<body>

</div>

</script>

</body>

</html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29

不管是不是IE，浏览器下显示的效果都是：  
![/images/20220518/d89e1fc4115340f688f7425facf62704.png][https_img-blog.csdn.net_20150629102836021]  
可以看到container正好将两个box包装起来。

但加入给container添加一个padding如下：

.container{

width: 200px;

background-color: #f00;

overflow: hidden;

padding: 10px;

}

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

则其在非IE下的样式为：  
  
但在IE下为：

IE中的box换行了，这就是因为IE中的width是包括了padding的，而W3C也就是我们平常使用的盒模型不包括，不管padding加多少内容区域的宽度不会改变，这也十分合理。  
避免触发IE盒模型的方法是使用`<!DOCTYPE html>`声明，告诉IE采用W3C盒子模型即可。

# **[flex弹性布局学习总结][flex]** #

本文首次发布在我的个人博客：[Claiyre的个人博客 https://claiyre.github.io/][Claiyre_ https_claiyre.github.io]

博客园地址：[http://www.cnblogs.com/nuannuan7362/][http_www.cnblogs.com_nuannuan7362]  
如需转载，请在文章开头注明原文地址

## **一、简要介绍** ##

css3最喜欢的新属性之一便是flex布局属性，用六个字概括便是**简单、方便、快速。**

flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。**主要思想是给予容器控制内部元素高度和宽度的能力**。目前已得到以下浏览器支持：

![/images/20220518/f3c20af5ffef465e9ba39a1eece55282.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160829213111433-51908283.png]

其中在webkit内核的浏览器中使用时，必须加上**-webkit-**前缀，以下不再重复说明。

下图为flex的相关概念的示意图

![/images/20220518/f8717d191c624573b23b40419ce70b56.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160829212313605-763604383.png]

使用flex布局的容器（flex container），它内部的元素自动成为flex项目（flex item）。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴开始的位置称为cross start；交叉轴结束的位置称为cross end。item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度称为cross size。

此外，需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。

## **二、属性总结表** ##

下图是关于flex的属性总结表，后面会详细介绍每个属性的意义和用法

![/images/20220518/f9c742455eca4eae8436e49be1473adc.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830160542949-371754668.png]

## **三、容器属性详述** ##

###  **　　1.flex-direction** ###

决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)|row-reverse|column|column-reverse

**row:****主轴为水平方向，项目沿主轴从左至右排列**

**　　　　****column****：主轴为竖直方向，项目沿主轴从上至下排列**

**　　　　****row-reverse****：主轴水平，项目从右至左排列，与****row****反向**

**　　　　****column-reverse****：主轴竖直，项目从下至上排列，与****column****反向**

**![https://images2015.cnblogs.com/blog/1008386/201608/1008386-20160830161750433-1327054343.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830161750433-1327054343.png]**![/images/20220518/962f64a050a541fb88da6b0b503dc779.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830162010449-1841157411.png]

### **　　2、flex-wrap** ###

默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值nowrap(默认)|wrap|wrap-reverse

nowrap：自动缩小项目，不换行

wrap：换行，且第一行在上方

wrap-reverse：换行，第一行在下面

![https://images2015.cnblogs.com/blog/1008386/201608/1008386-20160830162958011-1705226429.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830162958011-1705226429.png]![/images/20220518/90f018a61a46426b9f124c3595f13092.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830163012652-269300469.png]

### **　　3、flex-flow** ###

是flex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列 不换行。

### **　　4、justify-content** ###

决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around。当主轴沿水平方向时，具体含义为

flex-start：左对齐

flex-end：右对齐

center：居中对齐

space- between：两端对齐

space-around：沿轴线均匀分布

效果如下图

![/images/20220518/2903542434c644ee97baa520f90410e7.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830171624808-1838021171.png]

### **5、align-items** ###

决定了item在交叉轴上的对齐方式，可能的值有flex-start|flex-end|center|baseline|stretch，当主轴水平时，其具体含义为

flex-start：顶端对齐

flex-end：底部对齐

center：竖直方向上居中对齐

baseline：item第一行文字的底部对齐

stretch：当item未设置高度时，item将和容器等高对齐

效果图如下：

![/images/20220518/b2448480cd5344cc85fd54e51729e476.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830173027355-2121379210.png]

###  **6、align-content** ###

该属性定义了当有多根主轴时，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效。align-content可能值含义如下（假设主轴为水平方向）：

flex-start：左对齐

flex-end：右对齐

center：居中对齐

space- between：两端对齐

space-around：沿轴线均匀分布

stretch：各行将根据其flex-grow值伸展以充分占据剩余空间

效果图如下

![/images/20220518/b5f96a0706614d3abe517bdb5aa00470.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830175113090-1918434494.png]

![/images/20220518/445824b8e8ea40cb83488310e66e170d.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830175407011-2136241042.png]

## **四、flex item属性详述** ##

item的属性在item的style中设置。item共有如下六种属性

### **　　1、order** ###

order的值是整数，默认为0，整数越小，item排列越靠前，如下图所示代码如下

</div>

效果图为

![/images/20220518/363e7e935cc34d7db5f2c0ed4bd10a39.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830191453371-297198071.png]

### **　　2、flex-grow** ###

定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例，如

</div>

即当有多余空间时item1、item2、和item3以1：2:3的比例放大。

### **　　3、flex-shrink** ###

定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例。flex-grow

### **　　4、flex-basis** ###

表示项目在主轴上占据的空间，默认值为auto。如下代码

</div>

其效果图为

![/images/20220518/8990ed8038ad4fc68e69138afd84f52b.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830193047511-1893074451.png]

### **　　5、flex** ###

flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。

### **　　6、align-self** ###

align-self属性允许item有自己独特的在交叉轴上的对齐方式，它有六个可能的值。默认值为auto

auto：和父元素align-self的值一致

flex-start：顶端对齐

flex-end：底部对齐

center：竖直方向上居中对齐

baseline：item第一行文字的底部对齐

stretch：当item未设置高度时，item将和容器等高对齐

![/images/20220518/bc6ac646fd7344f1be6c2066dc1050f6.png][https_images2015.cnblogs.com_blog_1008386_201608_1008386-20160830194051418-1820155171.png]

以上仅我个人浅见，如有错误之处，烦请指正。

如您觉得我的文章对您有帮助，请点击下方“推荐”，让更多的人看到。

# **[常见面试题之左边固定，右边自适应布局(四种方法：负边距、flex)][flex 1]** #

*  [css][]

[**yyh1945**][yyh1945] 2017年07月30日发布

*  赞 | 4收藏 | 19
 *  **1.6k** 次浏览

这个布局是最简单的布局之一，但是网络上大多是copy，而没有认真解释以及用新的特性实现。下面就做一个新的概括.

要求： 左边固定100px, 右边自适应

### **左position:absolute, 右margin-left *入门写法*** ###

<div class="r-child">右边自适应1 右边自适应2 右边自适应3</div>

</div>

//父元素相对定位，作为子元素绝对定位的参考

.parent{
        display:relative; background:#ddd }

.l-child{
        position:absolute; width:100px;background:#bbb }

.r-child{
        margin-left:100px;background:#999 }

[demo展示][demo]

### **左边float，触发父元素宽度计算 *入门写法*** ###

html结构同上

.parent{
        background:#ddd;overflow:hidden; }

.l-child{
        float:left;width:100px;background:#bbb;z-index:10000; }

.r-child{
        margin-left:100px;background:#999;}

[demo展示][demo 1]

### **左右float，右边使用负边距 *奇伎淫巧*** ###

这个技能要这样get：

1.  父元素清除浮动
2.  A元素宽100%不变，margin-left:-100px后，外部的文档流认为以边框为界，A减少了100px，而A是右浮动，也就是左边开始有100px空白可填充的文档流空间；
3.  子元素A1是认为父元素大小没有变化，margin-left:100px后，正好等于父元素在外部空出来的文档流空间。
4.  B元素左浮动，且是后面的dom节点，正好占据并且覆盖A空出来的空间

右边自适应1 右边自适应2 右边自适应3

</div>

左边固定1  左边固定2 左边固定3

</div>

.parent{
        background:#ddd;overflow:hidden; }

.l-box{
        float:left;width:100px;background:#bbb;}

.r-box{
        float:right;width:100%;margin-left:-100px;background:#999;}

.r-content{
        margin-left:100px;}

[demo展示][demo 2]

### **flex布局 *高大尚*** ###

父元素flex布局后，子元素默认就是弹性布局，除非你确定子元素的弹性方式  
ps：这个方法完美之处还在于，垂直方向也自动填充，轻松实现了等高布局！！  
html同第一个demo

.parent{
        display:flex; background:#ddd }

.l-child{
        flex:0 0 100px; background:#bbb }

.r-child{
        background:#999}

[demo展示][demo 3]

# **总结CSS面试题目的考察点及常见布局问题整理** #

整理网上流传的若干份面试题目，突发奇想，总结关于CSS面试题目的考察点，发现问题大多围绕几个属性和几种题目，水平有限，仅供参考。

写这个博文内心有种莫名奇妙的自我谴责感，实在不应该把面试层叠样式“应试”复习。牛逼的你，也许会说：万变不离其中，把css掌握了，哪里需要担心会考什么。呵呵！

## **1， 多元素水平居中** ##

实现一下效果：

平常人看见题目，最初感觉实现图片中的效果不难，设置小黑框的宽高边距，字体水平垂直居中即可。其实，题目应该实际上是考察多元素水平居中，即无论元素（小黑框）基数为多少，它们都能作为一个整体，水平居中。

在网站布局中，很多时候，子元素中使用行内元素如 span或块元素li标签且标签个数不定，而我们又想让这一块不管个数有多少个(子元素的总体宽度不定)，始终都能居中显示。这就需要设置子元素 display:inline-block。同时，根据display:inline-block的属性，子元素本身具备inline的特性，因此父元素 需要设置text-align：center，来实现子元素作为一个整体在父元素中水平居中。

1.  main\{ text-align:center;\} 
2.  div\{ display:inline-block; \*display:inline;/\*hank IE\*/ \*zoom:1;/\*hank IE\*/\}

使用display:inline-block属性，可以使**行内元素或块元素**能够不加float属性就可以定义自身的宽、高，同时又能使该元素在父元素居中显示。

在内联元素上定义display:inline-block属性，发现IE6、IE7中的显示效果同其它浏览器一致，但事实是ie7及更低版本的ie浏览器不支持display:inline-block这个属性。

在IE下，display: inline-block只是触发了元素的layout。比如将display: inline-block设置到div上，只能保证这个div拥有块元素的特征（可以设置宽度，高度等），但还是会产生换行。接下来要设置 display: inline，使其不产生换行。将display:inline-block;\*display:inline;写在同一个样式上，inline- block属性是不会触发元素的layout的，因此我们还要额外加上 \*zoom:1来触发layout。

除了以上所提到的有效方法之外，还有**另外一种方法**：

先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 样式声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。

div \{display:inline-block;...\}div \{\*display:inline;\}

但是要注意的是，display:inline-block元素间会产生多余空白（本题没有涉及）。解决方法：父元素定义font-size:0 去掉行内块元素水平方向空白；子元素定义vertical-align 属性去掉行内块元素垂直方向空白。

[http://codepen.io/floralam/pen/XJwWZJ?editors=110][http_codepen.io_floralam_pen_XJwWZJ_editors_110]

## **2， 栏栅化布局** ##

实现一下布局：

[http://codepen.io/floralam/pen/OPYyEE][http_codepen.io_floralam_pen_OPYyEE]

1.  .parent\{ 
2.   display: flex; 
3.   flex-direction: column;//上面两行等同于flex-flow：colomn
4.   flex-wrap: wrap;// 显示 wrap一行显示不完的时候换行
5.   height: 440px; 
6.   width: 660px; 
7.  \}

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。

**伸缩方向与换行(flex-flow)**

伸缩容器有一个CSS属性“flex-flow”用来决定伸缩项目的布局方式。

如果伸缩容器设置了“flex-flow”值为“row”，伸缩项目排列由左向右排列。

如果“flex-flow”值设置为“column”，伸缩项目排列由上至下排列。

**制作一个20%、60%、20%网格布局**

1.  .main-content \{ 
2.   width: 60%; 
3.  \} 
4.  
5.  .main-nav,.main-sidebar \{ 
6.   \-webkit-box-flex: 1; /\* OLD - iOS 6-, Safari 3.1-6 \*/
7.   \-moz-box-flex: 1; /\* OLD - Firefox 19- \*/
8.   width: 20%; /\* For old syntax, otherwise collapses. \*/
9.   \-webkit-flex: 1; /\* Chrome \*/
10.  \-ms-flex: 1; /\* IE 10 \*/
11.  flex: 1; /\* NEW, Spec - Opera 12.1, Firefox 20+ \*/
12. \}

## **3， 未知高度多行文本垂直居中** ##

[http://codepen.io/floralam/pen/WbBrwV?editors=110][http_codepen.io_floralam_pen_WbBrwV_editors_110]

1.  .container\{ 
2.   position: fixed; 
3.   left: 0; 
4.   top:0; 
5.   height: 100%; 
6.   width: 100%; 
7.   text-align: center; 
8.  \} 
9.  
10. .mask:after\{ 
11.  content: " "; display: inline-block; vertical-align: middle; height: 100% \} .dialog\{ display: inline-block; border: 3px solid lightblue; 
12. \}

box 容器通过 after或者before 生成一个高度 100% 的「备胎」，他的高度和容器的高度是一致的，相对于「备胎」垂直居中，在视觉上表现出来也就是相对于容器垂直居中了

## **4， 多栏自适应布局** ##

对于移动设备浏览器：[http://codepen.io/floralam/pen/NPVwgz?editors=110][http_codepen.io_floralam_pen_NPVwgz_editors_110]

1.  .container\{ 
2.   display:-webkit-box; 
3.  \} 
4.  
5.  .left\{ 
6.   \-webkit-box-flex:1; 
7.  \} 
8.  
9.  .right\{ 
10.  \-webkit-box-flex:1; 
11. \}

实现左右两侧元素，右侧元素的文字不会溢出到左侧位置。

**1****）让左边的图片左浮动或者绝对定位，**

[http://codepen.io/floralam/pen/wBbPPj][http_codepen.io_floralam_pen_wBbPPj]

1.  .right\{ 
2.  
3.   margin-left: 150px; 
4.  
5.  \}

**2****）让左边的图片左浮动或者绝对定位，**

[http://codepen.io/floralam/pen/gbJogQ][http_codepen.io_floralam_pen_gbJogQ]

.right\{

overflow:hidden;/\*让右侧文字和左侧图片自动分栏\*/

**3****）左侧图片设置为左浮动，**

[http://codepen.io/floralam/pen/bNyaaX?editors=110][http_codepen.io_floralam_pen_bNyaaX_editors_110]

.right\{

display: table-cell;/\*让右侧文字和左侧图片自动分栏\*/

**两栏或多栏自适应布局的通用类语句是（block水平标签，需配合浮动）：**

[http://codepen.io/floralam/pen/vEwpjV][http_codepen.io_floralam_pen_vEwpjV]

1.  .cell\{ 
2.  
3.   padding-right:10px; 
4.  
5.   display: table-cell; 
6.  
7.   \*display: inline-block; 
8.  
9.   \*width: auto; 
10. 
11. \}

## **5， 强制不换行** ##

div\{  
white-space:nowrap;  
\}

自动换行

div\{  
word-wrap: break-word; //性允许长单词或 URL 地址换行到下一行  
word-break: normal; //让浏览器实现在任意位置的换行  
\}

word-wrap是控制换行的。break-word是控制是否断词的。

强制英文单词断行

div\{

word-break:break-all;

## **6， li超过一定长度，以省略号显示** ##

[http://codepen.io/floralam/pen/zxQjrK][http_codepen.io_floralam_pen_zxQjrK]

1.  .nowrap li\{ 
2.   white-space:nowrap; 
3.   width:100px; 
4.   overflow:hidden; 
5.   text-overflow: ellipsis; 
6.  \}

##    **7， 左侧导航** ##

[http://codepen.io/floralam/pen/ogrbXW?editors=110][http_codepen.io_floralam_pen_ogrbXW_editors_110]

1.  .nav\{ 
2.  position:relative; 
3.  **float**:left;width:190px; 
4.  margin-right:-190px; 
5.  background:lightblue; 
6.  \} 
7.  .container\{ 
8.  **float**:right; 
9.  width:100%; 
10. background:pink; 
11. \} 
12. .content\{ 
13. margin-left:200px; 
14. \}

## **8， css3文字分栏** ##

[http://codepen.io/floralam/pen/ZYdOmN?editors=110][http_codepen.io_floralam_pen_ZYdOmN_editors_110]

## **9， 修复侧边栏** ##

在外容器的添加导航和主内容，当导航和主内容的宽度加上内外边距的数值大于外容器的宽度减去内边距的值，会导致导航和主内容（其中一个，html代码排后面的元素）被挤下。

[http://codepen.io/floralam/pen/XJLRYq?editors=110][http_codepen.io_floralam_pen_XJLRYq_editors_110]

解决方案：

1) Section元素上使用box-sizing:border-box;模拟IE6中，使得内元素的宽度为width的值，而非width加上padding和margin的值。

2) width:-moz-calc(75% -1rem \* 2);width:-webkit-calc(75% - 1rem \* 2); width: calc(75% - 1rem \* 2); width属性中减去padding值

3) [http://codepen.io/floralam/pen/yydPOE][http_codepen.io_floralam_pen_yydPOE]

在元素内部增加一个额外的容器，并将padding放在这个新增的内部容器中，这是一种修复方法，而且得到众多浏览器支持。

## **10， css描绘三角形** ##

[http://codepen.io/floralam/pen/azgGmZ][http_codepen.io_floralam_pen_azgGmZ]

很多关于使用css3来描绘特定图像，使用代码而非图片实现（多座小山包，返回顶部）的题目，都离不开描绘三角形。

## **11， 清除浮动的技巧** ##

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

1) 添加最后一个元素<div style ="clear:both"></div>

2) 父元素设置overflow: hidden;

3) 使用CSS的:after伪元素

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

# **从不同的角度分析Flex的优缺点** #

技术角度：

（１）具备了RIA时代富客户端的优点（C/S+B/S）

（２）支持多种服务器语言（JAVA、.NET、PHP）及主流框架（Spring、Hibernate）

（３）与Java结合后相当强大，能充分利用Java的资源背景

（４）拥有丰富的组件和第三方组件，对企业级的数据汇总和业务流程展现力较强悍

（５）借助开源的力量，拥有众多民间组织和牛人支持

（６）Adobe公司（还有MM多年积累）的强大背景

（７）源于Flash的天生丽质，轻松使用多媒体资源，动态交互性强

（８）借助FlashPlayer的安装普及度，轻松实现跨浏览器跨平台

（９）良好的架构设计和制作精良的文档示例（明年FLEX４同步推出中文版）

（１０）借助于插件丰富的Eclipse开发平台并拥有独立的IDE

（１１）框架设计重用性高，有利于模块化设计

（１２）近几年发展态势良好，获得了广泛认可，产品和技术也越发成熟

## **开发者角度：** ##

（１）开源，透明

（２）基于Eclipse开发平台，易上手，且插件丰富

（３）基于Eclipse平台，开发调试方便(FB4中的条件断点）

（４）ActionScript语言与Java的融合度和相似度较高，易学易用

（５）MXML标签与XML相似，逻辑清晰可读性强

（６）架构设计良好，耦合度低，有利于组件重用

（７）无需针对不同浏览器编写代码，摆脱编写和调试的噩梦（针对JS说的）

（８）类似VB的可视化拖拽组件，快速创建界面

（９）方便定制及使用第三方的皮肤和样式，无需美工也有好效果

（１０）支持多媒体资源，轻易开发动态交互性强的界面

（１１）众多的RPC组件保障对后台数据访问的安全性和效率

（１２）文档示例丰富，通过网络可以获取大量的学习资源

（１３）近两年发展态势良好，前景光明

## **企业角度：** ##

（１）开源，免费

（２）具备了RIA时代富客户端的优点（C/S+B/S）

（３）项目和组件的重用性高，易于资源积累和快速构建

（４）Flex提供了与其他语言的结合，能广泛利用已有的资源

（５）界面华丽，客户认可度高

（６）学习曲线一般，培训成本低

## **用户角度：** ##

（１）部署和更新方便

（２）界面漂亮，交互性强

（３）安全

## **缺点：** ##

（１）不擅长处理复杂的业务流程，主要还是适合展现（Flex不是万能的）

（２）继承了Flash的诸多优点，却唯独丢掉了Flash的小巧轻盈（减肥是永恒的话题）

（３）目前尚没有比较好的减肥策略，带宽较好时这不是问题（不是一般的卡。。。）

（４）对服务器和客户端的硬件设备都有一定要求（CPU和内存占用很生猛。。。）

（５）运行期内存泄露状况严重，尽管可以通过一定手段改善（这个很崩溃）

（６）对一些较专业的领域涉及较少，需要第三方组件支持（比如地质方面的）

（７）Adobe公司对中国分部的支持不够（感觉宣讲和文档都做得不够）

（８）搜索引擎对swf文件的支持不够（Adobe一直在努力）

（９）与以往浏览习惯不同，比如右键被屏蔽，图片无法保存（可以改善）

鉴于Flex生成的swf文件太肥是其主要缺点（加载慢，运行慢，内存占用多），我就主要从减肥和优化的角度来说一下使用心得。

## **使用心得：** ##

（１）Flex只是前台展现，需要搭配强大的后台（注意前后台的均衡和优化）

（２）考虑异步加载（比如分步加载外部资源）

（３）界面推荐使用相对布局，合理组合，避免多余嵌套

（４）界面加载图片推荐使用外部加载方式，尽可能多使用矢量图形

（５）规范CSS样式表，尤其注意使用的外部字体大小

（６）使用额外的皮肤和特效时需要综合考虑生成的文件大小和执行效率

（７）适当地考虑延时加载策略，主界面只显示必要的内容

（８）规范编码，提高执行效率，避免内存泄露

（９）使用RSL和Module和其他有效方式努力减肥

（１０）尽可能重写一些继承底层类的组件，执行效率更好

（１１）慎重使用重量级组件（比如DataGrid，AdvancedDataGrid）

# **[面试之响应式布局][Link 2]** #

[**响应式布局介绍**][Link 3]

**响应式布局是什么意思？**

响应式布局可以根据不同的浏览设备（PC端，平板，智能手机等）呈现不同的网页布局，同时减少缩放、平移和滚动。

适应移动端的大趋势，提高用户体验，减少开发成本。

**为什么要使用响应式布局？**

主要是使网页适用于用于移动端设备，屏幕分辨率是出现的最大的兼容性问题。

可以为不同的设备提供不同的网站，也就是同一网站做普通PC端和移动端两种页面。不论是前期的开发还是后期的维护改版，都非常的麻烦。

**响应式布局的缺点？**

兼容代码多，工作量大

**设计原则？适合什么样的项目？**

向下兼容，移动优先。

对于非常复杂的网页布局，不适合进行网页自适应的布局，原因之一是实现成本太高，其次就是复杂页面（例如容商网首页，中国企业集群首页等）也不适合移动端的浏览。

**其他的响应式布局的框架？**

Prue框架是Yahoo的一款轻量级的框架，兼容IE7以上，性能好，但是中文文档少，不利于团队开发，没有组件。

Foundation by ZURB，次于Bootstrap，重量级，362K大小

**Bootstrap****优势？**

**学习成本低**

**是目前最流行的自适应框架**

**性能非常好，最基础的文件大小只有149.1k**

bootstrap.min.js 35.1k

bootstrap.min.css 114k

**中文文档完善，还有全套的视频教程**

**有许多组件可以选择，如Bootstrap switch，Sco.js，Flat UI等，便于快速开发**

**兼容性**

<table> 
 <thead> 
  <tr> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:0cm;"><strong>Chrome</strong></p> </td> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:0cm;"><strong>Firefox</strong></p> </td> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:0cm;"><strong>Internet Explorer</strong></p> </td> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:0cm;"><strong>Opera</strong></p> </td> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:0cm;"><strong>Safari</strong></p> </td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:0cm;"><strong>Android</strong></p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
   <td> <p style="margin-left:0cm;">N/A</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;不支持</p> </td> 
   <td> <p style="margin-left:0cm;">N/A</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:0cm;"><strong>iOS</strong></p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
   <td> <p style="margin-left:0cm;">N/A</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;不支持</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:0cm;"><strong>Mac OS X</strong></p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:0cm;"><strong>Windows</strong></p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;支持</p> </td> 
   <td> <p style="margin-left:0cm;">&nbsp;不支持</p> </td> 
  </tr> 
 </tbody> 
</table>

windows平台，支持IE8，如果不用框架则需要IE9以上支持,而且通过插件Bsie（鄙视IE）可以兼容IE6。

**响应式布局实例**

响应式页面实例地址

[http://xys.laiwanapp.com/bootstrap-1/][http_xys.laiwanapp.com_bootstrap-1]

[http://xys.laiwanapp.com/bootstrap-2/][http_xys.laiwanapp.com_bootstrap-2]

[http://xys.laiwanapp.com/bootstrap-3/][http_xys.laiwanapp.com_bootstrap-3]

**兼容性问题（分辨率分解-\*~768手机,768~992平板,992~1200普通PC,1200~\*大屏幕PC）**

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">chrome18</p> </td> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">firefox11（firefox3.6）</p> </td> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">IE7（较少用户）</p> </td> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">IE8（主流）</p> </td> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">IE9（代表最新版本）</p> </td> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">IE6</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">实例1-微博</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无（无圆角）</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">崩溃</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">实例2-相册</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">圆角错误</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无圆角（无圆角，不支持背景尺寸属性）</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">崩溃</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">实例3-博客</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">圆角错误</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无圆角，&nbsp;进度条无动画（无圆角，进度条无动画）</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">无</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">崩溃</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">其它</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

说明

**chrome18****和firefox都是旧版本的，用户非常少**

**不支持背景属性可以用position和z-index属性解决**

**IE6****崩溃可以使用针对Bootstrap的插件Bsie解决大部分，但如果不要求对IE6支持，不建议使用，影响性能**

**下图分别是无圆角，正常圆角，圆角错误，圆角是CSS3属性，所以会出现兼容问题，但IE7以上都支持，已经很好了（w3school说IE9以上才支持，说明使用了css hack）**

**且官方文档里说明说明了这一点：**[**http://v3.bootcss.com/css/\#images-shapes**][http_v3.bootcss.com_css_images-shapes]

**总结：支持主流浏览器，旧版本的浏览器出现的兼容性问题不大。**

![https://images0.cnblogs.com/blog2015/716352/201505/110924492671680.png][https_images0.cnblogs.com_blog2015_716352_201505_110924492671680.png]　　![/images/20220518/772fc9d25699466f921896c1b84854cb.png][https_images0.cnblogs.com_blog2015_716352_201505_110925264708779.png]

其它需要改进

移动端测试

**兼容性问题（分辨率分解-**

**1. \*~768****手机，1栏**

**2. 768~992****平板，2栏**

**3. 992~1200****普通PC，2栏**

**4. 1200~\*****大屏幕PC，3栏**

**）**

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">分辨率dpi</p> </td> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">ppi</p> </td> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">型号</p> </td> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">竖</p> </td> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">横</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">2560x1536（手机）</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">546</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">MX4 pro</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">1栏</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">1栏</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">720x1280（手机）</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">华为荣耀3c</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">1栏</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">1栏</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">1200x1920（手机平板）</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">华为 x1 7.0</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">1栏</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">2栏</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;800x1280（平板）</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;toshiba wt8a(win 8.1系统)</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">2栏</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">3栏</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;1366x768</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;Acer win8.1&nbsp;</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;-</p> </td> 
   <td style="vertical-align:top;"> <p style="margin-left:0cm;">&nbsp;-</p> </td> 
  </tr> 
 </tbody> 
</table>

--------------------

原理

## **2.怎样实现响应式布局** ##

现在响应式布局用得比较大众的应该是Bootstrap，但是我并不打算使用。原因很简单，我对Bootstrap不熟悉不了解。然后 我简单的看了下Bootstrap是怎么实现的响应式布局。原理很简单，就是使用到了CSS3中的media。media何方神圣？可以用来吃吗？它可以针对不同的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式。且当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。既然如此，响应式何愁。

## **3.media的简单使用** ##

Max Width：在可视区域的宽度小于 600px 的时候被应用。

@media screen and (max-width: 600px) {

.class {

background: #0094ff;

}

Min Width：在可视区域的宽度大于600px 的时候被应用。

@media screen and (min-width: 600px) {

.class {

background: red;

}

简单？对，就是如此简单。您还可以 在600到900直接的启用。

@media screen and (min-width: 600px) and (max-width: 900px) {

.class {

background: #0094ff;

}

当然，您还可以，放入单独文件。爽歪歪了吧。

好了，你已经知道得太多了。实现一个首页的响应式 基本上已经够用了。

默认样式 显示 移动端：

.blog_body_e.col-xs-12 .a_blog_user {

display: inline-block;

}

.blog_body_e, .blog_body_b {

padding-left: 10px;

padding-right: 10px;

}

如果是PC端：（默认 大于992px就算是PC端 当然，你也可以自定义）

@media (min-width: 992px) {

.blog_body_e.col-md-3 .a_blog_user {

display: block;

}

.blog_body .blog_body_b {

width: 80%;

float: left;

}

.blog_body .blog_body_e {

width: 20%;

float: left;

box-sizing: border-box;

padding-right: 25px;

}

.blog_body_e, .blog_body_b {

padding-left: 20px;

padding-right: 20px;

}

我们看分布看看效果图

*  [博客园][Link 4]
 *  [首页][Link 5]
 *  [新随笔][Link 6]
 *  [联系][Link 7]
 *  [管理][Link 8]
 *  [订阅][Link 9]

随笔\- 113 文章\- 2 评论\- 10

# **[最全前端开发面试问题及答案整理][Link 10]** #

## **前端开发面试知识点大纲：** ##

HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。

JavaScript： 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他： HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

##    **1.请你谈谈Cookie的弊端** ##

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。 第一：每个特定的域名下最多生成20个cookie

1.IE6或更低版本最多20个cookie  
2.IE7和之后的版本最后可以有50个cookie。  
3.Firefox最多50个cookie  
4.chrome和Safari没有做硬性限制  
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据，叫做uerData，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

### **优点：极高的扩展性和可用性** ###

1.通过良好的编程，控制保存在cookie中的session对象的大小。  
2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。  
3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。  
4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。  
缺点：

1.\`Cookie\`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

##    **2.浏览器本地存储** ##

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

## **3.web storage和cookie的区别** ##

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

CSS 相关问题

display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，  
就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

##    **CSS中 link 和@import 的区别是？** ##

A：(1) link属于HTML标签，而@import是CSS提供的; (2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题; (4) link方式的样式的权重 高于@import的权重.

##    **position的absolute与fixed共同点与不同点** ##

A：共同点：  
1.改变行内元素的呈现方式，display被置为block；2.让元素脱离普通流，不占据空间；3.默认会覆盖到非定位元素上

B不同点：  
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

##    **介绍一下CSS的盒子模型？** ##

1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

## **CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？** ##

\* 1.id选择器（ \# myid）  
2.类选择器（.myclassname）  
3.标签选择器（div, h1, p）  
4.相邻选择器（h1 + p）  
5.子选择器（ul > li）  
6.后代选择器（li a）  
7.通配符选择器（ \* ）  
8.属性选择器（a\[rel = "external"\]）  
9.伪类选择器（a: hover, li:nth-child）

\* 可继承的样式： font-size font-family color, text-indent;

\* 不可继承的样式：border padding margin width height ;

\* 优先级就近原则，同权重情况下样式定义最近者为准;

\* 载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag

important 比 内联优先级高,但内联比 id 要高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。  
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。  
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。  
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。  
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。  
:enabled :disabled 控制表单控件的禁用状态。  
:checked 单选框或复选框被选中。

##    **列出display的值，说明他们的作用。position的值， relative和absolute分别是相对于谁进行定位的？** ##

1.  
block 象块类型元素一样显示。  
inline 缺省值。象行内元素类型一样显示。  
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。  
list-item 象块类型元素一样显示，并添加样式列表标记。

2.  
\*absolute   
生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

\*fixed （老IE不支持）  
生成绝对定位的元素，相对于浏览器窗口进行定位。

\*relative   
生成相对定位的元素，相对于其在普通流中的位置进行定位。

\* static 默认值。没有定位，元素出现在正常的流中  
\*（忽略 top, bottom, left, right z-index 声明）。

\* inherit 规定从父元素继承 position 属性的值。

##    **CSS3有哪些新特性？** ##

CSS3实现圆角（border-radius），阴影（box-shadow），  
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）  
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜  
增加了更多的CSS选择器 多背景 rgba   
在CSS3中唯一引入的伪元素是::selection.  
媒体查询，多栏布局  
border-image

##    **为什么要初始化CSS样式。** ##

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

\*最简单的初始化方法就是： \* \{padding: 0; margin: 0;\} （不建议）

淘宝的样式初始化：  
1 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td \{ margin:0; padding:0; \}  
2 body, button, input, select, textarea \{ font:12px/1.5tahoma, arial, \\5b8b\\4f53; \}  
3 h1, h2, h3, h4, h5, h6\{ font-size:100%; \}  
4 address, cite, dfn, em, var \{ font-style:normal; \}  
5 code, kbd, pre, samp \{ font-family:couriernew, courier, monospace; \}  
6 small\{ font-size:12px; \}  
7 ul, ol \{ list-style:none; \}  
8 a \{ text-decoration:none; \}  
9 a:hover \{ text-decoration:underline; \}  
10 sup \{ vertical-align:text-top; \}  
11 sub\{ vertical-align:text-bottom; \}  
12 legend \{ color:\#000; \}  
13 fieldset, img \{ border:0; \}  
14 button, input, select, textarea \{ font-size:100%; \}  
15 table \{ border-collapse:collapse; border-spacing:0; \}

##    **对BFC规范的理解？** ##

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。  
（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。）  
解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了\`http2\`。  
html部分

## **说说你对语义化的理解？** ##

1.  1.  去掉或者丢失样式的时候能够让页面呈现出清晰的结构  
        2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；  
        3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；  
        4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

##    **Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?** ##

（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。

（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

##    **你知道多少种Doctype文档类型？** ##

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。  
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。  
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。  
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks  
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

##    **HTML与XHTML——二者有什么区别** ##

区别：  
1.所有的标记都必须要有一个相应的结束标记  
2.所有标签的元素和属性的名字都必须使用小写  
3.所有的XML标记都必须合理嵌套  
4.所有的属性必须用引号""括起来  
5.把所有<和&特殊符号用编码表示  
6.给所有属性赋一个值  
7.不要在注释内容中使“--”  
8.图片必须有说明文字

##    **常见兼容性问题？** ##

\* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

\* 浏览器默认的margin和padding不同。解决方案是加一个全局的\*\{margin:0;padding:0;\}来统一。

\* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

\* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）  
\#box\{ float:left; width:10px; margin:0 0 0 100px;\}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——\_display:inline;将其转化为行内属性。(\_这个符号只有ie6会识别)

\* 渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\\9”这一标记，将IE游览器从所有情况中分离出来。  
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

css  
.bb\{  
background-color:\#f1ee18;/\*所有识别\*/  
.background-color:\#00deff\\9; /\*IE6、7、8识别\*/  
\+background-color:\#a200ff;/\*IE6、7识别\*/  
\_background-color:\#1e0bd1;/\*IE6识别\*/  
\}

\* IE下,可以使用获取常规属性的方法来获取自定义属性,  
也可以使用getAttribute()获取自定义属性;  
Firefox下,只能使用getAttribute()获取自定义属性.   
解决方法:统一通过getAttribute()获取自定义属性.

\* IE下,event对象有x,y属性,但是没有pageX,pageY属性;  
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

\* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

\* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,   
可通过加入 CSS 属性 \-webkit-text-size-adjust: none; 解决.

\* 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:  
L-V-H-A : a:link \{\} a:visited \{\} a:hover \{\} a:active \{\}

\* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用\[html5\](http://www.w3.org/TR/html5/single-page.html)推荐的写法：\`<doctype html>\`

\* 上下margin重合问题  
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。  
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。  
\* ie6对png图片格式支持不好(引用一段脚本处理)

##    **解释下浮动和它的工作原理？清除浮动的技巧** ##

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.  使用空标签清除浮动。  
    这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。  
    2.使用overflow。  
    给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。  
    3.使用after伪对象清除浮动。  
    该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

##    **浮动元素引起的问题和解决办法？** ##

浮动元素引起的问题：  
（1）父元素的高度无法被撑开，影响与父元素同级的元素  
（2）与浮动元素同级的非浮动元素会跟随其后  
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构  
解决方法： 使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after\{content: ".";display: block;height: 0;clear: both;visibility: hidden;\}  
.clearfix\{display: inline-block;\} /\* for IE/Mac \*/  
清除浮动的几种方法：

1，额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）  
2，使用after伪类

\#parent:after\{  
content:".";  
height:0;  
visibility:hidden;  
display:block;  
clear:both;  
\}

3,浮动外部元素  
4,设置\`overflow\`为\`hidden\`或者auto  
IE 8以下版本的浏览器中的盒模型有什么不同

IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框  
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

（1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById() //通过元素Id，唯一性

##    **html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？** ##

\* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

\* 拖拽释放(Drag and drop) API   
语义化更好的内容标签（header,nav,footer,aside,article,section）  
音频、视频API(audio,video)  
画布(Canvas) API  
地理(Geolocation) API  
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；  
sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search   
新的技术webworker, websocket, Geolocation

\* 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

\* IE8/IE7/IE6支持通过document.createElement方法产生的标签，  
可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

\* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架  
   
如何区分： DOCTYPE声明\\新增的结构元素\\功能元素

##    **iframe的优缺点？** ##

1.<iframe>优点：

解决加载缓慢的第三方内容如图标和广告等的加载问题  
Security sandbox  
并行加载脚本

2.<iframe>的缺点：

\*iframe会阻塞主页面的Onload事件；

\*即时内容为空，加载也需要时间  
\*没有语意

##    **如何实现浏览器内多个标签页之间的通信?** ##

调用localstorge、cookies等本地存储方式

##    **webSocket如何兼容低浏览器？** ##

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR

##    **线程与进程的区别** ##

一个程序至少有一个进程,一个进程至少有一个线程.   
线程的划分尺度小于进程，使得多线程程序的并发性高。  
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。  
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。  
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是

进程和线程的重要区别。

##    **你如何对网站的文件和资源进行优化？** ##

期待的解决方案包括：  
文件合并  
文件最小化/文件压缩  
使用 CDN 托管  
缓存的使用（多个域名来提供缓存）  
其他

##    **请说出三种减少页面加载时间的方法。** ##

1.优化图片  
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）  
3.优化CSS（压缩合并css，如margin-top,margin-left...)  
4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）  
5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。  
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

6.减少http请求（合并文件，合并图片）。  
你都使用哪些工具来测试代码的性能？

Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo

##    **什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？** ##

FOUC - Flash Of Unstyled Content 文档样式闪烁  
<style type="text/css" media="all">@import "../fouc.css";</style>   
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。  
解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。

##    **null和undefined的区别？** ##

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。  
null表示"没有对象"，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

##    **new操作符具体干了什么呢?** ##

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

var obj = \{\};  
obj.\_\_proto\_\_ = Base.prototype;  
Base.call(obj);

##    **JSON 的了解？** ##

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。  
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小  
\{'age':'12', 'name':'back'\}  
js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js

##    **如何解决跨域问题?** ##

jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面

jsonp的原理是动态插入script标签  
具体参见：详解js跨域问题

documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

##    **.call() 和 .apply() 的区别和作用？** ##

作用：动态改变某个类的某个方法的运行环境。 区别参见：JavaScript学习总结（四）function函数部分

## **哪些操作会造成内存泄漏？** ##

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。  
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。  
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）  
详见：详解js变量、作用域及内存

## **JavaScript中的作用域与变量声明提升？** ##

详见：详解JavaScript函数模式

## **如何判断当前脚本运行在浏览器还是node环境中？** ##

## **通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中   其他问题？** ##

## **你遇到过比较难的技术问题是？你是如何解决的？** ##

## **常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？** ##

## **列举IE 与其他浏览器不一样的特性？** ##

## **99%的网站都需要被重构是那本书上写的？** ##

\* 网站重构：应用web标准进行设计（第2版）

##    **什么叫优雅降级和渐进增强？** ##

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。  
详见：css学习归纳总结（一）

## **WEB应用从服务器主动推送Data到客户端有那些方式？** ##

## **对Node的优点和缺点提出了自己的看法？** ##

\*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，  
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。  
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，  
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

\*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，  
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子

。

##    **除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？** ##

## **你常用的开发工具是什么，为什么？** ##

## **对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？** ##

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。  
1、实现界面交互  
2、提升用户体验  
3、有了Node.js，前端可以实现服务端的一些事情

前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，

参与项目，快速高质量完成实现效果图，精确到1px；

与团队成员，UI设计，产品经理的沟通；

做好的页面结构，页面重构和用户体验；

处理hack，兼容、写出优美的代码格式；

针对服务器的优化、拥抱最新前端技术。

##    **你在现在的团队处于什么样的角色，起到了什么明显的作用？** ##

## **你认为怎样才是全端工程师（Full Stack developer）？** ##

## **介绍一个你最得意的作品吧？** ##

## **项目中遇到什么问题？如何解决？** ##

## **你的优点是什么？缺点是什么？** ##

## **如何管理前端团队?** ##

## **最近在学什么？能谈谈你未来3，5年给自己的规划吗？** ##

## **你有哪些性能优化的方法？** ##

（详情请看雅虎14条性能优化原则）。

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4） 当需要设置的样式很多时设置className而不是直接操作style。

（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。  
http状态码有那些？分别代表是什么意思？

100-199 用于指定客户端应相应的某些动作。  
200-299 用于表示请求成功。  
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。  
400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。  
500-599 用于支持服务器错误。 503 – 服务不可用  
详情：http://segmentfault.com/blog/trigkit4/1190000000691919

## **一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？** ##

分为4个步骤：  
（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。  
（2）， 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步\-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。  
（3），一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。  
（4），此时，Web服务器提供资源服务，客户端开始下载资源。

请求返回后，便进入了我们关注的前端模块  
简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM  
详情：从输入 URL 到浏览器接收的过程中发生了什么事情？

## **平时如何管理你的项目？** ##

先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

页面进行标注（例如 页面 模块 开始和结束）；

CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

JS 分文件夹存放 命名以该JS功能为准的英文翻译。

图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理  
说说最近最流行的一些东西吧？常去哪些网站？

Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。  
网站：w3cfuns,sf,hacknews,CSDN,慕课，博客园，InfoQ,w3cplus等

##    **javascript对象的几种创建方式** ##

1.  1.  工厂模式  
        2，构造函数模式  
        3，原型模式  
        4，混合构造函数和原型模式  
        5，动态原型模式  
        6，寄生构造函数模式  
        7，稳妥构造函数模式

##    **javascript继承的6种方法** ##

1，原型链继承  
2，借用构造函数继承  
3，组合继承(原型\+借用构造)  
4，原型式继承  
5，寄生式继承  
6，寄生组合式继承  
详情：JavaScript继承方式详解

## **ajax过程** ##

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.  
详情：JavaScript学习总结（七）Ajax和Http状态字

## **异步加载和延迟加载** ##

1.  异步加载的方案： 动态插入script标签  
    2.通过ajax去获取js代码，然后通过eval执行  
    3.script标签上添加defer或者async属性  
    4.创建并插入iframe，让它异步执行js  
    5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

##    **前端安全问题？** ##

（XSS，sql注入，CSRF）  
CSRF：是跨站请求伪造，很明显根据刚刚的解释，他的核心也就是请求伪造，通过伪造身份提交POST和GET请求来进行跨域的攻击。

\*\*完成CSRF需要两个步骤：\*\*

1.登陆受信任的网站A，在本地生成COOKIE

2.在不登出A的情况下，或者本地COOKIE没有过期的情况下，访问危险网站B。  
ie各版本和chrome可以并行下载多少个资源

IE6 两个并发，iE7升级之后的6个并发，之后版本也是6个

Firefox，chrome也是6个  
javascript里面的继承怎么实现，如何避免原型链上面的对象共享

用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量  
grunt， YUI compressor 和 google clojure用来进行代码压缩的用法。

YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具，采用Java开发。

使用方法：

//压缩JS  
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js  
//压缩CSS  
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css  
详情请见：你需要掌握的前端代码性能优化工具

## **Flash、Ajax各自的优缺点，在使用中如何取舍？** ##

1、Flash ajax对比  
Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。  
Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。  
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM  
请解释一下 JavaScript 的同源策略。

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。 指一段脚本只能读取来自同一来源的窗口和文档的属性。

## **为什么要有同源限制？** ##

我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

## **什么是 "use strict"; ? 使用它的好处和坏处分别是什么？** ##

ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

设立"严格模式"的目的，主要有以下几个：

\- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;  
\- 消除代码运行的一些不安全之处，保证代码运行的安全；  
\- 提高编译器效率，增加运行速度；  
\- 为未来新版本的Javascript做好铺垫。  
注：经过测试IE6,7,8,9均不支持严格模式。

缺点： 现在网站的JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

## **GET和POST的区别，何时使用POST？** ##

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符  
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，  
也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求：  
无法使用缓存文件（更新服务器上的文件或数据库）  
向服务器发送大量数据（POST 没有数据量限制）  
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

##    **哪些地方会出现css阻塞，哪些地方会出现js阻塞？** ##

js的阻塞特性：所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载JS，但是JS下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。

由于浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。

嵌入JS会阻塞所有内容的呈现，而外部JS只会阻塞其后内容的显示，2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

CSS怎么会阻塞加载了？CSS本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6下CSS都是阻塞加载）

当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

## **嵌入JS应该放在什么位置？** ##

1、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。

2、如果嵌入JS放在head中，请把嵌入JS放在CSS头部。

3、使用defer（只支持IE）

4、不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用\`setTimeout\`来调用

##    **Javascript无阻塞加载具体方式** ##

将脚本放在底部。<link>还是放在head中，用以保证在js加载前，能加载出正常显示的页面。<script>标签放在</body>前。  
成组脚本：由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。

非阻塞脚本：等页面完成加载后，再加载js代码。也就是，在window.onload事件发出后开始下载代码。 （1）defer属性：支持IE4和fierfox3.5更高版本浏览器 （2）动态脚本元素：文档对象模型（DOM）允许你使用js动态创建HTML的几乎全部文档内容。代码如下：

## **闭包相关问题？** ##

详情请见：详解js闭包

## **js事件处理程序问题？** ##

详情请见：JavaScript学习总结（九）事件详解

## **eval是做什么的？** ##

它的功能是把对应的字符串解析成JS代码并运行；  
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。  
写一个通用的事件侦听器函数?

##    **Node.js的适用场景？** ##

高并发、聊天、实时消息推送

##    **JavaScript原型，原型链 ? 有什么特点？** ##

\* 原型对象也是普通的对象，是对象一个自带隐式的 \_\_proto\_\_ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。  
\* 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

##    **页面重构怎么操作？** ##

编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。  
WEB应用从服务器主动推送Data到客户端有那些方式？

html5 websoket  
WebSocket通过Flash  
XHR长时间连接  
XHR Multipart Streaming  
不可见的Iframe  
<script>标签的长时间连接(可跨域)

##    **事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？** ##

1 // event(事件)工具集，来源：github.com/markyun  
2 markyun.Event = \{  
3 // 页面加载完成后  
4 readyEvent : function(fn) \{  
5 if (fn==null) \{  
6 fn=document;  
7 \}  
8 var oldonload = window.onload;  
9 if (typeof window.onload != 'function') \{  
10 window.onload = fn;  
11 \} else \{  
12 window.onload = function() \{  
13 oldonload();  
14 fn();  
15 \};  
16 \}  
17 \},  
18 // 视能力分别使用dom0||dom2||IE方式 来绑定事件  
19 // 参数： 操作的元素,事件名称 ,事件处理程序  
20 addEvent : function(element, type, handler) \{  
21 if (element.addEventListener) \{  
22 //事件类型、需要执行的函数、是否捕捉  
23 element.addEventListener(type, handler, false);  
24 \} else if (element.attachEvent) \{  
25 element.attachEvent('on' + type, function() \{  
26 handler.call(element);  
27 \});  
28 \} else \{  
29 element\['on' + type\] = handler;  
30 \}  
31 \},  
32 // 移除事件  
33 removeEvent : function(element, type, handler) \{  
34 if (element.removeEnentListener) \{  
35 element.removeEnentListener(type, handler, false);  
36 \} else if (element.datachEvent) \{  
37 element.detachEvent('on' + type, handler);  
38 \} else \{  
39 element\['on' + type\] = null;  
40 \}  
41 \},  
42 // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)  
43 stopPropagation : function(ev) \{  
44 if (ev.stopPropagation) \{  
45 ev.stopPropagation();  
46 \} else \{  
47 ev.cancelBubble = true;  
48 \}  
49 \},  
50 // 取消事件的默认行为  
51 preventDefault : function(event) \{  
52 if (event.preventDefault) \{  
53 event.preventDefault();  
54 \} else \{  
55 event.returnValue = false;  
56 \}  
57 \},  
58 // 获取事件目标  
59 getTarget : function(event) \{  
60 return event.target || event.srcElement;  
61 \},  
62 // 获取event对象的引用，取到事件的所有信息，确保随时能使用event；  
63 getEvent : function(e) \{  
64 var ev = e || window.event;  
65 if (!ev) \{  
66 var c = this.getEvent.caller;  
67 while (c) \{  
68 ev = c.arguments\[0\];  
69 if (ev && Event == ev.constructor) \{  
70 break;  
71 \}  
72 c = c.caller;  
73 \}  
74 \}  
75 return ev;  
76 \}  
77 \};  
1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。  
2. 事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。；  
3. ev.stopPropagation();注意旧ie的方法 ev.cancelBubble = true;

##    **ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?** ##

详情请见：JavaScript学习总结（七）Ajax和Http状态字

1. 通过异步模式，提升了用户体验

2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

## **. Ajax的最大的特点是什么。** ##

Ajax可以实现动态不刷新（局部刷新）  
readyState属性 状态 有5个可取值： 0=未初始化 ，1=启动 2=发送，3=接收，4=完成

### **ajax的缺点** ###

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

跨域： jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

##    **js对象的深度克隆** ##

1 function clone(Obj) \{  
2 var buf;  
3 if (Obj instanceof Array) \{  
4 buf = \[\]; //创建一个空的数组  
5 var i = Obj.length;  
6 while (i--) \{  
7 buf\[i\] = clone(Obj\[i\]);  
8 \}  
9 return buf;  
10 \}else if (Obj instanceof Object)\{  
11 buf = \{\}; //创建一个空对象  
12 for (var k in Obj) \{ //为这个对象添加新的属性  
13 buf\[k\] = clone(Obj\[k\]);  
14 \}  
15 return buf;  
16 \}else\{  
17 return Obj;  
18 \}  
19 \}

##    **AMD和CMD 规范的区别？** ##

详情请见：详解JavaScript模块化开发

## **网站重构的理解？** ##

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS  
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)  
对于移动平台的优化  
针对于SEO进行优化  
深层次的网站重构应该考虑的方面

减少代码间的耦合  
让代码保持弹性  
严格按规范编写代码  
设计可扩展的API  
代替旧有的框架、语言(如VB)  
增强用户体验  
通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决)  
程序的性能优化(如数据读写)  
采用CDN来加速资源加载  
对于JS DOM的优化  
HTTP服务器的文件缓存

##    **如何获取UA？** ##

1 <script>  
2 function whatBrowser() \{  
3 document.Browser.Name.value=navigator.appName;  
4 document.Browser.Version.value=navigator.appVersion;  
5 document.Browser.Code.value=navigator.appCodeName;  
6 document.Browser.Agent.value=navigator.userAgent;  
7 \}  
8 </script>

##    **js数组去重** ##

以下是数组去重的三种方法：

1 Array.prototype.unique1 = function () \{  
2 var n = \[\]; //一个新的临时数组  
3 for (var i = 0; i < this.length; i++) //遍历当前数组  
4 \{  
5 //如果当前数组的第i已经保存进了临时数组，那么跳过，  
6 //否则把当前项push到临时数组里面  
7 if (n.indexOf(this\[i\]) == -1) n.push(this\[i\]);  
8 \}  
9 return n;  
10 \}  
11  
12 Array.prototype.unique2 = function()  
13 \{  
14 var n = \{\},r=\[\]; //n为hash表，r为临时数组  
15 for(var i = 0; i < this.length; i++) //遍历当前数组  
16 \{  
17 if (!n\[this\[i\]\]) //如果hash表中没有当前项  
18 \{  
19 n\[this\[i\]\] = true; //存入hash表  
20 r.push(this\[i\]); //把当前数组的当前项push到临时数组里面  
21 \}  
22 \}  
23 return r;  
24 \}  
25  
26 Array.prototype.unique3 = function()  
27 \{  
28 var n = \[this\[0\]\]; //结果数组  
29 for(var i = 1; i < this.length; i++) //从第二项开始遍历  
30 \{  
31 //如果当前数组的第i项在当前数组中第一次出现的位置不是i，  
32 //那么表示第i项是重复的，忽略掉。否则存入结果数组  
33 if (this.indexOf(this\[i\]) == i) n.push(this\[i\]);  
34 \}  
35 return n;  
36 \}

##    **HTTP状态码** ##

1 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息  
2 200 OK 正常返回信息  
3 201 Created 请求成功并且服务器创建了新的资源  
4 202 Accepted 服务器已接受请求，但尚未处理  
5 301 Moved Permanently 请求的网页已永久移动到新位置。  
6 302 Found 临时性重定向。  
7 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。  
8 304 Not Modified 自从上次请求后，请求的网页未修改过。  
9  
10 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。  
11 401 Unauthorized 请求未授权。  
12 403 Forbidden 禁止访问。  
13 404 Not Found 找不到如何与 URI 相匹配的资源。  
14  
15 500 Internal Server Error 最常见的服务器端错误。  
16 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

##    **cache-control** ##

网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。

Expires 头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。允许客户端在这个时间之前不去检查（发请求），等同max-age的效果。但是如果同时存在，则被Cache-Control的max-age覆盖。

Expires = "Expires" ":" HTTP-date  
例如

Expires: Thu, 01 Dec 1994 16:00:00 GMT （必须是GMT格式）  
如果把它设置为\-1，则表示立即过期

Expires和max-age都可以用来指定文档的过期时间，但是二者有一些细微差别

1.Expires在HTTP/1.0中已经定义，Cache-Control:max-age在HTTP/1.1中才有定义，为了向下兼容，仅使用max-age不够；  
2.Expires指定一个绝对的过期时间(GMT格式),这么做会导致至少2个问题：1)客户端和服务器时间不同步导致Expires的配置出现问题。 2）很容易在配置后忘记具体的过期时间，导致过期来临出现浪涌现象；

3.max-age 指定的是从文档被访问后的存活时间，这个时间是个相对值(比如:3600s),相对的是文档第一次被请求时服务器记录的Request\_time(请求时间)

4.Expires指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime),而max-age相对对的是文档的请求时间(Atime)

如果值为no-cache,那么每次都会访问服务器。如果值为max-age,则在过期之前不会重复访问服务器。  
js操作获取和设置cookie 1 //创建cookie

2 function setCookie(name, value, expires, path, domain, secure) \{  
3 var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);  
4 if (expires instanceof Date) \{  
5 cookieText += '; expires=' + expires;  
6 \}  
7 if (path) \{  
8 cookieText += '; expires=' + expires;  
9 \}  
10 if (domain) \{  
11 cookieText += '; domain=' + domain;  
12 \}  
13 if (secure) \{  
14 cookieText += '; secure';  
15 \}  
16 document.cookie = cookieText;  
17 \}  
18  
19 //获取cookie  
20 function getCookie(name) \{  
21 var cookieName = encodeURIComponent(name) + '=';  
22 var cookieStart = document.cookie.indexOf(cookieName);  
23 var cookieValue = null;  
24 if (cookieStart > -1) \{  
25 var cookieEnd = document.cookie.indexOf(';', cookieStart);  
26 if (cookieEnd == -1) \{  
27 cookieEnd = document.cookie.length;  
28 \}  
29 cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));  
30 \}  
31 return cookieValue;  
32 \}  
33  
34 //删除cookie  
35 function unsetCookie(name) \{  
36 document.cookie = name + "= ; expires=" + new Date(0);3  
\]

# **[【web前端开发】浏览器兼容性处理大全][web]** #

## **1.居中问题** ##

1.  1.    
          
        div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码margin: 0 auto;

##    **2、高度问题** ##

两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：.float\_bottom \{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;\}

##    **3、clear:both;** ##

不想受到float浮动的，就在div中写入clear:both;

##    **4、IE浮动 margin产生的双倍距离**    ##

\#box \{  
float:left;  
width:100px;  
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离  
display:inline; //使浮动忽略  
\}

##    **5、padding问题** ##

FF设置 padding 后，div会增加 height 和 width，但IE不会 （\* 标准的 XHTML1.0 定义 dtd 好像一致了）高度控制恰当，或尝试使用 height:100%;宽度减少使用 padding但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义。

##    **6、div嵌套时 y轴上 padding和 marign的问题** ##

FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign  
IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个  
FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面

##    **7、padding，marign，height，width的傻瓜式解决技巧**    ##

注意是技巧，不是方法：  
写好标准头  
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
<html xmlns=”http://www.w3.org/1999/xhtml”>  
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding

##    **8、列表类**    ##

1. ul标签在FF中默认是有 padding值的，而在IE中只有margin有值  
先定义 ul \{margin:0;padding:0;\}  
2. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成: \{list-style:none;margin:0px;padding:0px;\}

##    **9、显示类（display:block,inline）**    ##

1. display:block,inline两个元素  
display:block; //可以为内嵌元素模拟为块元素  
display:inline; //实现同一行排列的的效果  
display:table; //for FF,模拟table的效果  
display:block 块元素，元素的特点是：  
总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度  
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子  
display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子  
2.鼠标手指状显示  
全部用标准的写法 cursor: pointer;

##    **10、背景、图片类**    ##

1. background显示问题  
全部注意补齐 width，height 属性  
2.背景透明问题  
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);  
IE: filter: alpha(opacity=10);  
FF: opacity:0.6;  
FF: -moz-opacity:0.10;  
最好两个都写，并将opacity属性放在下面

##    **11、min-height最小高度的实现（兼容IE6、IE7、FF）**    ##

作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。  
\#mrjin \{  
background:\#ccc;  
min-height:100px;  
height:auto !important;  
height:100px;  
overflow:visible;  
\}

##    **12、著名的 Meyer Reset（重置）**    ##

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td  
\{  
margin: 0;  
padding: 0;  
border: 0;  
outline: 0;  
font-weight: inherit;  
font-style: inherit;  
font-size: 100%;  
font-family: inherit;  
vertical-align: baseline;  
\}  
:focus \{  
outline: 0;  
\}  
body \{  
line-height: 1;  
color: black;  
background: white;  
\}  
ol, ul \{  
list-style: none;  
\}  
table \{  
border-collapse: separate;  
border-spacing: 0;  
\}  
caption, th, td \{  
text-align: left;  
font-weight: normal;  
\}  
blockquote:before, blockquote:after,  
q:before, q:after \{  
content: "";  
\}  
blockquote, q \{  
quotes: "" "";  
\}

##    **13、跨浏览器的CSS透明度**    ##

.transparent \{  
opacity: 0.7;  
\-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
filter: alpha(opacity=70);  
\-moz-opacity: 0.7;  
\-khtml-opacity: 0.7;

##    **14、文字阴影（CSS3）**    ##

.text \{ text-shadow: 1px 1px 1px \#666; filter: Shadow(Color=\#666666, Direction=135, Strength=5); \}

##    **15、Box阴影(CSS3)**    ##

.box \{ box-shadow: 5px 5px 5px \#666; -moz-box-shadow: 5px 5px 5px \#666; -webkit-box-shadow: 5px 5px 5px \#666; \}

##    **16、Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)**    ##

<div id="wrap">  
<div id="main" class="clearfix"></div>  
</div>  
<div id="footer"> </div>  
CSS:  
\* \{ margin:0; padding:0; \}  
html, body, \#wrap \{ height: 100%; \}  
body > \#wrap \{height: auto; min-height: 100%;\}  
\#main \{ padding-bottom: 150px; \}  
\#footer \{  
position: relative;  
margin-top: -150px;  
height: 150px;  
clear:both;\}  
.clearfix:after \{content: ".";  
display: block;  
height: 0;  
clear: both;  
visibility: hidden;\}  
.clearfix \{display: inline-block;\}  
\* html .clearfix \{ height: 1%;\}  
.clearfix \{display: block;\}

##    **17、iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片**    ##

iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。内嵌文档时一个完整的页面，有HTML,BODY等属性。这样遇到了一个问题，如果样式表中对BODY定义过背景色/背景图片，那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片：  
【1】去掉背景色：filter:Chroma(Color=white);  
举例：<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>  
【2】去掉背景图片：  
举例：<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe>  
注意：内嵌页面同时也要增加BODY属性：  
<body bgcolor="transparent" style='background:transparent'>

##    **18、为什么web标准中无法设置IE浏览器滚动条颜色了？**    ##

原来样式设置：  
<style type="text/css">  
body\{scrollbar-face-color:\#f6f6f6; scrollbar-highlight-color:\#fff; scrollbar-shadow-color:\#eeeeee; scrollbar-3dlight-color:\#eeeeee; scrollbar-arrow-color:\#000; scrollbar-track-color:\#fff; scrollbar-darkshadow-color:\#fff; \}  
</style>  
解决办法是将body换成html。

##    **19、为什么中火狐浏览器下文本无法撑开容器的高度？** ##

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：  
div \{ height:auto!important; height:200px; min-height:200px; \}

##    **20、如何定义1px左右高度的容器？**    ##

IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

##    **21、怎么样才能让层显示在FLASH之上呢？**    ##

解决的办法是给FLASH设置透明:  
<a href="http://www.chinaz.com/">:</a>  
<pre lang="html" line="1">  
<param name="wmode" value="transparent" />

##    **22、怎样使一个div层居中于浏览器中？**    ##

##    **23、怎样使div背景透明？**    ##

首先，需要这两个层都是兄弟关系，其次，这两个层都需要绝对定位。举个例子：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="author" content="colinivy" />  
<title> Colinivy's world</title>  
<style type="text/css">  
body \{  
font:normal 12px/30px Verdana; \}  
\#test \{  
position:relative;  
width:400px;  
height:50px;  
\}  
\#inner \{  
z-index:2;  
position:absolute;  
top:10px;  
left:10px;  
width:380px;  
height:30px;  
color:\#003;  
font-weight:bold;  
text-align:center;  
\}  
\#transbox \{  
z-index:1;  
position:absolute;  
top:0px;  
left:0px;  
width:400px;  
height:50px;  
background:\#eef;  
border:1px solid \#a00;  
filter:alpha(opacity=40);  
\-moz-opacity:0.4;  
opacity:0.4;  
\}  
</style>  
</head>  
<body>  
<div id="test">  
<div>  
<p>这里很多的文字,这里很多的文字,这里很多的文字,这里很多的文字,</p>  
</div>  
<div id="transbox"></div>  
<div id="inner">  
BlueIdea,BlueIdea,BlueIdea  
</div>  
</div>  
</body>  
</html>

##    **24、怎样去掉选中时的虚线框？**    ##

利用οnfοcus="this.blur();"例如：<a href="\#" οnfοcus="this.blur();">测试</a>

##    **25、ie6下png背景显示问题？**    ##

针对ie6下png背景显示问题,CSS中可以这样解决:\_background:none;\_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://www.0351zhuangxiu.com/uploads/images/bj.jpg’);

## **26、文字与表单对齐方法？** ##

设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:  
body,button,input,select,textarea\{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle\}

##    **27、optgroup标签的用法？**    ##

optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组：例子：  
<select id="selectId">  
<optgroup label="GROUP ONE">  
<option value="1">one select</option>  
<option value="2">two select</option>  
</optgroup>  
<optgroup label="GROUP TWO">  
<option value="3">three select</option>  
<option value="4">four select</option>  
</optgroup>  
</select>

##    **28、文字与图片垂直居中对齐方法？**    ##

为图片与文字的共同父元素所有的后代元素定义\*\{vertical-align:middle\};例如:  
<p>我要的坚强<img src="i/image.gif" /></p>  
只需定义p\*\{vertical-align:middle\}即可使文字与图片同行垂直居中.

##    **29、文章标题列表中日期居右显示的两种方法？**    ##

方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定:  
方法A：  
<p>这是文章标题<span>2010-10-10</span></p>  
然后定义p和span的样式：  
p\{ position:relative\}  
p span\{ position:absolute; right:0\}  
方法B:  
<p><span>2010-10-10</span>这是文章标题</p>  
然后定义span右浮动:  
p span\{float:right\}

##    **30、ie6下max/min-width/height实现？**    ##

ie6下max/min-width/height实现,\_width: expression\_r(this.width >600 ? “600px” : true);,height同理.

##    **31、空白外边距互相叠加的问题？**    ##

一般通过添加透明边框或者1px的内边距避免；  
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;  
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px；  
例如：<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>空白边距叠加demo@Mr.Think</title>  
<style>  
body\{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25\}  
div\{background:\#a40000;margin:10px\}  
div p\{background:\#eee;margin:15px\}  
</style>  
</head>  
<body>  
<div><p>空白边距叠加demo@Mr.Think</p></div>  
</body>  
</html>

##    **32、网页设计中的默认字体**    ##

font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;  
说明：line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高，对于12px字体，这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。

##    **33、浏览器兼容——常用的css hack**    ##

（1）.title\{ height:200px;  
\*height:200px;  
\_height:200px; \}  
（2）.title\{ height:200px;  
\*height:200px !important;  
\*height:200px; \}  
（3）.title\{ height:200px; \}  
\*html.title\{ height:200px;\}  
\*+html.title\{ height:200px;\}

# **框架常见面试题** #

原创 2017年09月09日 10:53:52

*  147

2 、 结合项目谈谈你对 MVC 的理解  
MVC 是 Model—View—Controler 的简称。即模型—视图—控制器。MVC 是一种设  
计模式，它强制性的把应用程序的输入、处理和输出分开。  
MVC 中的模型、视图、控制器它们分别担负着不同的任务。  
视图: 视图是用户看到并与之交互的界面。视图向用户显示相关的数据，并接受用  
户的输入。视图不进行任何业务逻辑处理。  
模型: 模型表示业务数据和业务处理。相当于 JavaBean。一个模型能为多个视图提  
供数据。这提高了应用程序的重用性  
控制器: 当用户单击Web页面中的提交按钮时,控制器接受请求并调用相应的模型  
去处理请求。  
然后根据处理的结果调用相应的视图来显示处理的结果。  
MVC 的处理过程：首先控制器接受用户的请求，调用相应的模型来进行业务处理，  
并返回数据给控制器。控制器调用相应的视图来显示处理的结果。并通过视图呈现给用  
户。  
如在项目中要对应 MVC 的话：View 对应项目中 Jsp，Controler 对应 Action，Model  
对应 service+dao 层的业务逻辑和持久层的操作。  
3 、 项目中为什么使用 SSH  
1. 使用 Struts 是因为 struts 是基于 MVC 模式的,很好的将应用程序进行了分层，使开发  
者更关注于业务逻辑的实现；struts 有着丰富的标签库，能大大提高开发效率。  
2. 使用 Hibernate：因为 hibernate 为 Java 应用提供了一个易用的、高效率的对象关系映  
射框架（ORM）。hibernate 是个轻量级的持久性框架，功能丰富。  
3. 使用 Spring：因为 spring 基于 IoC(Inversion of Control，反向控制)和 AOP 构架多层 j2ee  
系统的框架。  
4 、 挑选一个你做的功能说明 SSH 框架的应用原理  
① 在表示层中，首先通过 JSP 页面实现交互界面，负责传送请求(Request)和接收  
响应(Response)，然后 Struts 根据配置文件(\*-struts.xml)将 ActionServlet 接收到的  
Request 委派给相应的 Action 处理。  
② 在业务层中，管理服务组件的 Spring IoC容器负责向 Action提供业务模型(Model)  
组件和该组件的协作对象数据处理(DAO)组件完成业务逻辑，并提供事务处理、缓冲池等  
容器组件以提升系统性能和保证数据的完整性。  
③ 在持久层中，则依赖于 Hibernate 的对象化映射和数据库交互，处理 DAO 组件  
请求的数据，并返回处理结果。  
结合上面的概述；然后可以把我们做的信息发布管理模块用上述的方式实例化描述一遍。  
5 、 Struts 工作原理  
\-----------------------------------按照 Struts 工作原理图地说：  
1.客户端发出一个指向 servlet 容器的请求；  
2.请求会经过 StrutsPrepareAndExecuteFilter 过滤器；  
3.过滤器和请求将访问 struts2 的底层框架结构。在 web 容器启动时，struts2 框架  
会自动加载配置文件里相关参数，并转换成相应的类。  
如：ConfigurationManager、ActionMapper 和 ObjectFactory。ConfigurationManager 存  
有配置文件的一些基本信息，ActionMapper 存有 action 的配置信息。在请求过程中所有  
的对象（Action，Results，Interceptors，等）都是通过 ObjectFactory 来创建的。过滤器会  
通过询问 ActionMapper 类来查找请求中需要用到的 Action。  
4.如果找到需要调用的 Action，过滤器会把请求的处理交给 ActionProxy。ActionProxy  
为 Action 的代理对象。ActionProxy 通过 ConfigurationManager 询问框架的配置文件，找  
到需要调用的 Action 类。  
5.ActionProxy 创建一个 ActionInvocation 的实例。ActionInvocation 在 ActionProxy 层  
之下，它表示了 Action 的执行状态,或者说它控制的 Action 的执行步骤。它持有 Action  
实例和所有的 Interceptor。  
6.ActionInvocation 实例使用命名模式来调用，1. ActionInvocation 初始化时，根据配  
置，加载 Action 相关的所有 Interceptor。2. 通过 ActionInvocation.invoke 方法调用 Action  
实现时，执行 Interceptor。在调用 Action 的过程前后，涉及到相关拦截器(intercepetor)  
的调用。  
7. 一旦 Action 执行完毕，ActionInvocation 负责根据 struts.xml 中的配置找到对应的  
返回结果。  
\---------------------------------通俗地说：  
发送 http 请求  
Web 服务器(tomcat/weblogic...)  
执行 struts 核心过滤器 StrutsPrepareAndExecuteFilter  
加载 struts 配置文件中配置信息，找到对应的 Action 类并实例化  
执行各类拦截器和 Action 中对应方法  
配置文件中找到返回结果  
转发到具体页面或其它操作  
6 、 Struts 有什么优缺点  
优点:  
1. 实现 MVC 模式，结构清晰；  
2. 丰富的 struts 的标记库，利用好能大大提高开发效率；  
3. 全局结果与声明式异常；  
4. 可使用 OGNL 进行参数传递  
5. 各个类方便使用的拦截器  
缺点:  
1. 转到表现层时，需要配置结果页面；页面多了比较繁杂；  
2. 对 Servlet 的依赖性过强  
3. struts 标签稍微比 el 表达式繁重  
7 、 为何使用 Spring  
Spring 是一个轻量级的控制反转（IoC）、面向切面（AOP）、面向接口、事务管理、包容  
促进其它框架；使系统中用到的其它框架耦合程度大大降低，拓展性强、简单易用好管理。  
8 、 spring 在项目中如何充当粘合剂  
1、在项目中利用 spring 的 IOC(控制反转或依赖注入),明确地定义组件接口(如 UserDAO)，  
开发者可以独立开发各个组件, 然后根据组件间的依赖关系组装(UserAction 依赖于  
UserService,UserService 依赖于 UserDAO)运行，很好的把 Struts(Action)和 hibernate(DAO  
的实现)结合起来；  
2、spring 的事务管理把 hibernate 对数据库的操作进行了事务配置  
9 、 描述在系统中如何使用了 Spring 的事务控制  
Spring 事务包括编程式事务和声明式事务。在系统中使用了声明式的事务管理是用  
Spring 的 AOP 来实现的；配置了只读事务和回滚事务（传播行为为 REQUIRED）当出现  
错误后进行回滚操作。在项目中通过 aop 切入事务到 serivce 层，这样做能使一次业务  
逻辑操作如果包括几个数据库操作都控制在一个事务中。  
10 、 Hibernate 工作原理及为什么要用  
原理： 1.读取并解析配置文件 2.读取并解析映射信息，创建 SessionFactory 3.打开  
Session 4.创建事务 Transation 5.持久化操作 6.提交事务 7.关闭 Session 8.关闭  
SesstionFactory  
为什么要用： 1. 对 JDBC 访问数据库的代码做了封装，大大简化了数据访问层繁琐  
的重复性代码。 2. Hibernate 是一个基于 JDBC 的主流持久化框架，是一个优秀的 ORM  
实现。他很大程度的简化 DAO 层的编码工作 3. hibernate 使用 Java 反射机制，而不是  
字节码增强程序来实现透明性。 4. hibernate 的性能非常好，因为它是个轻量级框架。  
映射的灵活性很出色。它支持各种关系数据库，从一对一到多对多的各种复杂关系。  
11 、 Hibernate 在系统中使用的优化策略  
Hibernate 对数据的缓存包括两个级：一级缓存，在 Session 的级别上进行，主要是对象  
缓存，以其 id 为键保存对象，在 Session 的生命期间存在；二级缓存， 在 SessionFactory  
的级别上进行，有对象缓存和查询缓存，查询缓存以查询条件为键保存查询结果，在  
SessionFactory 的生命期间存 在。默认地，Hibernate 只启用一级缓存。  
关于这个问题答系统使用了 Hibernate 的二级缓存就好。  
12 、 列举你在开发中常用的 Struts 标签  
property、iterator、if、date、form、a、url、textfiled、textarea、select、radio、checkboxlist、  
hidden、param  
13 、 Jquery 异步获取数据的方式有几种？有何区别？  
1、load 载入远程 HTML 文件代码并插入至 DOM 中  
2、get  
3、post  
4、ajax  
5、getJSON  
6、getScript 通过 GET 方式请求载入并执行一个 JavaScript 文件  
14 、 述 简述 UML 并说明你使用 Rose 常 于什么情况，画什么图？  
Unified Modeling Language (UML) 统一建模语言；用于在软件开发各个阶段中用图形的  
方式描述流程和功能需求；IBM Rational Rose是uml建模工具之一比较多的在需求阶段，  
常用于画用例图、类图、时序图。  
15 、 请简述导入导出的工具类；并说明你导出过的最大数据量  
POI（合并单元格对象和背景色的应用）  
16 、 统计图的实现方式  
Fusioncharts 图表采用 SVG（可缩放矢量图形）实现，无需 Flash；跨终端  
17、 易告知信息推送方式；如何实现？  
在后台填写推送信息和推送名单后，系统将自动推送；后台 EE 开发人员只实现定时的  
调用由客户端开发人员写的接口推送信息。  
18 、 简述调查问卷的制作  
不在你填写的开发功能内的；只需要描述下功能。可以制定调查题目和提供单选和多选  
两种类型的选项；并可对调查结果进行统计。  
19 、 系统的并发量如何？如何解决大并发量的请求？  
系统并发量不大；但有在应用服务器中间件 Weblogic 上做负载均衡的配置。  
20 、 项目中遇到问题如何解决？  
自行解决——网络搜索——团队讨论解决  
21 、 简述你在项目中的开发流程  
项目课中的设计和开发都是比较贴近实际开发的，做了的话按照当时的开发情况描述。  
3 拓展  
1、 使用一种排序算法排序一组数字  
冒泡、直接插入、选择  
2、 编写一个可以体现多线程的例子  
3、 编写一个 Singleton 类

[js中的闭包][js]

*  [javascript][]

*  [闭包][Link 11]

*  [前端][Link 12]

[**令狐寻欢**][Link 13] 2017年10月18日发布

*  赞 | 11收藏 | 181
 *  1.3k 次浏览

文章同步到[github][]

js的闭包概念几乎是任何面试官都会问的问题,最近把闭包这块的概念梳理了一下,记录成以下文章。

## **什么是闭包** ##

我先列出一些官方及经典书籍等书中给出的概念,这些概念虽然表达的不一样,但是都在对闭包做了最正确的定义和翻译,也帮助大家更好的理解闭包,这阅读起来可能比较模糊,大家往后看,本文通过对多个经典书籍中的例子讲解,相信会让大家能很好的理解js中的闭包。文章开始,我会先铺垫一下闭包的概念和为什么要引入闭包的概念,然后结合例子来说明讲解,并讲解如何使用闭包。

### **百度百科中的定义:** ###

[闭包][Link 14]包含自由（未绑定到特定对象）变量；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。“闭包” 一词来源于以下两者的结合：要执行的代码块（由于自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放）和为自由变量提供绑定的计算环境（作用域) -- 百度百科

### **《javaScript权威指南》中的概念:** ###

函数对象可以通过作用域链互相关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性在计算机科学中成为**闭包**

### **《javaScript高级教程》中概念:** ###

闭包是指有权访问另一个函数作用域中的变量的函数。

### **MDN中的概念** ###

![http://ovqwwz784.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202017-10-18%20%E4%B8%8B%E5%8D%884.59.09.png][http_ovqwwz784.bkt.clouddn.com_E5_B1_8F_E5_B9_95_E5_BF_AB_E7_85_A7_202017-10-18_20_E4_B8_8B_E5_8D_884.59.09.png]

### **个人总结的闭包概念:** ###

1.  闭包就是子函数可以有权访问父函数的变量、父函数的父函数的变量、一直到全局变量。归根结底,就是利用js得词法(静态)作用域,即作用域链在函数创建的时候就确定了。
2.  子函数如果不被销毁,整条作用域链上的变量仍然保存在内存中。

## **为什么引入闭包的概念** ##

我引入[《深入理解JavaScript系列:闭包(Closures)》][JavaScript_Closures]文章中的例子来说明,也可以直接去看那篇文章,我结合其他书籍反复读了很多遍此文章才理解清楚。如下:

**function** **testFn**() \{

**var** localVar = 10; // 自由变量

**function****innerFn**(innerParam) \{

alert(innerParam + localVar);

**return** innerFn;

**var** someFn = testFn();

someFn(20); // 30

**一般来说****,****在函数执行完毕之后****,****局部变量对象即被销毁****,****所以****innerFn****是不可能以返回值形式返回的****,innerFn****函数作为局部变量应该被销毁才对。**

这是当函数以返回值时的问题,另外再看一个当函数以参数形式使用时的问题,还是直接引用《深入理解JavaScript系列》中的例子,也方便大家有兴趣可以直接去阅读那篇文章

**var** z = 10;

**function** **foo**() \{

alert(z);

foo(); // 10 – 使用静态和动态作用域的时候

(**function** () \{

**var** z = 20;

foo(); // 10 – 使用静态作用域, 20 – 使用动态作用域

\})();

// 将foo作为参数的时候是一样的

(**function** (funArg) \{

**var** z = 30;

funArg(); // 10 – 静态作用域, 30 – 动态作用域

\})(foo);

当函数foo在不同的函数中调用,z该取哪个上下文中的值呢,这就又是一个问题,所以就引入了闭包的概念,也可以理解为定义了一种规则。

### **理解闭包** ###

### **函数以返回值返回** ###

看一个《javsScript权威指南》中的一个例子,我稍微做一下修改如下:

**var** scope = 'global scope';

**function** **checkScope**() \{

**var** scope = 'local scope';

**return** **function**() \{

console.log(scope);

**var** result = checkScope();

result(); // local scope checkScope变量对象中的scope,非全局变量scope

**分析****:**

即使匿名函数是在checkScope函数外调用,也没有使用全局变量scope,即是利用了js的静态作用域,当匿名函数初始化时,就创建了自己的作用域链(作用域链的概念这里不做解释,可以参考我的另一篇文章[js中的执行栈、执行环境(上下文)、作用域、作用域链、活动对象、变量对象的概念总结][js 1],其实当把作用域链理解好了之后,闭包也就理解了), 此匿名函数的作用域链包括checkScope的活动对象和全局变量对象, 当checkScope函数执行完毕后,checkScope的活动对象并不会被销毁,因为匿名函数的作用域链还在引用checkScope的活动对象,也就是checkScope的执行环境被销毁,但是其活动对象没有被销毁,留存在堆内存中,直到匿名函数销毁后,checkScope的活动对象才会销毁,解除对匿名函数的引用将其设置为null即可,垃圾回收将会将其清除,另外当外部对checkScope的自由变量存在引用的时候,其活动对象也不会被销毁

result = null; //解除对匿名函数的引用

**注释****:**

自由变量是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量

**补充****:**   
引用一下《javsScript权威指南》中的补充,帮助大家进一步理解  
![http://ovqwwz784.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202017-10-18%20%E4%B8%8B%E5%8D%883.40.00.png][http_ovqwwz784.bkt.clouddn.com_E5_B1_8F_E5_B9_95_E5_BF_AB_E7_85_A7_202017-10-18_20_E4_B8_8B_E5_8D_883.40.00.png]

函数以参数形式使用

当函数以参数形式使用时一般用于利用闭包特性解决实际问题,比如浏览器中内置的方法等,下面我直接引用《深入理解JavaScript系列:闭包(Closures)》中关于闭包实战部分的例子如下:

sort

在sort的内置方法中,函数以参数形式传入回调函数,在sort的实现中调用:

\[1, 2, 3\].sort(**function** (a, b) \{

... // 排序条件

\});

map

和sort的实现一样

\[1, 2, 3\].map(**function** (element) \{

**return** element \* 2;

\}); // \[2, 4, 6\]

另外利用自执行匿名函数创建的闭包

**var** foo = \{\};

// 初始化

(**function** (object) \{

**var** x = 10;

object.getX = **function**() \{

**return** x;

\};

\})(foo);

alert(foo.getX()); // 获得闭包 "x" – 10

## **利用闭包实现私有属性的存取** ##

先来看一个例子

**var** fnBox = \[\];

**function** **foo**() \{

**for**(**var** i = 0; i < 3; i++) \{

fnBox\[i\] = **function**() \{

**return** i;

foo();

**var** fn0 = fnBox\[0\];

**var** fn1 = fnBox\[1\];

**var** fn2 = fnBox\[2\];

console.log(fn0()); // 3

console.log(fn1()); // 3

console.log(fn2()); // 3

用伪代码来说明如下:

fn0.\[\[scope\]\]= \{

// 其他变量对象,一直到全局变量对象

父级上下文中的活动对象AO: \[data: \[...\], i: 3\]

fn1.\[\[scope\]\]= \{

// 其他变量对象,一直到全局变量对象

父级上下文中的活动对象AO: \[data: \[...\], i: 3\]

fn2.\[\[scope\]\]= \{

// 其他变量对象,一直到全局变量对象

父级上下文中的活动对象AO: \[data: \[...\], i: 3\],

**分析****:**

这是因为fn0、fn1、fn2的作用域链共享foo的活动对象, 而且js没有块级作用域,当函数foo执行完毕的时候foo的活动对象中i的值已经变为3,当fn0、fn1、fn2执行的时候,其最顶层的作用域没有i变量,就沿着作用域链查找foo的活动对象中的i,所以i都为3。

但是这种结果往往不是我们想要的,这时就可以利用认为创建一个闭包来解决这个问题,如下:

**var** fnBox = \[\];

**function** **foo**() \{

**for**(**var** i = 0; i < 3; i++) \{

fnBox\[i\] = (**function**(num) \{

**return** **function**() \{

**return** num;

\})(i);

foo();

**var** fn0 = fnBox\[0\];

**var** fn1 = fnBox\[1\];

**var** fn2 = fnBox\[2\];

console.log(fn0()); // 0

console.log(fn1()); // 1

console.log(fn2()); // 2

用伪代码来说明如下:

fn0.\[\[scope\]\]= \{

// 其他变量对象,一直到全局变量对象

父级上下文中的活动对象AO: \[data: \[...\], k: 3\],

fn0本身的活动对象AO: \{ num: 0\}

fn1.\[\[scope\]\]= \{

// 其他变量对象,一直到全局变量对象

父级上下文中的活动对象AO: \[data: \[...\], k: 3\],

fn1本身的活动对象AO: \{ num: 1\}

fn2.\[\[scope\]\]= \{

// 其他变量对象,一直到全局变量对象

父级上下文中的活动对象AO: \[data: \[...\], k: 3\],

fn2本身的活动对象AO: \{ num: 2\}

**分析****:**

当使用自执行匿名函数创建闭包, 传入i的值赋值给num,由于作用域链是在函数初始化时创建的,所以当每次循环时,函数fn10、fn1、fn2的作用域链中保存了当次循环是num的值, 当fn10、fn1、fn2调用时,是按照本身的作用域链进行查找。

## **闭包引起的内存泄漏** ##

![http://ovqwwz784.bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202017-10-18%20%E4%B8%8B%E5%8D%884.38.30.png][http_ovqwwz784.bkt.clouddn.com_E5_B1_8F_E5_B9_95_E5_BF_AB_E7_85_A7_202017-10-18_20_E4_B8_8B_E5_8D_884.38.30.png]

## **总结** ##

从理论的角度将,由于js作用域链的特性,js中所有函数都是闭包,但是从应用的角度来说,只有当函数以返回值返回、或者当函数以参数形式使用、或者当函数中自由变量在函数外被引用时,才能成为明确意义上的闭包。

最后,我想表达的式,本篇大量引用和罗列了经典的犀牛书《javaScript权威指南》、红宝书《javaScript高级教程》、以及《深入理解JavaScript系列:闭包(Closures)》系列文章中的概念和例子,不为能形成自己的独特见解,只为了能把闭包清晰的讲解出来。笔者是个小菜鸟,能力实在有限,也在学习中,希望大家多多指点,如发现错误,请多多指正。也希望看过此文的朋友能对闭包多一些理解,那我写这篇文章也就值得了。下次面试时就可以告诉面试官什么是闭包了。谢谢。

[**征服** **JavaScript** **面试：什么是闭包？**][_JavaScript_]

标签： [JavaScript][] [js][js 2] [闭包][Link 15] [函数][Link 16] [对象数据][Link 17]

2016年12月29日 11:12:021105人阅读 评论(0) 收藏 举报

目录[(?)][_JavaScript_][\[+\]][_JavaScript_]

![http://static.open-open.com/lib/uploadImg/20161228/20161228184944\_660.jpg][http_static.open-open.com_lib_uploadImg_20161228_20161228184944_660.jpg]

“征服 JavaScript 面试”是我写的一系列文章，来帮助面试者准备他们在面试 JavaScript 中、高级职位中将可能会遇到的一些问题。这些问题我自己在面试中也经常会问。

![http://static.open-open.com/lib/uploadImg/20161228/20161228184945\_442.png][http_static.open-open.com_lib_uploadImg_20161228_20161228184945_442.png]

在我面试时问出的一系列问题里，闭包通常是我问的第一个或最后一个问题。坦白地说，如果你连闭包也弄不明白，你是不会在 JavaScript 的道路上走多远的。

你别东张西望，说的就是你。你真的理解如何构建一个严谨的 JavaScript 应用？你真的理解代码背后发生的事情或者说一个应用程序是如何工作的？我表示怀疑。如果连个闭包问题都搞不清的话，真是有点够呛。

你不仅仅应该了解闭包的机制，更应该了解闭包为什么很重要，以及能够很容易地回答出闭包的几种可能的应用场景。

**闭包**在 JavaScript 中常用来实现对象数据的私有，在事件处理和回调函数中也常常会用到它，此外还有 偏函数应用（partial applications）和柯里化（currying） ，以及其他函数式编程模式。

我不在乎面试者是否知道“closure”这个单词或者它的专业定义。我只想弄清他们是否理解基本原理。如果他们没有，那么通常意味着这些面试者在构建实际 JavaScript 应用方面并没有很多经验。

如果你不能回答这个问题，你只是个初级开发者。不管你实际上已经干这个多久了。

为了快速理解下面的内容：你想一下能否举出两个闭包的通用场景？

什么是闭包？

简言之， **闭包** 是由函数引用其周边状态（ **词法环境** ）绑在一起形成的（封装）组合结构。在 JavaScript 中，闭包在 **每个函数被创建时** 形成。

这是基本原理，但为什么我们关心这些？实际上，由于闭包与它的词法环境绑在一起，因此 **闭包让我们能够从一个函数内部访问其外部函数的作用域** 。

要使用闭包，只需要简单地将一个函数定义在另一个函数内部，并将它暴露出来。要暴露一个函数，可以将它返回或者传给其他函数。

内部函数将能够访问到外部函数作用域中的变量，即使外部函数已经执行完毕。

闭包使用的例子

闭包的用途之一是实现对象的私有数据。数据私有是让我们能够面向接口编程而不是面向实现编程的基础。而面向接口编程是一个重要的概念，有助于我们创建更加健壮的软件，因为实现细节比接口约定相对来说更加容易被改变。

“面向接口编程，别面向实现编程。” 设计模式：可复用面向对象软件的要素

在 JavaScript 中，闭包是用来实现数据私有的原生机制。当你使用闭包来实现数据私有时，被封装的变量只能在闭包容器函数作用域中使用。你无法绕过对象 **被授权的方法** 在外部访问这些数据。在 JavaScript 中，任何定义在闭包作用域下的公开方法才可以访问这些数据。例如：

**\[html\]** [view plain][_JavaScript_] [copy][_JavaScript_]

1.  const getSecret = (secret) =**>** \{ 
2.   return \{ 
3.   get: () =**>** secret 
4.   \}; 
5.  \}; 
6.  
7.  test('Closure for object privacy.', assert =**>** \{ 
8.   const msg = '.get() should have access to the closure.'; 
9.   const expected = 1; 
10.  const obj = getSecret(1); 
11. 
12.  const actual = obj.get(); 
13. 
14.  try \{ 
15.  assert.ok(secret, 'This throws an error.'); 
16.  \} catch (e) \{ 
17.  assert.ok(true, \`The secret var is only available 
18.  to privileged methods.\`); 
19.  \} 
20. 
21.  assert.equal(actual, expected, msg); 
22.  assert.end(); 
23. \});

在上面的例子里， get() 方法定义在 getSecret() 作用域下，这让它可以访问任何 getSecret() 中的变量，于是它就是一个被授权的方法。在这个例子里，它可以访问参数 secret 。

对象不是唯一的产生私有数据的方式。闭包还可以被用来创建 **有状态的函数** ，这些函数的执行过程可能由它们自身的内部状态所决定。例如：

**\[html\]** [view plain][_JavaScript_] [copy][_JavaScript_]

1.  const secret = (msg) =**>** () =**>** msg;

**\[html\]** [view plain][_JavaScript_] [copy][_JavaScript_]

1.  // Secret - creates closures with secret messages. 
2.  // https://gist.github.com/ericelliott/f6a87bc41de31562d0f9 
3.  // https://jsbin.com/hitusu/edit?html,js,output 
4.  
5.  // secret(msg: String) =**>** getSecret() =**>** msg: String 
6.  const secret = (msg) =**>** () =**>** msg; 
7.  
8.  test('secret', assert =**>** \{ 
9.   const msg = 'secret() should return a function that returns the passed secret.'; 
10. 
11.  const theSecret = 'Closures are easy.'; 
12.  const mySecret = secret(theSecret); 
13. 
14.  const actual = mySecret(); 
15.  const expected = theSecret; 
16. 
17.  assert.equal(actual, expected, msg); 
18.  assert.end(); 
19. \});

在函数式编程中，闭包经常用于偏函数应用和柯里化。为了说明这个，我们先定义一些概念：

函数应用：一个过程，指将参数传给一个函数，并获得它的返回值。

偏函数应用：一个过程，它传给某个函数其中一部分参数，然后返回一个新的函数，该函数等待接受后续参数。换句话说，偏函数应用是一个函数，它接受另一个函数为参数，这个作为参数的函数本身接受多个参数，它返回一个函数，这个函数与它的参数函数相比，接受更少的参数。偏函数应用 **提前赋予** 一部分参数，而返回的函数则等待调用时传入剩余的参数。

偏函数应用通过闭包作用域来提前赋予参数。你可以实现一个通用的函数来赋予指定的函数部分参数，它看起来如下：

partialApply(targetFunction: Function, ...fixedArgs: Any\[\]) =>

functionWithFewerParams(...remainingArgs: Any\[\])

partialApply 接受一个多参数的函数，以及一串我们想要提前赋给这个函数的参数，它返回一个新的函数，这个函数将接受剩余的参数。

下面给一个例子来说明，假设你有一个函数，求两个数的和：

**\[html\]** [view plain][_JavaScript_] [copy][_JavaScript_]

1.  const add = (a, b) =**>** a + b;

现在你想要得到一个函数，它能够对任何传给它的参数都加 10，我们可以将它命名为 add10() 。 add10(5) 的结果应该是 15 。我们的 partialApply() 函数可以做到这个：

**\[html\]** [view plain][_JavaScript_] [copy][_JavaScript_]

1.  const add10 = partialApply(add, 10); 
2.  add10(5);

在这个例子里，参数 10 通过闭包作用域被提前赋予 add() ，从而让我们获得 add10() 。

现在让我们看一下如何实现 partialApply() ：

Let’s look at a possible **partialApply()** implementation:

**\[html\]** [view plain][_JavaScript_] [copy][_JavaScript_]

1.  // Generic Partial Application Function 
2.  // https://jsbin.com/biyupu/edit?html,js,output 
3.  // https://gist.github.com/ericelliott/f0a8fd662111ea2f569e 
4.  
5.  // partialApply(targetFunction: Function, ...fixedArgs: Any\[\]) =**>**
6.  // functionWithFewerParams(...remainingArgs: Any\[\]) 
7.  const partialApply = (fn, ...fixedArgs) =**>** \{ 
8.   return function (...remainingArgs) \{ 
9.   return fn.apply(this, fixedArgs.concat(remainingArgs)); 
10.  \}; 
11. \}; 
12. 
13. 
14. test('add10', assert =**>** \{ 
15.  const msg = 'partialApply() should partially apply functions'
16. 
17.  const add = (a, b) =**>** a + b; 
18. 
19.  const add10 = partialApply(add, 10); 
20. 
21. 
22.  const actual = add10(5); 
23.  const expected = 15; 
24. 
25.  assert.equal(actual, expected, msg); 
26. \});

如你所见，它只是简单地返回一个函数，这个函数通过闭包访问了传给 partialApply() 函数的 fixedArgs 参数。

轮到你来试试了

你用闭包来做什么？如果你有最喜欢的应用场景，举一些例子，在评论中告诉我。

# **通俗易懂又不白痴的回答js中闭包问题？** #

前端 互联网 面试

关注者

**11**

被浏览

**1,996**

关注问题写回答

添加评论

邀请回答

[查看全部 3 个回答][3]

**知乎用户**

专栏-技术烂笔头 [http://wangjizhi.com][http_wangjizhi.com]

8 人赞同了该回答

闭包真的是javascript学习者绕不过去的一道坎，而且是面试初级甚至中级前端必问的一个面试点。  
简单总结下，要点就你自己提取吧。

1.首先明确闭包是函数而不是一个事物或者一个过程。明确了闭包是函数后，接下来就要搞清楚什么样的函数才能称为闭包。  
2. 函数执行的时候会先创建一个属于该函数的上下文执行环境，这个上下文包含了作用域在内的相关信息。当一个函数执行完毕后，与该函数相关的上下文环境便会收回。  
3.但是当闭包出现的时候，这个该被收回的环境就不会被收回了，因此也就产生了闭包。原因就是因为在这个函数执行的时候，它内部有对不属于这个作用域并且也不属于全局作用域的局部变量的引用。具体看下面的示例：

function outer() \{  
var a = 1;  
function inner() \{  
console.log(a++);  
\}  
return inner;  
\}  
var retFun = outer();  
retFun();//2  
retFun();//3  
retFun();//4

说明：outer函数嵌套inner函数，outer作用域内的变量a本应在outer执行完之后收回。但是因为outer执行完后返回了inner函数，而inner函数要想成功执行就必须依赖外部变量a。所以，为了不出现问题，此时在outer执行完毕后原本属于outer的执行环境并没有被收回。所以每次执行retFun(也就是内部函数inner)的时候引用的a都是一直存在的。

从上面的示例可以知道，闭包大多出现在嵌套函数内部。当被包裹的函数引用到了他的父级(如果嵌套层数深的话也可能是祖父级)作用域内的变量而且该被包裹函数被当做值return出去的时候，便形成了闭包。

为什么呢？因为函数在执行的时候会创建与该函数有关的执行上下文环境，闭包执行时候的上下文环境很特殊，因为他有引用自身外部作用域的变量，牵扯到了外部函数执行环境。但是理论上来说，外部函数在执行完毕后就应该被收回执行环境，按照这个理论说法的话，这里就会出现问题，因为内部函数执行的时候就会找不到外部变量。为了避免这个问题出现，所以javascript就将外部作用域的变量保存了下来，也就是外部作用域相关信息保存了下来。

所以上面的值一直递增而不是始终不变，因为闭包每次执行都是在引用同一个变量而不是重新生成的，这个变量在闭包第一次执行的时候被保存了起来。  
闭包明显可以保存作用域外的变量值，这个特性可以加以利用，但是同时也存在了内存泄漏的风险，因为外部函数执行完后属于该函数的上下文环境没有被收回。

# **前端面试必备之JS继承方式总结** #

1005浏览 2017-08-30 21:28:38

小字号

JS面向对象知识中，继承是比较难比较抽象的一块内容，而且实现继承有很多种方法，每种方法又各有优缺点，更加的让人奔溃，这需要对面向对象知识中的对象、原型、原型链、构造函数等基础知识掌握透彻，否则《JS高程》里第六章继承也是看不明白的，网上也有N多的文章，看了这么多对继承依然不是很明白，所谓懂得不少道理但依然过不好这一生。

下面我结合自己的理解，和参考了《JS高程》和网上文章，总结一下实现继承的几种方法及优缺点，这篇文章适合出去面试前速记。

**借用构造函数继承**

function Parent0(){

this.name = "parent0";

this.colors = ["red","blue","yellow"];

}

function Child0(){

Parent0.call( this ); // 或apply

this.type = "child0";

}

第6行，在子类（Child0）中执行父类（Parent0）的构造函数，通过这种调用，把父类构造函数的`this`指向为子类实例化对象引用，从而导致父类执行的时候父类里面的属性都会被挂载到子类的实例上去。

new Child0().name; // Parent0

new Child0().colors; // (3) ["red", "blue", "yellow"]

但是通过这种方式，父类原型上的东西是没法继承的，因此函数复用也就无从谈起

Parent0.prototype.sex = "男";

Parent0.prototype.say = function() {

console.log(" Oh,My God! ");

}

new Child0().sex; // undefined

// Uncaught TypeError: (intermediate value).say is not a function

new Child0().say();

**缺点：**Child1无法继承Parent1的原型对象，并没有真正的实现继承（部分继承）

**原型链式继承（借用原型链实现继承）**

function Parent1(){

this.name = "parent1";

this.colors = ["red","blue","yellow"];

}

function Child1(){

this.name = "child1";

}

Child1.prototype = new Parent1();

这种方式能否解决借用构造函数继承的缺点呢？来看下面代码，我们依然为父类的原型添加sex属性和say方法：

Parent1.prototype.sex = "男";

Parent1.prototype.say = function() {

console.log(" Oh,My God! ");

}

new Child1().sex; //  男

new Child1().say(); // Oh,My God!

这种方式确实解决了上面借用构造函数继承方式的缺点。

但是，这种方式仍有缺点，我们来看如下代码：

var s1 = new Child1();

s1.colors.push("black");

var s2 = new Child1();

s1.colors; // (4) ["red", "blue", "yellow", "balck"]

s2.colors; // (4) ["red", "blue", "yellow", "balck"]

我们实例化了两个Child1，在实例s1中为父类的colors属性push了一个颜色，但是s2也被跟着改变了。造成这种现象的原因就是原型链上中的原型对象它俩是共用的。

这不是我们想要的，`s1`和`s2`这个两个对象应该是隔离的，这是这种继承方式的缺点。

**组合式继承**

这里所谓的组合是指组合借用构造函数和原型链继承两种方式。

function Parent2(){

this.name = "parent2";

this.colors = ["red","blue","yellow"];

}

function Child2(){

Parent2.call(this);

this.type = "child2";

}

Child2.prototype = new Parent2()

注意第6，9行，这种方式结合了借用构造函数继承和原型链继承的有点，能否解决上述两个实例对象没有被隔离的问题呢？

var s1 = new Child2();

s1.colors.push("black");

var s2 = new Child2();

s1.colors; // (4) ["red", "blue", "yellow", "balck"]

s2.colors; // (3) ["red", "blue", "yellow"]

可以看到，`s2`和`s1`两个实例对象已经被隔离了。

但这种方式仍有缺点。父类的构造函数被执行了两次，第一次是`Child2.prototype = new Parent2()`，第二次是在实例化的时候，这是没有必要的。

### **组合式继承优化1** ###

直接把父类的原型对象赋给子类的原型对象

function Parent3(){

this.name = "parent3";

this.colors = ["red","blue","yellow"];

}

Parent3.prototype.sex = "男";

Parent3.prototype.say = function(){console.log("Oh, My God！")}

function Child3(){

Parent3.call(this);

this.type = "child3";

}

Child3.prototype = Parent3.prototype;

var s1 = new Child3();

var s2 = new Child3();

console.log(s1, s2);

但是，我们来看如下代码：

console.log(s1 instanceof Child3); // true

console.log(s1 instanceof Parent3); // true

可以看到，我们无法区分实例对象`s1`到底是由Child3直接实例化的还是Parent3直接实例化的。用`instanceof`关键字来判断是否是某个对象的实例就基本无效了。

我们还可以用`.constructor`来观察对象是不是某个类的实例：

console.log(s1.constructor.name); // Parent3

从这里可以看到，`s1`的构造函数居然是父类，而不是子类Child3，这显然不是我们想要的。

### **组合式继承优化2** ###

这是继承的最完美方式

function Parent4(){

this.name = "parent4";

this.colors = ["red","blue","yellow"];

}

Parent4.prototype.sex = "男";

Parent4.prototype.say = function(){console.log("Oh, My God！")}

function Child4(){

Parent4.call(this);

this.type = "child4";

}

Child4.prototype = Object.create(Parent4.prototype)；

Child4.prototype.constructor = Child4;

`Object.create`是一种创建对象的方式，它会创建一个中间对象

var p = {name: "p"}

var obj = Object.create(p)

// Object.create({ name: "p" })

通过这种方式创建对象，新创建的对象`obj`的原型就是`p`，同时`obj`也拥有了属性`name`，这个新创建的中间对象的原型对象就是它的参数。

这种方式解决了上面的所有问题，是继承的最完美实现方式。

**ES6****中继承**

`Class` 可以通过`extends`关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

class Parent {

}

class Child1 extends Parent {

constructor(x, y, colors) {

super(x, y); // 调用父类的constructor(x, y)

this.colors = colors;

}

toString() {

return this.colors + ' ' + super.toString(); // 调用父类的toString()

}

上面代码中，`constructor`方法和`toString`方法之中，都出现了`super`关键字，它在这里表示父类的构造函数，用来新建父类的`this`对象。

子类必须在`constructor`方法中调用`super`方法，否则新建实例时会报错。如果子类没有定义`constructor`方法，这个方法会被默认添加，不管有没有显式定义，任何一个子类都有`constructor`方法。

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到`this`上面（`Parent.apply(this)`）。ES6 的继承机制完全不同，实质是先创造父类的实例对象`this`（所以必须先调用`super`方法），然后再用子类的构造函数修改`this`。

**前端面试：js的继承实现**

转载 2017年03月06日 22:20:09

*  标签：
 *  [前端][Link 18] /
 *  [面试][Link 19] /
 *  [javascript][javascript 1] /
 *  [继承][Link 20]

*  333

[JS实现继承的几种方式][JS]

**前言**

JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。

**JS****继承的实现方式**

既然要实现继承，那么首先我们得有一个父类，代码如下：

// 定义一个动物类

function Animal (name) \{

// 属性

this.name = name || 'Animal';

// 实例方法

this.sleep = function()\{

console.log(this.name + '正在睡觉！');

// 原型方法

Animal.prototype.eat = function(food) \{

console.log(this.name + '正在吃：' + food);

\};

**1****、原型链继承**

核心： 将父类的实例作为子类的原型

function Cat()\{

Cat.prototype = new Animal();

Cat.prototype.name = 'cat';

//　Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.eat('fish'));

console.log(cat.sleep());

console.log(cat instanceof Animal); //true

console.log(cat instanceof Cat); //true

特点：

1.  非常纯粹的继承关系，实例是子类的实例，也是父类的实例
2.  父类新增原型方法/原型属性，子类都能访问到
3.  简单，易于实现

缺点：

1.  要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中
2.  无法实现多继承
3.  来自原型对象的引用属性是所有实例共享的（详细请看附录代码： 示例1）
4.  创建子类实例时，无法向父类构造函数传参

推荐指数：★★（3、4两大致命缺陷）

**2****、构造继承**

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name)\{

Animal.call(this);

this.name = name || 'Tom';

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // false

console.log(cat instanceof Cat); // true

特点：

1.  解决了1中，子类实例共享父类引用属性的问题
2.  创建子类实例时，可以向父类传递参数
3.  可以实现多继承（call多个父类对象）

缺点：

推荐指数：★★（缺点3）

**3****、实例继承**

核心：为父类实例添加新特性，作为子类实例返回

function Cat(name)\{

var instance = new Animal();

instance.name = name || 'Tom';

return instance;

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); // false

特点：

1.  不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点：

1.  实例是父类的实例，不是子类的实例
2.  不支持多继承

推荐指数：★★

**4****、拷贝继承**

function Cat(name)\{

var animal = new Animal();

for(var p in animal)\{

Cat.prototype\[p\] = animal\[p\];

Cat.prototype.name = name || 'Tom';

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // false

console.log(cat instanceof Cat); // true

特点：

1.  支持多继承

缺点：

1.  效率较低，内存占用高（因为要拷贝父类的属性）
2.  无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

推荐指数：★（缺点1）

**5****、组合继承**

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name)\{

Animal.call(this);

this.name = name || 'Tom';

Cat.prototype = new Animal();

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); // true

特点：

缺点：

1.  调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

推荐指数：★★★★（仅仅多消耗了一点内存）

**6****、寄生组合继承**

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Cat(name)\{

Animal.call(this);

this.name = name || 'Tom';

(function()\{

// 创建一个没有实例方法的类

var Super = function()\{\};

Super.prototype = Animal.prototype;

//将实例作为子类的原型

Cat.prototype = new Super();

\})();

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); //true

特点：

1.  堪称完美

缺点：

1.  实现较为复杂

推荐指数：★★★★（实现复杂，扣掉一颗星）

**附录代码：**

示例一：

function Animal (name) \{

// 属性

this.name = name || 'Animal';

// 实例方法

this.sleep = function()\{

console.log(this.name + '正在睡觉！');

//实例引用属性

this.features = \[\];

function Cat(name)\{

Cat.prototype = new Animal();

var tom = new Cat('Tom');

var kissy = new Cat('Kissy');

console.log(tom.name); // "Animal"

console.log(kissy.name); // "Animal"

console.log(tom.features); // \[\]

console.log(kissy.features); // \[\]

tom.name = 'Tom-New Name';

tom.features.push('eat');

//针对父类实例值类型成员的更改，不影响

console.log(tom.name); // "Tom-New Name"

console.log(kissy.name); // "Animal"

//针对父类实例引用类型成员的更改，会通过影响其他子类实例

console.log(tom.features); // \['eat'\]

console.log(kissy.features); // \['eat'\]

原因分析：

关键点：属性查找过程

执行tom.features.push，首先找tom对象的实例属性（找不到），

那么去原型对象中找，也就是Animal的实例。发现有，那么就直接在这个对象的

features属性中插入值。

在console.log(kissy.features); 的时候。同上，kissy实例上没有，那么去原型上找。

刚好原型上有，就直接返回，但是注意，这个原型对象中features属性值已经变化了。

[前端面试之ES6篇（高产似母猪）][ES6]

*  [javascript][]

*  [ html5][html5]

*  [html][]

[**云中歌**][Link 21] 2017年09月25日发布

*  赞 | 6收藏 | 55
 *  4.6k 次浏览

这也是前端面试经常询问的问题，经常问你es6出现了哪些新的特性，平时又使用过那些。在编写此教程的时候，第一句话往往就是面试常常问到的地方，然后后面就是他的详细解释，面试要求的内容我会用\*标记出来。写技术文档是真的累啊，虽然是看别人的文档，但是你得看很多，而且还得自己总结啊。所以说要是觉得对你有用还是帮我点个star吧[https://github.com/skychenbo][https_github.com_skychenbo]

1、箭头函数需要注意的地方

2、ES6 let、const

3、set数据结构

4、promise对象的用法,手写一个promise

5、class的理解

6、模版语法的理解

7、rest参数

8、 module体系

箭头函数需要注意的地方

\*当要求动态上下文的时候，就不能够使用箭头函数。也就是this的固定化  
1、在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象  
2、不能够用作构造函数，这就是说，不能够使用new命令，否则就会抛出一个错误  
3、不能够使用arguments对象  
4、不能使用yield命令  
这是一道当年很困惑我的一道题不知道你在第一眼能不能看出其结果,this的指向总是让人困扰，但是有了=>以后妈妈再也不用担心你使用this了

**class** **Animal** \{

**constructor**()\{

**this**.type = 'animal'

says(say) \{

setTimeout(**function** () \{

console.log(**this**.type + 'says' \+ say)

\},1000)

**var** animal = **new** Animal()

animal.says('hi') // undefined says hi

我们再来看看=>的情况

**class** **Animal**() \{

**constructor**() \{

**this**.type = 'animal'

says(say) \{

setTimeout(() => \{

console.log(**this**.type + ' says ' \+ say)

\}, 1000)

**var** animal = **new** Animal()

animal.says('hi') // animal says hi

ES6 let、const  
\*let是更完美的var，不是全局变量，具有块级函数作用域,大多数情况不会发生变量提升。const定义常量值，不能够重新赋值，如果值是一个对象，可以改变对象里边的属性值  
let  
1、let声明的变量具有块级作用域  
2、let声明的变量不能通过window.变量名进行访问  
3、形如for(let x..)的循环是每次迭代都为x创建新的绑定  
下面是var带来的不合理场景

**var** a = \[\]

**for** (**var** i = 0; i < i; i++) \{

a\[i\] = **function** () \{

console.log(i)

a\[5\]() // 10

在上述代码中，变量i是var声明的，在全局范围类都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出都是10  
而如果对循环使用let语句的情况，那么每次迭代都是为x创建新的绑定代码如下

**var** a = \[\]

**for** (**let** i = 0; i < i; i++) \{

a\[i\] = **function** () \{

console.log(i)

a\[5\]() // 5

当然除了这种方式让数组中的各个元素分别是不同的函数，我们还可以采用闭包和立即函数两种方法  
这是闭包的方法

**function** **showNum**(i) \{

**return** **function** () \{

console.log(i)

var a = \[\]

**for** (var i = 0; i < 5; i\++) \{

a\[i\] = showNum(i)

这是立即函数的方法

**var** a = \[\]

**for** (**var** i = 0; i < 5; i++) \{

a\[i\] = (**function** (i) \{

**return** **function** () \{

console.log(i)

\})(i)

a\[2\]()

Set数据结构

\*es6方法,Set本身是一个构造函数，它类似于数组，但是成员值都是唯一的

**const****set** = **new**Set(\[1,2,3,4,4\])

\[...**set**\] // \[1,2,3,4\]

Array.from(**new**Set())是将**set**进行去重

promise对象的用法,手写一个promise

promise是一个构造函数，下面是一个简单实例

**var** promise = **new**Promise((resolve,reject) => \{

**if** (操作成功) \{

resolve(value)

\} **else** \{

reject(error)

\})

promise.then(**function** (value) \{

// success

\},**function** (value) \{

// failure

\})

Class的讲解

\*class语法相对原型、构造函数、继承更接近传统语法，它的写法能够让对象原型的写法更加清晰、面向对象编程的语法更加通俗  
这是class的具体用法

**class** **Animal** \{

constructor () \{

**this**.**type** = 'animal'

says(say) \{

console.log(**this**.**type** \+ 'says' + say)

let animal = **new****Animal**()

animal.says('hello') // animal says hello

**class****Cat****extends****Animal** \{

constructor() \{

**super**()

**this**.**type** = 'cat'

let cat = **new****Cat**()

cat.says('hello') // cat says hello

可以看出在使用extend的时候结构输出是cat says hello 而不是animal says hello。说明contructor内部定义的方法和属性是实例对象自己的，不能通过extends 进行继承。在class cat中出现了super(),这是什么呢  
在ES6中，子类的构造函数必须含有super函数，super表示的是调用父类的构造函数，虽然是父类的构造函数，但是this指向的却是cat

Object.assign 方法

var n = Object.assign(a,b,c)向n中添加a,b,c的属性

模版语法

\*就是这种形式$\{varible\},在以往的时候我们在连接字符串和变量的时候需要使用这种方式'string' + varible + 'string'但是有了模版语言后我们可以使用string$\{varible\}string这种进行连接

rest参数

\*es6引入rest参数，用于获取函数的多余参数，这样就不需要使用arguments对象了  
ex:

**function** **add**(...values) \{

let sum = 0

**for**(**var** val of values) \{

sum += val

**return** sum

module体系

\*历史上js是没有module体系，无法将一个大程序拆分成一些小的程序。在es6之前，有commonJs,AMD两种  
CommonJS是如何书写的呢

**const** animal = require('./content.js')

// content.js

**module**.**exports** = 'a cat'

require.js是这样做的  
// content.js

define('content.js', **function** () \{

**return**'A cat'

\})

require(\['./content.js'\], **function** (animal) \{

console.log(animal) // a cat

\})

ES6的语法（在我用的vue中，就使用的是这个）

**import** animal **from**'./content'

// content.js

**export****default**'a cat'

es6 import的其他用法  
在vue中可以 import animal from './content'  
animal这个值可以根据你的喜欢而改变，但是有一个问题就是如果一旦引入的是函数或者变量时，你就必须和content中的名字保持一致，可以参照  
import \{ say, type \} from './content'   
常用的还有一种写法  
import \* as content from './content'   
这种写法就是表示所有的输出值都在这个对象上

**80%** **应聘者都不及格的** **JS** **面试题**

发布于 1 年前 作者 [wangshijun][] 6688 次浏览 来自 分享

![http://upload-images.jianshu.io/upload\_images/4651399-5f9ac162529904a7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240][http_upload-images.jianshu.io_upload_images_4651399-5f9ac162529904a7.jpg_imageMogr2_auto-orient_strip_7CimageView2_2_w_1240]

共 5024 字，读完需 6 分钟，速读需 2 分钟，本文首发于知乎专栏[前端周刊][Link 22]。写在前面，笔者在做面试官这 2 年多的时间内，面试了数百个前端工程师，惊讶的发现，超过 80% 的候选人对下面这道题的回答情况连及格都达不到。这究竟是怎样神奇的一道面试题？他考察了候选人的哪些能力？对正在读本文的你有什么启示？且听我慢慢道来

# **不起眼的开始** #

招聘前端工程师，尤其是中高级前端工程师，扎实的 JS 基础绝对是必要条件，基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候，我经常会提供下面这段代码，然后让候选人分析它实际运行的结果：

for (var i = 0; i < 5; i++) \{

setTimeout(function() \{

console.log(new Date, i);

\}, 1000);

console.log(new Date, i);

这段代码很短，只有 7 行，我想，能读到这里的同学应该不需要我逐行解释这段代码在做什么吧。候选人面对这段代码时给出的结果也不尽相同，以下是典型的答案：

*  A. 20% 的人会快速扫描代码，然后给出结果：0,1,2,3,4,5；
 *  B. 30% 的人会拿着代码逐行看，然后给出结果：5,0,1,2,3,4；
 *  C. 50% 的人会拿着代码仔细琢磨，然后给出结果：5,5,5,5,5,5；

只要你对 JS 中同步和异步代码的区别、变量作用域、闭包等概念有正确的理解，就知道正确答案是 C，代码的实际输出是：

2017-03-18T00:43:45.873Z 5

2017-03-18T00:43:46.866Z 5

2017-03-18T00:43:46.868Z 5

接下来我会追问：如果我们约定，**用箭头表示其前后的两次输出之间有** **1** **秒的时间间隔，而逗号表示其前后的两次输出之间的时间间隔可以忽略**，代码实际运行的结果该如何描述？会有下面两种答案：

*  A. 60% 的人会描述为：5 -> 5 -> 5 -> 5 -> 5，即每个 5 之间都有 1 秒的时间间隔；
 *  B. 40% 的人会描述为：5 -> 5,5,5,5,5，即第 1 个 5 直接输出，1 秒之后，输出 5 个 5；

这就要求候选人对 JS 中的[定时器工作机制][Link 23]非常熟悉，循环执行过程中，几乎同时设置了 5 个定时器，一般情况下，这些定时器都会在 1 秒之后触发，而循环完的输出是立即执行的，显而易见，正确的描述是 B。

如果到这里算是及格的话，100 个人参加面试只有 20 人能及格，读到这里的同学可以仔细思考，你及格了么？

**追问** **1****：闭包**

如果这道题仅仅是考察候选人对 JS 异步代码、变量作用域的理解，局限性未免太大，接下来我会追问，如果期望代码的输出变成：5 -> 0,1,2,3,4，该怎么改造代码？熟悉闭包的同学很快能给出下面的解决办法：

for (var i = 0; i < 5; i++) \{

(function(j) \{ // j = i

setTimeout(function() \{

console.log(new Date, j);

\}, 1000);

\})(i);

console.log(new Date, i);

巧妙的利用 [IIFE][]（Immediately Invoked Function Expression：声明即执行的函数表达式）来解决闭包造成的问题，确实是不错的思路，但是初学者可能并不觉得这样的代码很好懂，至少笔者初入门的时候这里琢磨了一会儿才真正理解。

有没有更符合直觉的做法？答案是有，我们只需要对循环体稍做手脚，让负责输出的那段代码能拿到每次循环的 i 值即可。该怎么做呢？利用 JS 中基本类型（Primitive Type）的参数传递是[按值传递][Link 24]（Pass by Value）的特征，不难改造出下面的代码：

var output = function (i) \{

setTimeout(function() \{

console.log(new Date, i);

\}, 1000);

\};

for (var i = 0; i < 5; i++) \{

output(i); // 这里传过去的 i 值被复制了

console.log(new Date, i);

能给出上述 2 种解决方案的候选人可以认为对 JS 基础的理解和运用是不错的，可以各加 10 分。当然实际面试中还有候选人给出如下的代码：

for (let i = 0; i < 5; i++) \{

setTimeout(function() \{

console.log(new Date, i);

\}, 1000);

console.log(new Date, i);

细心的同学会发现，这里只有个非常细微的变动，即使用 ES6 [块级作用域][Link 25]（Block Scope）中的 let 替代了 var，但是代码在实际运行时会报错，因为最后那个输出使用的 i 在其所在的作用域中并不存在，i 只存在于循环内部。

能想到 ES6 特性的同学虽然没有答对，但是展示了自己对 ES6 的了解，可以加 5 分，继续进行下面的追问。

**追问** **2****：****ES6**

有经验的前端同学读到这里可能有些不耐烦了，扯了这么多，都是他知道的内容，先别着急，挑战的难度会继续增加。

接着上文继续追问：如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5，并且要求原有的代码块中的循环和两处 console.log 不变，该怎么改造代码？新的需求可以精确的描述为：代码执行时，立即输出 0，之后每隔 1 秒依次输出 1,2,3,4，循环结束后在大概第 5 秒的时候输出 5（这里使用**大概**，是为了避免钻牛角尖的同学陷进去，因为 JS 中的定时器触发时机有可能是不确定的，具体可参见 [How Javascript Timers Work][Link 23]）。

看到这里，部分同学会给出下面的可行解：

for (var i = 0; i < 5; i++) \{

(function(j) \{

setTimeout(function() \{

console.log(new Date, j);

\}, 1000 \* j)); // 这里修改 0~4 的定时器时间

\})(i);

setTimeout(function() \{ // 这里增加定时器，超时设置为 5 秒

console.log(new Date, i);

\}, 1000 \* i));

不得不承认，这种做法虽粗暴有效，但是不算是能额外加分的方案。如果把这次的需求抽象为：在系列异步操作完成（每次循环都产生了 1 个异步操作）之后，再做其他的事情，代码该怎么组织？聪明的你是不是想起了什么？对，就是 [Promise][]。

可能有的同学会问，不就是在控制台输出几个数字么？至于这样杀鸡用牛刀？你要知道，面试官真正想考察的是候选人是否具备某种能力和素质，因为在现代的前端开发中，处理异步的代码随处可见，熟悉和掌握异步操作的流程控制是成为合格开发者的基本功。

顺着下来，不难给出基于 Promise 的解决方案（既然 Promise 是 ES6 中的新特性，我们的新代码使用 ES6 编写是不是会更好？如果你这么写了，大概率会让面试官心生好感）：

const tasks = \[\];

for (var i = 0; i < 5; i++) \{ // 这里 i 的声明不能改成 let，如果要改该怎么做？

((j) => \{

tasks.push(new Promise((resolve) => \{

setTimeout(() => \{

console.log(new Date, j);

resolve(); // 这里一定要 resolve，否则代码不会按预期 work

\}, 1000 \* j); // 定时器的超时时间逐步增加

\}));

\})(i);

Promise.all(tasks).then(() => \{

setTimeout(() => \{

console.log(new Date, i);

\}, 1000); // 注意这里只需要把超时设置为 1 秒

\});

相比而言，笔者更倾向于下面这样看起来更简洁的代码，要知道编程风格也是很多面试官重点考察的点，代码阅读时的颗粒度更小，模块化更好，无疑会是加分点。

const tasks = \[\]; // 这里存放异步操作的 Promise

const output = (i) => new Promise((resolve) => \{

setTimeout(() => \{

console.log(new Date, i);

resolve();

\}, 1000 \* i);

\});

// 生成全部的异步操作

for (var i = 0; i < 5; i++) \{

tasks.push(output(i));

// 异步操作完成之后，输出最后的 i

Promise.all(tasks).then(() => \{

setTimeout(() => \{

console.log(new Date, i);

\}, 1000);

\});

读到这里的同学，恭喜你，你下次面试遇到类似的问题，至少能拿到 80 分。

我们都知道使用 Promise 处理异步代码比回调机制让代码可读性更高，但是使用 Promise 的问题也很明显，即如果没有处理 Promise 的 reject，会导致错误被[丢进黑洞][Link 26]，好在新版的 Chrome 和 Node 7.x 能对未处理的异常给出 [Unhandled Rejection Warning][]，而排查这些错误还需要一些特别的技巧（[浏览器][Link 27]、[Node.js][]）。

**追问** **3****：****ES7**

既然你都看到这里了，那就再坚持 2 分钟，接下来的内容会让你明白你的坚持是值得的。

多数面试官在决定聘用某个候选人之前还需要考察另外一项重要能力，即技术自驱力，直白的说就是候选人像有内部的马达在驱动他，用漂亮的方式解决工程领域的问题，不断的跟随业务和技术变得越来越**牛逼**，究竟什么是牛逼？建议阅读程序人生的[这篇剖析][Link 28]。

回到正题，既然 Promise 已经被拿下，如何使用 ES7 中的 async await 特性来让这段代码变的更简洁？你是否能够根据自己目前掌握的知识给出答案？请在这里暂停 1 分钟，思考下。

下面是笔者给出的参考代码：

// 模拟其他语言中的 sleep，实际上可以是任何异步操作

const sleep = (timeountMS) => new Promise((resolve) => \{

setTimeout(resolve, timeountMS);

\});

(async () => \{ // 声明即执行的 async 函数表达式

for (var i = 0; i < 5; i++) \{

await sleep(1000);

console.log(new Date, i);

await sleep(1000);

console.log(new Date, i);

\})();

**总结**

感谢你花时间读到这里，相信你收获的不仅仅是用 JS 精确控制代码输出的各种技巧，更是对于前端工程师的成长期许：扎实的语言基础、与时俱进的能力、强大技术自驱力。

**深入理解ES6箭头函数的this以及各类this面试题总结**

原创 2017年03月11日 19:16:05

*  标签：
 *  [ES6箭头函数][ES6 1] /
 *  [箭头函数this][this] /
 *  [严格模式this][this 1] /
 *  [箭头函数注意事项][Link 29] /
 *  [深入理解this][this 2]

*  23514

ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿

它也可能是面试中的宠儿, 我们关键要搞清楚 箭头函数和普通函数中的this

一针见血式总结:

**普通函数中的****this:**

1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

**箭头函数中的****this**

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

下面通过一些例子来研究一下 this的一些使用场景\[ 使用最新版 chrome测试 \]

**要整明白这些****,** **我们需要首先了解一下作用域链****:**

当在函数中使用一个变量的时候,首先在本函数内部查找该变量,如果找不到则找其父级函数,

最后直到window,全局变量默认挂载在window对象下

**1.****全局变量默认挂载在****window****对象下**

1.  <script>
2.   var aa = 2;
3.   alert(window.aa);
4.   (function () \{ 
5.   aa = 3;
6.   \})();
7.   alert(window.aa);
8.  </script>

我们仅仅声明了一个全局变量aa,但是打印出window.aa却和aa保持一致,为什么呢?

眼见为实, 我们使用**console.dir(window)** 打印 window对象看看

![/images/20220518/679e78df96364592a2721e68dd39101b.png][https_img-blog.csdn.net_20170311191430605_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuZ2JpbmdiaW5nYQ_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_Center]

我们可以看到在window属性中,看到 aa 属性了;此外,函数也适用于此情况,全局函数也会挂在在window对象下

我们常见的window的属性和方法有: alert, location,document,parseInt,setTimeout,setInterval等,window的属性默认可以省略window前缀!

**2.****在普通函数中****,this****指向它的直接调用者****;****如果找不到直接调用者****,****则是****window**

我们来看一些例子

示例1:

1.  <script>
2.   function test() \{ 
3.   console.log(this);
4.   \}
5.   test();
6.  </script>

结果是: window

原因: test()是一个全局函数,也就是说是挂在window对象下的,所以**test()****等价于** **window.test()** ,所以此时的this是window

示例2:

1.  <script>
2.   var obj = \{ 
3.   say: function () \{ 
4.   setTimeout(function () \{ 
5.   console.log(this)
6.   \});
7.   \}
8.   \}
9.   obj.say();
10. </script>

结果是: window

匿名函数,定时器中的函数,由于没有默认的宿主对象,所以**默认****this****指向****window**

问题: 如果想要在setTimeout/setInterval中使用这个对象的this引用呢?

用一个 变量提前把正确的 this引用保存 起来, 我们通常使用that = this, 或者 \_this = this来保存我们需要的this指针!

1.  <script>
2.   var obj = \{ 
3.   func: function() \{\},
4.   say: function () \{ 
5.   var that = this; //此时的this就是obj对象
6.   setTimeout(function () \{ 
7.   console.log(this)
8.   that.func()
9.   \});
10.  \}
11.  \}
12.  obj.say();
13. </script>

我们也可以使用 **func.bind(this)** 给回调函数直接绑定宿主对象, bind绑定宿主对象后依然返回这个函数, 这是更优雅的做法

**\[javascript\]** [view plain][view plain 32] [copy][view plain 32]

1.  <span style="font-family:'Times New Roman';"><script> 
2.  **var** obj = \{ 
3.   func: **function**() \{\}, 
4.   say: **function** () \{ 
5.  // 此时的this就是obj对象
6.   setTimeout(**function** () \{ 
7.   console.log(**this**) 
8.  **this**.func() 
9.   \}.bind(**this**)); 
10.  \} 
11.  \} 
12.  obj.say(); // obj
13. </script></span>

示例3(改变自360面试题):

1.   window.val = 1;
2.   var obj = \{ 
3.   val: 2,
4.   dbl: function () \{ 
5.   this.val \*= 2;
6.   val \*= 2;
7.   console.log(val);
8.   console.log(this.val);
9.   \}
10.  \};
11.  // 说出下面的输出结果
12.  obj.dbl();
13.  var func = obj.dbl;
14.  func();

结果是: 2 4 8 8

<1> 12行代码调用

val变量在没有指定对象前缀,默认从函数中找,找不到则从window中找全局变量

即 val \*=2 就是 window.val \*= 2

this.val默认指的是 obj.val ;因为 dbl()第一次被obj直接调用

<2>14行代码调用

func() 没有任何前缀,类似于全局函数,即 window.func调用,所以

第二次调用的时候, this指的是window, val指的是window.val

第二次的结果受第一次的影响

**3.****在严格模式下的****this**

1.  <script>
2.   function test() \{ 
3.   'use strict';
4.   console.log(this);
5.   \}
6.   test();
7.  </script>

结果是: undefined

**4.****箭头函数中的** **this**

1.  <script>
2.   var obj = \{ 
3.   say: function () \{ 
4.   setTimeout(() => \{ 
5.   console.log(this)
6.   \});
7.   \}
8.   \}
9.   obj.say(); // obj
10. </script>

此时的 this继承自obj, 指的是定义它的对象obj, 而不是 window!

示例(多层嵌套的箭头函数):

1.  <script>
2.  var obj = \{ 
3.  say: function () \{ 
4.   var f1 = () => \{ 
5.   console.log(this); // obj
6.   setTimeout(() => \{ 
7.   console.log(this); // obj
8.   \})
9.   \}
10.  f1();
11.  \}
12. \}
13. obj.say()
14. </script>

因为f1定义时所处的函数 中的 this是指的 obj, setTimeout中的箭头函数this继承自f1, 所以不管有多层嵌套,都是 obj

示例(复杂情况: 普通函数和箭头函数混杂嵌套)

1.  <script>
2.  var obj = \{ 
3.  say: function () \{ 
4.   var f1 = function () \{ 
5.   console.log(this); // window, f1调用时,没有宿主对象,默认是window
6.   setTimeout(() => \{ 
7.   console.log(this); // window
8.   \})
9.   \};
10.  f1();
11.  \}
12. \}
13. obj.say()
14. </script>

结果: 都是 window,因为 箭头函数在定义的时候它所处的环境相当于是window, 所以在箭头函数内部的this函数window

示例(严格模式下的混杂嵌套)

1.  <script>
2.  var obj = \{ 
3.  say: function () \{ 
4.   'use strict';
5.   var f1 = function () \{ 
6.   console.log(this); // undefined
7.   setTimeout(() => \{ 
8.   console.log(this); // undefined
9.   \})
10.  \};
11.  f1();
12.  \}
13. \}
14. obj.say()
15. </script>

结果都是undefined

说明: 严格模式下,没有宿主调用的函数中的this是undefined!!!所以箭头函数中的也是undefined!

总结:

使用箭头函数,可以让我们解决一些在匿名函数中 this指向不正确的问题; 但是要注意在和普通函数混合的时候,this的指向可能是window !

Y(^o^)Y, 掌握这么多已经足够面试绝大部分关于this的内容了,我们在开发中的应用也没问题了!

如果对大家有所帮助, 我会感到很开心!