那些面试题
都是本身整理的，除了题目，其余都别当真。（答案不是100分的对/(ㄒoㄒ)/~~）php
jQuery和zepto的区别
zepto主要针对移动设备上的，只支持较新的浏览器，好处是代码量小，性能较好；zepto有一些基础的触摸事件，如tap、swipe；css
jQuery主要是兼容性好，能够跑在PC也能够移动设备上，好处是兼容性好，缺点是代码量大，性能不够好，jQuery的2.X版本也不支持IE678也是基于这个考虑的。html
大多数在jQuery 经常使用的API 和方法zepto都有，zepto种有些方法jQuery反而没有，大部分都能兼容。
具体的一些区别：html5
on事件委托的区别node
Zepto 的each 方法只能遍历 数组，不能遍历JSON对象。jquery
width()和height()的区别：Zepto由盒模型(box-sizing)决定，用.width()返回赋值的width，用.css('width')返回加border等的结果；jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。css3
offset()的区别：Zepto返回{top,left,width,height}；jQuery返回{width,height}。程序员
jQuery的$.fn.extend和$.extend的区别
jQuery即是一个封装得很是好的类，好比，$("#btn1") 会生成一个 jQuery类的实例，理解这一点很重要。
$.extend是用来扩展jQuery类的，能够理解为添加静态方法，是全局性的，直接用jQuery类调用便可。ajax
$.extend({minValue:function(a,b){return a<b?a:b;}})
$.minValue(5.6);
也能够把这类函数称做为工具函数，不直接操做DOM元素，而是操做Javascript的非元素对象，或者执行其余非对象的特定操做。
$.extend还能够用一个或多个其余对象来扩展一个对象，返回被扩展的对象json
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
//settings == { validate: true, limit: 5, name: "bar" }
$.fn是指jQuery的命名空间，它是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可使用这个“成员函数”。
$.fn.extend({
theAlert:function(){
alert("自定义的函数");
}
})
$("thediv").theAlert()
cookie、localStorage、sessionStorage的区别
LocalStorage（本地存储）和sessionStorage（会话存储） 是HTML5 Web Storage API 提供的，这两种方式都容许开发者使用js设置的键值对进行操做，在在从新加载不一样的页面的时候读出它们。这一点与cookie相似。
数据的生命期：
cookie通常由服务器生成，可设置失效时间。若是在浏览器端生成Cookie，默认是关闭浏览器后失效；localStorage除非被清除，不然永久保存；sessionStroage仅在当前会话下有效，关闭页面或浏览器后被清除;存放数据大小:
cookie:4K左右;localStorage和sessionStorage通常为5MB；与服务器端通讯：
cookie每次都会携带在HTTP头中，若是使用cookie保存过多数据会带来性能问题；localStorage和sessionStorage仅在客户端（即浏览器）中保存，不参与和服务器的通讯易用性：
cookie须要程序员本身封装，源生的Cookie接口不友好；localStorage和sessionStorage源生接口能够接受，亦可再次封装来对Object和Array有更好的支持
JS跨域（ajax跨域、iframe跨域）解决方法
只要协议、域名、端口有任何一个不一样，都被看成是不一样的域。
要解决跨域的问题，咱们可使用如下几种方法：
经过jsonp跨域：
在js中，咱们直接用XMLHttpRequest请求不一样域上的数据时，是不能够的。可是，在页面上引入不一样域上的js脚本文件倒是能够的，jsonp正是利用这个特性来实现的。jsonp的原理就是，经过script标签引入一个js文件，这个js文件载入成功后会执行咱们在url参数中指定的函数，而且会把咱们须要的json数据做为参数传入。因此jsonp是须要服务器端的页面进行相应的配合的。若是你的页面使用jquery，那么经过它封装的方法$.getJSON(url,data,success(data,status,xhr))
function dosometing(jsondata){
//处理得到的数据
}
<script src=" http://example.com/data.php?callback=dosometing"></script>
咱们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，可是你用其余的也同样。固然若是获取数据的jsonp地址页面不是你本身能控制的，就得按照提供数据的那一方的规定格式来操做了。
由于是当作一个js文件来引入的，因此 http://example.com/data.php 返回的必须是一个能执行的js文件，因此这个页面的php代码多是这样的:
<?php
$callback = $_GET['callback'];//获得回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>
最终那个页面输出的是：dosomething(['a','b','c'])
经过修改document.domain来跨子域：
要注意的是，document.domain的设置是有限制的，咱们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。使用window.name来进行跨域：
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的全部的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的全部页面中的，并不会因新页面的载入而进行重置。注意，window.name的值只能是字符串的形式，这个字符串的大小最大能容许2M左右甚至更大的一个容量，具体取决于不一样的浏览器，但通常是够用了。
<!--www.cnblogs.com/data.html页面的代码-->
window.name = "消息";
<!-- www.example.com/a.html页面的代码-->
function getData(){//iframe载入data.html页面后台执行的函数
var iframe = document.getElementById("iframe");
iframe.onload = function(){//这个时候a.html和data.html已是处于同一个域了，能够互相访问
var data = iframe.contentWindow.name;//获取iframe的window.name，也就是data.html页面给她设置的数据
alert(data);
}
iframe.src = "b.html";//这里的b.html只要和a.html同一个域就好了，目的是让a能访问iframe里的东西，设置成about:blank也能够
}
<iframe id="iframe" src="www.cnblogs.com/data.html" style="display:none" onload = "getData()">
使用HTML5中新引进的window.postMessage方法来跨域传送数据
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可使用它来向其它的window对象发送消息，不管这个window对象是属于同源或不一样源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
<!-- http://test.com/a.html 的代码 -->
function frameLoad(){
var iframe = document.getElementById("iframe");
var win = iframe.contentWindow;//获取window对象
win.postMessage("消息","*");//向不一样域的页面发送消息
}
<iframe id = "ifrmae" src = "www.test.com/b.html" onload = "frameLoad()"></iframe>
<!-- http://www.test.com/b.html 的代码 -->
window.onmessage = function(e){
e = e || event;//获取时间对象
alert(e.data);//经过data属性获得传送的消息
}
HTTP协议的主要特色
超文本传输协议(HTTP)是一种通讯协议，它容许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。目前咱们使用的是HTTP/1.1 版本。
http协议是无状态的，同一个客户端的此次请求和上次请求是没有对应关系，对http服务器来讲，它并不知道这两个请求来自同一个客户端。 为了解决这个问题， Web程序引入了Cookie机制来维护状态.
HTTP协议的主要特色可归纳以下：
支持客户/服务器模式。
简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法经常使用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不一样。因为HTTP协议简单，使得HTTP服务器的程序规模小，于是通讯速度很快。
灵活：HTTP容许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
无链接：无链接的含义是限制每次链接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开链接。采用这种方式能够节省传输时间。
无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺乏状态意味着若是后续处理须要前面的信息，则它必须重传，这样可能致使每次链接传送的数据量增大。另外一方面，在服务器不须要先前信息时它的应答就较快。
http请求由三部分组成，分别是：请求行、消息报头、请求正文
HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文
HTTP响应的状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：
1xx：指示信息--表示请求已接收，继续处理 2xx：成功--表示请求已被成功接收、理解、接受 3xx：重定向--要完成请求必须进行更进一步的操做 4xx：客户端错误--请求有语法错误或请求没法实现 5xx：服务器端错误--服务器未能实现合法的请求
常见状态代码、状态描述、说明：
200 OK //客户端请求成功 400 Bad Request //客户端请求有语法错误，不能被服务器所理解 401 Unauthorized //请求未经受权，这个状态代码必须和WWW-Authenticate报头域一块儿使用 403 Forbidden //服务器收到请求，可是拒绝提供服务 404 Not Found //请求资源不存在，eg：输入了错误的URL 500 Internal Server Error //服务器发生不可预期的错误 503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常
GET和POST方法的区别
Http协议定义了不少与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查，改，增，删4个操做。 咱们最多见的就是GET和POST了。GET通常用于获取/查询资源信息，而POST通常用于更新资源信息.
GET提交的数据会放在URL以后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的Body中.
GET提交的数据大小有限制（由于浏览器对URL的长度有限制），而POST方法提交的数据没有限制.
GET方式须要使用Request.QueryString来取得变量的值，而POST方式经过Request.Form来获取变量的值。
GET方式提交数据，会带来安全问题，好比一个登陆页面，经过GET方式提交数据时，用户名和密码将出如今URL上，若是页面能够被缓存或者其余人能够访问这台机器，就能够从历史记录得到该用户的帐号和密码.
js的变量做用域
在js当中，变量的做用域就是定义这个变量的区域。变量分为：局部变量和全局变量。在函数内声明的变量只在这个函数内有定义，做用域是局部的，函数的参数也是局部变量。
理解做用域链能够更好的理解变量的做用域，每一个JavaScript执行环境都有一个和它关联在一块儿的做用域链。在变量解析过程当中首先查找局部的做用域链，而后查找外部的做用域链。
闭包的概念
闭包就是可以读取其余函数内部变量的函数。因为在Javascript语言中，只有函数内部的子函数才能读取局部变量，所以能够把闭包简单理解成"定义在一个函数内部的函数"。
因此，在本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁。
闭包的用途:
最大用处有两个，一个是前面提到的能够读取函数内部的变量，另外一个就是让这些变量的值始终保持在内存中。
function f1(){
var n=999;
nAdd=function(){n+=1}//没有var的全局变量，nAdd的值是一个匿名函数，而这个匿名函数自己也是一个闭包，能够在函数外部对函数内部的局部变量进行操做。
function f2(){//f1是f2的父函数，而f2被赋给了一个全局变量，这致使f2始终在内存中，而f2的存在依赖于f1，所以f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
使用闭包的注意点：
因为闭包会使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题，在IE中可能致使内存泄露。解决方法是，在退出函数以前，将不使用的局部变量所有删除。
闭包会在父函数外部，改变父函数内部变量的值。因此，若是你把父函数看成对象（object）使用，把闭包看成它的公用方法（Public Method），把内部变量看成它的私有属性（private value），这时必定要当心，不要随便改变父函数内部变量的值。
this和闭包的解读代码
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){//闭包函数
return this.name;//到父函数getNameFunc找name变量，找不到，到外部找，找到"The Window"
};
}
};
alert(object.getNameFunc()());//The Window
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());//由于this的对象引用就是object，因此返回值在Object中开始查找，找到了Obeject中的name就不到全局变量中查找。
this 的用法
this是Javascript语言的一个关键字。
它表明函数运行时，自动生成的一个内部对象，只能在函数内部使用。
随着函数使用场合的不一样，this的值会发生变化。可是有一个总的原则，那就是this指的是，调用函数的那个对象。
function test(){
alert(this.x);
}
var o = {
x:1,
m:test
};
o.m.apply();//undefined
function test(){
alert(this.x);
}
var o = {
x:1,
m:test
};
o.m.apply(o);//1
call和apply两个方法的区别
这两函数的做用其实就是更改对象的内部指针，即改变对象的this指向的内容，这两个方法都能劫持另一个对象的方法，继承另一个对象的属性.
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
// 第一个参数对象o将代替add类里this对象
// 后面的参数就是须要逗号隔开的参数列表
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
// 第一个参数对象o将代替add类里this对象
// 第二个参数为数组，就是须要传递的参数列表
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
//apply的一个例子，
function Person(name,age){ //定义一个类
this.name=name; //名字
this.age=age; //年龄
this.sayhello=function(){alert(this.name)};
}
function Print(){ //显示类的属性
this.funcName="Print";
this.show=function(){
var msg=[];
for(var key in this){
if(typeof(this[key])!="function"){
msg.push([key,":",this[key]].join(""));
}
}
alert(msg.join(" "));
};
}
function Student(name,age,grade,school){ //学生类
Person.apply(this,arguments);//比call优越的地方
Print.apply(this,arguments);
this.grade=grade; //年级
this.school=school; //学校
}
var p1=new Person("卜开化",80);
p1.sayhello();
var s1=new Student("白云飞",40,9,"岳麓书院");
s1.show();
s1.sayhello();
alert(s1.funcName);
另一个须要注意的：传null或undefined时，将是JS执行环境的全局变量。浏览器中是window，其它环境（如node）则是global。
function fun() {
alert(this);
}
fun.call(1);//“1”
fun.call('a');//“a”
fun.call(true);//“true”
fun.call({name:'jack'}); //“[object Object]”
fun.call(null); // window or global
fun.call(undefined); // window or global
严格模式下状况又有所不一样，ES3比较宽容尽可能去揣测代码意图。ES5严格模式（ie6/7/8/9除外）则再也不揣测，给call/apply传入的任何参数再也不转换。
'use strict'
function fun() {
alert(this);
}
fun.call(null) // null
fun.call(undefined) // undefined
js的继承机制
js中有三种继承方式:
一、js原型（prototype）继承:
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
alert("使用原型获得Name："+this.name);
}
var per=new Person("马小倩",21);
per.sayHello(); //输出：使用原型获得Name:马小倩
function Student(){}
Student.prototype=new Person("洪如彤",21);
var stu=new Student();
Student.prototype.grade=5;
Student.prototype.intr=function(){
alert(this.grade);
}
stu.sayHello();//输出：使用原型获得Name:洪如彤
stu.intr();//输出：5
二、构造函数继承
function Parent(name){
this.name=name;
this.sayParent=function(){
alert("Parent:"+this.name);
}
}
function Child(name,age){
this.tempMethod=Parent;
this.tempMethod(name);
this.age=age;
this.sayChild=function(){
alert("Child:"+this.name+"age:"+this.age);
}
}
var parent=new Parent("江剑臣");
parent.sayParent(); //输出：“Parent:江剑臣”
var child=new Child("李鸣",24); //输出：“Child:李鸣 age:24”
child.sayChild();
三、call、apply实现继承
function Person(name,age,love){
this.name=name;
this.age=age;
this.love=love;
this.say=function say(){
alert("姓名："+name);
}
}
//call方式
function student(name,age){
Person.call(this,name,age);
}
//apply方式
function teacher(name,love){
Person.apply(this,[name,love]);
//Person.apply(this,arguments); //跟上句同样的效果，arguments
}
//call与aplly的异同：
//1,第一个参数this都同样,指当前对象
//2,第二个参数不同：call的是一个个的参数列表；apply的是一个数组（arguments也能够）
var per=new Person("武凤楼",25,"魏荧屏"); //输出：“武凤楼”
per.say();
var stu=new student("曹玉",18);//输出：“曹玉”
stu.say();
var tea=new teacher("秦杰",16);//输出：“秦杰”
tea.say();
transition transfrom translate animation有什么区别？
transition：过渡；transfrom：变换；translate：平移;animation：动画;
CSS3动画和js动画
css3在性能上能够快速加载，可是缺点就是 IE8或如下不支持，并且复杂的动画效果写起来比较困难
js兼容性比较强，能实现比较复杂的代码，缺点就是加载须要时间
bootsrtap封装jQuery插件的方式
用button.js举例
!function ($) {
"use strict";
var Button = function(element, options){
this.$element = $(element)
this.options = $.extend({}, Button.DEFAULTS, options)
}
Button.DEFAULTS = {}
Button.prototype.toggle = function(){}
function Plugin(options){
return this.each(function(){
...
new Button(this,options)
...
})
}
var old = $.fn.Button;
$.fn.Button = Plugin;
$.fn.Buttn.Contructor = Button;//将插件类暴露给外界,能够修改和添加类里面的方法,如$.fn.Buttn.Contructor.prototype.show = function(){}
// 避免命名空间冲突
$.fn.Button.noConflict = function(){
$.fn.Button = old;
return this;
}
}(window.jQuery);
js中new关键字的理解
new是用来实例化一个对象。
// 定义类 类名字是 classA
function classA(){
this.name=1;
}
classA.prototype.show = function(){
alert(this.name);
};
// 用new实例化
var b = new classA();
b.show();
var b = new classA();这句话，new的做用流程是：
一、建立一个新的对象，这个对象的类型是object；二、查找class的prototype上的全部方法、属性，复制一份给建立的Object三、将构造函数classA内部的this指向建立的Object四、建立的Object的__proto__指向classA的prototype，b.__proto__ = classA.portotype五、执行构造函数classA六、返回新建立的对象给变量b 句话总结：new关键字以ClassA()为模板建立了一个新的对象，它复制了ClassA构造器中的全部成员变量，同时this指向新建立的对象。
- 1. 面试那些事
- 2. 那些年常见的面试题
- 3. 面试题的那些事（1）
- 4. 关于面试题那些事~~
- 5. 那些年，碰上过的面试题
- 6. 面试题那些事（3）—栈
- 7. 那些年遇到过的面试题
- 8. Java面试那些事
- 9. 说说面试那些事
- 10. 面试那些事儿
- 更多相关文章...
- • Lua 调试(Debug) - Lua 教程
- • Markdown 标题 - Markdown 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • PHP Ajax 跨域问题最佳解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 面试那些事
- 2. 那些年常见的面试题
- 3. 面试题的那些事（1）
- 4. 关于面试题那些事~~
- 5. 那些年，碰上过的面试题
- 6. 面试题那些事（3）—栈
- 7. 那些年遇到过的面试题
- 8. Java面试那些事
- 9. 说说面试那些事
- 10. 面试那些事儿