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

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

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

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

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

on事件委托的區別

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

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

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

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

$.extend({minValue:function(a,b){return a
也可以把這類函數稱作為工具函數，不直接操作DOM元素，而是操作Javascript的非元素對象，或者執行其他非對象的特定操作。
$.extend還可以用一個或多個其他對象來擴展一個對象，返回被擴展的對象
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){
    //處理獲得的數據
}

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


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

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

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



window.name = "消息";


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也可以
}




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中有三種繼承方式:
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、構造函數繼承
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實現繼承
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的作用流程是：
1、創建一個新的對象，這個對象的類型是object；
2、查找class的prototype上的所有方法、屬性，復制一份給創建的Object
3、將構造函數classA內部的this指向創建的Object
4、創建的Object的__proto__指向classA的prototype，b.__proto__ = classA.portotype
5、執行構造函數classA
6、返回新創建的對象給變量b  
句話總結：new關鍵字以ClassA()為模板創建了一個新的對象，它復制了ClassA構造器中的所有成員變量，同時this指向新創建的對象。