javascript的函數(shù)式編程方法

silencezwm 發(fā)布于2019-08-21 17:41 / 1771人閱讀

jQuery是一個Internal DSL的典型的例子，ds.js也是使用函數(shù)式編程的風(fēng)格。
鏈?zhǔn)椒椒ㄕ{(diào)用 eg:$(".mydiv").addClass("flash").draggable().css("color", "blue")

一個簡單的列子：

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();

創(chuàng)建一個$函數(shù)：
html:

調(diào)用方法：
$("head","contents").show().addEvent("click", function(){alert(1)})
封裝方法如下：

(function(){
  function _$(els){
    this.elements = [];//把那些元素作為數(shù)組保存在一個實例屬性中，
    for(var i= 0, len=els.length; i
模擬jquery底層鏈?zhǔn)骄幊蹋?/p>
// 塊級作用域
//特點(diǎn)1 程序啟動的時候 里面的代碼直接執(zhí)行了
//特點(diǎn)2 內(nèi)部的成員變量 外部無法去訪問 （除了不加var修飾的變量）
 
(function(window , undefined){
  // $ 最常用的對象 返回給外界 大型程序開發(fā) 一般使用"_"作為私用的對象(規(guī)范)
  function _$(arguments){
    //實現(xiàn)代碼...這里僅實現(xiàn)ID選擇器
    // 正則表達(dá)式匹配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類上擴(kuò)展一個可以實現(xiàn)鏈?zhǔn)骄幊痰姆椒?  Function.prototype.method = function(methodName , fn){
    this.prototype[methodName] = fn ;
    return this ; //鏈?zhǔn)骄幊痰年P(guān)鍵
  }
 
  // 在_$的原型對象上 加一些公共的方法
  _$.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 上先注冊一個全局變量 與外界產(chǎn)生關(guān)系
  window.$ = _$ ;
  // 寫一個準(zhǔn)備的方法
  _$.onReady = function(fn){ 
    // 1 實例化出來_$對象 真正的注冊到window上
    window.$ = function(){
      return new _$(arguments);
    };
    // 2 執(zhí)行傳入進(jìn)來的代碼
    fn();
    // 3 實現(xiàn)鏈?zhǔn)骄幊?    _$.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("我被點(diǎn)擊了!");
  }).setStyle("backgroundColor" , "red");
});