Learning JavaScript Design Patterns P.1 (ok)

https://addyosmani.com/resources/essentialjsdesignpatterns/book/#introduction

Object Creation

Ba cách phổ biến để tạo các đối tượng mới trong JavaScript như sau:

// Each of the following options will create a new empty object:
var newObject = {};
// or
var newObject = Object.create( Object.prototype );
// or
var newObject = new Object();

Sau đó, có bốn cách để các khóa và giá trị có thể được gán cho một đối tượng:

// ECMAScript 3 compatible approaches
// 1. Dot syntax
// Set properties
newObject.someKey = "Hello World";
// Get properties
var value = newObject.someKey;
// 2. Square bracket syntax
// Set properties
newObject["someKey"] = "Hello World";
// Get properties
var value = newObject["someKey"];
// ECMAScript 5 only compatible approaches
// For more information see: http://kangax.github.com/es5-compat-table/
// 3. Object.defineProperty
// Set properties
Object.defineProperty( newObject, "someKey", {
    value: "for more control of the property's behavior",
    writable: true,
    enumerable: true,
    configurable: true
});
// If the above feels a little difficult to read, a short-hand could
// be written as follows:
var defineProp = function ( obj, key, value ){
  var config = {
    value: value,
    writable: true,
    enumerable: true,
    configurable: true
  };
  Object.defineProperty( obj, key, config );
};
// To use, we then create a new empty "person" object
var person = Object.create( Object.prototype );
// Populate the object with properties
defineProp( person, "car", "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
console.log(person);
// Outputs: Object {car: "Delorean", dateOfBirth: "1981", hasBeard: false}
// 4. Object.defineProperties
// Set properties
Object.defineProperties( newObject, {
  "someKey": {
    value: "Hello World",
    writable: true
  },
  "anotherKey": {
    value: "Foo bar",
    writable: false
  }
});
// Getting properties for 3. and 4. can be done using any of the
// options in 1. and 2.

Như chúng ta sẽ thấy phần sau của cuốn sách, các phương thức này thậm chí có thể được sử dụng để kế thừa, như sau:

// Usage:
// Create a race car driver that inherits from the person object
var driver = Object.create( person );
// Set some properties for the driver
defineProp(driver, "topSpeed", "100mph");
// Get an inherited property (1981)
console.log( driver.dateOfBirth );
// Get the property we set (100mph)
console.log( driver.topSpeed );

Basic Constructors

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
// Usage:
// We can create new instances of the car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// and then open our browser console to view the
// output of the toString() method being called on
// these objects
console.log( civic.toString() );
console.log( mondeo.toString() );

Trên đây là một phiên bản đơn giản của mẫu hàm tạo nhưng nó có một số vấn đề. Một là nó làm cho việc kế thừa trở nên khó khăn và hai là các hàm như toString () được định nghĩa lại cho từng đối tượng mới được tạo bằng cách sử dụng hàm khởi tạo Car. Điều này không tối ưu lắm vì lý tưởng là chức năng này nên được chia sẻ giữa tất cả các phiên bản của loại Xe.

Rất may vì có một số lựa chọn thay thế tương thích với cả ES3 và ES5 cho việc xây dựng các đối tượng, nên việc khắc phục hạn chế này là rất nhỏ.

Constructors With Prototypes

Các hàm, giống như hầu hết các đối tượng trong JavaScript, chứa một đối tượng "nguyên mẫu". Khi chúng ta gọi một hàm tạo JavaScript để tạo một đối tượng, tất cả các thuộc tính của nguyên mẫu của hàm tạo sẽ được cung cấp cho đối tượng mới. Theo cách này, nhiều đối tượng Xe có thể được tạo để truy cập vào cùng một nguyên mẫu. Do đó, chúng ta có thể mở rộng ví dụ ban đầu như sau:

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
// Note here that we are using Object.prototype.newMethod rather than
// Object.prototype so as to avoid redefining the prototype object
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};
// Usage:
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
console.log( civic.toString() );
console.log( mondeo.toString() );

Ở trên, một phiên bản duy nhất của toString () bây giờ sẽ được chia sẻ giữa tất cả các đối tượng Car.

Module Pattern

Modules

Mô-đun là một phần không thể thiếu trong kiến trúc của bất kỳ ứng dụng mạnh mẽ nào và thường giúp giữ cho các đơn vị mã cho một dự án được phân tách và tổ chức rõ ràng.

Object Literals

var myObjectLiteral = {
    variableKey: variableValue,
    functionKey: function () {
      // ...
    }
};

Dưới đây, chúng ta có thể xem một ví dụ đầy đủ hơn về một mô-đun được xác định bằng cách sử dụng object literal:

var myModule = {
  myProperty: "someValue",
  // object literals can contain properties and methods.
  // e.g we can define a further object for module configuration:
  myConfig: {
    useCaching: true,
    language: "en"
  },
  // a very basic method
  saySomething: function () {
    console.log( "Where in the world is Paul Irish today?" );
  },
  // output a value based on the current configuration
  reportMyConfig: function () {
    console.log( "Caching is: " + ( this.myConfig.useCaching ? "enabled" : "disabled") );
  },
  // override the current configuration
  updateMyConfig: function( newConfig ) {
    if ( typeof newConfig === "object" ) {
      this.myConfig = newConfig;
      console.log( this.myConfig.language );
    }
  }
};
// Outputs: Where in the world is Paul Irish today?
myModule.saySomething();
// Outputs: Caching is: enabled
myModule.reportMyConfig();
// Outputs: fr
myModule.updateMyConfig({
  language: "fr",
  useCaching: false
});
// Outputs: Caching is: disabled
myModule.reportMyConfig();

Module Pattern

Trong JavaScript, mẫu Mô-đun được sử dụng để mô phỏng thêm khái niệm về các lớp theo cách mà chúng ta có thể bao gồm cả các phương thức và biến công khai / riêng tư bên trong một đối tượng duy nhất

Privacy

Cần lưu ý rằng không thực sự có ý nghĩa rõ ràng về "quyền riêng tư" bên trong JavaScript bởi vì không giống như một số ngôn ngữ truyền thống, nó không có công cụ sửa đổi quyền truy cập. Về mặt kỹ thuật, các biến không thể được khai báo là công khai hay riêng tư và vì vậy chúng tôi sử dụng phạm vi hàm để mô phỏng khái niệm này.

Examples

Hãy bắt đầu xem xét việc triển khai mô hình Mô-đun bằng cách tạo một mô-đun độc lập.

var testModule = (function() {
  var counter = 0;
  return {
    incrementCounter: function() {
      return counter++;
    },
    resetCounter: function() {
      console.log("counter value prior to reset: " + counter);
      counter = 0;
    }
  };
})();
// Usage:
// Increment our counter
testModule.incrementCounter();
// Check the counter value and reset
// Outputs: counter value prior to reset: 1
testModule.resetCounter();

Ở đây, các phần khác của mã không thể đọc trực tiếp giá trị của incrementCounter () hoặc resetCounter (). Biến bộ đếm thực sự được bảo vệ hoàn toàn khỏi phạm vi toàn cục của chúng ta nên nó hoạt động giống như một biến riêng - sự tồn tại của nó bị giới hạn trong phạm vi đóng của mô-đun để mã duy nhất có thể truy cập phạm vi của nó là hai hàm của chúng ta.

Khi làm việc với mẫu Mô-đun, chúng tôi có thể thấy hữu ích khi xác định một mẫu đơn giản mà chúng tôi sử dụng để bắt đầu với nó. Đây là một trong đó bao gồm các biến không gian tên, công khai và riêng tư:

var myNamespace = (function() {
  var myPrivateVar, myPrivateMethod;
  // A private counter variable
  myPrivateVar = 0;
  // A private function which logs any arguments
  myPrivateMethod = function(foo) {
    console.log(foo);
  };
  return {
    // A public variable
    myPublicVar: "foo",
    // A public function utilizing privates
    myPublicFunction: function(bar) {
      // Increment our private counter
      myPrivateVar++;
      // Call our private method using bar
      myPrivateMethod(bar);
    }
  };
})();

Nhìn vào một ví dụ khác, bên dưới chúng ta có thể thấy một giỏ hàng được triển khai bằng mẫu này. Bản thân mô-đun hoàn toàn tự chứa trong một biến toàn cục có tên là basketModule. Mảng giỏ trong mô-đun được giữ kín và do đó các phần khác của ứng dụng của chúng tôi không thể đọc trực tiếp nó. Nó chỉ tồn tại khi đóng mô-đun và vì vậy các phương thức duy nhất có thể truy cập nó là những phương thức có quyền truy cập vào phạm vi của nó (tức là addItem (), getItemCount (), v.v.).

var basketModule = (function() {
  // privates
  var basket = [];
  function doSomethingPrivate() {
    //...
  }
  function doSomethingElsePrivate() {
    //...
  }
  // Return an object exposed to the public
  return {
    // Add items to our basket
    addItem: function(values) {
      basket.push(values);
    },
    // Get the count of items in the basket
    getItemCount: function() {
      return basket.length;
    },
    // Public alias to a private function
    doSomething: doSomethingPrivate,
    // Get the total value of items in the basket
    getTotal: function() {
      var q = this.getItemCount(),
        p = 0;
      while (q--) {
        p += basket[q].price;
      }
      return p;
    }
  };
})();

Bên trong mô-đun, bạn có thể nhận thấy rằng chúng tôi trả về một đối tượng. Điều này sẽ tự động được gán cho basketModule để chúng tôi có thể tương tác với nó như sau:

// basketModule returns an object with a public API we can use
basketModule.addItem({
  item: "bread",
  price: 0.5
});
basketModule.addItem({
  item: "butter",
  price: 0.3
});
// Outputs: 2
console.log( basketModule.getItemCount() );
// Outputs: 0.8
console.log( basketModule.getTotal() );
// However, the following will not work:
// Outputs: undefined
// This is because the basket itself is not exposed as a part of our
// public API
console.log( basketModule.basket );
// This also won't work as it only exists within the scope of our
// basketModule closure, but not in the returned public object
console.log( basket );

Module Pattern Variations

Import mixins

Biến thể này của mẫu thể hiện cách các hình cầu (ví dụ: jQuery, Dấu gạch dưới) có thể được chuyển vào làm đối số cho hàm ẩn danh của mô-đun của chúng tôi. Điều này cho phép chúng tôi nhập chúng và bí danh cục bộ một cách hiệu quả như chúng tôi muốn.

// Global module
var myModule = (function ( jQ, _ ) {
    function privateMethod1(){
        jQ(".container").html("test");
    }
    function privateMethod2(){
      console.log( _.min([10, 5, 100, 2, 1000]) );
    }
    return{
        publicMethod: function(){
            privateMethod1();
        }
    };
// Pull in jQuery and Underscore
})( jQuery, _ );
myModule.publicMethod();

Exports

Biến thể tiếp theo này cho phép chúng ta khai báo toàn cầu mà không cần tiêu thụ chúng và tương tự có thể hỗ trợ khái niệm nhập khẩu toàn cầu được thấy trong ví dụ cuối cùng.

// Global module
var myModule = (function() {
  // Module object
  var module = {},
    privateVariable = "Hello World";
  function privateMethod() {
    // ...
  }
  module.publicProperty = "Foobar";
  module.publicMethod = function() {
    console.log(privateVariable);
  };
  return module;
})();

Bộ công cụ và triển khai mẫu mô-đun dành riêng cho khung

Dojo

Dojo cung cấp một phương thức thuận tiện để làm việc với các đối tượng được gọi là dojo.setObject (). Điều này coi đối số đầu tiên của nó là một chuỗi được phân tách bằng dấu chấm, chẳng hạn như myObj.parent.child tham chiếu đến thuộc tính có tên "child" trong đối tượng "parent" được xác định bên trong "myObj". Sử dụng setObject () cho phép chúng ta đặt giá trị của các phần tử con, tạo bất kỳ đối tượng trung gian nào trong phần còn lại của đường dẫn được truyền nếu chúng chưa tồn tại.

Ví dụ: nếu chúng ta muốn khai báo basket.core như một đối tượng của không gian tên cửa hàng, điều này có thể đạt được như sau bằng cách sử dụng cách truyền thống:

Ví dụ: nếu chúng ta muốn khai báo basket.core như một đối tượng của store namespace, điều này có thể đạt được như sau bằng cách sử dụng cách truyền thống:

var store = window.store || {};
if ( !store["basket"] ) {
  store.basket = {};
}
if ( !store.basket["core"] ) {
  store.basket.core = {};
}
store.basket.core = {
  // ...rest of our logic
};

Or as follows using Dojo 1.7 (AMD-compatible version) and above:

require(["dojo/_base/customStore"], function(store) {
  // using dojo.setObject()
  store.setObject("basket.core", (function() {
    var basket = [];
    function privateMethod() {
      console.log(basket);
    }
    return {
      publicMethod: function() {
        privateMethod();
      }
    };
  })());
});

ExtJS

Ở đây, chúng ta thấy một ví dụ về cách xác định một không gian tên mà sau đó có thể được điền bằng một mô-đun chứa cả API riêng và công khai. Ngoại trừ một số khác biệt về ngữ nghĩa, nó khá gần với cách mô-đun được triển khai trong JavaScript vani:

// create namespace
Ext.namespace("myNameSpace");
// create application
myNameSpace.app = function() {
  // do NOT access DOM from here; elements don't exist yet
  // private variables
  var btn1,
    privVar1 = 11;
  // private functions
  var btn1Handler = function(button, event) {
    console.log("privVar1=" + privVar1);
    console.log("this.btn1Text=" + this.btn1Text);
  };
  // public space
  return {
    // public properties, e.g. strings to translate
    btn1Text: "Button 1",
    // public methods
    init: function() {
      if (Ext.Ext2) {
        btn1 = new Ext.Button({
          renderTo: "btn1-ct",
          text: this.btn1Text,
          handler: btn1Handler
        });
      } else {
        btn1 = new Ext.Button("btn1-ct", {
          text: this.btn1Text,
          handler: btn1Handler
        });
      }
    }
  };
}();

YUI

Tương tự, chúng ta cũng có thể triển khai Mô-đun mẫu khi xây dựng ứng dụng bằng YUI3. Ví dụ sau dựa nhiều vào việc triển khai mẫu Mô-đun YUI ban đầu của Eric Miraglia, nhưng một lần nữa, không khác nhiều so với phiên bản JavaScript vani:

Y.namespace("store.basket");
Y.store.basket = (function() {
  var myPrivateVar, myPrivateMethod;
  // private variables:
  myPrivateVar = "I can be accessed only within Y.store.basket.";
  // private method:
  myPrivateMethod = function() {
    Y.log("I can be accessed only from within YAHOO.store.basket");
  }
  return {
    myPublicProperty: "I'm a public property.",
    myPublicMethod: function() {
      Y.log("I'm a public method.");
      // Within basket, I can access "private" vars and methods:
      Y.log(myPrivateVar);
      Y.log(myPrivateMethod());
      // The native scope of myPublicMethod is store so we can
      // access public members using "this":
      Y.log(this.myPublicProperty);
    }
  };
})();

jQuery

Có một số cách mà mã jQuery không cụ thể cho các plugin có thể được bao bọc bên trong mẫu Mô-đun. Ben Cherry trước đây đã đề xuất một triển khai trong đó một trình bao bọc hàm được sử dụng xung quanh các định nghĩa mô-đun trong trường hợp có một số điểm chung giữa các mô-đun.

Trong ví dụ sau, một hàm thư viện được định nghĩa để khai báo một thư viện mới và tự động liên kết hàm init với document.ready khi các thư viện mới (tức là mô-đun) được tạo.

function library( module ) {
  $( function() {
    if ( module.init ) {
      module.init();
    }
  });
  return module;
}
var myLibrary = library(function () {
  return {
    init: function () {
      // module implementation
    }
  };
}());

Revealing Module Pattern

Mô hình Mô-đun tiết lộ ra đời khi Heilmann thất vọng với thực tế là anh ta phải lặp lại tên của đối tượng chính khi chúng ta muốn gọi một phương thức công khai từ một phương thức khác hoặc truy cập các biến công khai. Anh ấy cũng không thích yêu cầu của Mô-đun về việc phải chuyển sang ký hiệu chữ đối tượng cho những thứ anh ấy muốn công khai.

Kết quả của những nỗ lực của anh ấy là một mô hình được cập nhật trong đó chúng tôi chỉ cần xác định tất cả các hàm và biến của chúng tôi trong phạm vi riêng tư và trả về một đối tượng ẩn danh với các con trỏ đến chức năng riêng tư mà chúng tôi muốn tiết lộ dưới dạng công khai.

var myRevealingModule = (function() {
  var privateVar = "Ben Cherry",
    publicVar = "Hey there!";
  function privateFunction() {
    console.log("Name:" + privateVar);
  }
  function publicSetName(strName) {
    privateVar = strName;
  }
  function publicGetName() {
    privateFunction();
  }
  // Reveal public pointers to
  // private functions and properties
  return {
    setName: publicSetName,
    greeting: publicVar,
    getName: publicGetName
  };
})();
myRevealingModule.setName("Paul Kinlan");

Mẫu cũng có thể được sử dụng để tiết lộ các chức năng và thuộc tính riêng tư với một lược đồ đặt tên cụ thể hơn nếu chúng ta muốn:

var myRevealingModule = (function() {
  var privateCounter = 0;
  function privateFunction() {
    privateCounter++;
  }
  function publicFunction() {
    publicIncrement();
  }
  function publicIncrement() {
    privateFunction();
  }
  function publicGetCount() {
    return privateCounter;
  }
  // Reveal public pointers to
  // private functions and properties
  return {
    start: publicFunction,
    increment: publicIncrement,
    count: publicGetCount
  };
})();
myRevealingModule.start();

Singleton Pattern

Vì vậy, mẫu Singleton được biết đến vì nó hạn chế việc khởi tạo một lớp cho một đối tượng duy nhất. Về mặt cổ điển, mẫu Singleton có thể được thực hiện bằng cách tạo một lớp với một phương thức tạo ra một thể hiện mới của lớp nếu nó không tồn tại. Trong trường hợp một cá thể đã tồn tại, nó chỉ trả về một tham chiếu đến đối tượng đó.

Singleton khác với các lớp (hoặc đối tượng) tĩnh là chúng ta có thể trì hoãn việc khởi tạo chúng, nói chung là vì chúng yêu cầu một số thông tin có thể không có sẵn trong thời gian khởi tạo. Họ không cung cấp một cách để mã không biết về tham chiếu trước đó của họ để dễ dàng truy xuất chúng. Điều này là do nó không phải là đối tượng hoặc "lớp" được trả về bởi một Singleton, nó là một cấu trúc. Hãy nghĩ về cách các biến được đóng thực sự không phải là các bao đóng - phạm vi hàm cung cấp sự đóng lại là sự đóng lại.

Trong JavaScript, các Singleton đóng vai trò như một không gian tên tài nguyên được chia sẻ cách ly mã thực thi với không gian tên chung để cung cấp một điểm truy cập duy nhất cho các hàm.

var mySingleton = (function() {
  // Instance stores a reference to the Singleton
  var instance;
  function init() {
    // Singleton
    // Private methods and variables
    function privateMethod() {
      console.log("I am private");
    }
    var privateVariable = "Im also private";
    var privateRandomNumber = Math.random();
    return {
      // Public methods and variables
      publicMethod: function() {
        console.log("The public can see me!");
      },
      publicProperty: "I am also public",
      getRandomNumber: function() {
        return privateRandomNumber;
      }
    };
  };
  return {
    // Get the Singleton instance if one exists
    // or create one if it doesn't
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();
var myBadSingleton = (function() {
  // Instance stores a reference to the Singleton
  var instance;
  function init() {
    // Singleton
    var privateRandomNumber = Math.random();
    return {
      getRandomNumber: function() {
        return privateRandomNumber;
      }
    };
  };
  return {
    // Always create a new Singleton instance
    getInstance: function() {
      instance = init();
      return instance;
    }
  };
})();
// Usage:
var singleA = mySingleton.getInstance();
var singleB = mySingleton.getInstance();
console.log(singleA.getRandomNumber() === singleB.getRandomNumber()); // true
var badSingleA = myBadSingleton.getInstance();
var badSingleB = myBadSingleton.getInstance();
console.log(badSingleA.getRandomNumber() !== badSingleB.getRandomNumber()); // true
// Note: as we are working with random numbers, there is a
// mathematical possibility both numbers will be the same,
// however unlikely. The above example should otherwise still
// be valid.

Điều làm cho Singleton là quyền truy cập toàn cục vào cá thể (thường thông qua MySingleton.getInstance ()) vì chúng tôi không (ít nhất là trong các ngôn ngữ tĩnh) gọi trực tiếp MySingleton () mới. Tuy nhiên, điều này có thể thực hiện được trong JavaScript.

Trong thực tế, mẫu Singleton hữu ích khi cần chính xác một đối tượng để điều phối các đối tượng khác trên toàn hệ thống. Dưới đây là một ví dụ với mẫu được sử dụng trong ngữ cảnh này:

var SingletonTester = (function() {
  // options: an object containing configuration options for the singleton
  // e.g var options = { name: "test", pointX: 5};
  function Singleton(options) {
    // set options to the options supplied
    // or an empty object if none are provided
    options = options || {};
    // set some properties for our singleton
    this.name = "SingletonTester";
    this.pointX = options.pointX || 6;
    this.pointY = options.pointY || 10;
  }
  // our instance holder
  var instance;
  // an emulation of static variables and methods
  var _static = {
    name: "SingletonTester",
    // Method for getting an instance. It returns
    // a singleton instance of a singleton object
    getInstance: function(options) {
      if (instance === undefined) {
        instance = new Singleton(options);
      }
      return instance;
    }
  };
  return _static;
})();
var singletonTest = SingletonTester.getInstance({
  pointX: 5
});
// Log the output of pointX just to verify it is correct
// Outputs: 5
console.log(singletonTest.pointX);

Observer Pattern

Observer là một mẫu thiết kế trong đó một object (được gọi là chủ thể) duy trì danh sách các đối tượng phụ thuộc vào observers (observers), tự động thông báo cho chúng về bất kỳ thay đổi nào đối với trạng thái.

Khi một đối tượng cần thông báo cho những người quan sát về một điều gì đó thú vị đang xảy ra, nó sẽ phát một thông báo cho những người quan sát (có thể bao gồm dữ liệu cụ thể liên quan đến chủ đề của thông báo).

Khi chúng tôi không còn muốn một quan sát viên cụ thể được thông báo về những thay đổi của chủ thể mà họ đã đăng ký, chủ thể đó có thể xóa họ khỏi danh sách quan sát viên.

Thường sẽ hữu ích khi tham khảo lại các định nghĩa đã xuất bản về các mẫu thiết kế không có ngôn ngữ để hiểu rộng hơn về cách sử dụng và lợi thế của chúng theo thời gian. Định nghĩa của mẫu Người quan sát được cung cấp trong sách GoF, Mẫu thiết kế: Các yếu tố của phần mềm hướng đối tượng có thể tái sử dụng,

Bây giờ chúng ta có thể mở rộng những gì chúng ta đã học được để triển khai mẫu Observer với các thành phần sau:

Subject: duy trì danh sách quan sát viên, tạo điều kiện thêm hoặc xóa quan sát viên

Observer: cung cấp giao diện cập nhật cho các đối tượng cần được thông báo về sự thay đổi trạng thái của Chủ thể

ConcreteSubject: phát thông báo cho người quan sát về những thay đổi của trạng thái, lưu trữ trạng thái của ConcreteObservers

ConcreteObserver: lưu trữ một tham chiếu đến ConcreteSubject, triển khai giao diện cập nhật cho Người quan sát để đảm bảo trạng thái nhất quán với Chủ thể

Đầu tiên, hãy lập mô hình danh sách các Quan sát viên phụ thuộc mà một đối tượng có thể có:

function ObserverList() {
  this.observerList = [];
}
ObserverList.prototype.add = function(obj) {
  return this.observerList.push(obj);
};
ObserverList.prototype.count = function() {
  return this.observerList.length;
};
ObserverList.prototype.get = function(index) {
  if (index > -1 && index < this.observerList.length) {
    return this.observerList[index];
  }
};
ObserverList.prototype.indexOf = function(obj, startIndex) {
  var i = startIndex;
  while (i < this.observerList.length) {
    if (this.observerList[i] === obj) {
      return i;
    }
    i++;
  }
  return -1;
};
ObserverList.prototype.removeAt = function(index) {
  this.observerList.splice(index, 1);
};

Tiếp theo, hãy lập mô hình Đối tượng và khả năng thêm, bớt hoặc thông báo cho các quan sát viên trong danh sách quan sát viên.

function Subject() {
  this.observers = new ObserverList();
}
Subject.prototype.addObserver = function(observer) {
  this.observers.add(observer);
};
Subject.prototype.removeObserver = function(observer) {
  this.observers.removeAt(this.observers.indexOf(observer, 0));
};
Subject.prototype.notify = function(context) {
  var observerCount = this.observers.count();
  for (var i = 0; i < observerCount; i++) {
    this.observers.get(i).update(context);
  }
};

Sau đó, chúng tôi xác định một khung để tạo các Quan sát viên mới. Chức năng cập nhật ở đây sẽ được ghi đè sau đó với hành vi tùy chỉnh.

// The Observer
function Observer(){
  this.update = function(){
    // ...
  };
}

Sau đó, chúng tôi xác định các trình xử lý ConcreteSubject và ConcreteObserver để thêm người quan sát mới vào trang và triển khai giao diện cập nhật. Xem bên dưới để biết nhận xét nội tuyến về những gì các thành phần này làm trong bối cảnh của ví dụ của chúng tôi.

HTML:

<button id="addNewObserver">Add New Observer checkbox</button>
<input id="mainCheckbox" type="checkbox"/>
<div id="observersContainer"></div>

Full code

C:\Users\Administrator\Desktop\gulp\index.html

<html>
<head>
</head>
<body>
  <button id="addNewObserver">Add New Observer checkbox</button>
  <input id="mainCheckbox" type="checkbox" />
  <div id="observersContainer"></div>
  <script src="es6.js"></script>
</body>
</html>

C:\Users\Administrator\Desktop\gulp\es6.js

function ObserverList() {
  this.observerList = [];
}
ObserverList.prototype.add = function(obj) {
  return this.observerList.push(obj);
};
ObserverList.prototype.count = function() {
  return this.observerList.length;
};
ObserverList.prototype.get = function(index) {
  if (index > -1 && index < this.observerList.length) {
    return this.observerList[index];
  }
};
ObserverList.prototype.indexOf = function(obj, startIndex) {
  var i = startIndex;
  while (i < this.observerList.length) {
    if (this.observerList[i] === obj) {
      return i;
    }
    i++;
  }
  return -1;
};
ObserverList.prototype.removeAt = function(index) {
  this.observerList.splice(index, 1);
};
// ==
function Subject() {
  this.observers = new ObserverList();
}
Subject.prototype.addObserver = function(observer) {
  this.observers.add(observer);
};
Subject.prototype.removeObserver = function(observer) {
  this.observers.removeAt(this.observers.indexOf(observer, 0));
};
Subject.prototype.notify = function(context) {
  var observerCount = this.observers.count();
  for (var i = 0; i < observerCount; i++) {
    this.observers.get(i).update(context);
  }
};
// ========
// The Observer
function Observer() {
  this.update = function() {
    // ...
  };
}
// ====
// Extend an object with an extension
function extend(obj, extension) {
  console.log(typeof obj);
  for (var key in extension) {
    obj[key] = extension[key];
  }
}
// References to our DOM elements
var controlCheckbox = document.getElementById("mainCheckbox"),
  addBtn = document.getElementById("addNewObserver"),
  container = document.getElementById("observersContainer");
// Concrete Subject
// Extend the controlling checkbox with the Subject class
extend(controlCheckbox, new Subject());
// Clicking the checkbox will trigger notifications to its observers
controlCheckbox.onclick = function() {
  controlCheckbox.notify(controlCheckbox.checked);
};
addBtn.onclick = addNewObserver;
// Concrete Observer
function addNewObserver() {
  // Create a new checkbox to be added
  var check = document.createElement("input");
  check.type = "checkbox";
  // Extend the checkbox with the Observer class
  extend(check, new Observer());
  // Override with custom update behaviour
  check.update = function(value) {
    this.checked = value;
  };
  // Add the new observer to our list of observers
  // for our main subject
  controlCheckbox.addObserver(check);
  // Append the item to the container
  container.appendChild(check);
}

Differences Between The Observer And Publish/Subscribe Pattern

Mặc dù mẫu Observer rất hữu ích cần lưu ý, khá thường xuyên trong thế giới JavaScript, chúng tôi sẽ thấy nó thường được triển khai bằng cách sử dụng một biến thể được gọi là mẫu Publish / Subscribe. Mặc dù rất giống nhau, nhưng có sự khác biệt giữa các mẫu này đáng chú ý.

Mẫu Người quan sát yêu cầu người quan sát (hoặc đối tượng) muốn nhận thông báo chủ đề phải đăng ký mối quan tâm này với đối tượng kích hoạt sự kiện (chủ đề).

Tuy nhiên, mẫu Xuất bản / Đăng ký sử dụng kênh chủ đề / sự kiện nằm giữa đối tượng muốn nhận thông báo (người đăng ký) và đối tượng kích hoạt sự kiện (nhà xuất bản). Hệ thống sự kiện này cho phép mã xác định các sự kiện cụ thể của ứng dụng có thể chuyển các đối số tùy chỉnh chứa các giá trị mà người đăng ký cần. Ý tưởng ở đây là tránh sự phụ thuộc giữa người đăng ký và nhà xuất bản.

Điều này khác với mẫu Người quan sát vì nó cho phép bất kỳ người đăng ký nào triển khai một trình xử lý sự kiện thích hợp đăng ký và nhận thông báo chủ đề do nhà xuất bản phát.

Dưới đây là một ví dụ về cách một người có thể sử dụng Publish/Subscribe nếu được cung cấp triển khai chức năng hỗ trợ publish(), subscribe() và unsubscribe() đằng sau hậu trường:

Ý tưởng chung ở đây là sự thúc đẩy của khớp nối lỏng lẻo. Thay vì các đối tượng đơn lẻ trực tiếp gọi các phương thức của các đối tượng khác, chúng đăng ký vào một nhiệm vụ hoặc hoạt động cụ thể của một đối tượng khác và được thông báo khi nó xảy ra.

// A very simple new mail handler
// A count of the number of messages received
var mailCounter = 0;
// Initialize subscribers that will listen out for a topic
// with the name "inbox/newMessage".
// Render a preview of new messages
var subscriber1 = subscribe( "inbox/newMessage", function( topic, data ) {
  // Log the topic for debugging purposes
  console.log( "A new message was received: ", topic );
  // Use the data that was passed from our subject
  // to display a message preview to the user
  $( ".messageSender" ).html( data.sender );
  $( ".messagePreview" ).html( data.body );
});
// Here's another subscriber using the same data to perform
// a different task.
// Update the counter displaying the number of new
// messages received via the publisher
var subscriber2 = subscribe( "inbox/newMessage", function( topic, data ) {
  $('.newMessageCounter').html( ++mailCounter );
});
publish( "inbox/newMessage", [{
  sender: "[e-mail]",
  body: "Hey there! How are you doing today?"
}]);
// We could then at a later point unsubscribe our subscribers
// from receiving any new topic notifications as follows:
// unsubscribe( subscriber1 );
// unsubscribe( subscriber2 );

Publish/Subscribe Implementations

Xuất bản / Đăng ký rất phù hợp trong hệ sinh thái JavaScript, phần lớn bởi vì cốt lõi, việc triển khai ECMAScript là hướng sự kiện. Điều này đặc biệt đúng trong môi trường trình duyệt vì DOM sử dụng các sự kiện làm API tương tác chính của nó để tạo tập lệnh.

May mắn thay, các thư viện JavaScript phổ biến như dojo, jQuery (sự kiện tùy chỉnh) và YUI đã có các tiện ích có thể hỗ trợ dễ dàng triển khai hệ thống Xuất bản / Đăng ký với rất ít nỗ lực. Dưới đây, chúng ta có thể xem một số ví dụ về điều này:

// Publish
// jQuery: $(obj).trigger("channel", [arg1, arg2, arg3]);
$(el).trigger("/login", [{ username: "test", userData: "test" }]);
// Dojo: dojo.publish("channel", [arg1, arg2, arg3] );
dojo.publish("/login", [{ username: "test", userData: "test" }]);
// YUI: el.publish("channel", [arg1, arg2, arg3]);
el.publish("/login", { username: "test", userData: "test" });
// Subscribe
// jQuery: $(obj).on( "channel", [data], fn );
$(el).on("/login", function(event) { ... });
// Dojo: dojo.subscribe( "channel", fn);
var handle = dojo.subscribe("/login", function(data) {.. });
// YUI: el.on("channel", handler);
el.on("/login", function(data) { ... });
// Unsubscribe
// jQuery: $(obj).off( "channel" );
$(el).off("/login");
// Dojo: dojo.unsubscribe( handle );
dojo.unsubscribe(handle);
// YUI: el.detach("channel");
el.detach("/login");

A Publish/Subscribe Implementation

var pubsub = {};
(function(myObject) {
  // Storage for topics that can be broadcast
  // or listened to
  var topics = {};
  // A topic identifier
  var subUid = -1;
  // Publish or broadcast events of interest
  // with a specific topic name and arguments
  // such as the data to pass along
  myObject.publish = function(topic, args) {
    if (!topics[topic]) {
      return false;
    }
    var subscribers = topics[topic],
      len = subscribers ? subscribers.length : 0;
    while (len--) {
      subscribers[len].func(topic, args);
    }
    return this;
  };
  // Subscribe to events of interest
  // with a specific topic name and a
  // callback function, to be executed
  // when the topic/event is observed
  myObject.subscribe = function(topic, func) {
    if (!topics[topic]) {
      topics[topic] = [];
    }
    var token = (++subUid).toString();
    topics[topic].push({
      token: token,
      func: func
    });
    return token;
  };
  // Unsubscribe from a specific
  // topic, based on a tokenized reference
  // to the subscription
  myObject.unsubscribe = function(token) {
    for (var m in topics) {
      if (topics[m]) {
        for (var i = 0, j = topics[m].length; i < j; i++) {
          if (topics[m][i].token === token) {
            topics[m].splice(i, 1);
            return token;
          }
        }
      }
    }
    return this;
  };
}(pubsub));

Example: Using Our Implementation

Bây giờ chúng tôi có thể sử dụng việc triển khai để xuất bản và đăng ký các sự kiện quan tâm như sau:

// Another simple message handler
// A simple message logger that logs any topics and data received through our
// subscriber
var messageLogger = function(topics, data) {
  console.log("Logging: " + topics + ": " + data);
};
// Subscribers listen for topics they have subscribed to and
// invoke a callback function (e.g messageLogger) once a new
// notification is broadcast on that topic
var subscription = pubsub.subscribe("inbox/newMessage", messageLogger);
// Publishers are in charge of publishing topics or notifications of
// interest to the application. e.g:
pubsub.publish("inbox/newMessage", "hello world!");
// or
pubsub.publish("inbox/newMessage", ["test", "a", "b", "c"]);
// or
pubsub.publish("inbox/newMessage", {
  sender: "[e-mail]",
  body: "Hey again!"
});
// We can also unsubscribe if we no longer wish for our subscribers
// to be notified
pubsub.unsubscribe(subscription);
// Once unsubscribed, this for example won't result in our
// messageLogger being executed as the subscriber is
// no longer listening
pubsub.publish("inbox/newMessage", "Hello! are you still there?");

Full code

var pubsub = {};
(function(myObject) {
  // Storage for topics that can be broadcast
  // or listened to
  var topics = {};
  // A topic identifier
  var subUid = -1;
  // Publish or broadcast events of interest
  // with a specific topic name and arguments
  // such as the data to pass along
  myObject.publish = function(topic, args) {
    if (!topics[topic]) {
      return false;
    }
    var subscribers = topics[topic],
      len = subscribers ? subscribers.length : 0;
    while (len--) {
      subscribers[len].func(topic, args);
    }
    return this;
  };
  // Subscribe to events of interest
  // with a specific topic name and a
  // callback function, to be executed
  // when the topic/event is observed
  myObject.subscribe = function(topic, func) {
    if (!topics[topic]) {
      topics[topic] = [];
    }
    var token = (++subUid).toString();
    topics[topic].push({
      token: token,
      func: func
    });
    return token;
  };
  // Unsubscribe from a specific
  // topic, based on a tokenized reference
  // to the subscription
  myObject.unsubscribe = function(token) {
    for (var m in topics) {
      if (topics[m]) {
        for (var i = 0, j = topics[m].length; i < j; i++) {
          if (topics[m][i].token === token) {
            topics[m].splice(i, 1);
            return token;
          }
        }
      }
    }
    return this;
  };
}(pubsub));
// =======================
// Another simple message handler
// A simple message logger that logs any topics and data received through our
// subscriber
var messageLogger = function(topics, data) {
  console.log("Logging: " + topics + ": " + data);
};
// Subscribers listen for topics they have subscribed to and
// invoke a callback function (e.g messageLogger) once a new
// notification is broadcast on that topic
var subscription = pubsub.subscribe("inbox/newMessage", messageLogger);
// Publishers are in charge of publishing topics or notifications of
// interest to the application. e.g:
pubsub.publish("inbox/newMessage", "hello world!");
// or
pubsub.publish("inbox/newMessage", ["test", "a", "b", "c"]);
// or
pubsub.publish("inbox/newMessage", {
  sender: "[e-mail]",
  body: "Hey again!"
});
// We can also unsubscribe if we no longer wish for our subscribers
// to be notified
pubsub.unsubscribe(subscription);
// Once unsubscribed, this for example won't result in our
// messageLogger being executed as the subscriber is
// no longer listening
pubsub.publish("inbox/newMessage", "Hello! are you still there?");

Example: User-Interface Notifications

Tiếp theo, hãy tưởng tượng chúng ta có một ứng dụng web chịu trách nhiệm hiển thị thông tin chứng khoán theo thời gian thực.

Ứng dụng có thể có một lưới để hiển thị số liệu thống kê về kho và một bộ đếm để hiển thị điểm cập nhật cuối cùng. Khi mô hình dữ liệu thay đổi, ứng dụng sẽ cần cập nhật lưới và bộ đếm. Trong trường hợp này, chủ đề của chúng tôi (sẽ xuất bản các chủ đề / thông báo) là mô hình dữ liệu và người đăng ký của chúng tôi là lưới và bộ đếm.

Khi người đăng ký của chúng tôi nhận được thông báo rằng bản thân mô hình đã thay đổi, họ có thể tự cập nhật cho phù hợp.

Trong quá trình triển khai của chúng tôi, người đăng ký của chúng tôi sẽ lắng nghe chủ đề "newDataAvailable" để tìm hiểu xem có thông tin cổ phiếu mới hay không. Nếu một thông báo mới được xuất bản cho chủ đề này, nó sẽ kích hoạt gridUpdate để thêm một hàng mới vào lưới của chúng tôi có chứa thông tin này. Nó cũng sẽ cập nhật bộ đếm cập nhật lần cuối để ghi lại lần cuối cùng dữ liệu được thêm vào

// Return the current local time to be used in our UI later
getCurrentTime = function() {
  var date = new Date(),
    m = date.getMonth() + 1,
    d = date.getDate(),
    y = date.getFullYear(),
    t = date.toLocaleTimeString().toLowerCase();
  return (m + "/" + d + "/" + y + " " + t);
};
// Add a new row of data to our fictional grid component
function addGridRow(data) {
  // ui.grid.addRow( data );
  console.log("updated grid component with:" + data);
}
// Update our fictional grid to show the time it was last
// updated
function updateCounter(data) {
  // ui.grid.updateLastChanged( getCurrentTime() );
  console.log("data last updated at: " + getCurrentTime() + " with " + data);
}
// Update the grid using the data passed to our subscribers
gridUpdate = function(topic, data) {
  if (data !== undefined) {
    addGridRow(data);
    updateCounter(data);
  }
};
// Create a subscription to the newDataAvailable topic
var subscriber = pubsub.subscribe("newDataAvailable", gridUpdate);
// The following represents updates to our data layer. This could be
// powered by ajax requests which broadcast that new data is available
// to the rest of the application.
// Publish changes to the gridUpdated topic representing new entries
pubsub.publish("newDataAvailable", {
  summary: "Apple made $5 billion",
  identifier: "APPL",
  stockPrice: 570.91
});
pubsub.publish("newDataAvailable", {
  summary: "Microsoft made $20 million",
  identifier: "MSFT",
  stockPrice: 30.85
});

Example: Decoupling applications using Ben Alman's Pub/Sub implementation

Trong ví dụ xếp hạng phim sau đây, chúng tôi sẽ sử dụng triển khai jQuery của Ben Alman về Xuất bản / Đăng ký để chứng minh cách chúng tôi có thể tách giao diện người dùng. Lưu ý rằng việc gửi xếp hạng chỉ có tác dụng công bố thực tế là có sẵn dữ liệu xếp hạng và người dùng mới.

Điều đó phụ thuộc vào người đăng ký các chủ đề đó để sau đó ủy quyền những gì xảy ra với dữ liệu đó. Trong trường hợp của chúng tôi, chúng tôi đang đẩy dữ liệu mới đó vào các mảng hiện có và sau đó hiển thị chúng bằng cách sử dụng phương thức .template () của thư viện Underscore để tạo khuôn mẫu.

Điều đó phụ thuộc vào người đăng ký các chủ đề đó để sau đó ủy quyền những gì xảy ra với dữ liệu đó. Trong trường hợp của chúng tôi, chúng tôi đang đẩy dữ liệu mới đó vào các mảng hiện có và sau đó hiển thị chúng bằng cách sử dụng phương thức .template () của thư viện Underscore để tạo khuôn mẫu.

C:\Users\Administrator\Desktop\gulp\index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/underscore@1.12.0/underscore-min.js"></script>
  <script type="text/javascript" src="jquery.ba-tinypubsub.min.js"></script>
</head>

<body>
  <script id="userTemplate" type="text/html">
    <li><%= name %></li>
	</script>
  <script id="ratingsTemplate" type="text/html">
    <li><strong><%= title %></strong> was rated <%= rating %>/5</li>
	</script>
  <div id="container">
    <div class="sampleForm">
      <p>
        <label for="twitter_handle">Twitter handle:</label>
        <input type="text" id="twitter_handle" />
      </p>
      <p>
        <label for="movie_seen">Name a movie you've seen this year:</label>
        <input type="text" id="movie_seen" />
      </p>
      <p>
        <label for="movie_rating">Rate the movie you saw:</label>
        <select id="movie_rating">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5" selected>5</option>
        </select>
      </p>
      <p>
        <button id="add">Submit rating</button>
      </p>
    </div>
    <div class="summaryTable">
      <div id="users">
        <h3>Recent users</h3>
      </div>
      <div id="ratings">
        <h3>Recent movies rated</h3>
      </div>
    </div>
  </div>
  <script src="es6.js"></script>
</body>

</html>

C:\Users\Administrator\Desktop\gulp\es6.js

(function($) {
  // Pre-compile templates and "cache" them using closure
  var
    userTemplate = _.template($("#userTemplate").html()),
    ratingsTemplate = _.template($("#ratingsTemplate").html());
  // Subscribe to the new user topic, which adds a user
  // to a list of users who have submitted reviews
  $.subscribe("/new/user", function(e, data) {
    if (data) {
      $('#users').append(userTemplate(data));
    }
  });
  // Subscribe to the new rating topic. This is composed of a title and
  // rating. New ratings are appended to a running list of added user
  // ratings.
  $.subscribe("/new/rating", function(e, data) {
    if (data) {
      $("#ratings").append(ratingsTemplate(data));
    }
  });
  // Handler for adding a new user
  $("#add").on("click", function(e) {
    e.preventDefault();
    var strUser = $("#twitter_handle").val(),
      strMovie = $("#movie_seen").val(),
      strRating = $("#movie_rating").val();
    // Inform the application a new user is available
    $.publish("/new/user", { name: strUser });
    // Inform the app a new rating is available
    $.publish("/new/rating", { title: strMovie, rating: strRating });
  });
})(jQuery);

C:\Users\Administrator\Desktop\gulp\jquery.ba-tinypubsub.min.js

/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
 * http://benalman.com/
 * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
(function(a){var b=a({});a.subscribe=function(){b.on.apply(b,arguments)},a.unsubscribe=function(){b.off.apply(b,arguments)},a.publish=function(){b.trigger.apply(b,arguments)}})(jQuery)

Example: Decoupling an Ajax-based jQuery application

Trong ví dụ cuối cùng của chúng tôi, chúng tôi sẽ xem xét thực tế cách tách mã của chúng tôi bằng cách sử dụng Pub / Sub ngay từ đầu trong quá trình phát triển có thể giúp chúng tôi tiết kiệm một số cấu trúc lại tiềm ẩn khó khăn sau này.

Khá thường xuyên trong các ứng dụng Ajax nặng, khi chúng tôi nhận được phản hồi cho một yêu cầu, chúng tôi muốn đạt được nhiều hơn chỉ một hành động duy nhất. Người ta có thể chỉ cần thêm tất cả logic sau yêu cầu của họ vào một lệnh gọi lại thành công, nhưng có những hạn chế đối với cách tiếp cận này.

C:\Users\Administrator\Desktop\gulp\index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/underscore@1.12.0/underscore-min.js"></script>
  <script type="text/javascript" src="jquery.ba-tinypubsub.min.js"></script>
</head>
<body>
  <form id="flickrSearch">
    <input type="text" name="tag" id="query" />
    <input type="submit" name="submit" value="submit" />
  </form>
  <div id="lastQuery"></div>
  <ol id="searchResults"></ol>
  <script id="resultTemplate" type="text/html">
    <% _.each(items, function( item ){ %>
      <li><img src="<%= item.media.m %>"/></li>
    <% });%>
	</script>
  <script src="es6.js"></script>
</body>
</html>

C:\Users\Administrator\Desktop\gulp\es6.js

(function($) {
  // Pre-compile template and "cache" it using closure
  var resultTemplate = _.template($("#resultTemplate").html());
  // Subscribe to the new search tags topic
  $.subscribe("/search/tags", function(e, tags) {
    $("#lastQuery").html("<p>Searched for:<strong>" + tags + "</strong></p>");
  });
  // Subscribe to the new results topic
  $.subscribe("/search/resultSet", function(e, results) {
    $("#searchResults").empty().append(resultTemplate(results));
  });
  // Submit a search query and publish tags on the /search/tags topic
  $("#flickrSearch").submit(function(e) {
    e.preventDefault();
    var tags = $(this).find("#query").val();
    if (!tags) {
      return;
    }
    $.publish("/search/tags", [$.trim(tags)]);
  });
  // Subscribe to new tags being published and perform
  // a search query using them. Once data has returned
  // publish this data for the rest of the application
  // to consume
  $.subscribe("/search/tags", function(e, tags) {
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
        tags: tags,
        tagmode: "any",
        format: "json"
      },
      function(data) {
        if (!data.items.length) {
          return;
        }
        $.publish("/search/resultSet", { items: data.items });
      });
  });
})(jQuery);

C:\Users\Administrator\Desktop\gulp\jquery.ba-tinypubsub.min.js

/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
 * http://benalman.com/
 * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
(function(a){var b=a({});a.subscribe=function(){b.on.apply(b,arguments)},a.unsubscribe=function(){b.off.apply(b,arguments)},a.publish=function(){b.trigger.apply(b,arguments)}})(jQuery)