JavaScript语言多编程范式简介

iefreer 发表于 2017-01-04 18:58:03

标签: 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用来汇总数据,下图是对这两个关键函数有趣而直白的描述:

what-is-map-reduce.png

小结一下:命令式编程是最基础的方式,面向对象的方式适合对现实世界进行抽象封装以及实现访问控制,函数式能最大程度的精简代码且适用于并行计算,而纯净函数(pure function)具有很好的移植性。

你可以自己在线试试看

possitive(1) negative(0) views209 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • NodeJS、Java和PHP性能考量和若干参考结论

    首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...

  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...

  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

  • WebVR简介和常用资源链接

    什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

    3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...

  • WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

    在教程2中,我们已经讲述了计算机图形处理硬件结构和流水线。在本文中,我们将开始讲述WebGL的具体应用程序编程接口(API)。WebGL应用程序编程步骤分为以下几步:
    创建一个canvas元素从canvas中获取webgl渲染...

  • WebGL入门教程2 - GPU基本概念和工作流水线

    在教程1中,我们已经讲述了基础的3D图形知识,接下来我们了解具体的硬件结构、GPU基本概念。计算机图形硬件结构如前所述,WebGL能利用硬件加速来完成绘图,计算...

  • Three.js 开发基础知识 - 绘制3D对象

    Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...

  • 如何使用CSS3实现一个平滑的3D文本标题

    要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...

  • 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • 更多...