JavaScript函数式编程学习

最新推荐文章于 2022-10-03 17:57:17 发布
最新推荐文章于 2022-10-03 17:57:17 发布
阅读量1.7k 收藏
点赞数
文章标签： javascript html function 编程 div string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ahwingwu/article/details/6083115
版权

 

原文地址 http://jiarry.bokee.com/6768082.html 

 

对函数式编程了解较少，这些天看了一些文章，逐渐开始理解。其实以前在用的带有这种风格，只是并没有这么彻底，或者说“o，这就是函数式编程”，比如尽量限制变量的作用域到一个比较小的范围，我们再整个类里面不用到什么变量，全是通过函数来相互调用的。

当然对于这种模式或者概念而言，其实是没有特别的定论的。不过函数式编程的确由来已久，而最近两年才开始慢慢地热了起来。可能，原因是这种适合函数式编程的动态语言开始流行了。看一下函数式编程的介绍，如下：

什么是函数编程？
 
在经常被引用的论文 “Why Functional Programming Matters”（请参阅 参考资料） 中，作者 John Hughes 说明了模块化是成功编程的关键，而函数编程可以极大地改进模块化。在函数编程中，编程人员有一个天然框架用来开发更小的、更简单的和更一般化的模块，然后 将它们组合在一起。函数编程的一些基本特点包括：
支持闭包和高阶函数。
支持懒惰计算（lazy evaluation）。
使用递归作为控制流程的机制。
加强了引用透明性

  • 函数式编程概念，包括匿名函数、调用函数的不同方法，以及将函数作为参数传递给其他函数的方式。函数式编程是一种强调表达式的计算而非命令的执行的一种编程风格。表达式是用函数结合基本值构成的，它类似于用参数调用函数。
  • 函数式概念的运用，采用的示例包括：扩展数组排序；动态 HTML 生成的优美代码；系列函数的应用。

这些，JavaScript刚好符合。而JavaScript程序由于没有统一的包定义或者装载模式，脚本量大了时不太好维护，不够模块化。有时一个函数 块包括上百行代码，这对于代码的维护和可读性会是个问题。虽然，面向对象能有效解决了这一点，但是无形间文件似乎多了，代码似乎也增加了。

JavaScript为什么要使用函数式编程的方式呢？既然JavaScipt通过prototype可以完全实现面向对象，那我们为什么要函数式编程 呢？我想有很重要的一点就是，无论怎么说面向对象的设计把一些东西确实搞复杂了，更臃肿庞大了。这对于大型应用来讲是无可厚非的，但是通常 JavaScript我们用来实现的Web应用并不是企业级的，我们需要简单、高效，同时又维护性强，可复用的代码。

函数式JavaScript编程之所以很重要有三条主要的理由：
   1. 它有助于写出模块化和可复用的代码。不用再看到冗长的函数块了。
   2. 它对事件(event)处理程序非常有效。匿名函数发挥了重要作用。
   3. 它很有趣！。或者说很Cool。

今天抽空利用一些函数式编程写了一个程序，作用是拼接HTML字符串，同时给HTML Element加上函数事件。代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
.link{background:#f4ffff;}
.span{background:#f4f4f9;}
.strong{background:#fefaf5;}
</style>
</head>

<body>
    函数调用测试，分别给对象绑定事件和函数
    <div id="div1"></div><br/>
    <div id="div2"></div><br/>
    <div id="div3"></div><br/>
    
<script language="javascript">
<!--
/**
 * @file htmlTemplateTest.js
 * @description 
 * 函数式编程测试，拼接组合HTML字符串并输出，然后分别给HTMLtag编定相关事件
 * 先定义一个数组和组合函数，然后通过数组的实例来调用函数返回字符串
 * @author jarry
 * @date 2008-07-25
 */

/*
 * @description 返回HTML Element对象
 * @param <string> id 对象的id
 * @return 返回HTML对象
 */
function G(id) {
        return document.getElementById(id) || document.all[id];
}

// 测试数组
var StringArrTest = {
     htmlString : ["<a href=/"#/">link</a>", "<span>span</span>", "<strong>strong</strong>"],
     className : ["link", "span", "strong"],
     events : ["mouseover", "mouseout", "click", "dblclick"],
     color : ["fefaf5", "f4f4f9", "F7BC44", "65D6A0"]
}

// 事件与函数对应的对象
var EventsBindFunction = {
    "mouseover" : "onDivOver",
    "mouseout"  : "onDivOut",
    "click"     : "onDivClick",
    "dblclick"  : "onDivDblClick",    
    "color" : StringArrTest.color,
        
    onDivOver : function() {
            window.status = (this.innerHTML + " : onDivOver" );
            this.style.background = "#" + EventsBindFunction["color"][0];
    },
    onDivOut : function() {
            window.status = (this.innerHTML + " : onDivOut");
            this.style.background = "#" + EventsBindFunction["color"][1];
    },
    onDivClick : function() {
            window.status = (this.innerHTML + " : onDivClick");
            this.style.background = "#" + EventsBindFunction["color"][2];
    },
    onDivDblClick : function() {
        window.status = (this.innerHTML + " : onDivDblClick");
        alert(this.innerHTML);
        this.style.background = "#" + EventsBindFunction["color"][3];
    }    
}


var functionAction = function() {
        this.color = StringArrTest.color;        
}


/*
 * @description HTML字符串实例，返回HTML字符串
 * @param <string> elemStr 可以是HTML元素字串
 * @param <int> index 当前序号
 * @return <string> HTML字符串
 */
function templateInstance(elemStr, index) {
  return "<div class=/"" + getClassName(StringArrTest.className, index) + "/">" + elemStr + " " + index + " </div>"  ;
}

/*
 * @description 设置class
 * @param <array> arr 可以是HTML元素字串
 * @param <int> index 序号
 * @return <string> 返回class名称
 */
function getClassName(arr, index) {
    return arr[index];
}

/**
 * @description 给指定对象下的子集加装指定事件
 * @param <element> obj HTML element 对象
 * @param <array> eve 需要绑载的事件数组 
 */
function addEventsForArray(obj, eve) {
    for (var j = 0; j <eve.length; j++ ) {
        
                // 用匿名函数执行作用域
                ( function() {
                        var eves = eve[j];
                        
                        obj["on" + eves] = function() {
                            // 绑定相应函数
                              document.title = eves;
                         }
                         
                     }                     
                 )();
    }
}

/**
 * @description 给指定对象下的子集加装指定事件，且给该事件指定具体行为
 * @param <element> obj HTML element 对象
 * @param <array> arr 需要绑载的事件数组 
 * @param <object> eventFnObject 事件函数对象
 */
function addFnForArray(obj, arr, eventFnObject) {    
    var childDiv = obj.getElementsByTagName("div");
    var eve = arr ;
    var fn = new functionAction();
    //alert(ov.toString());
    for(var i = 0; i < childDiv.length; i++) {
    //循环所有的子对象
            for(var j = 0; j < eve.length; j++) {
    // 循环所有的事件
    
    //匿名函数给每个对象上加装事件
                (                
                    function() {
                    var child   = childDiv[i];
                    var onEvent = eve[j];
                    
                    switch(onEvent) {
                        case onEvent : 
                         child["on" + onEvent] = eventFnObject[ eventFnObject[onEvent] ];
                         // 给该对象的时间挂载指定的函数,eventFnObject里有同名对应的函数
                         // div["onclick"] = eventFnObject["onDivClick"];
                         
                        default      : null;
                    }
                        
                    }
                )();             
         }
     }
}

/**
 * @description 例子1，扩展Array原型fold方法
 * @param <function> templateFn 一个函数对象
 * @return <string> str 返回HTML字符串
 */
Array.prototype.fold = function(templateFn) {
  var len = this.length;
  var str = "";

  for(var i = 0 ; i < len ; i++) {
        str += ( templateFn(this[i], i) );
        // templateFn是传递过来的函数，这个函数数里面可以来组合HTML
    }

  return str;
}

G("div1").innerHTML = (StringArrTest.htmlString.fold(templateInstance));
addFnForArray(G("div1"), StringArrTest.events, EventsBindFunction);
addEventsForArray(G("div1"), StringArrTest.events);
/**
 * @description 例子2，把字符串模板函数作为参数来调用，生成HTML字符串
 * @param <array> arr 数组，组合HTML用
 * @param <function> templateFn 组合HTML用的函数
 * @return <string> str 返回HTML字符串
 */
function genderHTML(arr, templateFn) {
    var len = arr.length;
    var str = "";
    
    for(var i = 0 ; i < len ; i++) {        
        str += ( templateFn(arr[i], i) );
        // 调用生成HTML字符串的函数
        }
    
    return str;
}

G("div2").innerHTML = ( genderHTML(StringArrTest.htmlString, templateInstance) );
addFnForArray(G("div2"), StringArrTest.events, EventsBindFunction);
addEventsForArray(G("div2"), StringArrTest.events);

/**
 * @description 例子3。常见的普通例子，直接返回HTML字符串
 * @param <array> arr 数组，组合HTML用
 * @return <string> str 返回HTML字符串
 */
function getHTML(arr) {
    var len = arr.length;
    var str = "";

    for (var i = 0; i < len; i++) {
      var elemStr = arr[i];
      str += ("<div class=/"" + StringArrTest.className[i] + "/">" + elemStr + " " + i + " </div>" ); 
      // 拼接字符串，会比较长，不采用外调函数的方式
    }
    
    var eve = StringArrTest.events;
    
    for (var j = 0; j <eve.length; j++ ) {
        
                // 用匿名函数执行作用域，跟addEventsForArray一致
                ( function() {
                        var eves = eve[j];
                        
                        G("div3")["on" + eves] = function() {
                            // 绑定相应函数
                              document.title = eves;
                         }
                         
                     }                     
                 )();
    }

    return str;
}


G("div3").innerHTML = (getHTML(StringArrTest.htmlString));
addFnForArray(G("div3"), StringArrTest.events, EventsBindFunction);

//-->
</script>
代码如下：<br/>
<textarea id="code" cols="120" rows="20" style="font-size:12px;background:#ffe">
</textarea>
<script>
(function() {
    var scriptObj = document.getElementsByTagName("script")[0];
    G("code").value = (scriptObj.innerHTML);
}
)();
</script>
参考
http://www.ibm.com/developerworks/cn/web/wa-javascript.html 
http://shiningray.cn/functional_javascript_programming.html 
http://www.javaeye.com/topic/101055?page=1 
http://www.infoq.com/cn/news/2008/03/revoerability-and-testing-oo-fp 
http://www.cnblogs.com/RChen/archive/2007/07/24/829755.html 
</body>
</html>

本次试验主要在函数调用函数以及采用匿名函数挂载事件上，感觉确实有他的好处。采用面向对象实现可能会更复杂，而一般的函数编程会把一个函数搞得很复杂，读起来会比较累。总体感觉是，确实不错的样子。
当然了，在实际开发过程中哦，我还是推崇面向对象的。无论Java、PHP、JavaScript等，面向对象确实让程序变得更简单、更具有复用和可维护 性。但是，毋庸置疑，函数式编程对于OOP将是一个很好的补充。在OOP的大框架里，有时采用一下函数式风格，确实能解决一些问题。 就好象对于事件的处理，如果采用匿名函数来配合，那一切要变得方便的多。

ahwingwu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 函数式编程
weixin_43718291的博客
02-05 106
我认为函数式编程可以理解为，以函数作为主要载体的编程方式，用函数去拆解、抽象一般的表达式 与命令式相比，这样做的好处在哪？主要有以下几点： 语义更加清晰 可复用性更高 可维护性更好 作用域局限，副作用少 基本的函数式编程 // 数组中每个单词，首字母大写 // 一般写法 const arr = ['apple', 'pen', 'apple-pen']; for(const i in ...
JavaScript函数式编程
qq_25757181的博客
09-26 346
如果你需要对外公开自己的出生证明，但是想去掉隐私信息，你有两种选择：把隐私信息涂掉或找一台复印机，复制一份出生证明，然后涂改副本式更好的选择，及处理了出生证明也保障了原件的完好无损。应用中的不可变数据就是这个意思，我们不能直接更改原始的数据结构，而是创建数据结构的副本，所有的操作都使用副本。toString变成了纯函数，传入person做计算，返回一个新的person对象，而不更改传入的参数，因此没有副作用。在采用函数式分割的程序中，数据式不可变的，永不可修改的。纯函数也是函数式编程的核心概念。
javaScript函数式编程
weixin_44283589的博客
09-16 250
函数式编程中的函数指的不是程序中的函数（方法），而是数学中的函数即映射关系，例如：y=sin(x),x和y的关系。面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象，通过封装、继承和多态来演示事物事件的联系。函数式编程的思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）程序的本质：根据输入通过某种运算获得相应的输出，程序开发过程中会涉及很多有输入和输出的函数。相同的输入始终要得到相同的输出（纯函数）函数式编程用来描述数据（函数）之间的映射。
JavaScript学习（九） —— 函数式编程
sonic
02-19 448
函数式编程(Functional Programming)是种编程范式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。
javascript指南和函数式编程
01-17
而《JavaScript函数式.zip》可能是一份关于JavaScript函数式编程的资料集合，函数式编程是一种编程范式，强调使用函数和避免改变状态。其中可能涵盖以下知识点： 1. **纯函数**：理解纯函数的定义，即给定相同的...
javascript函数式编程
11-22
对于已经熟悉Java的开发者来说，学习JavaScript函数式编程不仅可以拓宽视野，也有助于提升在前端开发领域的专业技能。阅读相关书籍，例如"javascript函数式编程"，将帮助你更好地掌握这些概念并应用于实际项目中。
JS函数式编程指南
03-15
函数式编程的大门，让函数式编程变得理所当然！
《JS 函数式编程指南》中文版
10-08
这本书的主题是函数范式（functional paradigm），我们将使用 JavaScript 这个世界上最流行的函数式编程语言来讲述这一主题。有人可能会觉得选择 JavaScript 并不明智，因为当前的主流观点认为它是一门命令式（imperative）的语言，并不适合用来讲函数式。但我认为，这是学习函数式编程的最好方式
JavaScript函数式编程.pdf
04-09
JavaScript函数式编程.pdf 个人收集电子书，仅用学习使用，不可用于商业用途，如有版权问题，请联系删除！
javascript函数式编程 underscore.js
01-17
JavaScript函数式编程是一种编程范式，它强调使用函数来组织代码，将计算视为一系列惰性求值的操作。Underscore.js是一个轻量级的JavaScript实用库，它为开发者提供了大量函数式编程工具，使得在JavaScript中实践...
js函数式编程讲解
hellocoder2029的博客
10-03 994
是一种编程范型，它将电脑运算视为数学上的函数计算，并且避免使用程序状态以及易变对象。函数式编程更加强调程序执行的结果而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而不是设计一个复杂的执行过程。函数式编程的思维过程是完全不同的，它的着眼点是函数，而不是过程，它强调的是如何通过函数的组合变换去解决问题，而不是我通过写什么样的语句去解决问题。
简明 JavaScript 函数式编程-入门篇
油墨香^-^的博客
06-23 373
写在开头 本文较长，总共分为三大部分：(对于函数式编程以及其优点有一定理解的童鞋，可以直接从 第二部分 开始阅读) 第一部分：首先会通过实际代码介绍一下什么是函数式编程以及使用它的意义。 第二部分：我会着重介绍一下函数式编程中最重要的两个方法：柯里化和函数组合，以及他们的使用方法和实践经验。 第三部分：实战篇，主要是通过一个实战让大家对这种编程范式有一个更深刻的理解。 最后会总结一下函数式编程的优点和局限，并给出一些建议。 什么是函数式编程 早在 1950 年代，随着 Lisp 语言的创建，函
JavaScript 函数式编程精要 —— 签约作者安东尼知识分享
最新发布
10-13
资源JavaScript 函数式编程精要 —— 签约作者安东尼知识分享

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值