JavaScript设计模式(一)

时间:2023-03-09 19:06:15
JavaScript设计模式(一)

使用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() {...} );