<dfn id="w48us"></dfn><ul id="w48us"></ul>
  • <ul id="w48us"></ul>
  • <del id="w48us"></del>
    <ul id="w48us"></ul>
  • javascript框架設計種子模塊讀書筆記

    時間:2020-12-18 14:09:58 讀書筆記 我要投稿

    javascript框架設計種子模塊讀書筆記

      1.命名空間:

    javascript框架設計種子模塊讀書筆記

      js里面的命名空間就是使用對象的屬性來擴展的。比如,用戶定義一個A對象,A對象下面有B屬性和C屬性,同時B屬性和C屬性又是對象。因此A={B:{},C:{}},這時用戶就可以在B對象和C對象中定義一樣的方法,屬性了。因此B和C就屬于不同的命名空間。我們調用B,C對象里面的方法,就可以通過A.B.like(),A.C.like()調用了。當然A屬于window對象中的屬性。

      但是有一種情況,比如:boke.jsp頁面引入了jquery.js以及prototype.js(他們都會在window對象中添加$屬性),這時就出現了沖突的情況。

      因此jquery.js里面就有了noConflict()處理沖突。執行流程:頁面首先引入prototype,這時prototype會占有window的$屬性,然后再引入jquery時,jquery會把之前window的$屬性存放在_$中,然后自己使用$屬性。這時,你可以通過$調用jquery的方法。當你現在不需要使用jquery而想使用prototype時,就可以調用$.noConflict(),這時$就會恢復成prototype對象。這時你就可以通過$使用prototype方法了。

      復制代碼 代碼如下:

      var _$ = window.$,_jQuery= window.jQuery;

      noConflict:function(deep){

      window.$ = _$;

      if(deep) window.jQuery = _jQuery;

      return jQuery; //返回值,你可以賦值給其他變量名,比如,chaojidan,這樣你就可以通過chaojidan調用jQuery中的方法了。

      }

      2.對象擴展:

      命名空間對象有了,那我們需要擴展功能。比如:我需要把A對象的屬性和方法全部復制到B對象中。我不用一個一個在B對象中去寫代碼。

      復制代碼 代碼如下:

      function mix(target , source){

      var args = [].slice.call(arguments),i=1,

      isCover = typeof args[args.length-1] =="boolean" ? args.pop():true; //不寫,默認為true,默認是覆蓋。

      if(args.length == 1){

      target = !this.window? this:{};

      //如果只有一個對象參數時,就擴展this對象。比如:我在A對象的context中調用mix(B),那么這時的this就是A,因此會把B的屬性和方法添加到A對象中。但是如果是在window中調用mix(B),就會把B對象中的`屬性和方法添加到一個空的對象中,并返回這個空的對象,以防覆蓋window對象中同名的屬性和方法。(只有window對象擁有window屬性)

      i =0;

      }

      while((source = args[i++])){

      for(key in source){

      if(isCover || !(key in target)) //如果覆蓋,就直接賦值,如果不覆蓋,先判斷key是否存在目標對象中,如果存在,就不賦值

      {

      target[key] = source[key];

      }

      }

      }

      return target;

      }

      大公司面試官很喜歡問數組的查重,大家可以去看看,數組中的每項可以是對象,而對象A和對象B即便一樣的屬性和方法,但是也是不相等的。字符串和數字,比如123和"123"等,網上一搜,就能找到很全的方法。

      3.數組化:

      瀏覽器下有很多類數組對象,arguments,document.forms,document.links,form.elements,document.getElementsByTagName,childNodes等(HTMLCollection,NodeList)。

      還有一種特殊寫法的自定義對象

      復制代碼 代碼如下:

      var arrayLike = {

      0:"a",

      1:"b",

      length:2

      }

      此對象寫法,就是jQuery對象的寫法。

      我們需要把上述的類數組對象轉換成數組對象。

      [].slice.call方法可以解決。但是舊版本IE下的HTMLCollection,NodeList不是Object的子類,不能使用[].slice.call方法。

      因此我們可以重寫一個slice方法。

      復制代碼 代碼如下:

      A.slice = window.dispatchEvent ? function(nodes,start,end){ return [].slice.call(nodes,start,end); }

      //如果window有dispatchEvent 屬性就證明支持[].slice.call方法,能力檢測。

      :function(nodes,start,end){

      var ret = [],n=nodes.length;

      if(end == undefined || typeof end === "number" && isFinite(end)){ //&&優先級高于||,因此end沒寫,或者end是有限數字就進入

      start = parseInt(start,10) || 0; //如果start不存在或者不是數字,則就賦值為0.

      end = end == undefined ? n:parseInt(end,10); //如果end不存在,則賦值為n.

      if(start < 0) start + = n;

      if(end< 0) end + = n;

      if(end>n) end = n;

      for(var i = start;i<end;i++){

      ret[i-start] = nodes[i]; //低版本IE使用數組賦值的形式

      }

      }

      return ret;

      }

      4.類型的判斷:

      js五種簡單數據類型有:null,undefined,boolean,number,string。

      還有復雜的數據類型:Object,Function,RegExp,Date,自定義的對象,比如:Person等。

      typeof一般用來判斷boolean,number,string,instanceof一般用來判斷對象類型。但它們都有缺陷。比如:firame里面的數組實例就不是父窗口的Array的實例,調用instanceof會返回false。(這題360校招時問過)。typeof new Boolean(true) // "object" ,包裝對象。boolean,number,string三種包裝對象,js高級程序編程里面有講。

      有很多人使用typeof document.all來判斷是否為IE,其實這是很危險的,因為此屬性谷歌和火狐也喜歡,所以在谷歌瀏覽器下出現了這個情況:typeof document.all //undefined 但是,document.all //HTMLAllCollection,用typeof判斷是undefined,但是可以讀取此屬性值。

      但是現在可以使用Object.prototype.toString.call方法判斷類型。此方法可以直接輸出對象內部的[[Class]].但IE8及以下的window對象不能使用此方法。可以使用 window == document // true document == window // false IE6,7,8下。

      nodeType ( 1:元素 Element 2:屬性 attribute 3:文本 Text 9:document)

      jquery中判斷類型使用的方法:

      復制代碼 代碼如下:

      class2type ={}

      jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(i,name){

      class2type [ "[object " + name + "]" ] = name.toLowerCase();

      //class2type = {"[object Boolean]":boolean,"[object Number ]":number ,"[object String ]":string ,"[object Function ]":function ,"[object Array ]":array ......}

      });

      jQuery.type = function(obj){ //如果obj是null,undefined等,就返回字符串"null","undefined"。如果不是,就調用toString方法,如果可以調用就判斷,出錯就返回object(IE低版本下的window,Dom等ActiveXobject對象)

      return obj == null ? String(obj) : class2type [ toString.call(obj) ] || "object";

      }

      5.domReady

      js操作dom節點時,頁面必須構建好dom樹才行。因此,通常使用window.onload方法。但是onload方法是等所有資源加載結束后才會執行。而為了讓頁面能更快的響應用戶的操作,我們只需要dom樹構建完畢,就應該使用js操作。而不需要等待所有資源都加載結束(圖片,flash)。

      因此出現了DOMContentLoaded事件,Dom樹構建完成后觸發。但是舊版本IE不支持,因此就有了hack。

      復制代碼 代碼如下:

      if(document.readyState === "complete"){ //以防Dom文檔加載完成后才加載js文件。這時通過此判斷來執行fn方法(你要執行的方法)。因為文檔加載完成后,document.readyState的值為complete

      setTimeout(fn); //異步執行,可以讓它后面的代碼先執行。這里是jQuery里面的用法,可以不用理解。

      }

      else if(document.addEventListener){//支持DOMContentLoaded事件

      document.addEventListener("DOMContentLoaded",fn,false); //冒泡

      window.addEventListener("load",fn,false); //以防DOM樹構建好之后才加載js文件。這時不會觸發DOMContentLoaded事件(已經觸發結束了),只會觸發load事件

      }

      else{

      document.attachEvent("onreadystatechange",function(){//針對IE下的iframe安全,有時會優先onload執行,有時不會。

      if(document.readyState ==="complete"){

      fn();

      }

      });

      window.attachEvent("onload",fn); //總會起到作用,以防其他監聽事件沒獲取到,這樣至少可以通過onload事件觸發fn方法。

      var top = false;//看是否在iframe中

      try{//window.frameElement即為包含本頁面的iframe或frame對象。沒有則為null。

      top = window.frameElement == null && document.documentElement;

      }catch(e){}

      if(top && top.doScroll){ //如果沒有iframe,并且是IE

      (function doScrollCheck(){

      try{

      top.doScroll("left");//IE下,如果Dom樹構建好,就可以調用html的doScroll方法

      }catch(e){

      return setTimeout(doScrollCheck,50); //如果還沒構建好,則繼續監聽

      }

      fn();

      })

      }

      }

      fn方法中必須包含移除所有的綁定事件。

      當然IE還可以使用script defer hack,原理就是:指定了defer的script會在DOM樹構建完后才執行。但是這需要添加額外的js文件,很少在單獨的庫里面用到。

      使用原理:在文檔中添加script標簽,并用script.src = "xxx.js",監聽script的onreadystatechange事件,當this.readyState == "complete"時,就執行fn方法。

      也就是說,DOM構建好之后,xxx.js才會執行,它的this.readyState才會變成complete。

      以上便是javascript框架設計的第一章的讀書筆記了,內容比較精簡,方便大家更好的理解這章的基本內容。

    【javascript框架設計種子模塊讀書筆記】相關文章:

    jQuery 和其他 JavaScript 框架使用方法11-11

    javascript程序設計11-10

    軟件用戶管理模塊的設計09-01

    無憂演講內容框架設計技巧10-14

    JavaScript高級程序設計:本地對象Array11-11

    Java日志系統框架的設計與實現09-23

    調用javascript11-23

    Javascript模板11-23

    javascript模式設計之工廠模式學習心得06-19

    網頁程序設計之實用JavaScript代碼段09-21

    主站蜘蛛池模板: 欧美日韩专区麻豆精品在线| 免费精品无码AV片在线观看| 亚洲av午夜福利精品一区| 在线观看日韩精品| 国内少妇偷人精品视频免费| 日韩精品在线播放| 国产系列高清精品第一页 | 四虎成人精品无码| 国产日韩高清三级精品人成| 国内精品久久久久| 国产亚洲精品美女久久久| 亚洲精品视频免费观看| 国产精品丝袜久久久久久不卡| 久久精品国产久精国产| 91精品国产91久久久久福利| 欧产日产国产精品精品| 亚洲日韩国产AV无码无码精品| 国产精品gz久久久| 老司机99精品99| 国产精品久久久久无码av| 国产成人精品2021| 精品偷自拍另类在线观看| 最新欧美性爱精品一区二区三区 | 精品在线免费观看| 国产精品毛片VA一区二区三区| 久久亚洲私人国产精品vA| 亚洲av无码乱码国产精品fc2| 欧美在线精品一区二区三区 | 日本一卡精品视频免费| 亚洲国产另类久久久精品小说 | 无码人妻精品一区二区三区久久| 日本国产精品久久| 亚洲国产成人久久精品99| 亚洲精品无码99在线观看 | 国产精品gz久久久| 国产精品色视频ⅹxxx| 91人妻人人澡人人爽人人精品| 99精品久久久久久久婷婷| 国产精品伊人久久伊人电影| 国内精品伊人久久久久网站| 久久精品国产亚洲Aⅴ香蕉|