Mẫu mô-đun javascript

Nội dung bài viết

Video learning setting per day

7 mẫu thiết kế JavaScript tốt nhất bạn nên biết - Các mẫu thiết kế trong JavaScript là các giải pháp có thể tái sử dụng được áp dụng cho các sự cố thường xảy ra khi viết các ứng dụng web JavaScript

Giới thiệu

Khá phù hợp khi coi các mẫu thiết kế JavaScript là mẫu để cung cấp giải pháp cho các vấn đề nhưng không hoàn toàn có thể nói rằng các mẫu này có thể thay thế các nhà phát triển

Các mẫu thiết kế giúp kết hợp kinh nghiệm của nhiều nhà phát triển để cấu trúc mã theo cách tối ưu hóa đáp ứng các vấn đề mà chúng tôi đang tìm kiếm giải pháp và cung cấp từ vựng phổ biến được sử dụng để mô tả các giải pháp cho các vấn đề của chúng tôi hơn là mô tả cú pháp và ngữ nghĩa của mã của chúng tôi

Các mẫu thiết kế JavaScript hỗ trợ các nhà phát triển viết mã có tổ chức, đẹp mắt và có cấu trúc tốt. Mặc dù các mẫu thiết kế, khi được sử dụng có thể dễ dàng được sử dụng lại, nhưng chúng không bao giờ có thể bổ sung cho các nhà phát triển, thay vào đó, chúng chỉ hỗ trợ họ bằng cách ngăn chặn các vấn đề nhỏ có thể dẫn đến các vấn đề lớn trong quá trình phát triển ứng dụng web bằng cách cung cấp các giải pháp tổng quát không gắn với một vấn đề cụ thể.

Chúng làm giảm cơ sở mã tổng thể bằng cách loại bỏ các lần lặp lại không cần thiết, do đó làm cho mã của chúng tôi mạnh mẽ hơn so với các giải pháp đặc biệt

Trong bài viết này, tôi sẽ khám phá bảy mẫu thiết kế JavaScript tốt nhất và phổ biến nhất, tất nhiên hầu hết chúng sẽ thuộc ba loại cụ thể là; . Một mô hình là một cái gì đó giống như hình ảnh sau đây; .

1. Mẫu thiết kế xây dựng

Đây là một phương thức đặc biệt được sử dụng để khởi tạo các đối tượng mới được tạo sau khi bộ nhớ được cấp phát. Vì JavaScript thường hướng đối tượng, nên nó xử lý hầu hết các đối tượng, do đó tôi dự định sẽ đi sâu vào các hàm tạo đối tượng. Có ba cách để tạo đối tượng mới trong JavaScript

Sau đây là một cách để tạo mẫu thiết kế hàm tạo

    // This creates a new empty Object

    var newObject = {};

    // This creates a new empty Object

    var newObject = Object.create[Object.prototype];

    var newObject = newObject[];

Để truy cập các thuộc tính của hàm, bạn cần khởi tạo đối tượng

    const object = new ConstructorObject[2;

Theo đó, từ khóa mới ở trên cho JavaScript biết rằng aconstructorObject nên hoạt động như một hàm tạo. Kế thừa là một điều mà mẫu thiết kế này không hỗ trợ. Tìm hiểu thêm chi tiết

2. mẫu thử nghiệm

Mẫu nguyên mẫu dựa trên sự kế thừa nguyên mẫu theo đó các đối tượng được tạo ra để đóng vai trò là nguyên mẫu cho các đối tượng khác. Trong thực tế, các nguyên mẫu hoạt động như một kế hoạch chi tiết cho mỗi hàm tạo đối tượng được tạo

Ví dụ

    var myCat= {
    name:"Ford Escort",
    brake:function[]{
    console.log["Stop! I am applying brakes"];
    }
    Panic : function []{
    console.log[ "wait. how do you stop thuis thing?"]
    }
    }
    // use objec create to instansiate a new car
    var yourCar= object.create[myCar];
    //You can now see that one is a prototype of the other
    console.log[yourCar.name];]

3. Mẫu thiết kế mô-đun

Trong mẫu thiết kế mô-đun, có một cải tiến từ mẫu nguyên mẫu. Các loại công cụ sửa đổi khác nhau [cả riêng tư và công khai] được đặt trong mẫu mô-đun. Bạn có thể tạo các chức năng hoặc thuộc tính tương tự mà không có xung đột. Có sự linh hoạt trong việc đổi tên chức năng một cách công khai. Phần khó khăn của điều này là không có khả năng ghi đè lên các chức năng đã tạo từ môi trường bên ngoài

Ví dụ

    function AnimalContainter [] {

    const container = [];

    function addAnimal [name] {
    container.push[name];
    }

    function getAllAnimals[] {
    return container;
    }

    function removeAnimal[name] {
    const index = container.indexOf[name];
    if[index < 1] {
    throw new Error['Animal not found in container'];
    }
    container.splice[index, 1]
    }

    return {
    add: addAnimal,
    get: getAllAnimals,
    remove: removeAnimal
    }
    }

    const container = AnimalContainter[];
    container.add['Hen'];
    container.add['Goat'];
    container.add['Sheep'];

    console.log[container.get[]] //Array[3] ["Hen", "Goat", "Sheep"]
    container.remove['Sheep']
    console.log[container.get[]]; //Array[2] ["Hen", "Goat"]

4. Mẫu đơn

Điều cần thiết trong trường hợp chỉ cần tạo một phiên bản, ví dụ: kết nối cơ sở dữ liệu. Chỉ có thể tạo phiên bản khi kết nối bị đóng hoặc bạn đảm bảo đóng phiên bản đang mở trước khi mở phiên bản mới. Mẫu này còn được gọi là mẫu nghiêm ngặt, một nhược điểm liên quan đến mẫu này là trải nghiệm khó khăn khi thử nghiệm do các đối tượng phụ thuộc ẩn của nó không dễ dàng được chọn ra để thử nghiệm

Ví dụ

    function DatabaseConnection [] {

    let databaseInstance = null;

    // tracks the number of instances created at a certain time
    let count = 0;

    function init[] {
    console.log[`Opening database #${count + 1}`];
    //now perform operation
    }
    function createIntance[] {
    if[databaseInstance == null] {
    databaseInstance = init[];
    }
    return databaseInstance;
    }
    function closeIntance[] {
    console.log['closing database'];
    databaseInstance = null;
    }
    return {
    open: createIntance,
    close: closeIntance
    }
    }

    const database = DatabseConnection[];
    database.open[]; //Open database #1
    database.open[]; //Open database #1
    database.open[]; //Open database #1
    database.close[]; //close database

5. Mô hình nhà máy

Nó là một sáng tạo liên quan đến việc tạo các đối tượng mà không cần hàm tạo. Nó cung cấp một giao diện chung để tạo các đối tượng, nơi chúng ta có thể chỉ định loại đối tượng nhà máy sẽ được tạo. Do đó, chúng tôi chỉ xác định đối tượng và nhà máy sẽ khởi tạo và trả lại cho chúng tôi sử dụng. Chúng ta nên sử dụng mẫu xuất xưởng khi thành phần đối tượng được thiết lập có mức độ phức tạp cao và khi chúng ta muốn tạo các thể hiện khác nhau của các đối tượng một cách dễ dàng tùy thuộc vào môi trường chúng ta đang ở. Chúng ta cũng có thể sử dụng factory pattern khi làm việc với nhiều đối tượng nhỏ có cùng thuộc tính và khi tổng hợp các đối tượng cần tách rời

    // Dealer A

    DealerA = {};

    DealerA.title = function title[] {
    return "Dealer A";
    };

    DealerA.pay = function pay[amount] {
    console.log[
    `set up configuration using username: ${this.username} and password: ${
    this.password
    }`
    ];
    return `Payment for service ${amount} is successful using ${this.title[]}`;
    };

    //Dealer B

    DealerB = {};
    DealerB.title = function title[] {
    return "Dealer B";
    };

    DealerB.pay = function pay[amount] {
    console.log[
    `set up configuration using username: ${this.username}
    and password: ${this.password}`
    ];
    return `Payment for service ${amount} is successful using ${this.title[]}`;
    };

    //@param {*} DealerOption
    //@param {*} config

    function DealerFactory[DealerOption, config = {}] {
    const dealer = Object.create[dealerOption];
    Object.assign[dealer, config];
    return dealer;
    }

    const dealerFactory = DealerFactory[DealerA, {
    username: "user",
    password: "pass"
    }];
    console.log[dealerFactory.title[]];
    console.log[dealerFactory.pay[12]];

    const dealerFactory2 = DealerFactory[DealerB, {
    username: "user2",
    password: "pass2"
    }];
    console.log[dealerFactory2.title[]];
    console.log[dealerFactory2.pay[50]];

6. Mẫu quan sát

Mẫu thiết kế người quan sát tiện dụng ở nơi các đối tượng giao tiếp đồng thời với các nhóm đối tượng khác. Trong mẫu người quan sát này, không có sự kiện đẩy và kéo không cần thiết giữa các trạng thái, thay vào đó, các mô-đun liên quan chỉ sửa đổi trạng thái hiện tại của dữ liệu

Ví dụ

    function Observer[] {
    this.observerContainer = [];
    }

    Observer.prototype.subscribe = function [element] {
    this.observerContainer.push[element];
    }

    // the following removes an element from the container

    Observer.prototype.unsubscribe = function [element] {

    const elementIndex = this.observerContainer.indexOf[element];
    if [elementIndex > -1] {
    this.observerContainer.splice[elementIndex, 1];
    }
    }

    /**
    * we notify elements added to the container by calling
    * each subscribed components added to our container
    */
    Observer.prototype.notifyAll = function [element] {
    this.observerContainer.forEach[function [observerElement] {
    observerElement[element];
    }];
    }

7. Mẫu lệnh

Để kết thúc, tôi muốn nói rằng mẫu thiết kế lệnh kết thúc 7 mẫu thiết kế JavaScript tốt nhất của tôi. Mẫu thiết kế lệnh gói gọn lời gọi phương thức, hoạt động hoặc yêu cầu vào một đối tượng để chúng ta có thể chuyển các lời gọi phương thức theo quyết định của mình. Mẫu thiết kế lệnh cho chúng ta cơ hội đưa ra lệnh từ bất kỳ thứ gì đang thực thi lệnh và thay vào đó ủy thác trách nhiệm cho các đối tượng khác nhau. Các lệnh này được trình bày ở định dạng

    const object = new ConstructorObject[2;

    const object = new ConstructorObject[2;

Phần kết luận

Sẽ có lợi cho các nhà phát triển JavaScript khi sử dụng các mẫu thiết kế. Một số ưu điểm chính của việc sử dụng các mẫu thiết kế bao gồm khả năng bảo trì dự án và cũng cắt bỏ các công việc không cần thiết trong chu trình phát triển. Mặc dù các mẫu thiết kế JavaScript có thể cung cấp giải pháp cho các vấn đề phức tạp, không cần phải nói, phát triển nhanh chóng và năng suất, nhưng sẽ không đúng khi kết luận rằng các mẫu thiết kế này có thể thay thế các nhà phát triển.