JavaScript语言多编程范式简介
和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。
JS支持3种编程范式:命令式、面向对象和函数式。
命令式(Imperative JavaScript)
命令式就是简单的从上而下完成任务,流水账过程式编码风格:
function task(nums) { var i, sum=0, squares = []; for (i=0; i<nums.length; i++) { squares.push(nums[i]*nums[i]); } for (i=0; i<squares.length; i++) { sum += squares[i]; } return sum; } console.log(task([2,4,6])); // 56
这样编写代码比较简单,但是存在一些明显的问题,比如可能的命名冲突、变量冗余,复用性差、函数名描述性差等。
面向对象(Object-Oriented JavaScript)
面向对象的核心思想是把任务抽象成一个(或一组)对象的数据和操作,在C++语言中,这些抽象出来的对象可以便于接口或实现的复用(继承)以及访问控制,在JS中由于没有接口的概念,只能是函数实现的复用。
(function() { "use strict"; var Task = function(nums) { this.nums = nums; }; Task.prototype.square = function() { var squares = []; for (var i=0; i<this.nums.length; i++) { squares.push(this.nums[i]*this.nums[i]); } return squares; }; Task.prototype.sum = function(arr) { var res = 0; for (var i=0; i<arr.length; i++) { res += arr[i]; } return res; }; var t = new Task([2,4,6]); console.log(t.sum(t.square())); //56 }()); // self call with brackets
上面的代码创建了一个Task对象,包含公开属性nums,并通过原型定义了2个方法:square和sum,可以在多个对象之间共享,这样将节约内存。另外代码被包含在一个IIAF(immediately-invoked function expression)中,而不再是全局的。除了更符合OO的思维方式外,似乎代码并没有变得更为简洁。
函数式(Functional JavaScript)
const task = (nums) => nums.map( (x) => x * x ).reduce( (acc, c) => acc + c, 0); console.log(task([2, 4, 6])); //56
可以看到,通过数组对象的内置原型方法map和reduce,大大简化了代码,并且如果熟悉了这种风格,其代码的自描述性也很棒。
map和reduce都是高阶函数(能接受函数作为参数,也能返回函数对象)。map函数用来把一组数据依次变换成另外一组数据,而reduce用来汇总数据,下图是对这两个关键函数有趣而直白的描述:
小结一下:命令式编程是最基础的方式,面向对象的方式适合对现实世界进行抽象封装以及实现访问控制,函数式能最大程度的精简代码且适用于并行计算,而纯净函数(pure function)具有很好的移植性。
你可以自己在线试试看。
最新评论
- 相关文章
WebGL场景中多相机拍摄的原理和意义
一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
3D相机渲染的基本原理是依靠颜色...Blender2.7给平面模型添加纹理贴图
在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...
WebGL、Asm.js和WebAssembly概念简介
随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
Web界面编程状态变化和JS开发框架(React/Angular/Ember)
UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...
CSS3弹性布局弹性流(flex-flow)属性详解和实例
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
深度贴图(depth map)概念简介和生成流程
Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...
纹理基础知识和过滤模式详解
1、 为什么在纹理采样时需要texture filter(纹理过滤)。
我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...D3.js读取外部json数据
D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...