前端面试题总结-JS篇（1）

1. calc的应用

calc() 函数用于动态计算长度值 。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；

2. 事件委托的优缺点

优点：

1. 减少事件注册，节省内存。比如，
   • 在table上代理所有td的click事件
   • 在ul上代理所有li的click事件。
2. 简化了dom节点更新时，相应事件的更新。比如
   • 不用在新添加的li上绑定click事件。
   • 当删除某个li时，不用移解绑上面的click事件 。

缺点：

1. 事件委托基于冒泡，对于不冒泡的事件不支持。

2. 层级过多，冒泡过程中，可能会被某层阻止掉 。

3. 理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。

4. 把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。

   ​

3.哪些方式实现事件绑定

js:

1. 在DOM元素中直接绑定，例如：

   <input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />
   

2. 在JavaScript代码中绑定，例如：

   elementObject.onClick = function(){//事件处理代码}
   

3. 绑定事件监听函数

   addEventListener()函数语法：elementObject.addEventListener(eventName,handle,useCapture);
   attachEvent()函数语法：
   elementObject.attachEvent(eventName,handle);
   

jQuery：

1. bind绑定

   bind(type,[data],function(eventObject))
   

2. live绑定

   live(type, [data], fn)
   

3. delegate绑定

   delegate([selector],type,function(eventObject));
   

4. on绑定

   on(type,[selector],[data],fn)
   

4.jQuery是怎么实现事件委托的

通过on()方法

$(function(){
	$("#lists").on("click","li",function(event){
		var target = $(event.target);
		target.css("background-color","red");
	})
})

通过delegate（）方法

$(function(){
	$("#lists").delegate("li","click",function(event){
		var target = $(event.target);
		target.css("background-color","red");
	})
})

​ on()方法和delegate（）方法对于事件委托的写法很像。并且执行事件委托的时候只有子元素（本文中的li）会触发事件，而代为执行的父元素（本文中为ul）不会触发事件，所以我们不需要盘判断触发事件的元素节点名，这一点明显优于原生的JavaScript。

通过bind（）方法

$(function(){
	$("#lists").bind("click","li",function(event){
	var target = $(event.target);
	if(target.prop("nodeName")=="LI"){
		target.css("background-color","red");}
	})
})

​ bind()方法同原生的JavaScript实现方法一样，当父元素代子元素执行事件时，父元素也会触发事件，所以我们需要判断一下触发事件的元素名。此外，用bind()方法给元素绑定事件的时候要注意，它只能给已经存在DOM元素添加事件，不能给未来存在DOM

​ 元素添加添加事件。如果要频繁地添加DOM元素，并且给新添加的DOM元素绑定事件的话，用live(),delegate(),on()等方法。鉴于jQuery从1.7之后就不推荐live（）和delegate（）方法了，所以大家还是使用on（）方法吧。

5.怎么跨域，跨域的原理

通过jsonp跨域

​ 原理：在js中，直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的 ，通过script标签引入一个js文件，这个js文件载入成功后会执行url参数中指定的函数，并且会把需要的json数据作为参数传入 ，从而实现跨域访问。

通过修改document.domain来跨子域

​ 原理：用一个隐藏的iframe来做一个代理。原理就是让这个iframe载入一个想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取需要的数据的，然后就是通过修改document.domain的方法，让js完全控制这个iframe，这样就可以让iframe去发送ajax请求，然后收到的数据也可以获得了。

使用window.name来进行跨域

​ 原理：window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。 注意，window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。

使用HTML5中新引进的window.postMessage方法来跨域

​ 原理：window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法 。

6.非技术工作流程上的问题，提高效率的策略

1. 前端自动化----可以使用NPM管理我们的项目文件；使用WebPACK包装和压缩我们的代码；使用Node.js建立本地服务器；使用的业力和茉莉来测试我们的前端代码。
2. 前端模块化----前端模块化的实现，有利于维护项目代码，实现按需加载，有利于提高项目的长期开发效率。
3. 前端组件化----将代码分为不同的组件，以实现公共和方便的维护，这也提高了我们的开发效率 。
4. 前后端分离----前端开发联调之前可以采用mock数据来提高开发效率。