3月22日
1. DOM操作——怎样添加、移除、移动、复制、创建和查找节点？
-
创建新节点
createDocumentFragment() //创建一个DOM片段 createElement_x() //创建一个具体的元素 createTextNode() //创建一个文本节点 -
添加、移除、替换、插入
appendChild() removeChild() replaceChild() insertBefore() -
查找
getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性
2. 数组和对象有哪些原生方法，列举一下？
-
数组
Array.concat( ) //连接数组 Array.join( ) //将数组元素连接起来以构建一个字符串 Array.length //数组的大小 Array.pop( ) //删除并返回数组的最后一个元素 Array.push( ) //给数组添加元素 Array.reverse( ) //颠倒数组中元素的顺序 Array.shift( ) //将元素移出数组 Array.slice( ) //返回数组的一部分 Array.sort( ) //对数组元素进行排序 Array.splice( ) //插入、删除或替换数组的元素 Array.toLocaleString( ) //把数组转换成局部字符串 Array.toString( ) //将数组转换成一个字符串 Array.unshift( ) //在数组头部插入一个元素 -
对象
Object.hasOwnProperty( ) //检查属性是否被继承 Object.isPrototypeOf( ) //一个对象是否是另一个对象的原型 Object.propertyIsEnumerable( ) //是否可以通过for/in循环看到属性 Object.toLocaleString( ) //返回对象的本地字符串表示 Object.toString( ) //定义一个对象的字符串表示 Object.valueOf( ) //指定对象的原始值
3. 如何编写高性能的Javascript？
- 使用 DocumentFragment 优化多次 append
- 通过模板元素 clone ，替代 createElement
- 使用一次 innerHTML 赋值代替构建 dom 元素
- 使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素
- 使用 Array 做为 StringBuffer ，代替字符串拼接的操作
- 将循环控制量保存到局部变量
- 顺序无关的遍历时，用 while 替代 for
- 将条件分支，按可能性顺序从高到低排列
- 在同一条件子的多（ >2 ）条件分支时，使用 switch 优于 if
- 使用三目运算符替代条件分支
- 需要不断执行的时候，优先考虑使用 setInterval
4. 那些操作会造成内存泄漏？
闭包，循环
5. javascript对象的几种创建方式？
- 工厂模式
- 构造函数模式
- 原型模式
- 混合构造函数和原型模式
- 动态原型模式
- 寄生构造函数模式
- 稳妥构造函数模式
6. javascript继承的 6 种方法？
- 原型链继承
- 借用构造函数继承
- 组合继承(原型+借用构造)
- 原型式继承
- 寄生式继承
- 寄生组合式继承
7. eval是做什么的？
- 它的功能是把对应的字符串解析成JS代码并运行
- 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）
8. JavaScript 原型，原型链 ? 有什么特点？
- 原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链
- 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链
9. 事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为
事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件
-
ev.stopPropagation();
注意旧ie的方法：ev.cancelBubble = true;
10. 简述一下Sass、Less，且说明区别？�
他们是动态的样式语言，是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
变量符不一样，less是@，而Sass是$;
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持;
Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器
11. 简述一下JS中的闭包？
闭包用的多的两个作用：读取函数内部的变量值；让这些变量值始终保存着(在内存中)。
同时需要注意的是：闭包慎用，不滥用，不乱用，由于函数内部的变量都被保存在内存中，会导致内存消耗大。
12. 说说你对this的理解？
- 构造函数中的this指向实例对象
- 原型方法中的this指向实例对象，与构造函数中的this指向相同
- 在非严格模式下，普通函数中的this指向window，在严格模式下，普通函数中的this指向undefined
- 对象方法中的this就是调用方法的对象
- 事件方法中的this指的是绑定事件的对象
- 定时函数中的this指的是window
- call或apply所调用的函数中的this就是call或apply中的第一个参数（该参数必须是引用类型）
13. 分别阐述split(),slice(),splice(),join()？
- join()用于把数组中的所有元素拼接起来放入一个字符串。所带的参数为分割字符串的分隔符，默认是以逗号分开。归属于Array
- split()即把字符串分离开，以数组方式存储。归属于Stringstring
- slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()
- splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。返回的是含有被删除的元素的数组。
14. 如何阻止事件冒泡和默认事件？
-
阻止浏览器的默认行为
window.event?window.event.returnValue=false:e.preventDefault();
-
停止事件冒泡
window.event?window.event.cancelBubble=true:e.stopPropagation();
原生JavaScript中，return false;只阻止默认行为，不阻止冒泡，jQuery中的return false;既阻止默认行为，又阻止冒泡
15. 你用过require.js吗？它有什么特性？
- 实现js文件的异步加载，避免网页失去响应；
- 管理模块之间的依赖性，便于代码的编写和维护。
3月23日
1. 谈一下JS中的递归函数，并且用递归简单实现阶乘？
递归即是程序在执行过程中不断调用自身的编程技巧，当然也必须要有一个明确的结束条件，不然就会陷入死循环。
aaa
2. 请用正则表达式写一个简单的邮箱验证。
/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
3. 简述一下你对web性能优化的方案？
- 尽量减少 HTTP 请求
- 使用浏览器缓存
- 使用压缩组件
- 图片、JS的预载入
- 将脚本放在底部
- 将样式文件放在页面顶部
- 使用外部的JS和CSS
- 精简代码
4. 在JS中有哪些会被隐式转换为false?
Undefined、null、关键字false、NaN、零、空字符串
5. 定时器setInterval有一个有名函数fn1，setInterval（fn1,500）与setInterval（fn1(),500）有什么区别？
第一个是重复执行每500毫秒执行一次，后面一个只执行一次。
6. 外部JS文件出现中文字符，会出现什么问题，怎么解决？
会出现乱码，加charset=”GB2312”;
7. 写一个通用的事件侦听器函数
markyun.Event = {
// 页面加载完成后
readyEvent: function (fn) {
if (fn == null) {
fn = document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function () {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数： 操作的元素,事件名称 ,事件处理程序
addEvent: function (element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function () {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent: function (element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
stopPropagation: function (ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget: function (event) {
return event.target || event.srcElement;
},
// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
getEvent: function (e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
8. JavaScript原型，原型链 ? 有什么特点？
原型对象也是普通的对象，是对象一个自带隐式的
__proto__属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
-
JavaScript的数据对象有那些属性值？
- writable：这个属性的值是否可以改。
- configurable：这个属性的配置是否可以删除，修改。
- enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。
- value：属性值。
-
当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性。
function clone(proto) { function Dummy() { } Dummy.prototype = proto; Dummy.prototype.constructor = Dummy; return new Dummy(); //等价于Object.create(Person); } function object(old) { function F() {}; F.prototype = old; return new F(); } var newObj = object(oldObject);
9. 什么是闭包（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
10. new操作符具体干了什么呢?
- 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
- 属性和方法被加入到 this 引用的对象中。
- 新创建的对象由 this 所引用，并且最后隐式的返回 this 。
11. JSON 的了解?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
{'age':'12', 'name':'back'}
12. js延迟加载的方式有哪些?
defer和async、动态创建DOM方式（用得最多）、按需异步载入js
13. 模块化怎么做？
//立即执行函数,不暴露私有成员
var module1 = (function () {
var _count = 0;
var m1 = function () {
//...
};
var m2 = function () {
//...
};
return {
m1: m1,
m2: m2
};
})();
14. 异步加载的方式
- defer，只支持IE
- async：
- 创建script，插入到DOM中，加载完毕后callBack
- documen.write和 innerHTML的区别
- document.write只能重绘整个页面
- innerHTML可以重绘页面的一部分
15. 下列代码的输出结果是什么？
(function(x){
delete x;
alert(x);
})(1+5);
函数参数无法delete删除，delete只能删除通过for in访问的属性。
当然，删除失败也不会报错，所以代码运行会弹出“1”。
3月24日
1. JS中的call()和apply()方法的区别？
function add(a,b){
alert(a+b);
}
function sub(a,b){
alert(a-b);
}
add.call(sub,3,1);
例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
2. Jquery与jQuery UI 有啥区别？
jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
-
jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等
3. jquery 中如何将数组转化为json字符串，然后再转化回来？
//jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}
//然后调用：
$("").stringifyArray(array)
4. 前端开发的优化问题（看雅虎14条性能优化原则）
- 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
- 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
- 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
- 当需要设置的样式很多时设置className而不是直接操作style。
- 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
- 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
- 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
- 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
5. http状态码有那些？分别代表是什么意思？
- 100-199 用于指定客户端应相应的某些动作。
- 200-299 用于表示请求成功。
- 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
- 400-499 用于指出客户端的错误。
- 400 语义有误，当前请求无法被服务器理解。
- 401 当前请求需要用户验证
- 403 服务器已经理解请求，但是拒绝执行它。
- 500-599 用于支持服务器错误。
- 503 – 服务不可用
6. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
- 要熟悉前后端的通信流程，最好把动态网站的背后细节也介绍一遍
7. JQuery的源码看过吗？能不能简单概况一下它的实现原理？
- 考察学习知识的态度，是否仅仅是停留在使用层面，要知其然知其所以然
8. jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
- this执行init构造函数自身，其实就是jQuery实例对象，返回this是为了实现jQuery的链式操作
9. jquery中如何将数组转化为json字符串，然后再转化回来？
$.parseJSON('{"name":"John"}');
10. jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
- 递归赋值
11. jquery.extend 与 jquery.fn.extend的区别？
Jquery.extend用来扩展jQuery对象本身；jquery.fn.extend用来扩展jQuery实例
12. 谈一下Jquery中的bind(),live(),delegate(),on()的区别？
aaa
13. JQuery一个对象可以同时绑定多个事件，这是如何实现的？
- 可以同时绑定多个事件，低层实现原理是使用addEventListner与attachEvent兼容处理做事件注册
14. jQuery和Zepto的区别？各自的使用场景？
jQuery主要用于pc端，当然有对应的jQuerymobile用于移动端，zepto比jQuery更加小巧，主要用于移动端
15. 针对 jQuery 的优化方法？
- 优先使用ID选择器
- 在class前使用tag(标签名)
- 给选择器一个上下文
- 慎用 .live()方法（应该说尽量不要使用）
- 使用data()方法存储临时变量
3月25日
1. Zepto的点透问题如何解决？
点透主要是由于两个div重合，例如：一个div调用show()，一个div调用hide()；这个时候当点击上面的div的时候就会影响到下面的那个div；
解决办法主要有2种：
-
github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick
将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，
根据分析，如果不引入其它类库，也不想自己按照上述fastclcik的思路再开发一套东西，需要1.一个优先于下面的“divClickUnder”捕获的事件；2.并且通过这个事件阻止掉默认行为（下面的“divClickUnder”对click事件的捕获，在ios的safari，click的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被event.preventDefault()阻止的行为）。
2. 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么?
知识面的宽度，流行框架要多多熟悉
3. Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
Underscore的熟悉程度�
4. 使用过angular吗？angular中的过滤器是干什么用的?
- 在表达式中转换数据
姓名为{{ lastName | uppercase }}
- currency，是什么过滤器——格式化数字为货币格式，单位是$符。
5. 移动端最小触控区域是多大？
移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
6. 对Node的优点和缺点提出自己的看法
-
（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
- （缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子（第三方库现在已经很丰富了，所以这个缺点可以说不存在了）。
7. 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
至少给出自己的思路（url-hash,可以使用已有的一些框架history.js等）
8. Node.js的适用场景？
- 实时应用：如在线聊天，实时通知推送等等（如socket.io）
- 分布式应用：通过高效的并行I/O使用已有的数据
- 工具类应用：海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序
- 游戏类应用：游戏领域对实时和并发有很高的要求（如网易的pomelo框架）
- 利用稳定接口提升Web渲染能力
- 前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯Javascript全栈式MEAN架构）
9. (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
Nodejs相关概念的理解程度
10. 解释一下 Backbone 的 MVC 实现方式？
流行的MVC架构模式
11. 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
熟悉前后端通信相关知识
12.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？�
- 使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超过91%。
- 轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。（理解这些框架的功能、性能、设计原理）
- 前端开发工具：Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
- 开发过的插件：城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，加载器，js引擎更好）
13. 对BFC规范的理解？
Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
14. 99%的网站都需要被重构是那本书上写的？
网站重构：应用web标准进行设计（第2版）
15. WEB应用从服务器主动推送Data到客户端有那些方式？
- html5 websoket
- WebSocket通过Flash
- XHR长时间连接
- XHR Multipart Streaming
- 不可见的Iframe