Top 10 Javascript Pattern mọi Lập trình viên hàng đầu yêu thích

Top 10 Javascript Pattern

1. Constructor Pattern | TOP 10 Javascript Pattern

• Chuẩn bị đối tượng để sử dụng
• Chấp nhận đối số mà hàm tạo có thể sử dụng để đặt giá trị của các thuộc tính và phương thức thành viên khi đối tượng được tạo lần đầu tiên

Top 10 Javascript Pattern: Constructor Pattern
 

function Car(model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}

// Usage:
var bmw = new Car('M4', '2019', '1000');

2. Module Pattern | TOP 10 Javascript Pattern

• Object literal notation
• The module Pattern
• AMD modules
• CommonJS module
• ECMAScript Harmony modules

var newObject = {
  variableKey: variableValue,
  functionKey: function() {
    //…
  }
};

Top 10 Javascript Pattern: Module Pattern

var testModule = (function() {
  var counter = 0;
  return {
    incrementCounter: function() {
      return ++counter;
    },
    resetCounter: function() {
      counter = 0;
    }
  };
})();

// Usage:
testModule.incrementCounter();
testModule.resetCounter();

3. Revealing Module Pattern | TOP 10 Javascript Pattern

var myRevealingModule = (function() {
  var privateVariable = 'not okay',
    publicVariable = 'okay';
  function privateFun() {
    return privateVariable;
  }

  function publicSetName(strName) {
    privateVariable = strName;
  }

  function publicGetName() {
    privateFun();
  }

  return {
    setName: publicSetName,
    message: publicVariable,
    getName: publicGetName
  };
})();

//Usage:

myRevealingModule.setName('Marvin King');

4. Singleton Pattern | TOP 10 Javascript Pattern

var singletonPattern = (function() {
  var instance;
  function init() {
    // Singleton
    function privateMethod() {
      console.log('privateMethod');
    }
    var privateVariable = 'this is private variable';
    var privateRandomNumber = Math.random();
    return {
      publicMethod: function() {
        console.log('publicMethod');
      },
      publicProperty: 'this is public property',
      getRandomNumber: function() {
        return privateRandomNumber;
      }
    };
  }

  return {
    // Get the singleton instance if one exists
    // or create if it doesn't
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

// Usage:
var single = singletonPattern.getInstance();

5. Observer Pattern | TOP 10 Javascript Pattern

Top 10 Javascript Pattern: Observer Pattern

• Subject: Duy trì một danh sách các quan sát viên, các cơ sở thêm hoặc loại bỏ các quan sát viên

• Observer: Cung cấp interface cập nhật cho đối tượng cần được thông báo về sự thay đổi trạng thái của đối tượng

• ConcreteSubject: Phát thông báo cho Quan sát viên về những trạng thái thay đổ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 update interface cho Quan sát viên để đảm bảo trạng thái phù hợp với các đối tượng.

function ObserverList() {
  this.observerList = [];
}

ObserverList.prototype.Add = function(obj) {
  return this.observerList.push(obj);
};

ObserverList.prototype.Empty = function() {
  this.obsererList = [];
};

ObserverList.prototype.Count = function() {
  return this.observerList.length;
};

ObserverList.prototype.Get = function(index) {
  if (index > -1 && index < this.observerList.length) {
    return this.observerList[index];
  }
};

//...

6. Mediator Pattern | TOP 10 Javascript Pattern

Top 10 Javascript Pattern: Mediator Pattern

var mediator = (function() {
  var topics = {};
  var subscribe = function(topic, fn) {
    if (!topics[topic]) {
      topics[topic] = [];
    }
    topics[topic].push({ context: this, callback: fn });
    return this;
  };

  // publish/broadcast an event to the rest of the application
  var publicsh = function(topic) {
    var args;
    if (!topics[topic]) {
      return false;
    }
    args = Array.prototype.slice.call(arguments, 1);
    for (var i = 0, l = topics[topic].length; i < l; i++) {
      var subscription = topics[topic][i];
      subscription.callback.apply(subscription.content, args);
    }
    return this;
  };
  return {
    publish: publish,
    subscribe: subscribe,
    installTo: function(obj) {
      obj.subscribe = subscribe;
      obj.publish = publish;
    }
  };
})();

7. Prototype Pattern | TOP 10 Javascript Pattern

var myCar = {
  name: 'bmw',
  drive: function() {
    console.log('I am driving!');
  },
  panic: function() {
    console.log('wait, how do you stop this thing?');
  }
};

//Usages:

var youcar = Object.create(Car);

console.log(yourcar.name); //'bmw'

8. Factory Pattern | TOP 10 Javascript Pattern

Top 10 Javascript Pattern: Factory Pattern

function Car(options) {
    this.doors = options.doors || 4;
    this.state = options.state || "brand new";
    this.color = options.color || "silver";
}

9. Mixin Pattern | TOP 10 Javascript Pattern

var Person = function(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.gender = 'male';
};

var clark = new Person('Clark', 'kent');

var Superhero = function(firstName, lastName, powers) {
  Person.call(this.firstName, this.lastName);
  this.powers = powers;
};

SuperHero.prototyp = Oject.create(Person.prototype);
var superman = new Superhero('Clark', 'Kent', ['flight', 'heat-vision']);

console.log(superman); //output personal attributes as well as power

Top 10 Javascript Pattern: Mixin Pattern

10. Decorator Pattern | TOP 10 Javascript Pattern

function MacBook() {
    this.cost=function() { return 997; }
    this.screenSize = function() { reutnr 11.6; }
}

// Decorator 1

function Memory( macbook ) {
    var v = macbook.cost();
    macbook.cost = function() {
      return v + 75;
    };
}

// Decorator 2

function Engraving( macbook ) {
    var v = macbook.cost();
    macbook.cost = function() {
        return v + 200;
    };
}

// Decorator 3

function Insturance( macbook ) {
    var v = macbook.cost();
    macbook.cost = function() {
        return v + 250;
    };
}

var mb = new MacBook();

Memory(mb);
Engraving(mb);
Insturance(mb);

mb.cost(); // 1522

Tổng kết