快捷導(dǎo)航

JavaScript鏈?zhǔn)秸{(diào)用實(shí)例淺析

更新時(shí)間：2018年12月19日 11:33:23 作者：huansky

這篇文章主要介紹了JavaScript鏈?zhǔn)秸{(diào)用,結(jié)合實(shí)例形式分析了javascript鏈?zhǔn)秸{(diào)用的相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例分析了JavaScript鏈?zhǔn)秸{(diào)用。分享給大家供大家參考，具體如下：

對(duì)$函數(shù)你已經(jīng)很熟悉了。它通常返回一個(gè)html元素或一個(gè)html元素的集合，如下：

function$(){
  var elements = [];
  for(vari=0,len=arguments.length;i<len;++i){
     var element = arguments[i];
     if(typeof element ===”string”){
       element = document.getElementById(element);
     }
     if(arguments.length==1){
        return element;
      }
      elements.push(element);
  }
   return elements;
}

但是，如果把這個(gè)函數(shù)改造為一個(gè)構(gòu)造器，把那些元素作為數(shù)組保存在一個(gè)實(shí)例屬性中，并讓所有定義在構(gòu)造器函數(shù)的prototype屬性所指對(duì)象中的方法都返回用以調(diào)用方法的那個(gè)實(shí)例的引用，那么它就具有了鏈?zhǔn)秸{(diào)用的能力。我首先需要把這個(gè)$函數(shù)改為一個(gè)工廠方法，它負(fù)責(zé)創(chuàng)建支持鏈?zhǔn)秸{(diào)用的對(duì)象。這個(gè)函數(shù)應(yīng)該能接受元素?cái)?shù)組形式的參數(shù)，以便我們能夠使用與原來(lái)一樣的公用接口。

(function(){
  //use private class
   function _$(els){
    this.elements = [];
     for(vari=0,len=els.length;i<len;i++){
      var element = els[i];
       if(typeof element ===”string”){
        element = document.getElementById(element);
       }
       this.elements.push(element)
     }
   }
    //The public interface remains the same.
    window.$ = function(){
       return new _$(arguments);
    }
})();

由于所有對(duì)象都會(huì)繼承其原型對(duì)象的屬性和方法，所以我們可以讓定義在原型對(duì)象中的那幾個(gè)方法都返回用以調(diào)用方法的實(shí)例對(duì)象的引用，這樣就可以對(duì)那些方法進(jìn)行鏈?zhǔn)秸{(diào)用。想好這一點(diǎn)，我們現(xiàn)在就動(dòng)手在_$這個(gè)私用構(gòu)造函數(shù)的prototype對(duì)象中添加方法，以便實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用

(function(){
  //use private class
  function _$(els){
    //..省略之前上面的代碼
  }
  _$.prototype = {
    each:function(fn){
      for(var i=0,len=this.elements.length;i<len;i++){
        fn.call(this,this.elements[i]);
      }
      return this;
    },
    show:function(prop,val){
      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;
    }
  };
  //The public interface remains the same.
  window.$ = function(){
    return new _$(arguments);
  }
})();

但是如果某個(gè)庫(kù)或者框架已經(jīng)定義了一個(gè)$函數(shù)，那么我們的這個(gè)庫(kù)會(huì)將其改寫，有個(gè)簡(jiǎn)單的辦法是在源碼中為$函數(shù)另去一個(gè)名字。但是如果你是從一個(gè)現(xiàn)有的庫(kù)獲得的源碼，那么每次代碼庫(kù)獲取更新的版本后你都得重新改名字，因此這個(gè)方案并不是很好。好的解決辦法就是像下面一樣添加一個(gè)安裝器：

window.installHelper = function(scope, interface) {
  scope[interface] = function() {
   return new _$(arguments);
  }
 };

用戶可以這樣去使用：

installHelper(window, '$');
$('example').show();

下面是一個(gè)更復(fù)雜的例子，它展示了如何把這種功能添加到一個(gè)事先定義好的命名對(duì)象中：

// Define a namespace without overwriting it if it already exists.
window.com = window.com || {};
com.example = com.example || {};
com.example.util = com.example.util || {};
installHelper(com.example.util, 'get');
(function() {
 var get = com.example.util.get;
 get('example').addEvent('click', function(e) {
  get(this).addClass('hello');
 });
})();

有時(shí)候把方法連起來(lái)并不是一個(gè)好主意。鏈?zhǔn)秸{(diào)用很適合于賦值器方法，但對(duì)于取值器的方法，你可能會(huì)希望他們返回你要的數(shù)據(jù)而不是返回this。不過(guò)，如果你把鏈?zhǔn)秸{(diào)用作為首要目標(biāo)，希望所有方法的使用方式保持一致的話，那么變通的方法還是有的：你可以利用回調(diào)技術(shù)來(lái)返回所要的數(shù)據(jù)下面有兩個(gè)例子：其中API類使用了普通的取值器（它中斷了調(diào)用鏈），而API2類則使用了回調(diào)方法：

// Accessor without function callbacks: returning requested data in accessors.
window.API = window.API || {};
API.prototype = function() {
 var name = 'Hello world';
 // Privileged mutator method.
 setName: function(newName) {
  name = newName;
  return this;
 },
 // Privileged accessor method.
 getName: function() {
  return name;
 }
}();
// Implementation code.
var o = new API;
console.log(o.getName()); // Displays 'Hello world'.
console.log(o.setName('Meow').getName()); // Displays 'Meow'.
// Accessor with function callbacks.
window.API2 = window.API2 || {};
API2.prototype = function() {
 var name = 'Hello world';
 // Privileged mutator method.
 setName: function(newName) {
  name = newName;
  return this;
 },
 // Privileged accessor method.
 //通過(guò)把函數(shù)作為參數(shù)傳入
 getName: function(callback) {
  callback.call(this, name);
  return this;
 }
}();
// Implementation code.
var o2 = new API2;
o2.getName(console.log).setName('Meow').getName(console.log);
// Displays 'Hello world' and then 'Meow'.

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript常用函數(shù)技巧匯總》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: