javascript的函數式編程方法

jQuery是一個Internal DSL的典型的例子,ds.js也是使用函數式編程的風格。
鏈式方法調用 eg:$('.mydiv').addClass('flash').draggable().css('color', 'blue')css

一個簡單的列子:html

Func = (function() {
    this.add = function(){
        console.log('1');
        return this;
    };
    this.result = function(){
        console.log('2');
        return this;
    };
    return this;
});
var func = new Func();
func.add().result();

建立一個$函數:
html:
<div id="head"></div>
<div id="contents"></div>
調用方法:
$('head','contents').show().addEvent('click', function(){alert(1)})
封裝方法以下:node

(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);
    }
  }
 
  _$.prototype = {
    each: function(fn){
      for(var i= 0,len=this.elements.length; i<len; i++){
        fn.call(this, this.elements[i]);
      }
      return this; //在每一個方法的最後return this;
    },
    setStyle: function(prop, val){
      this.each(function(el){
        el.style[prop] = val;
      });
      return this; //在每一個方法的最後return this;
    },
    show: function(){
      var that = this;
      this.each(function(el){
        that.setStyle('display', 'block');
      });
      return this; //在每一個方法的最後return this;
    },
    addEvent: function(type, fn){
      var add = function(el){
        if(window.addEventListener){
          el.addEventListener(type, fn, false);
        }else if(window.attachEvent){
          el.addEvent('on'+type, fn);
        }
      };
      this.each(function(el){
        add(el);
      });
      return this; //在每一個方法的最後return this;
    }
  }
  window.$ = function(){
    return new _$(arguments);
  }
})();

模擬jquery底層鏈式編程:jquery

// 塊級做用域
//特色1 程序啓動的時候 裏面的代碼直接執行了
//特色2 內部的成員變量 外部沒法去訪問 (除了不加var修飾的變量)
 
(function(window , undefined){
  // $ 最經常使用的對象 返回給外界 大型程序開發 通常使用'_'做爲私用的對象(規範)
  function _$(arguments){
    //實現代碼...這裏僅實現ID選擇器
    // 正則表達式匹配id選擇器
    var idselector = /#\w+/ ;
    this.dom ;   // 此屬性 接受所獲得的元素
    // 若是匹配成功 則接受dom元素  arguments[0] = '#inp'
    if(idselector.test(arguments[0])){
      this.dom = document.getElementById(arguments[0].substring(1));
    } else {
      throw new Error(' arguments is error !');
    }
  };
 
  // 在Function類上擴展一個能夠實現鏈式編程的方法
  Function.prototype.method = function(methodName , fn){
    this.prototype[methodName] = fn ;
    return this ; //鏈式編程的關鍵
  }
 
  // 在_$的原型對象上 加一些公共的方法
  _$.prototype = {
    constructor : _$ ,
    addEvent:function(type,fn){
      // 給你的獲得的元素 註冊事件
      if(window.addEventListener){// FF 
        this.dom.addEventListener(type , fn);
      } else if (window.attachEvent){// IE
        this.dom.attachEvent('on'+type , fn);
      }
      return this ; 
    },
    setStyle:function(prop , val){
      this.dom.style[prop] = val ;
      return this ;
    }
  };
 
 
   // window 上先註冊一個全局變量 與外界產生關係
  window.$ = _$ ;
  // 寫一個準備的方法
  _$.onReady = function(fn){ 
    // 1 實例化出來_$對象 真正的註冊到window上
    window.$ = function(){
      return new _$(arguments);
    };
    // 2 執行傳入進來的代碼
    fn();
    // 3 實現鏈式編程
    _$.method('addEvent',function(){
      // nothing to do
    }).method('setStyle',function(){
      // nothing to do
    });
 
  };
 
})(window); // 程序的入口 window傳入做用域中
 
 
$.onReady(function(){
  var inp = $('#inp');
  //alert(inp.dom.nodeName);
  //alert($('#inp'));
  inp.addEvent('click',function(){
    alert('我被點擊了!');
  }).setStyle('backgroundColor' , 'red');
});
相關文章
相關標籤/搜索