使用JavaScript框架和库过程中, 我遇到过很多感觉上'奇形怪状'的代码. 大多数情况下, 按照惯例编写代码也能够写出很多出色的功能. 但是如果不从根本上理解它们实现的方法, 就没办法完全充分发挥出它们的全部优点.

以下是我阅读 JavaScript设计模式(Ross Harmes和Dustin Diaz合著) 后的理解:

Getting Started

JavaScript是一门非常灵活的语言, 完成同一个任务的编程模式可能有很多种. 例如, 我想要编写一个启动/停止的动画:

  1. 普通的过程式编程

    function startAnimation() {...};
    function stopAnimation() {...};
  2. 通过定义一个类

    var Anim = function() {...};
    
    //把两个方法定义在原型对象中
    Anim.prototype.start = function() {...};
    Anim.prototype.stop = function() {...}; var myAnim = new Anim();
    myAnim.start();
    myAnim.stop();

    或者, 用字面量对象创建类

    var Anim = function() {...};
    
    Anim.prototype = {
    start: function() {...},
    stop: function() {...},
    };

    tips: 虽然这两种方法看起来很类似, 实质上有不小的差异.

    造成差异的原因是, 每个构造函数的prototype属性默认指向一个原型对象. 原型对象包含一个constructor属性, 这个属性指向它的构造函数.

    而字面量式相当于手动创建了一个新的对象, 然后把新对象赋值给了prototype属性. 由于这个新对象是人为定义的, 也没有手动给它定义constructor属性. 所以造成了第二种方式的原型对象的constructor属性没有指向它的构造函数, 而指向了Object, 这显然不是我们想要的.

  3. 更加'面向对象'的方式

    //在JavaScript中你可以很轻易地
    //在原生的Function类中定义一个辅助函数
    Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
    }; var Anim = function() {...};
    Anim.method( 'start', function() {...} );
    Anim.method( 'stop', function() {...} );

    简略修改一下以上的代码, 你甚至可以链式调用方法! (在jQuery中被大量应用的技巧)

    只需要在辅助函数中返回 this:

    Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
    return this;
    }; var Anim = function() {...};
    Anim.method( 'start', function() {...} )
    .method( 'stop', function() {...} );

JavaScript设计模式(一)的更多相关文章

  1. 《JavaScript设计模式 张》整理

    最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...

  2. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  3. Javascript设计模式学习一

    学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态 多态的思想:实际上是把“做什么”和“谁去做”分离开来.例 ...

  4. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  5. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  6. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  7. 常用的Javascript设计模式

    <parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...

  8. Javascript设计模式(摘译)

    说明: 未完成...更新中.... 一.javascipt设计模式分类 设计模式分类有很多标准,最流行的三种如下 1)  creational  --  主要关注对象创建 Creational des ...

  9. JavaScript设计模式学习笔记

    1 JavaScript设计模式深入分析 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量. 特权属性和方法:创建属 ...

  10. JavaScript设计模式:读书笔记(未完)

    该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...

随机推荐

  1. Max Sub-matrix

    Max Sub-matrix 教练找的题目,目前样列过了 题意:找子矩阵的最大周长 思路:先离散每列,再枚举列(n*n),在当前枚举的两列之间求每行的和(n*n*n),但是开两个数组,一个包含两列上的 ...

  2. uvalive 4795 Paperweight

    题意:给出一个5个顶点的多面体以及多面体内一点P.求让 多面体不同的方式(即以不同的面)放在地面上,设这个着地的面为A,多面体重心在A上的投影为B,在保证B在A内部且距离A的各个边界不小于0.2的前提 ...

  3. 恒天云技术分享系列3 – KVM性能调优

    恒天云技术分享:http://www.hengtianyun.com/download-show-id-11.html KVM是什么 KVM 是 kernel-based Virtual Machin ...

  4. HDU-4691 Front compression 后缀数组

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4691 后缀数组模板题,求出Height数组后,对Height做RMQ,然后直接统计就可以了... // ...

  5. Java之ByteArrayInputStream和ByteArrayOutputStream-操作字节数组的类

    ByteArrayInputStream和ByteArrayOutputStream 源:内存中的字节数组 目的:内存中的字节数组 这两个流对象不涉及底层资源的调用,操作的都是内存中的数组,所以不需要 ...

  6. Java自定义缓冲区MyBufferedReader

    package IODemo; import java.io.FileReader; import java.io.IOException; import java.io.Reader; /** * ...

  7. 剑指OFFER之复杂链表的复制(九度OJ1524)

    题目描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点). 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每个测试案例,输入的第一 ...

  8. Java的位运算符实例——与(&)、非(~)、或(|)、异或(^)

    一.Java的位运算符实例——与(&).非(~).或(|).异或(^) 1.与(&) 0 & 2 = 0 0 0 0 0 1 0 0 1 0 2.非(~) ~0 = 7 0 0 ...

  9. SAP PP 生产订单变更记录保存

    *&---------------------------------------------------------------------* *& 包括 ZXCO1U01 *&am ...

  10. java.lang.UnsupportedClassVersionError: Bad version number in .class file 解决办法

    java.lang.UnsupportedClassVersionError: Bad version number in .class file 造成这种错误的原因是支撑Tomcat运行的JDK版本 ...