javascript設計模式 第6章 鏈式調用

鏈式調用是一種語法招數。
做用：能讓你經過重用一個初始化操做來達到用少許代碼表達複雜操做的目的、。

這種技術包含兩個部分：
 1.一個建立表明html元素的對象的工廠。以及一批對這個html元素執行某些操做的方法。
 經過例子對比：以前和以後的代碼，對鏈式調用的概念的初步認識。
  以前：

  addevent($('example'),"click",function(){

   setstyle(this,"color",'green');

   show(this);

  })

  執行鏈式調用：

   $(".example").addevent("click",function(){
    $(this).setstyle('color','green').show();
   })

 6.1調用鏈的結構

  function $(){

   var elements = [];

   for(var i=0;len = arguments.length,i<lengt;++i){

    var element = arguments[i];

    if(typeof element ==="string"){

     element = document.getElementById(element);

    }

    if(arguments,length===1){

     return element;

    }

    element.push(element);

   }

    return elements;

  }

  
 ---------改造--------------------
  步驟：
   1.把這個函數改造爲一個構造器，把那些元素做爲數組保存在一個實例屬性中。
   2.讓全部定義在構造器函數的prototype屬性所指對象中的方法都返回用以調用方法的那個實例的引用，那麼他就具備了鏈式調用的能力。
   3. 首頁須要把$函數改成一個工廠方法。他負責建立支持鏈式調用的對象。
   4.這個函數應該能接受元素數組形式的參數，以便咱們可以使用與原來同樣的公有接口

   (function(){

    function _$(els){

     this.elements =[];

     for(var i=0,len  = els.length;i<len;++i){

      var element = els[i];

      if(typeof element === "string"){

       element = document.getElementById(element);

      }

      this.elements.push(element);

     }

    }

    window.$ = function(){

     return new _$(arguments);

    }

   })()

 ---------------深刻改造- 摩擦摩擦 似魔鬼步伐，一步、兩步------------------
 
 全部對象都會繼承其原型對象的屬性的方法。咱們可讓定義在原型對象中那幾個方法都返回用以調用方法的實例對象的引用。這些就能夠對那些方法進行鏈式調用了。
 實例：把_$這個私有構造函數的prototype對象中添加方法。以便實現鏈式調用：

  (function(){
   function _$(els){
   }
   _$.prototype = {
    each:function(fn){
     for(var i=0,length = this.elements.length;i<len;++i){
      fn.call(this,this.elements[i]);
     }
     return this;
    },
    setstyle:function(prop,val){
     this.each(function(el){
      el.style[prop] = val;
     });
     return this;
    },
    show:function(){
     var that = this;
     this.each(function(el){
      that.setstyle("display","block");
     })
     return this;
    },
    addEvent:function(type,fn){
     var add = function(el){
      if(window.addeventlistener){
       el.addeventlistener(type,fn,false);
      }else if(window.attachEvent){
       el.attachEvent("on"+type,fn);
      };
      this.each(function(el){
       add(el);
      });
      return this;
     }
    };
    window.$ = function(){
     return new _$(argments);
    }
   }
  })()

 -------------------類分析----------在這光滑地上摩擦----------
  1.該類的每個方法的最後一行都是以return this 結束
  2.這將會用以調用方法的對象傳給調用連上的下一個方法。

 ---------測試用例------------------媽的等了很久，雖然還有好多我不懂的，可是仍是想試試，心裏默默的激動-------

 $(window).addEvent('load',function(){

  $("test-1","test-2").show().setstyle('color','red').addevent("click",function(e){

   $(this).setstyle('color','green');

  })

 })

 -----------fuck ~O^O~  這種方式確實在使用jquery的時候用到--------淡淡的憂傷--，好好學習啊~o~

--------------------------------新章節繼續，雅蠛蝶（6.2 設計一個支持方法調用的javascript庫）-------------------------------------------------------------有木有嚇尿了感受，緊張-----------------------
 常見的大多數javascript庫的特性
  1.事件，添加和刪除事件監聽器，對事件對象進行規範化出
  2.dom：類名管理;樣式管理
  3.ajax:對xmlhttprequest進行規範發處理

 6.3 使用回調從支持鏈式調用的方法獲取數據 -------------》（說實在的感受很實用）
  一個章節老是須要描述的用法和使用場景:
   下面見：zzzZZZ
    1。鏈式調用很適合賦值器方法，可是對於取值方法，咱們但願返回的是數據不是this.
    2.全部須要變通的犯法：使用回調技術來返回所要的數據。（fuck,確實牛逼啊，森森的佩服啊， *@_@* ）
    3.經過例子掩飾總方法
     api1類使用普通的取值器（中斷了調用鏈），

     window.api = window.api || function(){
      var name ="hello word";
      this.setname = function(newname){
       name = newname;
       return this;
      }
      this.getname = function (){
       return name;
      }
     }
     var o = new api;
     console.log(o.getname()); 
     console.log(o.setname("meow").getname());

     高級模式------>回調方式

window.api1= window.api2 || function(){

      var name = "hello word"

      this.setname  =  function(newname){

       name = newname;

       retrun this;

      }

      //重要的步驟

      this.getname = function(callback){

       callback.call(this,name);

       return this;

      }

     }

-------------------------------end 23:40--- 有點疲憊----- (-_-)ZZZ 睡著了啦~~ -------------------------