javascript的函数式编程方法

silencezwm 发布于2019-08-21 17:41 / 1919人阅读

jQuery是一个Internal DSL的典型的例子，ds.js也是使用函数式编程的风格。
链式方法调用 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();

创建一个$函数：
html:

调用方法：
$("head","contents").show().addEvent("click", function(){alert(1)})
封装方法如下：

(function(){
  function _$(els){
    this.elements = [];//把那些元素作为数组保存在一个实例属性中，
    for(var i= 0, len=els.length; i
模拟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");
});

GPU云服务器云服务器 javascript函数式编程函数式编程函数式编程指针函数式编程语言?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89867.html

SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

摘要：函数式编程，一看这个词，简直就是学院派的典范。所以这期周刊，我们就重点引入的函数式编程，浅入浅出，一窥函数式编程的思想，可能让你对编程语言的理解更加融会贯通一些。但从根本上来说，函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程（Functional Programming），一...

csRyan 2019-08-22 10:50 评论0 收藏0
翻译连载 | 附录 C：函数式编程函数库－《JavaScript轻量级函数式编程》 |《你不知道的J

摘要：为了尽可能提升互通性，已经成为函数式编程库遵循的实际标准。与轻量级函数式编程的概念相反，它以火力全开的姿态进军的函数式编程世界。原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者关于译者：这是一个流淌着沪江血液的纯粹工程：认真，是 HTML 最坚实的梁柱；分享，是 CSS 里最闪耀的一瞥；总结，...

Miracle 2019-08-22 13:40 评论0 收藏0
用函数式编程对JavaScript进行断舍离

摘要：函数式编程一开始我并不理解。渐渐地，我熟练掌握了使用函数式的方法去编程。但是自从学习了函数式编程，我将循环都改成了使用和来实现。只有数据和函数，而且因为函数没有和对象绑定，更加容易复用。在函数式的中，这些问题不复存在。译者按: 当从业20的JavaScript老司机学会函数式编程时，他扔掉了90%的特性，也不用面向对象了，最后发现了真爱啊！！！原文: How I rediscov...

dkzwm 2019-08-21 16:48 评论0 收藏0
翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 第 1 章：

摘要：所以我觉得函数式编程领域更像学者的领域。函数式编程的原则是完善的，经过了深入的研究和审查，并且可以被验证。函数式编程是编写可读代码的最有效工具之一可能还有其他。我知道很多函数式编程编程者会认为形式主义本身有助于学习。原文地址：Functional-Light-JS 原文作者：Kyle Simpson　－　《You-Dont-Know-JS》作者关于译者：这是一个流淌着沪江血液...

omgdog 2019-08-20 19:03 评论0 收藏0
JavaScript 函数式编程（一）

摘要：函数式编程的哲学就是假定副作用是造成不正当行为的主要原因。函数组合面向对象通常被比喻为名词，而函数式编程是动词。尾递归优化函数式编程语言中因为不可变数据结构的原因，没办法实现循环。零、前言说到函数式编程，想必各位或多或少都有所耳闻，然而对于函数式的内涵和本质可能又有些说不清楚。所以本文希望针对工程师，从应用（而非学术）的角度将函数式编程相关思想和实践（以 JavaScript 为...

hoohack 2019-08-23 10:58 评论0 收藏0
JavaScript 函数式编程导论

摘要：函数式编程导论从属于笔者的前端入门与工程实践。函数式编程即是在软件开发的工程中避免使用共享状态可变状态以及副作用。 JavaScript 函数式编程导论从属于笔者的Web 前端入门与工程实践。本文很多地方是讲解函数式编程的优势，就笔者个人而言是认可函数式编程具有一定的好处，但是不推崇彻底的函数式编程化，特别是对于复杂应用逻辑的开发。笔者在应用的状态管理工具中就更倾向于使用MobX而不是...

forrest23 2019-08-20 13:38 评论0 收藏0