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

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

jQuery是一個Internal DSL的典型的例子，ds.js也是使用函數(shù)式編程的風格。
鏈式方法調(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底層鏈式編程：
// 塊級作用域
//特點1 程序啟動的時候 里面的代碼直接執(zhí)行了
//特點2 內(nèi)部的成員變量 外部無法去訪問 （除了不加var修飾的變量）
 
(function(window , undefined){
  // $ 最常用的對象 返回給外界 大型程序開發(fā) 一般使用"_"作為私用的對象(規(guī)范)
  function _$(arguments){
    //實現(xiàn)代碼...這里僅實現(xiàn)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類上擴展一個可以實現(xiàn)鏈式編程的方法
  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 上先注冊一個全局變量 與外界產(chǎn)生關系
  window.$ = _$ ;
  // 寫一個準備的方法
  _$.onReady = function(fn){ 
    // 1 實例化出來_$對象 真正的注冊到window上
    window.$ = function(){
      return new _$(arguments);
    };
    // 2 執(zhí)行傳入進來的代碼
    fn();
    // 3 實現(xià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("我被點擊了!");
  }).setStyle("backgroundColor" , "red");
});

云服務器 GPU云服務器 javascript函數(shù)式編程函數(shù)式編程函數(shù)式編程指針函數(shù)式編程語言?

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/89867.html

SegmentFault 技術周刊 Vol.16 - 淺入淺出 JavaScript 函數(shù)式編程

摘要：函數(shù)式編程，一看這個詞，簡直就是學院派的典范。所以這期周刊，我們就重點引入的函數(shù)式編程，淺入淺出，一窺函數(shù)式編程的思想，可能讓你對編程語言的理解更加融會貫通一些。但從根本上來說，函數(shù)式編程就是關于如使用通用的可復用函數(shù)進行組合編程。 showImg(https://segmentfault.com/img/bVGQuc); 函數(shù)式編程（Functional Programming），一...

csRyan 2019-08-22 10:50 評論0 收藏0
翻譯連載 | 附錄 C：函數(shù)式編程函數(shù)庫－《JavaScript輕量級函數(shù)式編程》 |《你不知道的J

摘要：為了盡可能提升互通性，已經(jīng)成為函數(shù)式編程庫遵循的實際標準。與輕量級函數(shù)式編程的概念相反，它以火力全開的姿態(tài)進軍的函數(shù)式編程世界。原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者關于譯者：這是一個流淌著滬江血液的純粹工程：認真，是 HTML 最堅實的梁柱；分享，是 CSS 里最閃耀的一瞥；總結，...

Miracle 2019-08-22 13:40 評論0 收藏0
用函數(shù)式編程對JavaScript進行斷舍離

摘要：函數(shù)式編程一開始我并不理解。漸漸地，我熟練掌握了使用函數(shù)式的方法去編程。但是自從學習了函數(shù)式編程，我將循環(huán)都改成了使用和來實現(xiàn)。只有數(shù)據(jù)和函數(shù)，而且因為函數(shù)沒有和對象綁定，更加容易復用。在函數(shù)式的中，這些問題不復存在。譯者按: 當從業(yè)20的JavaScript老司機學會函數(shù)式編程時，他扔掉了90%的特性，也不用面向?qū)ο罅耍詈蟀l(fā)現(xiàn)了真愛?。。。? 原文: How I rediscov...

dkzwm 2019-08-21 16:48 評論0 收藏0
翻譯連載 |《你不知道的JS》姊妹篇 |《JavaScript 輕量級函數(shù)式編程》- 第 1 章：

摘要：所以我覺得函數(shù)式編程領域更像學者的領域。函數(shù)式編程的原則是完善的，經(jīng)過了深入的研究和審查，并且可以被驗證。函數(shù)式編程是編寫可讀代碼的最有效工具之一可能還有其他。我知道很多函數(shù)式編程編程者會認為形式主義本身有助于學習。原文地址：Functional-Light-JS 原文作者：Kyle Simpson?。　禮ou-Dont-Know-JS》作者關于譯者：這是一個流淌著滬江血液...

omgdog 2019-08-20 19:03 評論0 收藏0
JavaScript 函數(shù)式編程（一）

摘要：函數(shù)式編程的哲學就是假定副作用是造成不正當行為的主要原因。函數(shù)組合面向?qū)ο笸ǔ１槐扔鳛槊~，而函數(shù)式編程是動詞。尾遞歸優(yōu)化函數(shù)式編程語言中因為不可變數(shù)據(jù)結構的原因，沒辦法實現(xiàn)循環(huán)。零、前言說到函數(shù)式編程，想必各位或多或少都有所耳聞，然而對于函數(shù)式的內(nèi)涵和本質(zhì)可能又有些說不清楚。所以本文希望針對工程師，從應用（而非學術）的角度將函數(shù)式編程相關思想和實踐（以 JavaScript 為...

hoohack 2019-08-23 10:58 評論0 收藏0
JavaScript 函數(shù)式編程導論

摘要：函數(shù)式編程導論從屬于筆者的前端入門與工程實踐。函數(shù)式編程即是在軟件開發(fā)的工程中避免使用共享狀態(tài)可變狀態(tài)以及副作用。 JavaScript 函數(shù)式編程導論從屬于筆者的Web 前端入門與工程實踐。本文很多地方是講解函數(shù)式編程的優(yōu)勢，就筆者個人而言是認可函數(shù)式編程具有一定的好處，但是不推崇徹底的函數(shù)式編程化，特別是對于復雜應用邏輯的開發(fā)。筆者在應用的狀態(tài)管理工具中就更傾向于使用MobX而不是...

forrest23 2019-08-20 13:38 評論0 收藏0