JavaScript 设计模式实践指南

需积分: 7 76 浏览量更新于2024-07-19 收藏 2.37MB PDF 举报

学用 JavaScript 设计模式设计模式是软件设计中的一种可重用的解决方案，可以让开发者站在巨人的肩膀上，获得前人所有的经验，并保证以优雅的方式组织代码，满足解决问题所需要的条件。设计模式同样也为我们描述问题提供了通用的词汇，这比我们通过代码来向别人传达语法和语义性的描述更为方便。在 JavaScript 编程语言中，设计模式可以分为经典设计模式和现代设计模式两类。经典设计模式包括 Singleton 模式、Factory 模式、Observer 模式等，这些模式已经被广泛应用于软件开发中。现代设计模式则包括 Module 模式、Revealing Module 模式、Mixin 模式等，这些模式是最近几年来发展起来的，旨在解决现代软件开发中遇到的问题。设计模式的重要性在于，它可以让我们编写出更加优雅、结构性和组织性的代码，并提高代码的可读性和可维护性。此外，设计模式还可以帮助我们避免常见的编程错误，提高开发效率和代码质量。本书的目标读者是那些期望提高自己在设计模式方面的知识并将它们应用到 JavaScript 编程语言中的专业开发者。为了帮助读者更好地理解设计模式，本书还提供了一些相关的概念和技术，包括闭包、原型继承等。在本书中，我们将阐述 JavaScript 编程语言中经典和现代的设计模式，并提供了一些实践经验和例子，以帮助读者更好地理解和应用设计模式。同时，我们还提供了一些推荐书目清单，供读者继续学习和深入了解设计模式。在编写本书时，我们还收到了许多技术审核人员的帮助，他们提供了宝贵的建议和反馈，我们对他们表示最大的感谢。同时，我们也感谢所有来自社区的人士，他们的知识和热情简直令人惊异。设计模式是软件设计中的一种非常重要的概念，它可以帮助我们编写出更加优雅、结构性和组织性的代码，并提高代码的可读性和可维护性。本书旨在帮助读者更好地理解和应用设计模式，以提高他们在软件开发中的竞争力。

创建一个全局访问的单例实例 (通常通过 MySingleton.getInstance()) 因为我们不能(至少在静态语言中) 直接调用 new MySingleton() 创建实例. 这

在JavaScript语言中是不可能的.

在四人帮(GoF)的书里面，单例模式的应用描述如下：

每个类只有一个实例，这个实例必须通过一个广为人知的接口，来被客户访问。

子类如果要扩展这个唯一的实例，客户可以不用修改代码就能使用这个扩展后的实例。

关于第二点，可以参考如下的实例，我们需要这样编码:

在这里，getInstance 有点类似于工厂方法，我们不需要去更新每个访问单例的代码。FooSingleton可以是BasicSinglton的子类，并且实现了相同的

接口。

为什么对于单例模式来讲，延迟执行执行这么重要？

在c++代码中，单例模式将不可预知的动态初始化顺序问题隔离掉，将控制权返回给程序员。

区分类的静态实例和单例模式很重要：尽管单例模式可以被实现成一个静态实例，但是单例可以懒构造，在真正用到之前，单例模式不需要分配资源或

者内存。

如果我们有个静态对象可以被直接初始化，我们需要保证代码总是以同样的顺序执行（例如汽车需要轮胎先初始化）当你有很多源文件的时候，这种

方式没有可扩展性。

单例模式和静态对象都很有用，但是不能滥用-同样的我们也不能滥用其它模式。

在实践中，当一个对象需要和另外的对象进行跨系统协作的时候，单例模式很有用。下面是一个单例模式在这种情况下使用的例子：

32 };

34 };

36 return {

38 // 如果存在获取此单例实例，如果不存在创建一个单例实例

39 getInstance: function () {

41 if ( !instance ) {

42 instance = init();

43 }

45 return instance;

46 }

48 };

50 })();

52 var myBadSingleton = (function () {

54 // 存储单例实例的引用

55 var instance;

57 function init() {

59 // 单例

61 var privateRandomNumber = Math.random();

63 return {

65 getRandomNumber: function() {

66 return privateRandomNumber;

67 }

69 };

71 };

73 return {

75 // 总是创建一个新的实例

76 getInstance: function () {

78 instance = init();

80 return instance;

81 }

83 };

85 })();

88 // 使用:

90 var singleA = mySingleton.getInstance();

91 var singleB = mySingleton.getInstance();

92 console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // true

94 var badSingleA = myBadSingleton.getInstance();

95 var badSingleB = myBadSingleton.getInstance();

96 console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // true

01 mySingleton.getInstance = function(){

02 if ( this._instance == null ) {

03 if ( isFoo() ) {

04 this._instance = new FooSingleton();

05 } else {

06 this._instance = new BasicSingleton();

07 }

08 }

09 return this._instance;

10 };

01 var SingletonTester = (function () {

尽管单例模式有着合理的使用需求，但是通常当我们发现自己需要在javascript使用它的时候，这是一种信号，表明我们可能需要去重新评估自己的设

计。

这通常表明系统中的模块要么紧耦合要么逻辑过于分散在代码库的多个部分。单例模式更难测试，因为可能有多种多样的问题出现，例如隐藏的依赖关

系，很难去创建多个实例，很难清理依赖关系，等等。

要想进一步了解关于单例的信息，可以读读Miller Medeiros 推荐的这篇非常棒的关于单例模式以及单例模式各种各样问题的文章，也可以看看这篇文

章的评论，这些评论讨论了单例模式是怎样增加了模块间的紧耦合。我很乐意去支持这些推荐，因为这两篇文章提出了很多关于单例模式重要的观点，

而这些观点是很值得重视的。

#观察者模式

观察者模式是这样一种设计模式。一个被称作被观察者的对象，维护一组被称为观察者的对象，这些对象依赖于被观察者，被观察者自动将自身的状态

的任何变化通知给它们。

当一个被观察者需要将一些变化通知给观察者的时候，它将采用广播的方式，这条广播可能包含特定于这条通知的一些数据。

当特定的观察者不再需要接受来自于它所注册的被观察者的通知的时候，被观察者可以将其从所维护的组中删除。

在这里提及一下设计模式现有的定义很有必要。这个定义是与所使用的语言无关的。通过这个定义，最终我们可以更深层次地了解到设计模式如何使用

以及其优势。在四人帮的《设计模式:可重用的面向对象软件的元素》这本书中，是这样定义观察者模式的:

"一个或者更多的观察者对一个被观察者的状态感兴趣，将自身的这种兴趣通过附着自身的方式注册在被观察者身上。当被观察者发生变化，而这种便

可也是观察者所关心的，就会产生一个通知，这个通知将会被送出去，最后将会调用每个观察者的更新方法。当观察者不在对被观察者的状态感兴趣的

时候，它们只需要简单的将自身剥离即可。“

我们现在可以通过实现一个观察者模式来进一步扩展我们刚才所学到的东西。这个实现包含一下组件：

被观察者：维护一组观察者，提供用于增加和移除观察者的方法。

观察者：提供一个更新接口，用于当被观察者状态变化时，得到通知。

具体的被观察者：状态变化时广播通知给观察者，保持具体的观察者的信息。

具体的观察者：保持一个指向具体被观察者的引用，实现一个更新接口，用于观察，以便保证自身状态总是和被观察者状态一致的。

首先，让我们对被观察者可能有的一组依赖其的观察者进行建模：

01 var SingletonTester = (function () {

03 // options: an object containing configuration options for the singleton

04 // e.g var options = { name: "test", pointX: 5};

05 function Singleton( options ) {

07 // set options to the options supplied

08 // or an empty object if none are provided

09 options = options || {};

11 // set some properties for our singleton

12 this.name = "SingletonTester";

14 this.pointX = options.pointX || 6;

16 this.pointY = options.pointY || 10;

18 }

20 // our instance holder

21 var instance;

23 // an emulation of static variables and methods

24 var _static = {

26 name: "SingletonTester",

28 // Method for getting an instance. It returns

29 // a singleton instance of a singleton object

30 getInstance: function( options ) {

31 if( instance === undefined ) {

32 instance = new Singleton( options );

33 }

35 return instance;

37 }

38 };

40 return _static;

42 })();

44 var singletonTest = SingletonTester.getInstance({

45 pointX: 5

46 });

48 // Log the output of pointX just to verify it is correct

49 // Outputs: 5

50 console.log( singletonTest.pointX );

01 function ObserverList(){

02 this.observerList = [];

03 }

05 ObserverList.prototype.Add = function( obj ){

06 return this.observerList.push( obj );

07 };

09 ObserverList.prototype.Empty = function(){

10 this.observerList = [];

11 };

13 ObserverList.prototype.Count = function(){

return this.observerList.length;

接着，我们对被观察者以及其增加，删除，通知在观察者列表中的观察者的能力进行建模：

我们接着定义建立新的观察者的一个框架。这里的update 函数之后会被具体的行为覆盖。

在我们的样例应用里面，我们使用上面的观察者组件，现在我们定义：

一个按钮，这个按钮用于增加新的充当观察者的选择框到页面上

一个控制用的选择框 , 充当一个被观察者，通知其它选择框是否应该被选中

一个容器，用于放置新的选择框

我们接着定义具体被观察者和具体观察者，用于给页面增加新的观察者，以及实现更新接口。通过查看下面的内联的注释，搞清楚在我们样例中的这些

组件是如何工作的。

HTML:

Sample script:

return this.observerList.length;

15 };

18 ObserverList.prototype.Get = function( index ){

19 if( index > -1 && index < this.observerList.length ){

20 return this.observerList[ index ];

21 }

22 };

24 ObserverList.prototype.Insert = function( obj, index ){

25 var pointer = -1;

27 if( index === 0 ){

28 this.observerList.unshift( obj );

29 pointer = index;

30 }else if( index === this.observerList.length ){

31 this.observerList.push( obj );

32 pointer = index;

33 }

35 return pointer;

36 };

38 ObserverList.prototype.IndexOf = function( obj, startIndex ){

39 var i = startIndex, pointer = -1;

41 while( i < this.observerList.length ){

42 if( this.observerList[i] === obj ){

43 pointer = i;

44 }

45 i++;

46 }

48 return pointer;

49 };

52 ObserverList.prototype.RemoveAt = function( index ){

53 if( index === 0 ){

54 this.observerList.shift();

55 }else if( index === this.observerList.length -1 ){

56 this.observerList.pop();

57 }

58 };

61 // Extend an object with an extension

62 function extend( extension, obj ){

63 for ( var key in extension ){

64 obj[key] = extension[key];

65 }

66 }

01 function Subject(){

02 this.observers = new ObserverList();

03 }

05 Subject.prototype.AddObserver = function( observer ){

06 this.observers.Add( observer );

07 };

09 Subject.prototype.RemoveObserver = function( observer ){

10 this.observers.RemoveAt( this.observers.IndexOf( observer, 0 ) );

11 };

13 Subject.prototype.Notify = function( context ){

14 var observerCount = this.observers.Count();

15 for(var i=0; i < observerCount; i++){

16 this.observers.Get(i).Update( context );

17 }

18 };

1 // The Observer

2 function Observer(){

3 this.Update = function(){

4 // ...

5 };

6 }

1 <button id="addNewObserver">Add New Observer checkbox</button>

2 <input id="mainCheckbox" type="checkbox"/>

3 <div id="observersContainer"></div>

01 // 我们DOM 元素的引用

03 var controlCheckbox = document.getElementById( "mainCheckbox" ),

04 addBtn = document.getElementById( "addNewObserver" ),

05 container = document.getElementById( "observersContainer" );

在这个例子里面，我们看到了如何实现和配置观察者模式，了解了被观察者，观察者，具体被观察者，具体观察者的概念。

观察者模式和发布/订阅模式的不同

观察者模式确实很有用，但是在javascript时间里面，通常我们使用一种叫做发布/订阅模式的变体来实现观察者模式。这两种模式很相似，但是也有一

些值得注意的不同。

观察者模式要求想要接受相关通知的观察者必须到发起这个事件的被观察者上注册这个事件。

发布/订阅模式使用一个主题/事件频道，这个频道处于想要获取通知的订阅者和发起事件的发布者之间。这个事件系统允许代码定义应用相关的事件，

这个事件可以传递特殊的参数，参数中包含有订阅者所需要的值。这种想法是为了避免订阅者和发布者之间的依赖性。

这种和观察者模式之间的不同，使订阅者可以实现一个合适的事件处理函数，用于注册和接受由发布者广播的相关通知。

这里给出一个关于如何使用发布者/订阅者模式的例子，这个例子中完整地实现了功能强大的publish(), subscribe() 和 unsubscribe()。

这个例子的更广的意义是对松耦合的原则的一种推崇。不是一个对象直接调用另外一个对象的方法，而是通过订阅另外一个对象的一个特定的任务或者

活动，从而在这个任务或者活动出现的时候的得到通知。

优势

观察者和发布/订阅模式鼓励人们认真考虑应用不同部分之间的关系，同时帮助我们找出这样的层，该层中包含有直接的关系，这些关系可以通过一些

列的观察者和被观察者来替换掉。这中方式可以有效地将一个应用程序切割成小块，这些小块耦合度低，从而改善代码的管理，以及用于潜在的代码复

用。

使用观察者模式更深层次的动机是，当我们需要维护相关对象的一致性的时候，我们可以避免对象之间的紧密耦合。例如，一个对象可以通知另外一个

对象，而不需要知道这个对象的信息。

两种模式下，观察者和被观察者之间都可以存在动态关系。这提供很好的灵活性，而当我们的应用中不同的部分之间紧密耦合的时候，是很难实现这种

灵活性的。

尽管这些模式并不是万能的灵丹妙药，这些模式仍然是作为最好的设计松耦合系统的工具之一，因此在任何的JavaScript 开发者的工具箱里面，都应该

08 // 具体的被观察者

10 //Subject 类扩展controlCheckbox 类

11 extend( new Subject(), controlCheckbox );

13 //点击checkbox 将会触发对观察者的通知

14 controlCheckbox["onclick"] = new Function( "controlCheckbox.Notify(controlCheckbox.checked)" );

17 addBtn["onclick"] = AddNewObserver;

19 // 具体的观察者

21 function AddNewObserver(){

23 //建立一个新的用于增加的checkbox

24 var check = document.createElement( "input" );

25 check.type = "checkbox";

27 // 使用Observer 类扩展checkbox

28 extend( new Observer(), check );

30 // 使用定制的Update函数重载

31 check.Update = function( value ){

32 this.checked = value;

33 };

35 // 增加新的观察者到我们主要的被观察者的观察者列表中

36 controlCheckbox.AddObserver( check );

38 // 将元素添加到容器的最后

39 container.appendChild( check );

40 }

01 // 一个非常简单的邮件处理器

03 // 接受的消息的计数器

04 var mailCounter = 0;

06 // 初始化一个订阅者，这个订阅者监听名叫"inbox/newMessage" 的频道

08 // 渲染新消息的粗略信息

09 var subscriber1 = subscribe( "inbox/newMessage", function( topic, data ) {

11 // 日志记录主题，用于调试

12 console.log( "A new message was received: ", topic );

14 // 使用来自于被观察者的数据，用于给用户展示一个消息的粗略信息

15 $( ".messageSender" ).html( data.sender );

16 $( ".messagePreview" ).html( data.body );

18 });

20 // 这是另外一个订阅者，使用相同的数据执行不同的任务

22 // 更细计数器，显示当前来自于发布者的新信息的数量

23 var subscriber2 = subscribe( "inbox/newMessage", function( topic, data ) {

25 $('.newMessageCounter').html( mailCounter++ );

27 });

29 publish( "inbox/newMessage", [{

30 sender:"hello@google.com",

31 body: "Hey there! How are you doing today?"

32 }]);

34 // 在之后，我们可以让我们的订阅者通过下面的方式取消订阅来自于新主题的通知

35 // unsubscribe( subscriber1, );

36 // unsubscribe( subscriber2 );

尽管这些模式并不是万能的灵丹妙药，这些模式仍然是作为最好的设计松耦合系统的工具之一，因此在任何的JavaScript 开发者的工具箱里面，都应该
有这样一个重要的工具。
缺点
事实上，这些模式的一些问题实际上正是来自于它们所带来的一些好处。在发布/订阅模式中，将发布者共订阅者上解耦，将会在一些情况下，导致很
难确保我们应用中的特定部分按照我们预期的那样正常工作。
例如，发布者可以假设有一个或者多个订阅者正在监听它们。比如我们基于这样的假设，在某些应用处理过程中来记录或者输出错误日志。如果订阅者
执行日志功能崩溃了（或者因为某些原因不能正常工作），因为系统本身的解耦本质，发布者没有办法感知到这些事情。
另外一个这种模式的缺点是，订阅者对彼此之间存在没有感知，对切换发布者的代价无从得知。因为订阅者和发布者之间的动态关系，更新依赖也很能
去追踪。
发布/订阅实现
发布/订阅在JavaScript的生态系统中非常合适，主要是因为作为核心的ECMAScript 实现是事件驱动的。尤其是在浏览器环境下更是如此，因为DOM
使用事件作为其主要的用于脚本的交互API。
也就是说，无论是ECMAScript 还是DOM都没有在实现代码中提供核心对象或者方法用于创建定制的事件系统（DOM3 的CustomEvent是一个例
外，这个事件绑定在DOM上，因此通常用处不大）。
幸运的是，流行的JavaScript库例如dojo, jQuery(定制事件)以及YUI已经有相关的工具，可以帮助我们方便的实现一个发布/订阅者系统。下面我们看
一些例子。
对于想要在vanilla Javascript(或者其它库)中使用发布/订阅模式的人来讲， AmplifyJS 包含了一个干净的，库无关的实现，可以和任何库或者工具箱
一起使用。Radio.js (http://radio.uxder.com/), PubSubJS (https://github.com/mroderick/PubSubJS) 或者 Pure JS PubSub 来自于 Peter
Higgins (https://github.com/phiggins42/bloody-jquery-plugins/blob/55e41df9bf08f42378bb08b93efcb28555b61aeb/pubsub.js) 都有类似的
替代品值得研究。
尤其对于jQuery 开发者来讲，他们拥有很多其它的选择，可以选择大量的良好实现的代码，从Peter Higgins 的jQuery插件到Ben Alman 在GitHub
上的（优化的）发布/订阅 jQuery gist。下面给出了这些代码的链接。
Ben Alman的发布/订阅 gist  https://gist.github.com/661855(推荐)
Rick Waldron 在上面基础上修改的 jQuery-core 风格的实现https://gist.github.com/705311
Peter Higgins 的插件http://github.com/phiggins42/bloody-jquery-plugins/blob/master/pubsub.js
AppendTo 在AmplifyJS中的 发布/订阅实现http://amplifyjs.com
Ben Truyman的 gist https://gist.github.com/826794
从上面我们可以看到在javascript中有这么多种观察者模式的实现，让我们看一下最小的一个版本的发布/订阅模式实现，这个实现我放在github 上，
叫做pubsubz。这个实现展示了发布，订阅的核心概念，以及如何取消订阅。
我之所以选择这个代码作为我们例子的基础，是因为这个代码紧密贴合了方法签名和实现方式，这种实现方式正是我想看到的javascript版本的经典的
观察者模式所应该有的样子。
发布/订阅实例
01 // 发布
02  
03 // jQuery: $(obj).trigger("channel", [arg1, arg2, arg3]);
04 $( el ).trigger( "/login", [{username:"test", userData:"test"}] );
05  
06 // Dojo: dojo.publish("channel", [arg1, arg2, arg3] );
07 dojo.publish( "/login", [{username:"test", userData:"test"}] );
08  
09 // YUI: el.publish("channel", [arg1, arg2, arg3]);
10 el.publish( "/login", {username:"test", userData:"test"} );
11  
12  
13 // 订阅
14  
15 // jQuery: $(obj).on( "channel", [data], fn );
16 $( el ).on( "/login", function( event ){...} );
17  
18 // Dojo: dojo.subscribe( "channel", fn);
19 var handle = dojo.subscribe( "/login", function(data){..} );
20  
21 // YUI: el.on("channel", handler);
22 el.on( "/login", function( data ){...} );
23  
24  
25 // 取消订阅
26  
27 // jQuery: $(obj).off( "channel" );
28 $( el ).off( "/login" );
29  
30 // Dojo: dojo.unsubscribe( handle );
31 dojo.unsubscribe( handle );
32  
33 // YUI: el.detach("channel");
34 el.detach( "/login" );
01 var pubsub = {};
02  
03 (function(q) {
04  
05     var topics = {},
06         subUid = -1;
07  
08
    // Publish or broadcast events of interest

剩余90页未读，继续阅读

TPORL丶

粉丝: 2
资源: 1

JavaScript 设计模式实践指南

学用 JavaScript 设计模式.pdf

javascript设计模式与开发实践pdf

javascript设计模式 pdf

javascript设计模式与开发实践

JavaScript的设计模式详解

JavaScript设计模式

typescript 设计模式实战

学JavaScript应该看那些书

mastering javascript design patterns, 3rd edition

JavaScript、jQery、javaweb学习顺序

最新资源