jQuery基本結(jié)構(gòu)分析

• 結(jié)構(gòu): 閉包(即時(shí)函數(shù))-函數(shù)持有了本不屬于自己的變量
  • 普通函數(shù)也是閉包理解
    • 函數(shù)的訪問(wèn)規(guī)則-內(nèi)層可以訪問(wèn)外層的作用域
• jQuery為什么使用閉包結(jié)構(gòu)
  • 閉包是一個(gè)封閉空間, 外層不能訪問(wèn)內(nèi)層數(shù)據(jù), 可以保護(hù)框架的代碼
  • 把所有的代碼封裝起來(lái), 只提供了兩個(gè)全局變量
  • 避免和其他框架產(chǎn)生沖突
• 參數(shù)window
  • 提高性能(縮短代碼的查找鏈)
  • 為什么形參也是window-方便代碼壓縮(形參替換a,b,c之類的)和混淆
• 形參undefined-解決兼容性的問(wèn)題
  • 方便代碼壓縮
  • undefined在IE瀏覽器中有不同的表現(xiàn)形式
    • 正常情況下, console.log(undefined = 5555;) //undefined
    • IE9-之前, undefined可以被修改
      • window.undefined = window.undefined //訪問(wèn)window的屬性u(píng)ndefined的值(未定義)賦值給window的屬性

工廠函數(shù)的實(shí)現(xiàn)

• 思考: 框架外部應(yīng)該如何使用這個(gè)框架, 應(yīng)該如何獲取這個(gè)框架的功能
• 外部訪問(wèn)閉包中的數(shù)據(jù):
  • 在閉包中返回函數(shù),在這個(gè)返回的函數(shù)中間接訪問(wèn)閉包中的數(shù)據(jù)
  • 把閉包中的私有數(shù)據(jù)(提供給外部的接口)綁定給全局對(duì)象window
  • 提供對(duì)外的接口

偽數(shù)組

• 偽數(shù)組的特點(diǎn)
  1. 本身是對(duì)象并非數(shù)組
  2. key從0開(kāi)始, 依次遞增-可以允許存在另類的key(但是在處理時(shí)會(huì)被忽略)
  3. 擁有l(wèi)ength屬性, 記錄key的值
  4. 必需擁有l(wèi)ength-1屬性(length-1對(duì)鍵值對(duì))
  5. 該對(duì)象不是window(window.length記錄的iframe標(biāo)簽的個(gè)數(shù))
     • 判斷某個(gè)對(duì)象是否是window: obj==window.window
• 偽數(shù)組種類-處理入口函數(shù)為偽數(shù)組的方法
  1. 系統(tǒng)自帶的偽數(shù)組
     • 使用[].push.apply(obj,系統(tǒng)自帶的偽數(shù)組)
  2. 自定義的偽數(shù)組
     • 自定義的偽數(shù)組在IE9以下(IE9-)會(huì)報(bào)錯(cuò), 不能直接用[].push.apply(obj, 自定義偽數(shù)組)來(lái)轉(zhuǎn)換
     • 偽數(shù)組-->先轉(zhuǎn)換成數(shù)組-->[].push,apply(obj,數(shù)組);
       • 遍歷obj-arr.push(obj[i])
       • var arr2 = [].slice.apply(obj); 在把a(bǔ)rr2-push進(jìn)去

入口函數(shù)參數(shù)分析

1. 參數(shù)判斷為假的情況

   • 返回空的jQuery實(shí)例對(duì)象

2. 參數(shù)是字符串(選擇器)

   • 根據(jù)選擇器獲取頁(yè)面中所有指定的標(biāo)簽,并且保存到實(shí)例對(duì)象中返回

3. 參數(shù)是字符串(標(biāo)簽)

   • 把參數(shù)中所有的一級(jí)標(biāo)簽保存到實(shí)例對(duì)象中返回,key從0開(kāi)始一次遞增,這些標(biāo)簽作為key對(duì)應(yīng)的value值保存的

4. 參數(shù)是數(shù)組

   • 把數(shù)組中所有元素依次取出, 保存為jQ實(shí)例對(duì)象的鍵值對(duì)返回(key從0開(kāi)始遞增, 數(shù)組中的元素作為對(duì)應(yīng)的value值)

5. 參數(shù)是偽數(shù)組(結(jié)構(gòu)類似于數(shù)組)

   • 把偽數(shù)組中所有的value值依次取出, 保存jQ實(shí)例對(duì)象的鍵值對(duì)返回(key從0開(kāi)始遞增, value作為對(duì)應(yīng)key的value值)

6. 參數(shù)是對(duì)象

   • 會(huì)把參數(shù)(對(duì)象)作為整體保存為key為0對(duì)應(yīng)的value值, 返回jQ實(shí)例對(duì)象

7. 參數(shù)是DOM標(biāo)簽(對(duì)象)

   • 會(huì)把參數(shù)(DOM對(duì)象)作為整體保存為key為0對(duì)應(yīng)的value值, 返回jQ實(shí)例對(duì)象

8. 參數(shù)是非零數(shù)字

   • 會(huì)把參數(shù)(數(shù)字)作為整體保存在key為0對(duì)應(yīng)的value值, 返回jQ實(shí)例對(duì)象

9. 布爾類型的值: 同8.

10. 函數(shù)==監(jiān)聽(tīng)頁(yè)面的加載DOM

    • document.addEventListener(要監(jiān)聽(tīng)的事件, 事件發(fā)生后的回調(diào)函數(shù))
      • 不兼容IE9-, 會(huì)報(bào)錯(cuò)
      • 參數(shù)一: DOMContentLoaded 表示DOM加載完畢
    • 使用document.attachEvent()兼容IE9以下瀏覽器
      • 參數(shù)
        1. 要監(jiān)聽(tīng)的狀態(tài)(固定: onreadystatechange)
        2. 事件發(fā)生后的回調(diào)函數(shù)

入口函數(shù)參數(shù)分析-總結(jié)

1. 條件判斷為假: 返回空的jQ實(shí)例對(duì)象
2. 字符串(選擇器 | 標(biāo)簽)
3. 數(shù)組或者偽數(shù)組:
4. 對(duì)象 | DOM節(jié)點(diǎn) | true | 數(shù)字(非0): 會(huì)把傳入的參數(shù)保存為key為0對(duì)應(yīng)的value值, 返回
5. 函數(shù)(待處理)
6. 思考init方法內(nèi)部的實(shí)現(xiàn)邏輯
   1. 對(duì)參數(shù)進(jìn)行類型判斷, 根據(jù)判斷類型的結(jié)果分別處理

工具方法的抽取

• 方法

  1. 工具對(duì)象: 多個(gè)方法放在一個(gè)對(duì)象中

  2. 給構(gòu)造函數(shù)添加靜態(tài)方法(拷貝工具對(duì)象的方法-遍歷工具對(duì)象進(jìn)行屬性拷貝)

      var obj = {name : 'zs',age : 20,friends:['小明','小紅']};
      var  obj1 = {};
      // 需求:obj1獲取obj的屬性
     
      for(var key in obj){
          obj1[key] = obj[key];
      }
     

  3. 給構(gòu)造函數(shù)的原型對(duì)象添加原型方法

• jQuery實(shí)現(xiàn)

  • jQ.each(); 添加在構(gòu)造函數(shù)自己身上的靜態(tài)方法

  • jQ().each(); 添加在構(gòu)造函數(shù)對(duì)應(yīng)的原型對(duì)象上面的原型方法

      XDYQuery.prototype.extend  = XDYQuery.extend = function (obj) {
          for(var i in obj)
          {
              this[i] = obj[i];
          }
      }
      //靜態(tài)方法調(diào)用-把工具對(duì)象直接作為參數(shù)傳進(jìn)去
      XDYQuery.extend(  {  //...  }  );
    

get(): 獲取指定索引對(duì)應(yīng)的標(biāo)簽返回

• 參數(shù):
  • 如果沒(méi)有傳遞參數(shù):獲取頁(yè)面中所有指定的標(biāo)簽存儲(chǔ)在數(shù)組中返回 == toArray方法
  • 傳遞參數(shù)
    • 參數(shù)是正數(shù)
    • 參數(shù)是負(fù)數(shù) 如果是-1,表示獲取倒數(shù)第一個(gè)(獲取所有指定標(biāo)簽.length+負(fù)值索引)

eq(): 獲取指定索引對(duì)應(yīng)的標(biāo)簽并且包裝成jQ對(duì)象返回

• 參數(shù):
  • 沒(méi)有參數(shù)(判斷arguments.length == 0):返回一個(gè)空的jQ對(duì)象(不是this)
  • 傳遞參數(shù)
    • 參數(shù)是正數(shù) ==>$(get)
    • 參數(shù)是負(fù)數(shù)

each()實(shí)現(xiàn)思路

• each方法的使用

  1. jQ.each(obj | arr,fn(key,value){.....})
  2. jQ().each(fn(key,value){.....})
     • 作用: 遍歷對(duì)象 | 數(shù)組 | 偽數(shù)組, 每循環(huán)一次就把當(dāng)前的鍵值對(duì)(索引/元素)作為參數(shù)傳遞給后面的回調(diào)函數(shù), 并且執(zhí)行回調(diào)函數(shù)中的代碼

• jQuery中each()的實(shí)現(xiàn)思路

  1. 遍歷對(duì)象 | 數(shù)組 | 偽數(shù)組
     • [1] 遍歷對(duì)象 ==> for..in
     • [2] 遍歷數(shù)組 ==> for | for..in (不推薦:包括原型成員) ? |forEach
     • 遍歷偽數(shù)組 ==> for..in | for
  2. 調(diào)用回調(diào)函數(shù)
     • 中斷循環(huán)(遍歷中判回調(diào)函數(shù)的返回值是否為假, 條件為真就結(jié)束循環(huán))
     • 回調(diào)函數(shù)中的this指向的是當(dāng)前循環(huán)的value值(回調(diào)函數(shù)借用call方法設(shè)置this指向value值)

jQuery中map()實(shí)現(xiàn)思路

• jQ.map(arr,fn(index,value))
  • 作用:變量數(shù)組,在回調(diào)函數(shù)中對(duì)數(shù)組進(jìn)行處理(放大|過(guò)濾),把回調(diào)函數(shù)中的返回值收集組成一個(gè)新的數(shù)組
• 實(shí)現(xiàn)思路
  • 初始化一個(gè)空的數(shù)組
  • 遍歷傳進(jìn)來(lái)的數(shù)組, 調(diào)用回調(diào)函數(shù)拿到遍歷數(shù)組的索引/value值, push到空數(shù)組中
  • return空數(shù)組

jQuery中remove()實(shí)現(xiàn)思路

• 遍歷jQ實(shí)例對(duì)象
• 每循環(huán)一次,就把當(dāng)前的標(biāo)簽刪掉

插件機(jī)制

• 在jQuery框架的基礎(chǔ)上, 再提供一個(gè)新的js文件, 這個(gè)js中新增一些功能
• js文件命名: jQuery-名稱.js