Cách tạo mã có thể sử dụng lại trong JavaScript bằng cách sử dụng các mẫu thiết kế

Cách tạo mã có thể sử dụng lại trong JavaScript bằng cách sử dụng các mẫu thiết kế

Nếu bạn muốn tạo mã JavaScript có thể sử dụng lại hoặc cộng tác với một nhóm các nhà phát triển, thì bạn cần biết cách sử dụng và xác định các mẫu thiết kế khác nhau trong ngôn ngữ.





Trong JavaScript, thuật ngữ thiết kế mẫu đề cập đến một cách viết mã cụ thể và thường được coi là một mẫu lập trình. Điều thú vị là mẫu thiết kế nhãn có thể được áp dụng cho bất cứ thứ gì từ toàn bộ ứng dụng cho đến một khối mã đơn giản.



Mẫu thiết kế là một chủ đề rộng, nhưng bằng cách hiểu mẫu mô-đun và phương pháp nhà máy, bạn sẽ nắm bắt được nó.





Mô-đun

Các mô-đun JavaScript được giới thiệu vào năm 2009, với phiên bản ES5 của ngôn ngữ lập trình. Giờ đây, các nhà phát triển mô-đun đã có thể tạo các đoạn mã tùy chỉnh và xuất chúng để sử dụng trong các phần khác của ứng dụng JavaScript.

Cấu trúc cơ bản của mô hình mô-đun


(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})();

Trong ví dụ trên, các mẫu mô-đun luôn được bao bọc trong một biểu thức hàm được gọi ngay lập tức (IIFE). Điều này có nghĩa là một mẫu mô-đun được thực thi ngay sau khi nó được xác định. Điều quan trọng cần lưu ý là mô-đun bao gồm hai phần riêng biệt.



Phần đầu tiên được sử dụng để khai báo các biến và hàm riêng, chỉ có thể được truy cập trong phạm vi của mẫu mô-đun.

Phần thứ hai bao gồm một giá trị trả về bao gồm các biến công khai và các hàm có thể được truy cập bên ngoài phạm vi của mẫu mô-đun.



Sử dụng Mẫu mô-đun để tạo ứng dụng

Hãy xem xét một ứng dụng đơn giản chẳng hạn như một trình quản lý tác vụ. Sử dụng mẫu mô-đun, bạn sẽ cần tạo các mô-đun tùy chỉnh cho từng phần. Chúng có thể bao gồm:

  • Một bộ điều khiển tác vụ
  • Bộ điều khiển giao diện người dùng
  • Bộ điều khiển lưu trữ
  • Bộ điều khiển ứng dụng

Có liên quan: Dự án lập trình cho người mới bắt đầu



Bộ điều khiển tác vụ sẽ được sử dụng để tạo mỗi tác vụ mới. Bộ điều khiển giao diện người dùng sẽ được sử dụng để điều khiển các chức năng liên quan đến giao diện người dùng, chẳng hạn như lắng nghe khi nhấp vào nút hoặc thay đổi những gì đang được hiển thị. Bộ điều khiển lưu trữ sẽ được sử dụng để lưu từng tác vụ mới vào cơ sở dữ liệu. Mô-đun ứng dụng sẽ được sử dụng để thực thi ứng dụng.

Sử dụng mẫu mô-đun để tạo ví dụ về bộ điều khiển giao diện người dùng


const UIController = ( function() {
//the private section of the module
let component = 'Replacement Text';
const changeComponent = function() {
//change all the h1 text to what is in the component variable above
const element = document.querySelector('h1');
element.textContent = component;
}
//the public section of the module
return{
callChangeComponent: function() {
changeComponent();
}
}
})();

Ví dụ trên cho thấy rõ ràng hai phần được tìm thấy trong một mẫu mô-đun — riêng tư và công khai.

Trong phần private của hàm, cả biến thành phần và hàm changeComponent đều là private. Do đó, nếu bạn muốn thay đổi tất cả văn bản h1 trên một trang web, bạn sẽ gặp lỗi nếu bạn viết mã sau.

Cách không chính xác để gọi thay đổi


UIController.changeComponent();

Thông báo lỗi sẽ nêu rõ ràng rằng changeComponent () không phải là một hàm của hàm UIController. Đây là vẻ đẹp của mô-đun; các biến và hàm được tạo trong phần riêng tư sẽ không bao giờ được truy cập trực tiếp bên ngoài phạm vi của hàm đó.

Mặc dù các biến private không thể được truy cập trực tiếp, tuy nhiên, chúng có thể được truy cập gián tiếp (từ phần public). Một điểm khác từ ví dụ về bộ điều khiển giao diện người dùng ở trên là phần công khai trong mẫu mô-đun luôn được đánh dấu bằng thuộc tính trả về.

Trong các tham số của thuộc tính trả về, bây giờ chúng ta có thể truy cập gián tiếp vào hàm changeComponent. Bây giờ chúng ta có thể sử dụng dòng mã sau (với mẫu mô-đun ở trên) để thay đổi hiệu quả tất cả văn bản h1 trên trang web được nhắm mục tiêu thành Văn bản thay thế.

Cách đúng để gọi thay đổi


UIController.callChangeComponent();

Mô hình nhà máy

Factory pattern (còn được gọi là factory method) là một mẫu thiết kế JavaScript phổ biến khác. Mẫu mô-đun tỏa sáng khi yêu cầu đóng gói dữ liệu và mẫu ban đầu hữu ích nhất trong các trường hợp khi chúng ta xử lý một tập hợp các đối tượng khác nhau giống nhau về một số khía cạnh.

Quay trở lại trình quản lý tác vụ của chúng tôi ở trên; nếu chúng tôi cho phép người dùng chỉ định một loại cho mỗi tác vụ được tạo, thì chúng tôi có thể tạo khía cạnh đó của ứng dụng (khá hiệu quả) bằng cách sử dụng mẫu ban đầu

Sử dụng mẫu gốc để chỉ định ví dụ về loại tác vụ


//Factory pattern function
const TaskFactory = function(){
this.createTask = function(name, type){
let task;
//check the type the user selected
if(type === 'urgent'){
task = new UrgentTask(name);
}else if(type === 'trivial'){
task = new TrivialTask(name);
}
//set the type selected in the if statement to the one received as a property
task.type = type;
//used to print the task and its type to the console
task.define = function(){
console.log(`${this.name} (${this.type}): ${this.priority}`)
}
return task
}
}

Đoạn mã trên sử dụng phương thức gốc để tạo tác vụ mới, kiểm tra loại (khẩn cấp hoặc tầm thường) và gán thuộc tính thích hợp trước khi in tác vụ mới vào bảng điều khiển.

Hàm bên trong createTask, tạo tiền đề cho nhiều tác vụ được tạo đồng thời, nhưng trước khi chúng tôi cố gắng tạo bất kỳ tác vụ mới nào, có một số mã bổ sung mà chúng tôi cần đưa vào phần này của dự án.

Trong đoạn mã trên, chúng tôi đang tạo một UrgentTask mới hoặc một Trivialtask mới nếu một điều kiện cụ thể được đáp ứng. Tuy nhiên, không có bất kỳ hàm hoặc lớp nào có những tên này trong dự án của chúng tôi — vấn đề này có thể được giải quyết dễ dàng bằng cách đưa đoạn mã sau vào dự án của chúng tôi.

Tạo các loại công việc khẩn cấp và nhỏ


//Create the urgent task type
const UrgentTask = function(name){
this.name = name;
this.priority = 'as soon as possible'
}
//create the trivial task type
const TrivialTask = function(name){
this.name = name;
this.priority = 'when you can'
}

Do đoạn mã trên, giờ đây chúng tôi có thể gán thuộc tính UrgentTask hoặc TrivialTask ​​cho mỗi tác vụ mới được tạo. Bước tiếp theo là tạo một tác vụ mới, nhưng trước đó, chúng ta cần tạo một cơ sở dữ liệu để lưu trữ mỗi tác vụ mới khi nó được tạo.

Giả sử rằng việc tạo cơ sở dữ liệu là toàn bộ bài viết, chúng ta sẽ thay thế cơ sở dữ liệu bằng một cấu trúc dữ liệu (một mảng).

Tạo một ví dụ về mảng


//create an array to host the different task
const task = [];

Bây giờ cuối cùng chúng ta cũng có thể tạo một nhiệm vụ mới.

Ví dụ về tạo nhiệm vụ mới


//create two new tasks
const factory = new TaskFactory();
task.push(factory.createTask('Clean the house', 'urgent'));
task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial'));

Với đoạn mã trên, bây giờ bạn có thể tạo hai tác vụ mới bằng cách sử dụng chức năng TaskFactory mà chúng tôi đã tạo ban đầu. Khi chúng ta tạo mỗi tác vụ mới, các thuộc tính (tên và kiểu) sẽ được chuyển sang hàm createTask, nằm trong hàm TaskFactory mà chúng ta đã tạo bằng cách sử dụng mẫu ban đầu.

Sau khi mỗi nhiệm vụ được thực hiện thông qua TaskFactory và thuộc tính loại thích hợp được gán cho nó. Sau đó, nó được đẩy vào mảng tác vụ mà chúng ta đã tạo trước đó.

Vấn đề nan giải duy nhất của chúng tôi bây giờ là làm sao chúng tôi biết rằng hai nhiệm vụ đó đã được tạo ra hay mô hình nhà máy của chúng tôi đã hoạt động? Nếu chúng ta đã sử dụng một cơ sở dữ liệu thì chúng ta có thể chỉ cần kiểm tra cơ sở dữ liệu để xem liệu hai tác vụ mới có được tạo hay không.

Quay lại Ví dụ Sử dụng Mô hình Nhà máy để Chỉ định Loại Tác vụ ở trên, ngay bên dưới ví dụ được sử dụng để in tác vụ và kiểu của nó cho nhận xét trên bảng điều khiển, có một hàm task.define nhỏ được tạo để in từng tác vụ trong mảng vào bảng điều khiển bằng cách sử dụng sau phương pháp mảng .


//print each task to the console
task.forEach(function(task){
task.define();
});

Bạn sẽ thấy đầu ra sau đây đang được hiển thị trong bảng điều khiển của bạn.


Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can

Bây giờ bạn có thể sử dụng các mẫu thiết kế trong các dự án JavaScript của mình

Ở giai đoạn này, bạn nên hiểu các mẫu thiết kế trong JavaScript và hiểu cách các mẫu thiết kế có thể được sử dụng để tạo mã có thể sử dụng lại và giúp cuộc sống của tất cả các nhà phát triển tham gia vào một dự án trở nên dễ dàng hơn.

Bây giờ bạn đã biết hai mẫu thiết kế JavaScript phổ biến hoạt động như thế nào, bạn sẽ có thể áp dụng chúng một cách hiệu quả để phát triển một ứng dụng.

Tín dụng hình ảnh: Alltechbuzz / Pixabay

xbox một bộ điều khiển của tôi không hoạt động
Đăng lại Đăng lại tiếng riu ríu E-mail Cách khai báo các biến trong JavaScript

Để bắt đầu với JavaScript, bạn cần hiểu các biến. Dưới đây là ba cách để khai báo biến trong JavaScript.

Đọc tiếp Chủ đề liên quan
  • Lập trình
  • JavaScript
Giới thiệu về tác giả Kadeisha Kean(21 bài báo đã xuất bản)

Kadeisha Kean là Nhà phát triển Phần mềm Full-Stack và Người viết Kỹ thuật / Công nghệ. Cô ấy có khả năng khác biệt để đơn giản hóa một số khái niệm công nghệ phức tạp nhất; sản xuất vật liệu có thể dễ dàng hiểu được bởi bất kỳ người mới làm quen với công nghệ. Cô ấy đam mê viết lách, phát triển phần mềm thú vị và đi khắp thế giới (thông qua phim tài liệu).

Xem thêm từ Kadeisha Kean

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký