Hướng dẫn javascript patterns

Pattern hay Design Pattern là gì?

Theo Wiki, Design Pattern là Mẫu thiết kế. Một mẫu thiết kế phần mềm đã được các chuyên gia thiết kế và chứng minh rằng nó tối ưu nhất cho vấn đề nào đó.

Design Pattern

Nó là một mô tả hoặc mẫu hướng dẫn làm thế nào để giải quyết một vấn đề trong nhiều tình huống khác nhau.

Các Mẫu thiết kế là Best Practices [cách làm tốt nhất] mà các lập trình viên có thể dùng để giải quyết các vấn đề phổ biến khi thiết kế một phần mềm.

Javascript Pattern thì là các mẫu thiết kế dành riêng cho Javascript.

Dưới đây là TOP 10 Javascript Pattern mà mọi Lập trình viên hàng đầu thích sử dụng:

Top 10 Javascript Pattern

1. Constructor Pattern | TOP 10 Javascript Pattern

Trong các ngôn ngữ lập trình hướng đối tượng cổ điển, hàm tạo [Constructor] là một phương thức đặc biệt được sử dụng để khởi tạo một đối tượng mới được tạo sau khi bộ nhớ đã được cấp phát cho nó.

Trong JavaScript hầu hết mọi thứ là một đối tượng [object], nên chúng ta thường quan tâm nhất đến các hàm tạo đối tượng [object constructor].

Vì các hàm tạo đối tượng được sử dụng để tạo các loại đối tượng cụ thể, ví dụ:

• 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

Bên trong một hàm tạo, từ khóa this tham chiếu đến đối tượng mới đang được tạo để xem lại việc tạo đối tượng, một hàm tạo cơ bản có thể trông như sau:

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

Các Module là một phần không thể thiếu của bất kỳ kiến ​​trúc ứng dụng mạnh mẽ nào và Module - Pattern thường giúp giữ cho mã nguồn của dự án được Clean.

Có một số tùy chọn để thực hiện các module. Bao gồm các:

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

Object literals:

var newObject = {
  variableKey: variableValue,
  functionKey: function[] {
    //…
  }
};

Module - Pattern:

Top 10 Javascript Pattern: Module Pattern

Chúng ta hãy thử xem xét việc triển khai Module - Pattern bằng cách tạo một Module độc lập.

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

Một điều mà Revealing Module có thể làm là tránh lặp lại tên của main object khi chúng ta muốn gọi một phương thức public từ phương thức khác hoặc truy cập các biến public.

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

Do đó, Singletons Pattern được biết đến vì nó hạn chế khởi tạo một lớp thành một đối tượng.

Singletons khác với các static class vì chúng ta có thể trì hoãn việc khởi tạo chúng. Nói chung 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.

Đối với mã không biết về tham chiếu trước đó, chúng không cung cấp phương thức để dễ dàng truy xuất.

Chúng ta hãy xem cấu trúc của singleton:

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

Observer Pattern là một mẫu thiết kế trong đó một đối tượng duy trì một danh sách các đối tượng tùy thuộc vào người quan sát, tự động thông báo cho họ về bất kỳ trạng thái thay đổi nào.

• 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  Ngoài Javascript Pattern Bạn cũng sẽ được giới thiệu về Pattern khác khi HỌC LẬP TRÌNH JAVA WEB tại NIIT - ICT Hà Nội.
---
HỌC
VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao [Since 2002]. Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543
Email: 
Fanpage: //facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava
#hoclaptrinhphp