摘要：變量分為局部變量和全局變量。在函數(shù)內(nèi)聲明的變量只在這個函數(shù)內(nèi)有定義，作用域是局部的，函數(shù)的參數(shù)也是局部變量。閉包的用途最大用處有兩個，一個是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個就是讓這些變量的值始終保持在內(nèi)存中。

都是自己整理的，除了題目，其他都別當(dāng)真。（答案不是100分的對/(ㄒoㄒ)/~~）

zepto主要針對移動設(shè)備上的，只支持較新的瀏覽器，好處是代碼量小，性能較好；zepto有一些基礎(chǔ)的觸摸事件，如tap、swipe；

jQuery主要是兼容性好，可以跑在PC也可以移動設(shè)備上，好處是兼容性好，缺點(diǎn)是代碼量大，性能不夠好，jQuery的2.X版本也不支持IE678也是基于這個考慮的。

大多數(shù)在jQuery 常用的API 和方法zepto都有，zepto種有些方法jQuery反而沒有，大部分都能兼容。
具體的一些區(qū)別：

on事件委托的區(qū)別

Zepto 的each 方法只能遍歷 數(shù)組，不能遍歷JSON對象。

width()和height()的區(qū)別：Zepto由盒模型(box-sizing)決定，用.width()返回賦值的width，用.css("width")返回加border等的結(jié)果；jQuery會忽略盒模型，始終返回內(nèi)容區(qū)域的寬/高(不包含padding、border)。

offset()的區(qū)別：Zepto返回{top,left,width,height}；jQuery返回{width,height}。

jQuery便是一個封裝得非常好的類，比如，$("#btn1") 會生成一個 jQuery類的實(shí)例，理解這一點(diǎn)很重要。
$.extend是用來擴(kuò)展jQuery類的，可以理解為添加靜態(tài)方法，是全局性的，直接用jQuery類調(diào)用即可。

$.extend({minValue:function(a,b){return a
也可以把這類函數(shù)稱作為工具函數(shù)，不直接操作DOM元素，而是操作Javascript的非元素對象，或者執(zhí)行其他非對象的特定操作。
$.extend還可以用一個或多個其他對象來擴(kuò)展一個對象，返回被擴(kuò)展的對象
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進(jìn)得擴(kuò)展，就是為jQuery類添加“成員函數(shù)”。jQuery類的實(shí)例可以使用這個“成員函數(shù)”。
   $.fn.extend({
       theAlert:function(){
          alert("自定義的函數(shù)");
        }
  })
  $("thediv").theAlert()
  
cookie、localStorage、sessionStorage的區(qū)別

LocalStorage（本地存儲）和sessionStorage（會話存儲） 是HTML5 Web Storage API 提供的，這兩種方式都允許開發(fā)者使用js設(shè)置的鍵值對進(jìn)行操作，在在重新加載不同的頁面的時候讀出它們。這一點(diǎn)與cookie類似。

數(shù)據(jù)的生命期：
cookie一般由服務(wù)器生成，可設(shè)置失效時間。如果在瀏覽器端生成Cookie，默認(rèn)是關(guān)閉瀏覽器后失效；localStorage除非被清除，否則永久保存；sessionStroage僅在當(dāng)前會話下有效，關(guān)閉頁面或?yàn)g覽器后被清除;

存放數(shù)據(jù)大小:
cookie:4K左右;localStorage和sessionStorage一般為5MB；

與服務(wù)器端通信：
cookie每次都會攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題；localStorage和sessionStorage僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信

易用性：
cookie需要程序員自己封裝，源生的Cookie接口不友好；localStorage和sessionStorage源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持


JS跨域（ajax跨域、iframe跨域）解決方法

只要協(xié)議、域名、端口有任何一個不同，都被當(dāng)作是不同的域。
要解決跨域的問題，我們可以使用以下幾種方法：
通過jsonp跨域：
在js中，我們直接用XMLHttpRequest請求不同域上的數(shù)據(jù)時，是不可以的。但是，在頁面上引入不同域上的js腳本文件卻是可以的，jsonp正是利用這個特性來實(shí)現(xiàn)的。jsonp的原理就是，通過script標(biāo)簽引入一個js文件，這個js文件載入成功后會執(zhí)行我們在url參數(shù)中指定的函數(shù)，并且會把我們需要的json數(shù)據(jù)作為參數(shù)傳入。所以jsonp是需要服務(wù)器端的頁面進(jìn)行相應(yīng)的配合的。如果你的頁面使用jquery，那么通過它封裝的方法$.getJSON(url,data,success(data,status,xhr))

function dosometing(jsondata){
    //處理獲得的數(shù)據(jù)
}

我們看到獲取數(shù)據(jù)的地址后面還有一個callback參數(shù)，按慣例是用這個參數(shù)名，但是你用其他的也一樣。當(dāng)然如果獲取數(shù)據(jù)的jsonp地址頁面不是你自己能控制的，就得按照提供數(shù)據(jù)的那一方的規(guī)定格式來操作了。
因?yàn)槭钱?dāng)做一個js文件來引入的，所以 http://example.com/data.php 返回的必須是一個能執(zhí)行的js文件，所以這個頁面的php代碼可能是這樣的:


最終那個頁面輸出的是：dosomething(["a","b","c"])

通過修改document.domain來跨子域：
要注意的是，document.domain的設(shè)置是有限制的，我們只能把document.domain設(shè)置成自身或更高一級的父域，且主域必須相同。

使用window.name來進(jìn)行跨域：
window對象有個name屬性，該屬性有個特征：即在一個窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權(quán)限，window.name是持久存在一個窗口載入過的所有頁面中的，并不會因新頁面的載入而進(jìn)行重置。注意，window.name的值只能是字符串的形式，這個字符串的大小最大能允許2M左右甚至更大的一個容量，具體取決于不同的瀏覽器，但一般是夠用了。



window.name = "消息";


function getData(){//iframe載入data.html頁面后臺執(zhí)行的函數(shù)
    var iframe = document.getElementById("iframe");
    iframe.onload = function(){//這個時候a.html和data.html已經(jīng)是處于同一個域了，可以互相訪問
        var data = iframe.contentWindow.name;//獲取iframe的window.name，也就是data.html頁面給她設(shè)置的數(shù)據(jù)
        alert(data);
    }
    iframe.src = "b.html";//這里的b.html只要和a.html同一個域就行了，目的是讓a能訪問iframe里的東西，設(shè)置成about:blank也可以
}




window.onmessage = function(e){
    e = e || event;//獲取時間對象
    alert(e.data);//通過data屬性得到傳送的消息
}

HTTP協(xié)議的主要特點(diǎn)

超文本傳輸協(xié)議(HTTP)是一種通信協(xié)議，它允許將超文本標(biāo)記語言(HTML)文檔從Web服務(wù)器傳送到客戶端的瀏覽器。目前我們使用的是HTTP/1.1 版本。
http協(xié)議是無狀態(tài)的，同一個客戶端的這次請求和上次請求是沒有對應(yīng)關(guān)系，對http服務(wù)器來說，它并不知道這兩個請求來自同一個客戶端。 為了解決這個問題， Web程序引入了Cookie機(jī)制來維護(hù)狀態(tài).
HTTP協(xié)議的主要特點(diǎn)可概括如下：

支持客戶/服務(wù)器模式。

簡單快速：客戶向服務(wù)器請求服務(wù)時，只需傳送請求方法和路徑。請求方法常用的有GET、HEAD、POST。每種方法規(guī)定了客戶與服務(wù)器聯(lián)系的類型不同。由于HTTP協(xié)議簡單，使得HTTP服務(wù)器的程序規(guī)模小，因而通信速度很快。

靈活：HTTP允許傳輸任意類型的數(shù)據(jù)對象。正在傳輸?shù)念愋陀蒀ontent-Type加以標(biāo)記。

無連接：無連接的含義是限制每次連接只處理一個請求。服務(wù)器處理完客戶的請求，并收到客戶的應(yīng)答后，即斷開連接。采用這種方式可以節(jié)省傳輸時間。

無狀態(tài)：HTTP協(xié)議是無狀態(tài)協(xié)議。無狀態(tài)是指協(xié)議對于事務(wù)處理沒有記憶能力。缺少狀態(tài)意味著如果后續(xù)處理需要前面的信息，則它必須重傳，這樣可能導(dǎo)致每次連接傳送的數(shù)據(jù)量增大。另一方面，在服務(wù)器不需要先前信息時它的應(yīng)答就較快。


http請求由三部分組成，分別是：請求行、消息報頭、請求正文
HTTP響應(yīng)也是由三個部分組成，分別是：狀態(tài)行、消息報頭、響應(yīng)正文
HTTP響應(yīng)的狀態(tài)代碼有三位數(shù)字組成，第一個數(shù)字定義了響應(yīng)的類別，且有五種可能取值：
1xx：指示信息--表示請求已接收，繼續(xù)處理
2xx：成功--表示請求已被成功接收、理解、接受
3xx：重定向--要完成請求必須進(jìn)行更進(jìn)一步的操作
4xx：客戶端錯誤--請求有語法錯誤或請求無法實(shí)現(xiàn)
5xx：服務(wù)器端錯誤--服務(wù)器未能實(shí)現(xiàn)合法的請求
常見狀態(tài)代碼、狀態(tài)描述、說明：
200 OK      //客戶端請求成功
400 Bad Request  //客戶端請求有語法錯誤，不能被服務(wù)器所理解
401 Unauthorized //請求未經(jīng)授權(quán)，這個狀態(tài)代碼必須和WWW-Authenticate報頭域一起使用 
403 Forbidden  //服務(wù)器收到請求，但是拒絕提供服務(wù)
404 Not Found  //請求資源不存在，eg：輸入了錯誤的URL
500 Internal Server Error //服務(wù)器發(fā)生不可預(yù)期的錯誤
503 Server Unavailable  //服務(wù)器當(dāng)前不能處理客戶端的請求，一段時間后可能恢復(fù)正常

GET和POST方法的區(qū)別

Http協(xié)議定義了很多與服務(wù)器交互的方法，最基本的有4種，分別是GET,POST,PUT,DELETE. 一個URL地址用于描述一個網(wǎng)絡(luò)上的資源，而HTTP中的GET, POST, PUT, DELETE就對應(yīng)著對這個資源的查，改，增，刪4個操作。 我們最常見的就是GET和POST了。GET一般用于獲取/查詢資源信息，而POST一般用于更新資源信息.

GET提交的數(shù)據(jù)會放在URL之后，以?分割URL和傳輸數(shù)據(jù)，參數(shù)之間以&相連，如EditPosts.aspx?name=test1&id=123456.  POST方法是把提交的數(shù)據(jù)放在HTTP包的Body中.

GET提交的數(shù)據(jù)大小有限制（因?yàn)闉g覽器對URL的長度有限制），而POST方法提交的數(shù)據(jù)沒有限制.

GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值。

GET方式提交數(shù)據(jù)，會帶來安全問題，比如一個登錄頁面，通過GET方式提交數(shù)據(jù)時，用戶名和密碼將出現(xiàn)在URL上，如果頁面可以被緩存或者其他人可以訪問這臺機(jī)器，就可以從歷史記錄獲得該用戶的賬號和密碼.


js的變量作用域

在js當(dāng)中，變量的作用域就是定義這個變量的區(qū)域。變量分為：局部變量和全局變量。在函數(shù)內(nèi)聲明的變量只在這個函數(shù)內(nèi)有定義，作用域是局部的，函數(shù)的參數(shù)也是局部變量。
理解作用域鏈可以更好的理解變量的作用域，每個JavaScript執(zhí)行環(huán)境都有一個和它關(guān)聯(lián)在一起的作用域鏈。在變量解析過程中首先查找局部的作用域鏈，然后查找外部的作用域鏈。
閉包的概念

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成"定義在一個函數(shù)內(nèi)部的函數(shù)"。
所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。
　　
閉包的用途:
最大用處有兩個，一個是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個就是讓這些變量的值始終保持在內(nèi)存中。
　　function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}//沒有var的全局變量，nAdd的值是一個匿名函數(shù)，而這個匿名函數(shù)本身也是一個閉包，可以在函數(shù)外部對函數(shù)內(nèi)部的局部變量進(jìn)行操作。
　　　　function f2(){//f1是f2的父函數(shù)，而f2被賦給了一個全局變量，這導(dǎo)致f2始終在內(nèi)存中，而f2的存在依賴于f1，因此f1也始終在內(nèi)存中，不會在調(diào)用結(jié)束后，被垃圾回收機(jī)制（garbage collection）回收。
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

使用閉包的注意點(diǎn)：

由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。

閉包會在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當(dāng)作對象（object）使用，把閉包當(dāng)作它的公用方法（Public Method），把內(nèi)部變量當(dāng)作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。    　


this和閉包的解讀代碼
   var name = "The Window";
   var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){//閉包函數(shù)
　　　　　　　　return this.name;//到父函數(shù)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()());//因?yàn)閠his的對象引用就是object，所以返回值在Object中開始查找，找到了Obeject中的name就不到全局變量中查找。
　　
this 的用法

this是Javascript語言的一個關(guān)鍵字。
它代表函數(shù)運(yùn)行時，自動生成的一個內(nèi)部對象，只能在函數(shù)內(nèi)部使用。
隨著函數(shù)使用場合的不同，this的值會發(fā)生變化。但是有一個總的原則，那就是this指的是，調(diào)用函數(shù)的那個對象。
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兩個方法的區(qū)別

這兩函數(shù)的作用其實(shí)就是更改對象的內(nèi)部指針，即改變對象的this指向的內(nèi)容，這兩個方法都能劫持另外一個對象的方法，繼承另外一個對象的屬性.
function add(c, d){
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};

// 第一個參數(shù)對象o將代替add類里this對象
// 后面的參數(shù)就是需要逗號隔開的參數(shù)列表
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// 第一個參數(shù)對象o將代替add類里this對象
// 第二個參數(shù)為數(shù)組，就是需要傳遞的參數(shù)列表
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){    //學(xué)生類
        Person.apply(this,arguments);//比call優(yōu)越的地方
        Print.apply(this,arguments); 
        this.grade=grade;                //年級
        this.school=school;                 //學(xué)校
    } 
    var p1=new Person("卜開化",80); 
    p1.sayhello(); 
    var s1=new Student("白云飛",40,9,"岳麓書院"); 
    s1.show(); 
    s1.sayhello(); 
    alert(s1.funcName);
    
另外一個需要注意的：傳null或undefined時，將是JS執(zhí)行環(huán)境的全局變量。瀏覽器中是window，其它環(huán)境（如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
嚴(yán)格模式下情況又有所不同，ES3比較寬容盡量去揣測代碼意圖。ES5嚴(yán)格模式（ie6/7/8/9除外）則不再揣測，給call/apply傳入的任何參數(shù)不再轉(zhuǎn)換。
    "use strict"
    function fun() {
        alert(this);
    }
    fun.call(null)      // null
    fun.call(undefined) // undefined
js的繼承機(jī)制

js中有三種繼承方式:
1、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  

2、構(gòu)造函數(shù)繼承
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();  

3、call、apply實(shí)現(xiàn)繼承
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,第一個參數(shù)this都一樣,指當(dāng)前對象 
    //2,第二個參數(shù)不一樣：call的是一個個的參數(shù)列表；apply的是一個數(shù)組（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有什么區(qū)別？

transition：過渡；transfrom：變換；translate：平移;animation：動畫;
CSS3動畫和js動畫

css3在性能上可以快速加載，但是缺點(diǎn)就是 IE8或以下不支持，而且復(fù)雜的動畫效果寫起來比較困難
js兼容性比較強(qiáng)，能實(shí)現(xiàn)比較復(fù)雜的代碼，缺點(diǎn)就是加載需要時間
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關(guān)鍵字的理解

new是用來實(shí)例化一個對象。
// 定義類 類名字是 classA
function classA(){
    this.name=1;
}
classA.prototype.show = function(){
    alert(this.name);
};
// 用new實(shí)例化
var b = new classA();
b.show();    

var b = new classA();這句話，new的作用流程是：
1、創(chuàng)建一個新的對象，這個對象的類型是object；
2、查找class的prototype上的所有方法、屬性，復(fù)制一份給創(chuàng)建的Object
3、將構(gòu)造函數(shù)classA內(nèi)部的this指向創(chuàng)建的Object
4、創(chuàng)建的Object的__proto__指向classA的prototype，b.__proto__ = classA.portotype
5、執(zhí)行構(gòu)造函數(shù)classA
6、返回新創(chuàng)建的對象給變量b  
句話總結(jié)：new關(guān)鍵字以ClassA()為模板創(chuàng)建了一個新的對象，它復(fù)制了ClassA構(gòu)造器中的所有成員變量，同時this指向新創(chuàng)建的對象。