前端基础面试题

转自：

http://www.qdfuns.com/notes/40816/795e40bec4bcf47ca37f983ce62f1ea4.html

HTML+CSS部分

1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?
行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其余行内元素；其中img是行元素
块级元素：老是在新行上开始，高度、行高及外边距和内边距均可控制，能够容纳内敛元素和其余元素；
行元素转换为块级元素方式：display：block；
2.将多个元素设置为同一行?清除浮动有几种方式?
将多个元素设置为同一行：float，inline-block
清除浮动的方式：方法一：添加新的元素 、应用 clear：both；
  方法二：父级div定义 overflow: hidden；
方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
3.怪异盒模型box-sizing？弹性盒模型|盒布局?
在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另外一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。
4.简述几个css hack?
（1）图片间隙 
在div中插入图片，图片会将div下方撑大3px。hack1：将<div>与<img>写在同一行。hack2：给<img>添加display：block；
dt  li 中的图片间隙。hack：给<img>添加display：block；
（2）默认高度，IE6如下版本中，部分块元素，拥有默认高度（低于18px）
hack1：给元素添加：font-size：0；
hack2：声明：overflow：hidden；
表单行高不一致
hack1：给表单添加声明：float：left；height： ；border： 0；
鼠标指针
hack：若统一某一元素鼠标指针为手型：cursor：pointer；
当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状
hack1：给a加display：inline-block；
hack2：给li加float：left；

7.href和src区别?title和alt
    href (Hypertext Reference)指定网络资源的位置（超文本引用），从而在当前元素或者当前文档和由当前属性定义的须要的锚点或资源之间定义一个连接或者关系，在 link和a 等元素上使用。
    src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
  title：既是html标签，又是html属性，title做为属性时，用来为元素提供额外说明信息.
   alt：alt是html标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片没法正常显示时给用户提供文字说明使其了解图像信息.
8.transform？animation？区别?animation-duration
         Transform:它和width、left同样，定义了元素不少静态样式实现变形、旋转、缩放、移位及透视等功能，经过一系列功能的组合咱们能够实现很炫酷的静态效果（非动画)。 
    Animation:做用于元素自己而不是样式属性,属于关键帧动画的范畴，它自己被用来替代一些纯粹表现的javascript代码而实现动画,能够经过keyframe显式控制当前帧的属性值.
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
9.nth-of-type | nth-child?
举例说明：
<ul>
<p>111</p>
<span>222<span>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
li:nth-of-type(2):表示ul下的第二个li元素 
li:nth-child(2)：表示既是li元素又是在ul下的第二个元素（找不到）。
建议通常使用nth-of-type，不容易出问题。
10 .:before 和 ::before 区别?
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
对于CSS2以前已有的伪元素，好比:before，单冒号和双冒号的写法::before做用是同样的。
11.如何让一个div 上下左右居中?
答：有三种方法。
方法1：
.div1{
         width:400px;
         height:400px;
         border:#CCC 1px solid;
         background:#99f;
         position:absolute;
         left:50%;
         top:50%;
         transform: translate(-50%,-50%);
}                        
<div class="div1"></div>
方法2：
.div2{
    width:400px;
    height:400px;
    border:#CCC 1px solid;
    background:#99f;
    position: absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
<div class="div2"></div>
方法3：
.div3{
    width:400px;
    height:400px;
    border:#CCC 1px solid;
    background:#9f9;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left:-200px;
    margin-top: -200px;        
}
<div class="div3"></div>
12.css2.0 和css3.0
答：css3增强了css2的功能，增长了新的属性和新的标签，而且删除了一些冗余的标签，在布局方面减小了代码量。之前比较复杂的布局如今一个属性就搞定了（columns之类的属性）。在效果方面加入了更多的效果(圆角，动画之类的)，还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性很差，只有一些高级版本的浏览器支持。
13.弹性盒子模型?flex|box区别?
答：（1）引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即使容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工做。在该布局模型中，容器会根据布局的须要，调整其中包含的条目的尺寸和顺序来最好地填充全部可用的空间。当容器的尺寸因为屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。好比当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并无这样内在的方向限制，能够由开发人员自由操做。
（2）flex和box的区别:
display：box 是老规范，要兼顾古董机子就加上它；
父级元素有display:box;属性以后。他的子元素里面加上box-flex属性。可让子元素按照父元素的宽度进行必定比例的分占空间。
flex是最新的，董机老机子不支持的；
父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。
Android UC浏览器只支持display: box语法；而iOS UC浏览器则支持两种方式。

14.viewport 全部属性 ？
答： (1)width :设置layout viewport的宽度，为一个正整数，或字符串'device-width';
     (2)initial-scale:设置页面的初始缩放值，为一个数字，能够带小数。
     (3)minimum-scale:容许用户的最小缩放值，为一个数字，能够带小数。
     (4)maximum-scale:容许用户的最大缩放值，为一个数字，能够带小数。
     (5)height:设置layout viewport的高度，这个属性对咱们并不重要，不多使用
     (6)user-scalable:是否容许用户进行缩放，值为‘no’或者‘yes’。
     安卓中还支持：target-densitydpi，表示目标设备的密度等级，做用是决定css中的1px表明多少物理像素
     (7)target-densitydpi:值能够为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
15. 如何理解HTML结构的语义化？
所谓标签语义化，就是指标签的含义。语义化的主要目的就是让你们直观的认识标签(markup)和属性(attribute)的用途和做用，对搜索引擎友好，有了良好的结构和语义咱们的网页内容便天然容易被搜索引擎抓取，这种符合搜索引擎收索规则的作法，网站的推广即可以省下很多的功夫，并且可维护性更高，由于结构清晰,十分易于阅读。这也是搜索引擎优化SEO重要的一步。
16. 伪类选择器和伪元素？c3中引入的伪类选择器有？c3中伪元素有?
伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
伪类选择器：
因为状态是动态变化的，因此一个元素达到一个特定状态时，它可能获得一个伪类的样式；当状态改变时，它又会失去这个样式。
伪元素选择器：
并非针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器；
c3中引入的伪类选择器：
:root()选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。:root选择器等同于<html>元素。
:not()选择器称为否认选择器，和jQuery中的:not选择器如出一辙，能够选择除某个元素以外的全部元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
:target()选择器来对页面某个target元素(该元素的id被当作页面中的超连接来使用)指定样式，该样式只在用户点击了页面中的超连接，而且跳转到target元素后起做用。
:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
:nth-child()选择某个元素的一个或多个特定的子元素。
:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素
:nth-of-type(n)选择器和:nth-child(n)选择器很是相似，不一样的是它只计算父元素中指定的某种类型的子元素。
:only-child表示的是一个元素是它的父元素的惟一一个子元素。
:first-line为某个元素的第一行文字使用样式。
:first-letter 为某个元素中的文字的首字母或第一个字使用样式。
:before  在某个元素以前插入一些内容。
:after  在某个元素以后插入一些内容。 
c3中伪元素：
::first-line选择元素的第一行，好比说改变每一个段落的第一行文本的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个经常使用"content"配合使用，见过最多的就是清除浮动
::selection用来改变浏览网页选中文的默认效果
1七、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框架
<!--[if lt IE 9]> <script>         src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
<![endif]--> 

* 如何区分： DOCTYPE声明\新增的结构元素\功能元素
18. placeholder?如何在ie8上兼容placeholder这个效果
方法一：
首先判断浏览器是否支持placeholder属性，若是不支持的话，就遍历全部input输入框，获取placeholder属性的值填充进输入框做为提示信息，同时字体设置成灰色。
当输入框得到焦点( focus )同时输入框内文字等于设置的提示信息时，就把输入框内清空；
当输入框失去焦点( blur )同时输入框内文字为空时，再把获取的placeholder属性的值填充进输入框做为提示信息，同时字体设置成灰色；
当输入框内有输入( keydown )时，此时输入框内的提示信息已经由focus事件清除，此时只须要把字体再恢复成黑色便可
此方法的缺点是，不适用于加载完DOM时即得到焦点的输入框，由于在用户的角度，加载完页面时看到的得到焦点的那个输入框，它的提示文字是看不到的。
HTML：
<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>

CSS：
.phcolor{ color:#999;}

JS
$(function(){  
  //判断浏览器是否支持placeholder属性
  supportPlaceholder='placeholder'in document.createElement('input'),
  placeholder=function(input){
    var text = input.attr('placeholder'),
    defaultValue = input.defaultValue;
    if(!defaultValue){
      input.val(text).addClass("phcolor");
    }
    input.focus(function(){
      if(input.val() == text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val() == ""){
        $(this).val(text).addClass("phcolor");
      }
    });
    //输入的字符不为灰色
    input.keydown(function(){
      $(this).removeClass("phcolor");
    });
  };
  //当浏览器不支持placeholder属性时，调用placeholder函数
  if(!supportPlaceholder){
    $('input').each(function(){
      text = $(this).attr("placeholder");
      if($(this).attr("type") == "text"){
        placeholder($(this));
      }
    });
  }
});
方法二：
此方法的思路是作一张含有提示文字的图片做为input输入框的背景图，初始时得到焦点同时加载背景图；
当输入框不为空时，去掉背景图；
当输入框为空时，加载背景图；
当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图；
当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。
此方法的缺点是：须要为每个提示文字不一样的input制做背景图片，而且设置input的样式。
CSS：
.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}

JS
$(function(){  
   //判断浏览器是否支持placeholder属性
   supportPlaceholder='placeholder' in document.createElement('input');
   if(!supportPlaceholder){
     //初始状态添加背景图片
     $("#uname").attr("class","phbg");
     //初始状态得到焦点
     $("#uname").focus;
     function destyle(){
      if($("#uname").val() != ""){
        $("#uname").removeClass("phbg");
      }else{
        $("#uname").attr("class","phbg");
       }
     }
     //当输入框为空时，添加背景图片；有值时去掉背景图片
     destyle();
     $("#uname").keyup(function(){
      //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片
      destyle();
     });
     $("#uname").keydown(function(){
      //keydown事件能够在按键按下的第一时间去掉背景图片
      $("#uname").removeClass("phbg");
     });
   }
});
方法三：
使用插件：Placeholders.js
19. 常见兼容性问题？
* 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和IE七、IE6分离开来，这样IE8已经独立识别。
  css
      .bb{
       background-color:#f1ee18;
      .background-color:#00deff\9; 
      +background-color:#a200ff;
      _background-color:#1e0bd1; 
      } 
*  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图片格式支持很差(引用一段脚本处理)
20.简述前端优化的方式 旧的雅虎34条|h5新添加的方式
一、尽可能减小HTTP请求次数
二、减小DNS查找次数
三、避免跳转
四、可缓存的AJAX
五、推迟加载内容
六、预加载
    七、减小DOM元素数量
八、根据域名划分页面内容
    九、使iframe的数量最小
十、不要出现404错误
十一、使用内容分发网络
十二、为文件头指定Expires或Cache-Control        1三、Gzip压缩文件内容
1四、配置ETag
1五、尽早刷新输出缓冲
1六、使用GET来完成AJAX请求
1七、把样式表置于顶部
1八、避免使用CSS表达式（Expression）
1九、使用外部JavaScript和CSS
20、削减JavaScript和CSS
2一、用<link>代替@import
2二、避免使用滤镜
2三、把脚本置于页面底部
2四、剔除重复脚本
21.jquery版本?1.11兼容?
Query 2.x系列和 jQuery 1.x拥有一样的API，可是再也不支持IE六、七、8。
推荐使用 1.x version，除非你肯定IE六、七、8用户再也不访问网站。
jquery1.11属于1.x 版本，其兼容IE六、七、8，因此也支持IE9.
22.块级？行内？空元素?
答：行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其余行内元素
块级元素：老是在新行上开始，高度、行高及外边距和内边距均可控制，能够容纳内敛元素和其余元素；
空元素：在HTML元素中，没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素。
23.media属性？screen？All？max-width?min-width?
答：media 属性规定被连接文档将显示在什么设备上。media 属性用于为不一样的媒介类型规定不一样的样式。Screen计算机默认屏幕，all适用于全部设备，max-width超过最大宽度就不执行，min-width必须大于最小宽度才执行。
24.meta标签的name属性值？
答：name 属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。meta标签的name
属性语法格式是：＜meta name="参数" content="
具体的参数值"＞。其中name属性主要有如下几种参数：A 、Keywords(关键字)说明：keywords用来告诉搜索引擎你网页的关键字是什么。B 、description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容.
 C robots(机器人向导)说明：
robots用来告诉搜索机器人哪些页面须要索引，哪些页面不须要索引。content的参数有all,none,index,noindex,follow,nofollow
。默认是all。举例：＜meta name="robots" content="none"＞D 、author(做者) 
25.通常作手机页面切图有几种方式?
答：三种。响应式布局，弹性布局display：flex，利用js编写设定比例，给根元素设定像素，使用rem为单位。
px/em/rem有什么区别？ 为何一般给font-size 设置的字体为62.5% 
答：px像素是相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。一、em的值并非固定的；二、em会继承父级元素的字体大小。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优势于一身，经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。
rem是相对于浏览器进行缩放的。1rem默认是16px，在响应式布局中，一个个除来转换成rem，太麻烦，因此重置rem
body{font-size=62.5%    } 此时1rem = 10px;如果12px则是1.2rem.
26.sass和scss有什么区别?sass通常怎么样编译的
答：文件扩展名不一样，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；语法书写方式不一样，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和咱们的 CSS 语法书写方式很是相似。
27.若是对css进行优化 如何处理？
答：压缩打包，图片整合，避免使用Hack，解决兼容问题，使用简写，让CSS能保证往后的维护。
28.如何对css文件进行压缩合并? gulp ?
答：使用gulp。
一、首页全局安装gulp。
1 npm install --global gulp 
二、其次局部安装gulp。npm install gulp --save-dev
三、在项目根目录下建立一个名为 gulpfile.js 的文件
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这});
四、运行gulp。（默认的名为 default 的任务（task）将会被运行，想要单独执行特定的任务（task），请输入 gulp <task> <othertask>）
gulp
  合并和压缩JS、CSS文件
压缩JS，CSS文件须要引用以下组件：
gulp-minify-css: 压缩css
29.组件? 模块化编程？
组件化编程: 将js css html包装一块儿提供方法和效果；
模块化化: 将相同的功能抽取出来 存放在一个位置进行编程
30.图片和文字在同一行显示?
1 在css中给div添加上“vertical-align:middle”属性。 
2 分别把图片和文字放入不一样的div中，而后用“margin”属性进行定位，就能够使他们显示在同一行。
3 把图片设置为背景图片。
31.禁止事件冒泡
event.stopPropagation()
32.禁止默认事件
event.preventDefault()
33.a标签中 active hover link visited 正确的设置顺序是什么?
a标签的link、visited、hover、active是有必定顺序的
a:link  
a:visited  
a:hover 
a:active   
34.a标签中 如何禁用href 跳转页面 或 定位连接 
        e.preventDefault();
        href="javascript:void(0);
35.手机端上 图片长时间点击会选中图片，如何处理?
onselect=function() {
return false
}
36.video标签的几个个属性方法
src：视频的URL   poster：视频封面，没有播放时显示的图片   preload：预加载    autoplay：自动播放   loop：循环播放  controls：浏览器自带的控制条    width：视频宽度    height：视频高度
37.常见的视频编码格式有几种?视频格式有几种?
视频格式：MPEG-一、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式 
视频编码格式：H.26四、MPEG-四、MPEG-二、WMA-HD以及VC-1
38.canvas在标签上设置宽高 和在style中设置宽高有什么区别？
canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。若是canvas的width和height没指定或值不正确，就被设置成默认值 。
39.border-image？box-sizing?
Border-image : 图形化边框
Box-sizing : 属性容许您以特定的方式定义匹配某个区域的特定元素。
语法 ：box-sizing：content-box | border-box
Content-box : padding和border不被包含在定义的width和height以内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding) 此属性表现为标准模式下的盒模型 .
Border-box : padding和border被包含在定义的width和height以内。对象的实际宽度就等于设置的width值，即便定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。
40.渐进加强和优雅降级
渐进加强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减小用户体验的供给，而渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要。降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过期”或有功能缺失的浏览器下的测试工做安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你能够作一些小的调整来适应某个特定的浏览器。但因为它们并不是咱们所关注的焦点，所以除了修复较大的错误以外，其它的差别将被直接忽略。
“渐进加强”观点
“渐进加强”观点则认为应关注于内容自己。
内容是咱们创建网站的诱因。有的网站展现它，有的则收集它，有的寻求，有的操做，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进加强”成为一种更为合理的设计范例。这也是它当即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的缘由所在。
那么问题来了。如今产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了不少圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？
41.解释在ie低版本下的怪异盒模型  和c3的怪异盒模型 和 弹性盒模型?
  IE当padding+border的值小于width或者height:
盒模型的宽度=margin(左右)+width（width已经包含了padding和border的值）
盒模型的高度=margin(上下)+height（height已经包含了padding和border的值）
   当padding+border的值大于width或者height:
盒模型的宽度=margin(左右)+padding(左右)+border(左右)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一个默认行高 19px）
  因此至关因而padding+border和width或者height比大小，谁大取谁。
以上几种DOCTYPE都是标准的文档类型，不管使用哪一种模式完整定义DOCTYPE，都会触发标准模式，而若是DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）
CSS3box-sizing有两个值一个是content-box，另外一个是border-box。
    当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
Css3弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决定一个盒子在其余盒子中的分布方式以及如何处理可用的空间。使用该模型，能够很轻松的建立自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。
42.animation对应的属性
写法：animation: name duration timing-function delay iteration-count direction;
下面是对应的属性的介绍
animation-name        规定须要绑定到选择器的 keyframe 名称。。
animation-duration        规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function        规定动画的速度曲线。
animation-delay        规定在动画开始以前的延迟。
animation-iteration-count        规定动画应该播放的次数。
animation-direction        规定是否应该轮流反向播放动画。
43.transition?
    css的transition容许css的属性值在必定的时间区间内平滑地过渡。这种效果能够在鼠标单击、得到焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
注意区别transform，transform是进行2D转换的 如移动，比例化，反过来，旋转，和拉伸元素。
44.h5新特性？
一、绘画的 canvas 元素
二、用于媒介回放的 video 和 audio 元素
三、对本地离线存储的更好的支持
四、新的特殊内容元素，好比 article、footer、header、nav、section
五、新的表单控件，好比 calendar、date、time、email、url、search
45.canvas 如何绘制一个三角形|正方形
 moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）而后要固定终止位置要用到LineTo函数肯定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。
stroke() 方法会实际地绘制出经过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
<!DOCTYPE HTML5>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>画布</title>
  </head> 
<body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.
     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");
//三角形
         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();
//正方形
         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script>
</body>
</html>
4六、所用bootstap版本？
3.0

4七、css清除浮动的几种方式？
一、父级div定义 height 
二、结尾处加空div标签 clear:both 
三、父级div定义 伪类:after 和 zoom   
四、父级div定义 overflow:hidden   
五、父级div定义 overflow:auto   
六、父级div 也一块儿浮动 
七、父级div定义 display:table
4八、为何要初始化CSS样式。
由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。
4九、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
50、解释下 CSS sprites，以及你要如何在页面或网站中使用它。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position能够用数字能精确的定位出背景图片的位置。这样能够减小不少图片请求的开销，由于请求耗时比较长；请求虽然能够并发，可是也有限制，通常浏览器都是6个。对于将来而言，就不须要这样作了，由于有了`http2`。
5一、什么是 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>元素就能够了。
52.a点击出现框，解决方法:
    a,a:hover,a:active,a:visited,a:link,a:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline:none;background: none;text-decoration: none;border:none;-webkit-appearance: none; }

JS部分
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构?
基本数据类型：Undefined、Null、Boolean、Number、String
值类型：数值、布尔值、null、undefined。
引用类型：对象、数组、函数。
堆栈数据结构：是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出!
js数组中提供了如下几个方法可让咱们很方便实现堆栈：
shift:从数组中把第一个元素删除，并返回这个元素的值。
unshift: 在数组的开头添加一个或更多元素，并返回新的长度
push:在数组的中末尾添加元素，并返回新的长度
pop:从数组中把最后一个元素删除，并返回这个元素的值。
2.声明函数做用提高?声明变量和声明函数的提高有什么区别?
（1）变量声明提高：变量申明在进入执行上下文就完成了。
      只要变量在代码中进行了声明，不管它在哪一个位置上进行声明， js引擎都会将它的声明放在范围做用域的顶部；
（2）函数声明提高：执行代码以前会先读取函数声明，意味着能够把函数申明放在调用它的语句后面。
   只要函数在代码中进行了声明，不管它在哪一个位置上进行声明， js引擎都会将它的声明放在范围做用域的顶部；
（3）变量or函数声明：函数声明会覆盖变量声明，但不会覆盖变量赋值。
      同一个名称标识a，即有变量声明var a，又有函数声明function a() {}，无论两者声明的顺序，函数声明会覆盖变量声明，也就是说，此时a的值是声明的函数function a() {}。注意：若是在变量声明的同时初始化a，或是以后对a进行赋值，此时a的值变量的值。eg: var a; var c = 1; a = 1; function a() { return true; } console.log(a); 
3.判断数据类型? 
typeof返回的类型都是字符串形式，能够判断function的类型；在判断除Object类型的对象时比较方便。
判断已知对象类型的方法： instanceof，后面必定要是对象类型，而且大小写不能错，该方法适合一些条件选择或分支。
4.异步编程？
方法1：回调函数，优势是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，并且每一个任务只能指定一个回调函数。
方法2：时间监听，能够绑定多个事件，每一个事件能够指定多个回调函数，并且能够“去耦合”（Decoupling），有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。
方法3：发布/订阅，性质与“事件监听”相似，可是明显优于后者。
方法4：Promises对象，是CommonJS工做组提出的一种规范，目的是为异步编程提供统一接口。
简单说，它的思想是，每个异步任务返回一个Promise对象，该对象有一个then方法，容许指定回调函数。
5.事件流?事件捕获？事件冒泡？
事件流：从页面中接收事件的顺序。也就是说当一个事件产生时，这个事件的传播过程，就是事件流。
IE中的事件流叫事件冒泡；事件冒泡：事件开始时由最具体的元素接收，而后逐级向上传播到较为不具体的节点（文档）。对于html来讲，就是当一个元素产生了一个事件，它会把这个事件传递给它的父元素，父元素接收到了以后，还要继续传递给它的上一级元素，就这样一直传播到document对象（亲测如今的浏览器到window对象，只有IE8及下不这样）；
事件捕获是不太具体的元素应该更早接受到事件，而最具体的节点应该最后接收到事件。他们的用意是在事件到达目标以前就捕获它；也就是跟冒泡的过程正好相反，以html的click事件为例，document对象（DOM级规范要求从document开始传播，可是如今的浏览器是从window对象开始的）最早接收到click事件的而后事件沿着DOM树依次向下传播，一直传播到事件的实际目标；
6.如何清除一个定时器?
window.clearInterval();
window.clearTimeout();
7.如何添加一个dom对象到body中?innerHTML和innerText区别?
body.appendChild(dom元素)；
innerHTML:从对象的起始位置到终止位置的所有内容,包括Html标签。
innerText:从起始位置到终止位置的内容, 但它去除Html标签 
分别简述五个window对象、属性
成员对象    
window.event    window.document     window.history    
window.screen    window.navigator    window.external
Window对象的属性以下：
window //窗户自身
window.self //引用本窗户window=window.self     
window.name //为窗户命名     
window.defaultStatus //设定窗户状态栏信息       window.location //URL地址,配备布置这个属性能够打开新的页面 
8.数据持久化技术(ajax)?简述ajax流程
1)客户端产生js的事件
2)建立XMLHttpRequest对象
3)对XMLHttpRequest进行配置
4)经过AJAX引擎发送异步请求
5)服务器端接收请求而且处理请求，返回html或者xml内容
6)XML调用一个callback()处理响应回来的内容
7)页面局部刷新
9.回调函数?
    回调函数就是一个经过函数指针调用的函数。若是你把函数的指针（地址）做为参数传递给另外一个函数，当这个指针被用来调用其所指向的函数时，咱们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。
10.什么是闭包?*  堆栈溢出有什么区别？ 内存泄漏? 那些操做会形成内存泄漏？怎么样防止内存泄漏？
闭包：就是可以读取其余函数内部变量的函数。
堆栈溢出：就是不顾堆栈中分配的局部数据块大小，向该数据块写入了过多的数据，致使数据越界，结果覆盖了别的数据。常常会在递归中发生。
内存泄露是指：用动态存储分配函数内存空间，在使用完毕后未释放，致使一直占据该内存单元。直到程序结束。指任何对象在您再也不拥有或须要它以后仍然存在。
形成内存泄漏：
setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
防止内存泄露：
一、不要动态绑定事件；
二、不要在动态添加，或者会被动态移除的dom上绑事件，用事件冒泡在父容器监听事件；
三、若是要违反上面的原则，必须提供destroy方法，保证移除dom后事件也被移除，这点能够参考Backbone的源代码，作的比较好；
四、单例化，少建立dom，少绑事件。
11.平时工做中怎么样进行数据交互?若是后台没有提供数据怎么样进行开发?mock数据与后台返回的格式不一样意怎么办?
由后台编写接口文档、提供数据接口实、前台经过ajax访问实现数据交互；
在没有数据的状况下寻找后台提供静态数据或者本身定义mock数据；
返回数据不统一时编写映射文件 对数据进行映射。
12 简述ajax执行流程
基本步骤：
var xhr =null;//建立对象 
if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
}else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(“方式”,”地址”,”标志位”);//初始化请求 
    xhr.setRequestHeader(“”,””);//设置http头信息 
xhr.onreadystatechange =function(){}//指定回调函数 
xhr.send();//发送请求 
13.自执行函数?用于什么场景？好处
自执行函数:一、声明一个匿名函数二、立刻调用这个匿名函数。
做用：建立一个独立的做用域。
好处：防止变量弥散到全局，以避免各类js库冲突。隔离做用域避免污染，或者截断做用域链，避免闭包形成引用变量没法释放。利用当即执行特性，返回须要的业务函数或对象，避免每次经过条件判断来处理
场景：通常用于框架、插件等场景
14.html和xhtml有什么区别?
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的标记语言。
    1.XHTML 元素必须被正确地嵌套。2.XHTML 元素必须被关闭。3.标签名必须用小写字母。4.空标签也必须被关闭。5.XHTML 文档必须拥有根元素。
15. 什么是构造函数？与普通函数有什么区别?
构造函数：是一种特殊的方法、主要用来建立对象时初始化对象，总与new运算符一块儿使用，建立对象的语句中构造函数的函数名必须与类名彻底相同。
与普通函数相比只能由new关键字调用，构造函数是类的标示
16. 经过new建立一个对象的时候，函数内部有哪些改变
function Person(){}
Person.prototype.friend = [];
Person.prototype.name = '';
// var a = new Person();
// a.friend[0] = '王琦';
// a.name = '程娇';
// var b = new Person();
// b.friend？
// b.name?
一、建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型。 
二、属性和方法被加入到 this 引用的对象中。
三、新建立的对象由 this 所引用，而且最后隐式的返回 this 。
17.事件委托？有什么好处?
答：（1）利用冒泡的原理，把事件加到父级上，触发执行效果
（2）好处：新添加的元素还会有以前的事件；提升性能。
18.window.onload ==? DOMContentLoaded ?
答：通常状况下，DOMContentLoaded事件要在window.onload以前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候咱们只是想在DOM树构建完成后，绑定事件到元素，咱们并不须要图片元素，加上有时候加载外域图片的速度很是缓慢。
19.节点类型?判断当前节点类型?
答：1        元素节点                        
    2        属性节点                        
    3        文本节点                        
    8        注释节点                        
    9        文档节点                        
经过nodeObject.nodeType判断节点类型：其中，nodeObject 为DOM节点（节点对象）。该属性返回以数字表示的节点类型，例如，元素节点返回 1，属性节点返回 2 。
20.如何合并两个数组？数组删除一个元素?
答：三种方法。
  （1）var arr1=[1,2,3];
                var arr2=[4,5,6];
                arr1 = arr1.concat(arr2);
                console.log(arr1); 
  （2）var arr1=[1,2,3];
                var arr2=[4,5,6];
                Array.prototype.push.apply(arr1,arr2);
                console.log(arr1);
  （3）var arr1=[1,2,3];
                var arr2=[4,5,6];
                for (var i=0; i < arr2.length; i++) {
                    arr1.push( arr2[i] );
                }
                console.log(arr1);   
21.强制转换 显式转换 隐式转换?
答：(1)强制类型转换：
Boolean(0)                // => false - 零
            Boolean(new object())   // => true - 对象
                Number(undefined)       // =>   NaN
                Number(null)              // => 0
                String(null)              // => "null"
parseInt( )
parseFloat( )
JSON.parse( )
JSON.stringify ( )
(2)隐式类型转换：
在使用算术运算符时，运算符两边的数据类型能够是任意的，好比，一个字符串能够和数字相加。之因此不一样的数据类型之间能够作运算，是由于JavaScript引擎在运算以前会悄悄的把他们进行了隐式类型转换的
（例如：x+""         //等价于String(x)
                +x                 //等价于Number(x)
                x-0         //同上
                !!x         //等价于Boolean(x),是双叹号）
   (3)显式转换： 
若是程序要求必定要将某一类型的数据转换为另外一种类型，则能够利用强制类型转换运算符进行转换，这种强制转换过程称为显示转换。
显示转换是你定义让这个值类型转换成你要用的值类型，是底到高的转换。例 int 到float就能够直接转，
int i=5,想把他转换成char类型，就用显式转换（char）i
22.  var a = true;
         typeof a++          //number
         typeof true++        //错误！
         typeof a+1                //number1
         typeof (true)+1        //boolean1
23.jq中如何实现多库并存?Noconfict
多库共存就是“$ ”符号的冲突。
方法一：
利用jQuery的实用函数$.noConflict();这个函数归还$的名称控制权给另外一个库，所以能够在页面上使用其余库。这时，咱们能够用"jQuery "这个名称调用jQuery的功能。
$.noConflict();   
jQuery('#id').hide();   
.....  
//或者给jQuery一个别名  
var $j=jQuery  
$j('#id').hide();   
.....

方法二：
(function($){

})(jQuery)
方法三：
jQuery(function($){

})
经过传递一个函数做为jQuery的参数，所以把这个函数声明为就绪函数。
咱们声明$为就绪函数的参数，由于jQuery老是吧jQuery对象的引用做为第一个参数传递，因此就保证了函数的执行。

24.jq中 get 和 eq有什么区别？
get() :取得其中一个匹配的元素。num表示取得第几个匹配的元素，get多针对集合元素，返回的是DOM对象组成的数组
eq():获取第N个元素，下标都是从0开始，返回的是一个JQuery对象 
25.如何经过原生js 判断一个元素当前是显示仍是隐藏状态?
if( document.getElementById("div").css("display")==='none')
if( document.getElementById("div").css("display")==='block')
$("#div").is(":hidden"); // 判断是否隐藏
$("#div").is(":visible")
26.jq如何判断元素显示隐藏？
第一种：使用CSS属性
var display =$('#id').css('display');
if(display == 'none'){
   alert("我是隐藏的！");
}

第二种：使用jquery内置选择器
<div id="test">
<p>仅仅是测试所用</p>
</div>

if($("#test").is(":hidden")){
       $("#test").show();    //若是元素为隐藏,则将它显现
}else{
      $("#test").hide();     //若是元素为显现,则将其隐藏
}

第三种：jQuery判断元素是否显示 是否隐藏
var node=$('#id');
if(node.is(':hidden')){　　//若是node是隐藏的则显示node元素，不然隐藏
　　node.show();　
}else{
　　node.hide();
}
27.移动端上什么是点击穿透?
点击穿透现象有3种：
点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件
跨页面点击穿透问题：若是按钮下面刚好是一个有href属性的a标签，那么页面就会发生跳转
另外一种跨页面点击穿透问题：此次没有mask了，直接点击页内按钮跳转至新页，而后发现新页面中对应位置元素的click事件被触发了
解决方案：
一、只用touch
最简单的解决方案，完美解决点击穿透问题
把页面内全部click所有换成touch事件（ touchstart 、’touchend’、’tap’）
二、只用click
下下策，由于会带来300ms延迟，页面内任何一个自定义交互都将增长300毫秒延迟
三、tap后延迟350ms再隐藏mask
改动最小，缺点是隐藏mask变慢了，350ms仍是能感受到慢的
四、pointer-events
比较麻烦且有缺陷， 不建议使用
mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应
缺陷是mask消失后的的350ms内，用户能够看到按钮下面的元素点着没反应，若是用户手速很快的话必定会发现
28.jq绑定事件的几种方式？on bind
jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off
Bind( )是使用频率较高的一种，做用就是在选择到的元素上绑定特定事件类型的监听函数;
Live( )能够对后生成的元素也能够绑定相应的事件,处理机制就是把事件绑定在DOM树的根节点上，而不是直接绑定在某个元素上;
Delegate( )采用了事件委托的概念，不是直接为子元素绑定事件，而是为其父元素（或祖先元素也可）绑定事件，当在div内任意元素上点击时，事件会一层层从event target向上冒泡，直至到达你为其绑定事件的元素；
on( )方法能够绑定动态添加到页面元素的事件，on()方法绑定事件能够提高效率；
29.jq中如何将一个jq对象转化为dom对象？
方法一：
jQuery对象是一个数据对象，能够经过[index]的方法，来获得相应的DOM对象。 
如：var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 
方法二：
jQuery自己提供，经过.get(index)方法，获得相应的DOM对象 
如：var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中
30.jq中有几种选择器?分别是什么?
层叠选择器、基本过滤选择器、内容过滤选择器、可视化过滤选择器、属性过滤选择器、子元素过滤选择器、表单元素选择器、表单元素过滤选择器
31.jq中怎么样编写插件?
第一种是类级别的插件开发：

1.1 添加一个新的全局函数
添加一个全局函数，咱们只需以下定义：
jQuery.foo = function() {  
  alert('This is a test. This is only a test.'); 
};   

1.2 增长多个全局函数
添加多个全局函数，可采用以下定义：
jQuery.foo = function() {  
    alert('This is a test. This is only a test.'); 
}; 
jQuery.bar = function(param) {  
   alert('This function takes a parameter, which is "' + param + '".'); 
};  
调用时和一个函数的同样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3 使用jQuery.extend(object);　
jQuery.extend({     
foo: function() {     
    alert('This is a test. This is only a test.');     
  },     
bar: function(param) {     
    alert('This function takes a parameter, which is "' + param +'".');     
  }    
}); 

1.4 使用命名空间
虽然在jQuery命名空间中，咱们禁止使用了大量的javaScript函数名和变量名。可是仍然不可避免某些函数或变量名将于其余jQuery插件冲突，所以咱们习惯将一些方法封装到另外一个自定义的命名空间。
jQuery.myPlugin = {         
foo:function() {         
   alert('This is a test. This is only a test.');         
  },         
  bar:function(param) {         
   alert('This function takes a parameter, which is "' + param + '".');   
  }        
}; 
采用命名空间的函数仍然是全局函数，调用时采用的方法： 
$.myPlugin.foo();        
$.myPlugin.bar('baz');
经过这个技巧（使用独立的插件名），咱们能够避免命名空间内函数的冲突。

第二种是对象级别的插件开发

形式1： 
(function($){    
   $.fn.extend({    
    pluginName:function(opt,callback){    
              // Our plugin implementation code goes here.      
    }    
   })    
})(jQuery);   
形式2：
(function($) {      
    $.fn.pluginName = function() {    
         // Our plugin implementation code goes here.    
    };     
})(jQuery);
形参是$，函数定义完成以后,把jQuery这个实参传递进去.当即调用执行。这样的好处是,咱们在写jQuery插件时,也能够使用$这个别名,而不会与prototype引发冲突

32.$('div+.ab')和$('.ab+div') 哪一个效率高？
$('div+.ab')效率高
33.$.map和$.each有什么区别
map()方法主要用来遍历操做数组和对象，会返回一个新的数组。$.map()方法适用于将数组或对象每一个项目新阵列映射到一个新数组的函数；
each()主要用于遍历jquery对象，返回的是原来的数组，并不会新建立一个数组。
34.编写一个 getElementsByClassName 封装函数?
<body>
  <input type="submit" id = "sub" class="ss confirm btn" value="提交"/>
  <script>
window.onload = function(){
//方法一
        var Opt = document.getElementById('sub');
        var getClass = function(className,tagName){
            if(document.getElementsByTagName){
                var Inp = document.getElementsByTagName(tagName);
                for(var i=0; i<Inp.length; i++){
                    if((new RegExp('(\\s|^)' +className +'(\\s|$)')).test(Inp[i].className)){
                        return Inp[i];
                    }
                }
            }else if(document.getElementsByClassName){
                return document.getElementsByClassName(className);
            }
        }     
//方法二
        var aa = getClass("confirm", "input");
        function getClass(className, targetName){
            var ele = [];
            var all = document.getElementsByTagName(targetName || "*");
            for(var i=0; i<all.length; i++){
                if(all[i].className.match(new RegExp('(\\s|^)'+confirm+'(\\s|$)'))){    
                    ele[ele.length] = all[i];
                }
            }
            return ele;
        }

//方法三
        function getObjsByClass(tagName, className){
            if(document.getElementsByClassName){
                alert("document.getElementsByClassName");
                return document.getElementsByClassName(className);
            }else{
                var el = [];
                var _el = document.getElementsByTagName(tagName);
                for(var i=0; i<_el.length; i++){
                    if(_el[i].className.indexOf(className) > -1){
                        alert(_el[i]);
                        el[_el.length] = _el[i];
                    }
                }
                alert(el);
                return el;
            }
        }
    }
  </script>
</body>
35.简述下工做流程
我在以前的公司工做流程大概是这样的：公司定稿会结束之后，会进行简单的技术研讨，而后咱们前端会进行先期的技术准备。前端切图人员会进行psd设计稿切图，而且将css文件进行整合。咱们主要编写JS部分，其中包括搭建前端框架（大项目），编写js业务和数据持久化操做，咱们也会编写js插件而且进行封装方便使用，还有就是编写JS前端组建和JS测试单元，最后将完成的JS部分与切图人员提供的HTML页面进行整合。最后对完成的页面进行功能测试、页面兼容、产品还原。而后对产品进行封存，提交测试。若是出现BUG会返回给咱们开发人员进行修改，再提交测试，最后测试成功，进行版本封存。等到程序所有上线的时候进行线上测试。
36.通常使用什么版本控制工具?svn如何对文件加锁
svn加锁目的：为了不多我的同一时间对同一个文件改动的相互覆盖，版本控制系统就必须有一套冲突处理机制。
svn加锁两种策略：乐观加锁：全部签出的文件都是可读写的，对文件的修改没必要得到文件的锁，当你修改完文件签入时，会首先要求你更新本地文件，版本控制系统不会覆盖你的本地修改，而是会让你本身合并冲突后签入。
严格加锁：全部签出的文件都是只读的，任何对文件的修改必需要得到文件的锁，若是其余人没有拥有该文件的锁，那么版本控制系统就会受权给你文件的锁，并将文件设置为可编辑的。
svn两种加锁步骤：乐观加锁：选择你想要获取锁定的文件，而后右键菜单点击TortoiseSVN 选取获取锁定。
严格加锁：在想要采起严格加锁的文件或目录上点击右键，使用TortoiseSVN 属性菜单，点击新建属性，选择须要锁定。
37. git 和 svn的区别?
SVN是集中式版本控制系统，版本库是集中放在中央服务器的，而干活的时候，用的都是本身的电脑，因此首先要从中央服务器哪里获得最新的版本，而后干活，干完后，须要把本身作完的活推送到中央服务器。集中式版本控制系统是必须联网才能工做，若是在局域网还能够，带宽够大，速度够快，若是在互联网下，若是网速慢的话，就纳闷了。

Git是分布式版本控制系统，那么它就没有中央服务器的，每一个人的电脑就是一个完整的版本库，这样，工做的时候就不须要联网了，由于版本都是在本身的电脑上。既然每一个人的电脑都有一个完整的版本库，那多我的如何协做呢？好比说本身在电脑上改了文件A，其余人也在电脑上改了文件A，这时，大家两之间只需把各自的修改推送给对方，就能够互相看到对方的修改了。
38. jquery和zepto有什么区别?
1.针对移动端程序，Zepto有一些基本的触摸事件能够用来作触摸屏交互（tap事件、swipe事件），Zepto是不支持IE浏览器的，这不是Zepto的开发者Thomas Fucks在跨浏览器问题上犯了迷糊，而是通过了认真考虑后为了下降文件尺寸而作出的决定，就像jQuery的团队在2.0版中再也不支持旧版的IE（6 7 8）同样。由于Zepto使用jQuery句法，因此它在文档中建议把jQuery做为IE上的后备库。那样程序仍能在IE中，而其余浏览器则能享受到Zepto在文件大小上的优点，然而它们两个的API不是彻底兼容的，因此使用这种方法时必定要当心，并要作充分的测试。
2.Dom操做的区别：添加id时jQuery不会生效而Zepto会生效。
3.zepto主要用在移动设备上，只支持较新的浏览器，好处是代码量比较小，性能也较好。
jquery主要是兼容性好，能够跑在各类pc，移动上，好处是兼容各类浏览器，缺点是代码量大，同时考虑兼容，性能也不够好。
39. $(function(){})和window.onload         和 $(document).ready(function(){})
window.onload:用于当页面的全部元素，包括外部引用文件，图片等都加载完毕时运行函数内的函数。load方法只能执行一次，若是在js文件里写了多个，只能执行最后一个。
$(document).ready(function(){})和$(function(){})都是用于当页面的标准DOM元素被解析成DOM树后就执行内部函数。这个函数是能够在js文件里屡次编写的，对于多人共同编写的js就有很大的优点，由于全部行为函数都会执行到。并且$(document).ready()函数在HMTL结构加载完后就能够执行，不须要等大型文件加载或者不存在的链接等耗时工做完成才执行，效率高。
40. jq中 attr 和 prop 有什么区别
对于HTML元素自己就带有的固有属性，在处理时，使用prop方法。
对于HTML元素咱们本身自定义的DOM属性，在处理时，使用attr方法。
41. 简述下 this 和 定义属性和方法的时候有什么区别?Prototype？
this表示当前对象，若是在全局做用范围内使用this，则指代当前页面对象window； 若是在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用。 咱们还能够使用apply和call两个全局方法来改变函数中this的具体指向。
prototype本质上仍是一个JavaScript对象。 而且每一个函数都有一个默认的prototype属性。
在prototype上定义的属性方法为全部实例共享，全部实例皆引用到同一个对象，单一实例对原型上的属性进行修改，也会影响到全部其余实例。
42. 什么是预编译语音|预编译处理器? 
Sass是一种CSS预处理器语言，经过编程方式生成CSS代码。由于可编程，因此操控灵活性自由度高，方便实现一些直接编写CSS代码较困难的代码。
同时，由于Sass是生成CSS的语言，因此写出来的Sass文件是不能直接用的，必须通过编译器编译成CSS文件才能使用。
CSS 预处理器是一种语言用来为 CSS 增长一些编程的的特性，无需考虑浏览器的兼容性问题，例如你能够在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。最经常使用的css预处理器有sass、less css、 stylus。
43.ajax 和 jsonp ？
ajax和jsonp的区别：
相同点：都是请求一个url
不一样点：ajax的核心是经过xmlHttpRequest获取内容
jsonp的核心则是动态添加<script>标签来调用服务器 提供的js脚本。
44.ajax执行流程？
1. 建立XMLHttpRequest对象,也就是建立一个异步调用对象
2. 建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新
45.xhr对象 status ? readystate?
status是XMLHttpRequest对象的一个属性，表示响应的HTTP状态码。
readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。
46.readystate 0~4
0：未初始化状态：此时，已经建立了一个XMLHttpRequest对象
1： 准备发送状态：此时，已经调用了XMLHttpRequest对象的open方法，而且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
2：已经发送状态：此时，已经经过send方法把一个请求发送到服务器端，可是尚未收到一个响应
3：正在接收状态：此时，已经接收到HTTP响应头部信息，可是消息体部分尚未彻底接收到
4：完成响应状态：此时，已经完成了HTTP响应的接收
47.说出几个http协议状态码? 200 201 302 304 400 404 500
200：请求成功
201：请求成功而且服务器建立了新的资源
302：服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来响应之后的请求。
304：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
400：服务器不理解请求的语法。
404：请求的资源（网页等）不存在
500： 内部服务器错误
48.上一个项目是什么？主要负责哪些？购物车流程?支付功能?
主要负责哪些就讲主要作哪些功能模块：
    1）商品模块:
          一、商品列表：商品排序 商品筛选 商品过滤 商品查询 商品推荐
          二、商品详情:类型推荐 商品简介 商品详情 商品评价 售后维护 
   2)购物车模块：商品编号、数量、价格、总额、运费、运输选项、运费总计、从购物车删除选项、更新数量、结帐、继续购物、商品描述、库存信息
49.sessionStorage和localstroage 与 cookie之间有什么关联和区别，cookie最大存放多少字节
    三者共同点：都是保存在浏览器端，且同源的。
区别:
        一、cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
     二、存储大小限制也不一样，cookie数据不能超过4k，sessionStorage和localStorage 但比cookie大得多，能够达到5M
     三、数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭
     四、做用域不一样，sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面(即数据不共享)；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的（即数据共享）。
50.ajax中 get 和 post 有什么区别?
get和post都是数据提交的方式。
get的数据是经过网址问号后边拼接的字符串进行传递的。post是经过一个HTTP包体进行传递数据的。
get的传输量是有限制的，post是没有限制的。
get的安全性可能没有post高，因此咱们通常用get来获取数据，post通常用来修改数据。
51.Gc机制是什么？为何闭包不会被回收变量和函数？
   一、Gc垃圾回收机制;
   二、外部变量没释放，因此指向的大函数内的小函数也释放不了
52.简述下你理解的面向对象？
   万物皆对象，把一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通讯组成的.
  面向对象具备封装性,继承性,多态性。
  封装:隐蔽了对象内部不须要暴露的细节,使得内部细节的变更跟外界脱离,只依靠接口进行通讯.封装性下降了编程的复杂性. 经过继承,使得新建一个类变得容易,一个类从派生类那里得到其非私有的方法和公用属性的繁琐工做交给了编译器. 而 继承和实现接口和运行时的类型绑定机制 所产生的多态,使得不一样的类所产生的对象可以对相同的消息做出不一样的反应,极大地提升了代码的通用性. 
 总之,面向对象的特性提升了大型程序的重用性和可维护性.
53.this是什么 在不一样场景中分别表明什么
（1）function a(){ this ?}
       This:指向windows
（2） function b(){ return function(){ this ?}}
          b()();         This:指向windows
（3） function c(){ return {s:function(){this}}}
         c().s();         This:指向object
  因为其运行期绑定的特性，JavaScript 中的 this 含义要丰富得多，它能够是全局对象、当前对象或者任意对象，这彻底取决于函数的调用方式。
54.你对数据校验是怎么样处理的？jquery.validate？
        通俗的说，就是为保证数据的完整性，用一种指定的算法对原始数据计算出的一个校验值。接收方用一样的算法计算一次校验值，若是和随数据提供的校验值同样，就说明数据是完整的。 
用正则表达式来处理;
jquery.validate：为表单验证插件
55.如何对登陆的帐号密码进行加密?
  Md5
56.在jq中  mouseover mouseenter mouseout mouseleave 和 hover有什么关联?
mouseenter与mouseover：
        不论鼠标指针穿过被选中元素或其子元素，都会触发mouseover事件。
        只有在鼠标指针穿过被选元素时，才会触发mouseentr事件。
mouseout与mouseleave：
        不论鼠标离开被选元素仍是任何子元素，都会触发mouseout事件。
        只有在鼠标指针离开被选元素时，才会触发mouseleave事件。
hover:
        hover是一个符合方法，至关于mouseenter+mouseleave。
57.jsonp原理？ 缺点?
        工做原理：使用script标签实现跨域访问，可在url中指定回调函数，获取JSON数据并在指定的回调函数中执行jquery实现jsop。
        缺点：只支持GET方式的jsonp实现，是一种脚本注入行为存在必定的安全隐患。若是返回的数据格式有问题或者返回失败了，并不会报错。
58.除了jsonp  还有什么跨域方式
javascript跨域有两种状况： 
一、基于同一父域的子域之间，如：a.c.com和b.c.com 
二、基于不一样的父域之间，如：www.a.com和www.b.com 
三、端口的不一样，如：www.a.com:8080和www.a.com:8088 
四、协议不一样，如：http://www.a.com和https://www.a.com 
对于状况3和4，须要经过后台proxy来解决，具体方式以下： 
a、在发起方的域下建立proxy程序 
b、发起方的js调用本域下的proxy程序 
c、proxy将请求发送给接收方并获取相应数据 
d、proxy将得到的数据返回给发起方的js 
代码和ajax调用一致，其实这种方式就是经过ajax进行调用的
而状况1和2除了经过后台proxy这种方式外，还能够有多种办法来解决： 
一、document.domain+iframe（只能解决状况1）： 
a、在发起方页面和接收方页面设置document.domain，并将值设为父域的主域名(window.location.hostname) 
b、在发起方页面建立一个隐藏的iframe，iframe的源是接收方页面 
c、根据浏览器的不一样，经过iframe.contentDocument || iframe.contentWindow.document来得到接收方页面的内容 
d、经过得到的接收方页面的内容来与接收方进行交互 
这种方法有个缺点，就是当一个域被攻击时，另外一个域会有安全漏洞出现。 
59.如何使用storage 对js文件进行缓存
因为sessionStorage - 针对一个 session 的数据存储，因此咱们通常利用localStorage储存js文件，只有在第一次访问该页面的时候加载js文件，之后在访问的时候加载本地localStorage执行
60.如何确保ajax或链接不走缓存路径
   在Ajax中使用Get请求数据不会有页面缓存的问题，而使用POST请求但是有时候页面会缓存咱们提交的信息，致使咱们发送的异步请求不能正确的返回咱们想要的数据
$.post(url,data ,ranNum:Math.random()} ,function(data){}）
    ranNum : 这个是防止缓存的核心，每次发起请求都会用Math.random()方法生成一个随机的数字，这样子就会刷新url缓存 
61.split() join()?
前者是切割成数组的形式，
后者是将数组转换成字符串
62.slice()  splice()?
slice() 方法可从已有的数组中返回选定的元素。
splice() 方法向/从数组中添加/删除项目，而后返回被删除的项目。
63.typeof？typeof [ ]返回数据类型是？
判断基本数据类型；var a=[];typeof a输出object；
原本判断一个对象类型用typeof是最好的，不过对于Array类型是不适用的，能够使用 instanceof操做符：
        var arrayStr=new Array("1","2","3","4","5");    
        alert(arrayStr instanceof Array); 
固然以上在一个简单的页面布局里面是没有问题的，若是是复杂页面状况，入获取的是frame内部的Array对象，能够用这个函数判断：
        function isArray(obj) {      
                 return Object.prototype.toString.call(obj) === '[object Array]';       
        }
64.disabled readyonly?
readonly只针对input(text / password)和textarea有效，
而disabled对于全部的表单元素都有效，当表单元素在使用了disabled后，当咱们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。
65.同步异步?
一、进程同步：就是在发出一个功能调用时，在没有获得结果以前，该调用就不返回。也就是必须一件一件事作,等前一件作完了才能作下一件事
二、异步的概念和同步相对。当一个异步过程调用发出后，调用者不能马上获得结果。实际处理这个调用的部件在完成后，经过状态、通知和回调来通知调用者。
66.promise
Promise的构造函数接收一个参数，是函数，而且传入两个参数：resolve，reject，分别表示异步操做执行成功后的回调函数和异步操做执行失败后的回调函数。
67.函数fn1 函数fn2 函数fn3，若是想在三个函数都执行完成后执行某一个事件应该如何实现?
一、设置事件监听。
二、回调函数：
function fn1(){
        console.log("执行fn1");
        fn2();
}
function fn2(){
        console.log("执行fn2");
        fn3();
}
function fn3(){
        console.log("执行fn3");
        mou();
}
function mou(){
        console.log("执行某个函数");
}
fn1();
68.JavaScript提供了哪几种“异步模式        ”？
        一、回调函数（callbacks）
        二、事件监听
        三、Promise对象
69.什么是移动端的300ms延迟？什么是点击穿透？解决方案?
移动端300ms延迟：假定这么一个场景。用户在 浏览器里边点击了一个连接。因为用户能够进行双击缩放或者双击滚动的操做，当用户一次点击屏幕以后，浏览器并不能马上判断用户是确实要打开这个连接，仍是想要进行双击操做。所以，浏览器 就等待 300 毫秒，以判断用户是否再次点击了屏幕。也就是说，当咱们点击页面的时候移动端浏览器并非当即做出反应，而是会等上一小会儿才会出现点击的效果。
点击穿透：假如页面上有两个元素A和B。B元素在A元素之上。咱们在B元素的touchstart事件上注册了一个回调函数，该回调函数的做用是隐藏B元素。咱们发现，当咱们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。这是由于在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏以后，隔了300ms，浏览器触发了click事件，可是此时B元素不见了，因此该事件被派发到了A元素身上。若是A元素是一个连接，那此时页面就会意外地跳转。
300ms延迟解决方案：
（1）禁用缩放，在html文档头部加meta标签以下：
         <meta name=”viewport” content=”user-scalable=no”/>
（2）更改默认的视口宽度 （响应式布局，消除了站点上可能存在的双击绽开的请求）
<meta name=”viewport” content=”width=device-width”/>
（3）Css touch-action
     touch-action:none;在该元素上的操做不会触发用户代理的任何行为，无需进行3000ms延迟判断。
（4）FastClick为解决移动端浏览器300毫秒延迟开发的一个轻量级的库
点击穿透解决方案：
（1）只用touch
（2）只用click
（3）tap后延迟350ms再隐藏mask
（4）pointer-events
70.变量做用域?
变量做用域：一个变量的做用域是程序源代码中定义这个变量的区域。全局变量拥有全局做用域，在js代码中任何地方都是有定义的。在函数内声明的变量只在函数体内有定义，它们是局部变量，做用域是局部性的。函数参数也是局部变量，它们只在函数体内有定义。
var a = "";
window.b=''”;
function(e) {
        var c= "";
        d="";
        e="";
}
function go() {
        console.info(this);//window
        return function() {
                console.info(this); // window
                return {
                 b:function(){
                        console.info(this); //b的父对象
                    }
             }
        }
}
go()().b();
71.call & apply 二者之间的区别
  call和apply都是改变this指向的方法，区别在于call能够写多个参数，而apply只能写两个参数，第二个参数是一个数组，用于存放要传的参数。
72.call和apply 有什么好处？
用call和apply:实现更好的继承和扩展，更安全。
73.谁是c的构造函数? 
function ab() {
        this.say = "";
}
ab.constructor = {}
ab.name = '';
var c = new ab();
构造函数默认指向函数自己,ab是一个类,它的构造函数是它自己，而后ab.constructor={};ab的构造函数就指向{}了，c是ab的实例化对象，c的构造函数就是{}。
经过使用new的时候  建立对象 发生了那些改变?
当使用new操做时，会立刻开辟一个块内存，建立一个空对象，并将this指向这个对象。接着，执行构造函数ab()，对这个空对象进行构造（构造函数里有什么属性和方法都一一给这个空白对象装配上去，这就是为什么它叫构造函数了）。
74.sass和less有什么区别?
1.编译环境不同
Sass的安装须要Ruby环境，是在服务端处理的，而Less是须要引入less.js来处理Less代码输出css到浏览器，也能够在开发环节使用Less，而后编译成css文件，直接放到项目中。
    2.变量符不一相，less是@，而scss是$,并且它们的做用域也不同，less是块级做用域
    3.输出设置，Less没有输出设置，sass提供4种输出选项，nested,compact,compressed和expanded
    nested：嵌套缩进的css代码(默认)
   expanded：展开的多行css代码
   compact：简洁格式的css代码
   compressed：压缩后的css代码
   4.sass支持条件语句，能够使用if{}else{},for{}循环等等，而less不行
   5.引用外部css文件，sass引用外部文件必须以_开头，文件名若是如下划线_形状，sass会认为该文件是一个引用文件，不会将其编译为css文件。less引用外部文件和css中的@import没什么差别。
   6.sass和less的工具库不一样。sass有工具库Compass, 简单说，sass和Compass的关系有点像Javascript和jQuery的关系,Compass是sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了sass的功能。less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用less语法编写。
        总结：无论是sass，仍是less，均可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，sass的功能比less强大,基本能够说是一种真正的编程语言了，less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译sass要安装Ruby,而Ruby官网在国内访问不了,我的在实际开发中更倾向于选择less。
75.bootstrap好处？
自适应和响应式布局，12栅格系统，统一的界面风格和css样式有利于团队开发。编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
76.开发时如何对项目进行管理?gulp?
答：本人开发时，利用gulp等前端工做流管理工具管理项目。
gulp是新一代的前端项目构建工具，你能够使用gulp及其插件对你的项目代码（less,sass）进行编译，还能够压缩你的js和css代码，甚至压缩你的图片，可以合并文件，压缩文件，语法检查，监听文件变化，测试，转换二进制，转换图片等一系列功能。gulp仅有少许的API，因此很是容易学习。实现良好的项目管理。
77.压缩合并目的？http请求的优化方式？
答：1）Web性能优化最佳实践中最重要的一条是减小HTTP请求。而减小HTTP请求的最主要的方式就是，合并并压缩JavaScript和CSS文件。
CSS Sprites（CSS精灵）：把全站的图标都放在一个图像文件中，而后用CSS的background-image和background-position属性定位来显示其中的一小部分。
   合并脚本和样式表;
   图片地图：利用image map标签订义一个客户端图像映射，（图像映射指带有可点击区域的一幅图像）具体看：http://club.topsage.com/thread-2527479-1-1.html
  ④图片js/css等静态资源放在静态服务器或CDN服时，尽可能采用不用的域名，这样能防止cookie不会互相污染，减小每次请求的往返数据。
⑤css替代图片
⑥缓存一些数据
⑦少用location.reload()：使用location.reload() 会刷新页面，刷新页面时页面全部资源（css，js，img等）会从新请求服务器。建议使用location.href="当前页url" 代替location.reload() ，使用location.href 浏览器会读取本地缓存资源。
78.ajax请求方式有几种（8种）？
1）$.get(url,[data],[callback])
2）$.getJSON(url,[data],[callback])
3）$.post(url,[data],[callback],[type])
4）$.ajax(opiton)
5）$.getScript( url, [callback] )
6）jquery对象.load( url, [data], [callback] )
7）serialize() 与 serializeArray()
79.如何copy一个dom元素？
原生Js方法：var div = document.getElementsByTagName('div')[0];
  var clone = div.cloneNode();
Jquery方法：$('div').clone();
在默认状况下，.clone()方法不会复制匹配的元素或其后代元素中绑定的事件。不过，能够为这个方法传递一个布尔值参数，将这个参数设置为true, 就能够连同事件一块儿复制，即.clone(true)。
80.数组的排序方法（sort）？排序？汉字排序？
1）数组的排序方法：reverse()和sort()。reverse()方法会对反转数组项的顺序。
Eg:var values = [0, 1, 5, 10, 15];
values.sort();//0,1,10,15,5
var values = [1, 2, 3, 4, 5];
values.reverse();//5,4,3,2,1
js中的排序（详情参考：http://www.tuicool.com/articles/IjInMbU）
利用sort排序
冒泡排序
快速排序
插入排序
希尔排序
选择排序
归并排序
localeCompare() 方法用于字符串编码的排序
   localeCompare 方法：返回一个值，指出在当前的区域设置中两个字符串是否相同。
81.简述一下你理解的面向对象？
面向对象是基于万物皆对象这个哲学观点. 把一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通讯组成的.
  面向对象具备封装性,继承性,多态性。
  封装:隐蔽了对象内部不须要暴露的细节,使得内部细节的变更跟外界脱离,只依靠接口进行通讯.封装性下降了编程的复杂性. 经过继承,使得新建一个类变得容易,一个类从派生类那里得到其非私有的方法和公用属性的繁琐工做交给了编译器. 而 继承和实现接口和运行时的类型绑定机制 所产生的多态,使得不一样的类所产生的对象可以对相同的消息做出不一样的反应,极大地提升了代码的通用性. 
 总之,面向对象的特性提升了大型程序的重用性和可维护性.
82.如何建立一个对象？
1. 工厂模式
2. 构造函数模式
3. 原型模式
4. 混合构造函数和原型模式
5. 动态原型模式
6. 寄生构造函数模式
7. 稳妥构造函数模式
程序的设计模式?工厂模式?发布订阅?
1）设计模式并非某种语言的某块代码，设计模式是一种思想，提供给在编码时候遇到的各类问题是能够采起的解决方案，更倾向于一种逻辑思惟，而不是万能代码块。
设计模式主要分三个类型:建立型、结构型和行为型。
建立型模式：单例模式，抽象工厂模式，建造者模式，工厂模式与原型模式。
结构型模式：适配器模式，桥接模式，装饰者模式，组合模式，外观模式，享元模式以及代理模式。
行为型模式：模板方法模式，命令模式，迭代器模式，观察者模式，中介者模式，备忘录模式，解释器模式，状态模式，策略模式，职责链模式和访问者模式。
2）与建立型模式相似，工厂模式建立对象（视为工厂里的产品）是无需指定建立对象的具体类。
工厂模式定义一个用于建立对象的接口，这个接口由子类决定实例化哪个类。该模式使一个类的实例化延迟到了子类。而子类能够重写接口方法以便建立的时候指定本身的对象类型。
3）观察者模式又叫作发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知全部观察着对象。它是由两类对象组成，主题和观察者，主题负责发布事件，同时观察者经过订阅这些事件来观察该主体，发布者和订阅者是彻底解耦的，彼此不知道对方的存在，二者仅仅共享一个自定义事件的名称。
（设计模式实在是过高深了，小伙伴门结合网上实例自行学习，我实在是无能为力啊）
83.commonjs?requirejs?AMD|CMD|UMD?
1.CommonJS就是为JS的表现来制定规范，NodeJS是这种规范的实现，webpack 也是以CommonJS的形式来书写。由于js没有模块的功能，因此CommonJS应运而生。但它不能在浏览器中运行。
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
2.RequireJS 是一个JavaScript模块加载器。
        RequireJS有两个主要方法(method): define()和require()。这两个方法基本上拥有相同的定义(declaration) 而且它们都知道如何加载的依赖关系，而后执行一个回调函数(callback function)。与require()不一样的是， define()用来存储代码做为一个已命名的模块。 所以define()的回调函数须要有一个返回值做为这个模块定义。这些相似被定义的模块叫做AMD (Asynchronous Module Definition，异步模块定义)。
3.AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出
AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各类类型的模块。
适用AMD规范适用define方法定义模块。

4.CMD是SeaJS 在推广过程当中对模块定义的规范化产出
AMD与CDM的区别：
（1）对于于依赖的模块，AMD 是提早执行(好像如今也能够延迟执行了)，CMD 是延迟执行。
（2）AMD 推崇依赖前置，CMD 推崇依赖就近。
（3）AMD 推崇复用接口，CMD 推崇单用接口。
（4）书写规范的差别。
5.umd是AMD和CommonJS的糅合。
AMD 浏览器第一的原则发展 异步加载模块。
CommonJS 模块以服务器第一原则发展，选择同步加载，它的模块无需包装(unwrapped modules)。
这迫令人们又想出另外一个更通用的模式UMD （Universal Module Definition）。但愿解决跨平台的解决方案。
UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。
8四、js的几种继承方式？
        1.使用对象冒充实现继承   
2.采用call、Apply方法改变函数上下文实现继承  
3.原型链方式继承
8五、JavaScript原型，原型链 ? 有什么特色？
     在JavaScript中,一共有两种类型的值,原始值和对象值.每一个对象都有一个内部属性[[prototype]],咱们一般称之为原型.原型的值能够是一个对象,也能够是null.若是它的值是一个对象,则这个对象也必定有本身的原型.这样就造成了一条线性的链,咱们称之为原型链.
      访问一个对象的原型能够使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__属性.
      原型链的做用是用来实现继承,好比咱们新建一个数组,数组的方法就是从数组的原型上继承而来的。
8六、eval是作什么的？
它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，很是耗性能（2次，一次解析成js语句，一次执行）。
8七、null，undefined 的区别？
undefined表示变量声明但未初始化的值，null表示准备用来保存对象，尚未真正保存对象的值。从逻辑角度看，null表示一个空对象指针。
8八、JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
8九、js延迟加载的方式有哪些？
defer和async、动态建立DOM方式（用得最多）、按需异步载入js
90、ajax 是什么?        
   异步javascript和XML，是指一种建立交互式网页应用的网页开发技术。经过后台与服务器进行少许数据交换，AJAX能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。
    9一、同步和异步的区别?
    javascript同步表示sync，指：代码依次执行
    javascript异步表示async，指：代码执行不按顺序，‘跳过’执行，待其余某些代码执行完后再来执行，成为异步。
  9二、 如何解决跨域问题?
Jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面

9三、异步加载的方式有哪些？
  (1) defer，只支持IE
  (2) async：true
  (3) 建立script，插入到DOM中，加载完毕后callBack
9四、jQuery与jQuery UI 有啥区别？
jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些经常使用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
9五、你有哪些性能优化的方法？
  （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） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。
  （8） 避免在页面的主体布局中使用table，table要等其中的内容彻底下载以后才会显示出来，显示比div+css布局慢。
9六、一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？（流程说的越详细越好）
查找浏览器缓存 
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
进行HTTP协议会话
客户端发送报头(请求报头)
服务器回馈报头(响应报头)
html文档开始下载
文档树创建，根据标记请求所需指定MIME类型的文件
文件显示
    
浏览器这边作的工做大体分为如下几步：
    加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
    解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（好比HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
    9七、ajax的缺点
一、ajax不支持浏览器back按钮。
二、安全问题 AJAX暴露了与服务器交互的细节。 
三、对搜索引擎的支持比较弱。
四、破坏了程序的异常机制。
五、不容易调试


argularJS
1.jquery和 angularjs 的区别？
jQuery在DOM上作得很好，能够根据用户交互，添加修改DOM元素。AngularJS更关注数据展现自己，更新时会尽量减小对DOM的破坏和重构。AngularJS中不少特色的设计都是出于提升开发者效率的目的。 当一个项目的重点是数据展现和执行，而不是分析，此时可能AngularJS就会更胜一筹。
2.ng的三种服务?哪一个服务能够在config中进行调用？
Provider factory service
Provider
3.angular一些优化手段
DOM树要小，DOM的访问要尽量的少。尽可能避免使用过滤器。当使用ng-repeat时要尽可能避免对全局列表的刷新。尽可能减小绑定。把变量做用范围限制地越紧密越好，这样垃圾回收器就能够更快地回收空间
4.ng中如何进行项目结构的
将相同的数据功能单独的建立一个文件进行管理维护，方便调用。进行分层开发，分为controller控制层，filter过滤层，service服务层
5.ng指令中 resctrict  是什么意思 ？EACM
生效指令
E:元素        A：属性        C：class        M：注释
6.ng指令中 scope ? true|false|{} ?分别表明什么意思?
不设置scope状况下，link中scope与容器controller公用一块scope
Scope设置为true的状况下，继承容器的做用域，建立本身的做用域
Scope设置为false，link中scope与容器controller公用一块scope
Scope设置为{}，继承controller容器scope做用域，可是会生成一块独立的做用域空间，不会自动调用父scope的变量或方法
7.ng指令中 transclude 意义?
是否对指令内部包含的内容进行保存 配合ng-transclude使用
8.MVC?MVVM?
MVC :M是指数据模型，V是指用户界面，C则是控制器。使用MVC的目的是将M和V的实现代码分离，从而使同一个程序能够使用不一样的表现形式。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。
MVVM(Model View ViewModel) :是一种基于MVC和MVP的架构模式，它试图将用户界面（UI）从业务逻辑和行为中更加清晰地分离出来。为了这个目的，不少例子使用声明变量绑定来把View层的工做从其余层分离出来。
9.angular版本?怎么去兼容 ie8？ng中数据通常放在哪里?
目前咱们使用的是angularJS 1.5版本，如何去兼容IE8？
ng中数据通常放在控制层。
10.ng的三种服务?区别?
Provider:执行$get方法，能够在ng的config配置方法中定义变量和参数；
Factory：对$get进行封装，执行一个函数，返回一个对象；
Service：返回一个构造函数，在注入时进行实例化；
11.ng编程时，大家的项目结构是什么样的 ?分别有什么特色 ?
分为控制层、过滤层、服务层
控制层：主要处理数据传输，页面渲染，数据绑定
过滤层：对数据进行过滤
服务层：ajax
12.ng-if 跟 ng-show/hide 的区别有哪些？
(1) ng-if 在后面表达式为 true 的时候才建立这个 dom 节点，ng-show 是初始时就建立了，用 display:block 和 display:none 来控制显示和不显示。
(2) ng-if 会（隐式地）产生新做用域，ng-switch 、 ng-include 等会动态建立一块界面的也是如此。
这样会致使，在 ng-if 中用基本变量绑定 ng-model，并在外层 div 中把此 model 绑定给另外一个显示区域，内层改变时，外层不会同步改变，由于此时已是两个变量了。
<p>{{name}}</p> 
<div ng-if="true"> 
        <input type="text" ng-model="name"> 
</div>
ng-show 不存在此问题，由于它不自带一级做用域。
避免这类问题出现的办法是，始终将页面中的元素绑定到对象的属性（data.x）而不是直接绑定到基本变量（x）上。
13.ng-repeat迭代数组的时候，若是数组中有相同值，会有什么问题，如何解决？
会提示 Duplicates in a repeater are not allowed.
加 track by $index 可解决。固然，也能够 trace by 任何一个普通的值，只要能惟一性标识数组中的每一项便可（创建 dom 和数据之间的关联）。
14.ng-click 中写的表达式，能使用 JS 原生对象上的方法吗？
不止是 ng-click 中的表达式，只要是在页面中，都不能直接调用原生的 JS 方法，由于这些并不存在于与页面对应的 Controller 的 $scope 中。
15.factory、service 和 provider 是什么关系？
共同点：都属于单例模式
Factory:把 service 的方法和数据放在一个对象里，并返回这个对象
Service:经过构造函数方式建立 service，返回一个实例化对象
Provider:建立一个可经过 config 配置的 service，$get 中返回的，就是用 factory 建立 service 的内容
从底层实现上来看，service 调用了 factory，返回其实例；factory 调用了 provider，返回其 $get 中定义的内容。factory 和 service 功能相似，只不过 factory 是普通 function，能够返回任何东西（return 的均可以被访问，因此那些私有变量怎么写，你懂的）；service 是构造器，能够不返回（绑定到 this 的均可以被访问）；provider 是增强版 factory，返回一个可配置的 factory。
16.angular 的数据绑定采用什么机制？详述原理
脏检查机制。
双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这须要一个监控。
原理就是，Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到能够被 angular context 处理的事件时，$digest 循环就会触发，遍历全部的 $watch，最后更新 dom。
17.如何在平级界面模块间进行通讯
有两种方法，一种是共用服务，一种是基于事件。
共用服务:
        在 Angular 中，经过 factory 能够生成一个单例对象，在须要通讯的模块 a 和 b 中注入这个对象便可。
基于事件:
这个又分两种方式
        第一种是借助父 controller。在子 controller 中向父 controller 触发（$emit）一个事件，而后在父 controller 中监听（$on）事件，再广播（$broadcast）给子 controller ，这样经过事件携带的参数，实现了数据通过父 controller，在同级 controller 之间传播。
        第二种是借助 $rootScope。每一个 Angular 应用默认有一个根做用域 $rootScope， 根做用域位于最顶层，从它往下挂着各级做用域。因此，若是子控制器直接使用 $rootScope 广播和接收事件，那么就可实现同级之间的通讯。
18.一个 angular 应用应当如何良好地分层？
(1) 目录结构的划分
对于小型项目，能够按照文件类型组织
可是对于规模较大的项目，最好按业务模块划分
(2)逻辑代码的拆分
        做为一个 MVVM 框架，Angular 应用自己就应该按照 模型，视图模型（控制器），视图来划分。
        这里逻辑代码的拆分，主要是指尽可能让 controller 这一层很薄。提取共用的逻辑到 service 中 （好比后台数据的请求，数据的共享和缓存，基于事件的模块间通讯等），提取共用的界面操做到 directive 中（好比将日期选择、分页等封装成组件等），提取共用的格式化操做到 filter 中等等。
        在复杂的应用中，也能够为实体创建对应的构造函数，好比硬盘（Disk）模块，可能有列表、新建、详情这样几个视图，并分别对应的有 controller，那么能够建一个 Disk 构造函数，里面完成数据的增删改查和验证操做，有跟 Disk 相关的 controller，就注入 Disk 构造器并生成一个实例，这个实例就具有了增删改查和验证方法。这样既井井有条，又实现了复用（让 controller 层更薄了）。
19.angular 应用经常使用哪些路由库，各自的区别是什么？
Angular1.x 中经常使用 ngRoute 和 ui.router，还有一种为 Angular2 设计的 new router（面向组件）。
不管是 ngRoute 仍是 ui.router，做为框架额外的附加功能，都必须以 模块依赖 的形式被引入。
区别:
ngRoute 模块是 Angular 自带的路由模块，而 ui.router 模块是基于 ngRoute模块开发的第三方模块。
ui.router 是基于 state （状态）的， ngRoute 是基于 url 的，ui.router模块具备更强大的功能，主要体如今视图的嵌套方面。
使用 ui.router 可以定义有明确父子关系的路由，并经过 ui-view 指令将子路由模版插入到父路由模板的 <div ui-view></div> 中去，从而实现视图嵌套。而在 ngRoute 中不能这样定义，若是同时在父子视图中 使用了 <div ng-view></div> 会陷入死循环。
20.若是经过angular的directive规划一套全组件化体系，可能遇到哪些挑战？
组件如何与外界进行数据的交互，以及如何经过简单的配置就能使用
21.分属不一样团队进行开发的 angular 应用，若是要作整合，可能会遇到哪些问题，如何解决？
可能会遇到不一样模块之间的冲突。
好比一个团队全部的开发在 moduleA 下进行，另外一团队开发的代码在 moduleB 下，会致使两个 module 下面的 serviceA 发生了覆盖。
在 Angular1.x 中并无很好的解决办法，因此最好在前期进行统一规划，作好约定，严格按照约定开发，每一个开发人员只写特定区块代码。
22.angular 的缺点有哪些？
（1）强约束
        致使学习成本较高，对前端不友好。但遵照 AngularJS 的约定时，生产力会很高，对 Java 程序员友好。
（2）不利于 SEO
        由于全部内容都是动态获取并渲染生成的，搜索引擎无法爬取。
一种解决办法是，对于正经常使用户的访问，服务器响应 AngularJS 应用的内容；对于搜索引擎的访问，则响应专门针对 SEO 的HTML页面。
（3）性能问题
做为 MVVM 框架，由于实现了数据的双向绑定，对于大数组、复杂对象会存在性能问题。
23.优化 Angular 应用的性能的办法？
（1）减小监控项，即减小watcher数量（好比对不会变化的数据采用单向绑定）
（2）主动设置索引（指定 track by，简单类型默认用自身当索引，对象默认使用 $$hashKey，好比改成 track by item.id）
（3）下降渲染数据量（好比分页，或者每次取一小部分数据，根据须要再取）
（4）数据扁平化（好比对于树状结构，使用扁平化结构，构建一个 map 和树状数据，对树操做时，因为跟扁平数据同一引用，树状数据变动会同步到原始的扁平数据）
24.如何看待 angular 1.2 中引入的 controller as 语法？
最根本的好处
        在 angular 1.2 之前，在 view 上的任何绑定都是直接绑定在 $scope 上的，
        使用 controllerAs，不须要再注入 $scope，controller 变成了一个很简单的 javascript 对象（POJO），一个更纯粹的 ViewModel。
25.详述 angular 的 “依赖注入”
依赖注入是一种软件设计模式，目的是处理代码之间的依赖关系，减小组件间的耦合。
原理：
AngularJS 是经过构造函数的参数名字来推断依赖服务名称的，经过 toString() 来找到这个定义的 function 对应的字符串，而后用正则解析出其中的参数（依赖项），再去依赖映射中取到对应的依赖，实例化以后传入。
一般会使用下面两种方式注入依赖（对依赖添加的顺序有要求）。
（1）数组注释法        
（2）显式 $inject
26.如何看待angular2？
（1）相比 Angular1.x，Angular2的改动很大，几乎算是一个全新的框架。
（2）基于 TypeScript（能够使用 TypeScript 进行开发），在大型项目团队协做时，强语言类型更有利。
（3）组件化，提高开发和维护的效率。
（4）还有 module 支持动态加载，new router，promise的原生支持等等。
（5）迎合将来标准，吸纳其余框架的优势，值得期待，不过同时要学习的东西也更多了（ES next、TS、Rx等）。
27.表达式 {{yourModel}}是如何工做的？
它依赖于 $interpolation服务，在初始化页面html后，它会找到这些表达式，而且进行标记，因而每碰见一个{{}}，则会设置一个$watch。而$interpolation会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式$parse到那个做用域上。
28.Angular中的digest周期是什么？
每一个digest周期中，angular总会对比scope上model的值，通常digest周期都是自动触发的，咱们也能够使用$apply进行手动触发。
29.如何取消 $timeout, 以及中止一个$watch()?
（1）中止 $timeout咱们能够用cancel：
var customTimeout = $timeout(function () { 
// your code
}, 1000); 
$timeout.cancel(customTimeout);
停掉一个$watch：
// .$watch() 会返回一个中止注册的函数
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty', function (newVal) { 
if (newVal) {
  // we invoke that deregistration function, to disable the watch
  deregisterWatchFn();
  ...
}
});
30.列出至少三种实现不一样模块之间通讯方式？
一、Service
    二、events,指定绑定的事件
三、使用 $rootScope
四、controller之间直接使用$parent, $$childHead等
五、directive 指定属性进行数据绑定
31.解释下什么是$rootScrope以及和$scope的区别？
通俗的说$rootScrope 是页面全部$scope的父亲。
step1:Angular解析ng-app而后在内存中建立$rootScope。
step2:angular回继续解析，找到{{}}表达式，并解析成变量。
step3:接着会解析带有ng-controller的div而后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。


其它
1.restful规范
认为一切接口都是资源，每一个资源和每一个资源均可以经过必定的关系进行链接或管理。
rest 对接口进行简单的规范定义，即post，delete,put/patch,get
二、react？
提供虚拟dom节点
三、webpack，gulp？        
Gulp，文件的压缩打包合并，是一个纯粹的工具，并不能将你的css等非js资源模块化，可是webpack能够作到这些。
webpack模块化加载器兼打包工具，能够把各类资源都做为模块来使用和处理，具备前端构建的功能，只不过经过插件实现了构建工具的一些功能。
webpack的优势以下：
1. webpack 遵循commonJS 的形式，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不只仅是 JS ，全部的静态资源，例如css，图片等都能模块化，即以require的方式引入。
3. 开发便捷，能替代部分 grunt/gulp 的工做，好比打包、压缩混淆、图片转base64等。
四、函数的两个内置对象？
This,arguments
五、布局方式？
rem,百分比，Flex,meta标签实现响应式
六、js中建立对象的几种方式？
构造函数方式；工厂方式；混合模式；代理模式；动态原型方式（推荐使用这种模式）
七、确保浏览器不走缓存路线？
一、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")
二、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")
三、在URL后面加上一个随机数： "fresh=" + Math.random();
四、在URL后面加上时间搓："nowtime=" + new Date().getTime();
五、若是是使用jQuery，直接这样就能够了$.ajaxSetup({cache:false})，这样页面的全部ajax都会执行这条语句就是不须要保存缓存记录。
八、移动端开发，会发现input在iscroll中不能输入
使用了iscroll以后，你会发现点击输入框时不灵敏，常常没法聚焦；页面文字也没法选择和复制。这是因为iscroll要监听鼠标事件和触摸事件来进行滚动，因此禁止了浏览器的默认行为，致使上述问题。因此咱们须要稍做修改： 
onBeforeScrollStart: function (e) { 
     var target = e.target; 
     while (target.nodeType != 1) 
          target = target.parentNode; 
     if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’) 
        e.preventDefault(); 
}
九、angularjs中的自定义指令的scope有几个值，分别表明什么？
        1.scope设置为true的状况下，继承容器的做用域，建立本身的做用域
        2.设置scope为false时，link中scope与容器controller公用一块scope
        3.若是scope设置为{}对象, 继承controller容器scope做用域,可是会生成一块独立的做用域空间，不会自动调用父scope的变量或方法
当scope设置为{}时：能够声明给scope传递变量和值
        3种方式传递 = & @
@经过在标签上定义属性,在scope使用@属性名传递变量
&经过在标签上定义属性，在scope中使用&传递进来一个'函数',且只能是函数
=经过在标签上定义属性，在父scope上寻找到匹配的变量和函数为当前的函数属性进行复制。
十、Node.js的适用场景？
高并发、聊天、实时消息推送