• Trong javascript thì có rất nhiều mô hình thiết kế (design pattern) khác nhau, thật ra ai cũng biết là về bản chất Javascript sinh ra đã không phải là một ngôn ngữ chính thống, nó sinh ra ban đầu đơn thuần chỉ dành cho việc xử lý giao diện trên trên browser, bản thân nó không được thiết kế như là một ngôn ngữ lập trình thuần túy với kiểu dữ liệu, access modifiers (private, public, protected,…), kế thừa, class,…
  • Nhưng mà rồi theo thời gian công việc của client không đơn giản chỉ còn là vài dòng script lăng quăng chỉnh sửa 1 chút giao diện html từ server trả về (nói là lăng quăng nhưng thời đó nhìn code javascript mình đã nghĩ nó thật là siêu nhân @@, function lồng nhau búa xua nhìn thật rất là ảo diệu @_@, pro cmnr ) mà nó đã đảm đương rất nhiều công việc trong sự phát triển của ứng dụng web hiện nay, bây giờ nó có khắp mọi nơi, từ server đến client rồi tràn sang database,… dễ dàng nhìn thấy nhất chính là lượng projects trên github, nơi mà dự án bằng javascript có số lượng áp đảo, những điều này làm mình chợt nhớ về câu nói nổi tiếng (nhưng đúng hay không thì do quan điểm mỗi người thôi !!!) của Jeff Atwood về javascript (Đồng sáng lập trang Stack Overflow) là:

Tất cả các ứng dụng mà có thể viết bằng javascript cuối cùng cũng sẽ được viết bằng javascript.

  • Do đó khi khối lượng công việc dưới client càng ngày càng nhiều hơn, qui mô những file script ngày càng to lên cả về mặt số lượng lẫn độ phức tạp thì các developer bắt đầu áp dụng những mô hình lập trình để cho việc quản lý, bảo trì, mở rộng và phát triển,… trở nên dễ dàng và qui chuẩn hơn.

Xem xét đoạn code dưới đây

-Bạn có nhận xét như thế nào? Ok chính xác, rõ ràng là số lượng yêu cầu khởi tạo object ở global (toàn cục) có thể khá là nhiều, nó gây cho biến global, ở đây cụ thể là biến window rất không tổ chức,khó khăn để quản lý vả nhức đầu cả trong việc đặt tên biến,… do đó dễ gây lỗi và khó bảo trì. (tại sao lại nói là object vì tất cả mọi loại dữ liệu trong javascript đều là dòng giống của object hết 😮 )

Do đó, chúng ta có thể phải cấu trúc lại là chỉ tạo một object cho ứng dụng của mình, tương tự như này:

Các bạn có thể thấy, đây chính là cấu trúc của object từ những dòng code bên trên:

f181f52a458238e447b9e045f6190230bb9c2f9b

Rõ ràng là nó chỉ còn được quản lý bởi một object duy nhất và đây cũng chính là Namespace Pattern, nhưng như bạn thấy, phải code nhiều mã nguồn hơn (MYAPP lặp đi lặp lại rất nhiều lần), và có một bất cập nữa đó chính là kiểm tra sự tồn tại của properties, xem ví dụ dưới đấy

Như các bạn thấy chúng ta phải tốn khá nhiều công sức cho việc kiểm tra ngay khi cần phải xử lý một việc nào đó từ dữ liệu trả về, cho nên chúng ta cần một function để xử lý cho việc gọi namespace (namespacing function). Ví dụ như thế này:

4b50b12efb2e02ed4739420ac814aa099809a111

OK, thật ra Namespace là một mô hình khá cơ bản dễ hình dung, đơn giản dễ hiểu, dù nó có một chút khiếm khuyết như là nếu như biến lồng nhau quá nhiều sẽ gây chậm một chút khi truy xuất, là 1 public object nên các thành phần có thể bị thay đổi,…nhưng nó vẫn là 1 pattern đơn giản nhưng hiệu quả.

 Revealing Module Pattern

Trước khi vào nội dung chính của pattern này, mình xin nói về phần access modifiers trong javascript cho bạn nào chưa biết hoặc chưa rõ, javascript không cung cấp những syntax như những ngôn ngữ lập trình truyền thống, nhưng trong javascript vẫn có thể định nghĩa được điều này, đó là khi chúng ta nhắc đến khái niệm closure (bao đóng), xem ví dụ dưới đây

techtalk-js

  • Hình bên trái: rõ ràng chúng ta chỉ lấy được giá trị id bằng hàm getId() chứ không thể truy cập trực tiếp vào id, đó chính là private trong javascript.
  • Hình bên phải: Nó chỉ rõ hai khái niệm scopeclosure mà interview hay hỏi :smiley: , đó là trong scope của object user chỉ chưa duy nhất là function getId(), và trong scope của functiongetId() lại chứa 1 closure, mà trong đó mới lấy được giá trị của id, và vì biến rolekhông nằm trong dữ liệu trả về của hàm getId() không nằm trong closure của function này nên chúng ta không thể truy xuất với biến này được.

Ah còn một khái niệm nữa mình muốn nói nữa là anonymous immediate function, tiếng Anh là vậy, tiếng Việt mình không biết, nhưng có thể gọi là hàm vô định tự gọi :D. Ví dụ nhé (Hai kiểu này đều như nhau nhé)

Bạn có thể gán cho nó một biến nhận giá trị trả về của nó

Ok, pattern này cũng chỉ dựa trên những giá trị cơ bản được nhắc ở trên, ví dụ nào

Chạy thử nào

Trong javascript vẫn còn khá nhiều pattern nữa, bạn có thể tham khảo thêm ở đây:
Javascript Pattern
– Javascript Design Pattern:https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascripthttp://jstherightway.org/#patterns

Trong những dự án hoặc những feature lớn thì code theo một pattern nào đó sẽ giúp bạn dể quản lý, dễ hình dung và sau này là bảo trì nữa, code đẹp trong sáng,…Mong là những kiến thức này sẽ giúp ích cho bạn, những javascript developer :kissing:

Techtalk via daynhauhoc.com