1.面向?qū)ο?/h1>

• 工廠模式:很多功能或?qū)ο笮枰貜?fù)使用時(shí)氨肌，需要封裝成函數(shù)
• 構(gòu)造函數(shù):當(dāng)用new去調(diào)用一個(gè)函數(shù)的時(shí)候恳守，這個(gè)函數(shù)就是構(gòu)造函數(shù)

// 工廠函數(shù)
function createPerson(name.sex){
  var obj=new Object();
  obj.name=name;
  obj.sex=sex;
  obj,show=function(){};
  return obj;
}

// 構(gòu)造函數(shù)
function createPerson(name.sex){
  this.name=name;
  this.sex=sex;
  this.show=function(){};
}

// 復(fù)制對(duì)象
function extend(obj1,obj2){
  for(var i in obj1){
    obj2[i]=obj1[i];
  }
}

2.原型

• 原型：可以去改寫(xiě)對(duì)象下面共用的方法或?qū)傩裕尮灿玫姆椒ɑ驅(qū)傩栽趦?nèi)存中也存在一份（提高性能）

function 構(gòu)造函數(shù)(屬性1,屬性2){
  this.屬性1=屬性1;
  this.屬性2=屬性2;
}
構(gòu)造函數(shù).prototype.方法=function(){}

• hasOwnProperty:查看是否是對(duì)象下面自身的屬性(永遠(yuǎn)不會(huì)去原型里尋找的屬性)
• constructor:查看構(gòu)造函數(shù)蔽午，返回
• instanceof:查看對(duì)象和構(gòu)造函數(shù)在原型鏈上是否有關(guān)系

3.繼承

• 原型繼承

var a={
    name:'zhangsan'
};
var b=cloneObj(a);  //沒(méi)有用到new
function cloneObj(obj){
    //創(chuàng)建一個(gè)代理函數(shù)
    var F=function(){

    }
    F.prototype=obj;   //用代理函數(shù)接受要被繼承的對(duì)象
    return new F();   //返回的是代理函數(shù)的實(shí)例
}
alert(b.name);
b.name='李四';
alert(a.name);

• 拷貝繼承

function CreatePerson(name,sex){
    this.name = name;
    this.sex = sex;
}
CreatePerson.prototype.showName = function(){
    alert(this.name);
}
var p1 = new CreatePerson("zhangsan","男");
//p1.showName();
//現(xiàn)在來(lái)一個(gè)學(xué)生類(lèi) 屬性：name,sex,address
//分析：一個(gè)學(xué)生類(lèi)：屬性和方法 分開(kāi)繼
function Student(name,sex,address){
    //繼承父類(lèi)匕垫，人類(lèi) name,sex  this==>學(xué)生
    CreatePerson.call(this,name,sex);
    //name,sex繼承成功，把CreatePerson的th指向指向到當(dāng)前student類(lèi)
    this.address = address;
}
extend(CreatePerson.prototype,Student.prototype);
function extend(obj1,obj2){
    for(var attr in obj1){
        obj2[attr] = obj1[attr];
    }
}
var s1 = new Student("lisi","女","武漢");
s1.showName();

4.事件

• 事件流

e.stopPropagation()/return false(只能使用在jq中)
阻止默認(rèn)事件：return false

• 事件監(jiān)聽(tīng)

function (obj, eventType, fn) {
    if (obj.attachEvent) {
        obj.attachEvent('on' + eventType, fn);
    } else {
        obj.addEventListener(eventType, fn, false);
    }
}

• 事件委托

oUl.onmouseover = function (event) {
    var event = event || window.event; 
    var target = event.target||event.srcElement;  
    var nodeName=target.nodeName;
    if(nodeName.toLowerCase()=='li'){
        target.style.background = 'green';
    }
}

5.原生ajax

// 實(shí)例化造壮，配置請(qǐng)求信息伟众，發(fā)送請(qǐng)求筹煮，設(shè)置回調(diào)函數(shù)
// 分析：
// 期望：ajax(method,url,data,success)

/**
 * ajax封裝
 * @param {*} method get/post 
 * @param {*} url 請(qǐng)求資源路徑
 * @param {*} data 請(qǐng)求參數(shù)
 * @param {*} success 回調(diào)函數(shù) 
 */

function ajax(method, url, data, success) {
    // 1.實(shí)例化對(duì)象
    var xhr = null; //  實(shí)例化一個(gè)對(duì)象，初始值為空   new XMLHttpRequest();
    if (window.ActiveXObject) { //IE5IE6是以ActiveXObject的方式引入XMLHttpRequest
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    } else if (window.XMLHttpRequest) { //除IE5 IE6以外的瀏覽器XMLHttpRequest
        xhr = new XMLHttpRequest(); //實(shí)例化一個(gè)XMLHttpRequest
    }

    // 2.配置信息 open()
    if (method == 'GET' && data) { //判斷data存在并且是GET方式
        url += '?' + data;
    }
    xhr.open(method, url, true);

    // 3.發(fā)送請(qǐng)求 send(),如果是POST方式沟饥，參數(shù)寫(xiě)在括號(hào)里
    if (method == 'GET') {
        xhr.send();
    } else if (method == 'POST') {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                // 如果回調(diào)函數(shù)不為空添怔，就執(zhí)行這個(gè)回調(diào)函數(shù)艾杏，該函數(shù)有一個(gè)參數(shù)xhr.responseText就是返回的內(nèi)容
                success && success(xhr.responseText);
            }
        }
    }
}

6.跨域

• 跨域：同源策略的影響糜颠，解決方式
  動(dòng)態(tài)創(chuàng)建script標(biāo)簽（jsonp）只能解決get方式的跨域

    var oBtn=document.getElementById('btn');
    oBtn.onclick=function(){
        // 點(diǎn)擊的瞬間，創(chuàng)建scrpt標(biāo)簽
        var oScript=document.createElement('script');
        oScript.src='1.txt';
        document.body.appendChild(oScript);
    }

--------------------------------------------------------------------
    // fn相當(dāng)于回調(diào)函數(shù)穆端，請(qǐng)求成功執(zhí)行的事件
    function fn(data){
        // data就是獲取過(guò)來(lái)的數(shù)據(jù)
        // alert(data);
        for(var i=0;i<data.length;i++){
            var oDiv=document.createElement('div');
            oDiv.innerHTML=data[i];
            document.body.appendChild(oDiv);
        }
    }

7.封裝tab選項(xiàng)卡

function Tab(id){
    //this=>實(shí)例對(duì)象 這個(gè)實(shí)例對(duì)象下面有三個(gè)屬性
    this.oParent = document.getElementById(id);
    this.aInput = this.oParent.getElementsByTagName("input");
    this.aDiv = this.oParent.getElementsByTagName("div");
}
Tab.prototype.init=function(){
    var This = this;//存儲(chǔ)tab實(shí)例對(duì)象
    for(var i = 0; i<this.aInput.length; i++){
        this.aInput[i].index = i;//添加自定義屬性
        this.aInput[i].onclick = function(){
            //this==>btn,期望實(shí)例對(duì)象去掉用change
            This.change(this);
        }
    }
}
Tab.prototype.change = function(obj){
    for(var j = 0; j<this.aInput.length; j++){
        //aInput[j] aDiv[j]
        this.aInput[j].className="";
        this.aDiv[j].style.display = "none";
    }
    obj.className = "active";//這里的this期望指的是btn
    //當(dāng)this發(fā)生沖突的時(shí)候威恼，保大對(duì)象
    this.aDiv[obj.index].style.display = "block";
}

window.onload = function(){
    var t1 = new Tab("div1");
    t1.init();
    var t2 = new Tab("div2");
    t2.init();
    var t3 = new Tab("div3");
    t3.init();
}

8.閉包

• 閉包不會(huì)產(chǎn)生垃圾回收寝并，函數(shù)在執(zhí)行完畢之后會(huì)去查看這個(gè)函數(shù)在其他地方有沒(méi)有被引用如果有箫措，就不會(huì)GC產(chǎn)生垃圾回收，如果沒(méi)有就會(huì)自動(dòng)垃圾回收
• 本來(lái)一個(gè)函數(shù)內(nèi)部是無(wú)法訪問(wèn)外部函數(shù)的變量的衬潦。閉包就是在這個(gè)外部函數(shù)里面定義一個(gè)內(nèi)部函數(shù)斤蔓，通過(guò)這個(gè)內(nèi)部函數(shù)使用變量，進(jìn)而給外部函數(shù)使用
• 表現(xiàn)形式：全局變量镀岛，return,傳參
• 閉包使用不當(dāng)會(huì)產(chǎn)生內(nèi)存泄漏

    // 第一種方式 return
    function fn1(){
        var a=2;
        return function (){
            console.log(a);   //內(nèi)部函數(shù)可以訪問(wèn)a
        }   //返回的結(jié)果是f函數(shù)
    }
    fn1()(); 



    // 第二種方式 傳參
    function fn1(){
        var a=5;
        function f(){
            console.log(a);
        }
        bar(f);
    }
    //定義bar,也要定義一個(gè)形參,傳進(jìn)一個(gè)函數(shù)弦牡，就去執(zhí)行一個(gè)函數(shù)
    function bar(fn){
        fn();
    }
    fn1();


    // 第三種方式 全局變量
    var fn;
    function fn1(){
        var a=1;
        function f(){
            console.log(a);
        }
        fn=f;   //把函數(shù)賦值給全局，這里產(chǎn)生了閉包
    }
    fn1();
    fn();

9.封裝cookie

/**
 * 
 * @param {*} key   鍵
 * @param {*} value  值
 * @param {*} day  過(guò)期的天數(shù)
 */

// 設(shè)置cookie
function setCookie(key, value, day) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + day);
    document.cookie=key+'='+value+';expires='+oDate.toGMTString();
}
// setCookie('class','aaa',10);

/**
 * 
 * @param {*} key 鍵
 */

// 獲取cookie
function getVal(key){
    var str=document.cookie;
    var a=str.split('; ');   // 注意這里有一個(gè)空格
    console.log(a);
    for(let i=0;i<a.length;i++){
        var b=a[i];
        var c=b.split('=');
        console.log(c);
        if(c[0]==key){
            return decodeURI(c[1]);
        }
    }
}
// getVal('class');
// alert(getVal('class'));