Hướng dẫn how to organize javascript code - cách tổ chức mã javascript

Tổ chức mã JavaScript của bạn

Một trong những phần khó khăn nhất của JavaScript là học cách tổ chức mã của bạn. Lý do chủ đề này có thể áp đảo không phải là vì JavaScript phức tạp hơn nhiều so với các ngôn ngữ khác, mà bởi vì nó cực kỳ tha thứ! Nhiều ngôn ngữ buộc bạn sử dụng các mẫu và cấu trúc dữ liệu cụ thể trong mã của bạn, nhưng điều đó không đúng trong JavaScript.

Nội dung chính Show

• Tổ chức mã JavaScript của bạn
• Tài nguyên bổ sung
• Mẫu mô -đun#Phần 2
• Xây dựng một mô -đun#Phần 3
• plugin jQuery#Phần4
• Options#section5
• API#section6
• Giao diện nhà phát triển đánh bóng#Phần7

Ban đầu, đây là một điều tuyệt vời! Ví dụ: nếu bạn chỉ muốn tạo một nút đơn giản trên trang web của mình, hãy làm gì đó, bạn có thể đặt nó thành một vài dòng mã. Tuy nhiên, khi chương trình của bạn trở nên phức tạp hơn, nó có thể trở nên khó duy trì trừ khi bạn quan tâm đến việc tổ chức mã của mình và vì JavaScript là một ngôn ngữ linh hoạt, cách bạn làm điều đó hoàn toàn tùy thuộc vào bạn. Đối với nhiều lập trình viên, việc đưa ra quyết định về các mẫu thiết kế là làm tê liệt, vì vậy chúng tôi đã ở đây để giúp đỡ.

Loạt bài học này sẽ bao gồm một vài mẫu thiết kế phổ biến nhất xảy ra trong mã JavaScript hiện đại. Chúng tôi sẽ thảo luận về một số ưu và nhược điểm của từng mẫu và sẽ cho bạn cơ hội thực hành bằng cách sử dụng từng mẫu trong một dự án.

Các mẫu mà chúng tôi sẽ đề cập trong loạt bài này là:

• Các đối tượng JavaScript cũ và các hàm tạo đối tượng
• Chức năng của nhà máy và mẫu mô -đun
• Các lớp học
• Mô -đun ES6

Trải qua những điều này sẽ cho chúng ta một cơ hội để tìm hiểu về một vài khái niệm quan trọng khác trong JavaScript, chẳng hạn như đóng cửa, các nguyên mẫu của Hồi giáo, Hồi iifes và hơn thế nữa! Sê -ri này bao gồm các phần quan trọng nhất của JavaScript sau khi chỉ học những điều cơ bản của ngôn ngữ mà bạn đã sẵn sàng chưa?

Tài nguyên bổ sung

Phần này chứa các liên kết hữu ích đến nội dung khác. Nó được yêu cầu, vì vậy hãy xem xét nó bổ sung.

• Cuốn sách mà bạn không biết JS (YDKJS) là miễn phí trên GitHub và giải thích cách JavaScript hoạt động trên mạng dưới mui xe. Nếu bạn từng tự hỏi tại sao JavaScript hoạt động theo cách của nó, cuốn sách này là dành cho bạn!

John Au-Yeung

Ngày 14 tháng 10 năm 2019

9 phút đọc

Ảnh của Shahadat Shemul trên undplash

Các chức năng là các khối mã nhỏ có một số đầu vào và có thể trả về một số đầu ra hoặc có tác dụng phụ, điều đó có nghĩa là nếu sửa đổi một số biến bên ngoài hàm. Chúng tôi cần các chức năng để tổ chức mã thành các khối nhỏ có thể tái sử dụng. Không có chức năng, nếu chúng ta muốn chạy lại một đoạn mã, chúng ta phải sao chép nó ở những nơi khác nhau. Các chức năng rất quan trọng đối với bất kỳ chương trình JavaScript nào.

Khi tôi mới bắt đầu với JavaScript, tôi thường đặt bất cứ thứ gì tôi cần vào các chức năng và gọi chúng khi tôi cần. Đó là lúc đó.

Bây giờ, khi tôi đang xây dựng ngày càng nhiều ứng dụng web phức tạp hơn với JavaScript; Tận dụng sự tương tác của người dùng phản ứng nhanh hơn, tôi nhận ra rằng tôi cần làm cho mã của mình dễ đọc hơn - không chỉ bởi tôi, mà bất cứ ai thay thế tôi. Bên cạnh đó, tôi muốn giảm những khoảnh khắc của 'cái quái gì, tại sao tôi lại làm điều này' khi tôi đọc mã của riêng mình nhiều tháng sau , mặc dù tôi cố gắng tránh những trường hợp như vậy)

Một vài tuần trước, tôi đã vào Joose, và cho đến nay, nó đã tốt, nhưng tôi tự hỏi phần còn lại làm gì để biến mã của họ thành các phân đoạn có ý nghĩa và có thể đọc được bởi các lập trình viên tiếp theo.

Bên cạnh việc làm cho nó có thể đọc được, các bước của bạn trong việc làm cho HTML của bạn tách khỏi logic mã của bạn là gì? Giả sử bạn cần tạo các hàng bảng động với dữ liệu. Bạn có bao gồm điều đó trong mã JavaScript của mình, hãy thêm phần tử TD vào chuỗi hoặc bạn làm bất cứ điều gì khác. Tôi đang tìm kiếm các giải pháp và ý tưởng trong thế giới thực, không phải một số ý tưởng lý thuyết được đặt ra bởi một số chuyên gia.real world solutions and ideas, not some theoretical ideas posed by some expert.

Vì vậy, trong trường hợp bạn không hiểu những điều trên, bạn có sử dụng các thực hành OOP không. Nếu bạn không sử dụng những gì?

Thiết kế tuyệt vời là một sản phẩm của sự chăm sóc và sự chú ý được áp dụng cho các lĩnh vực quan trọng, dẫn đến một giao diện người dùng hữu ích, dễ hiểu và hy vọng. Nhưng don không bị lừa khi nghĩ rằng thiết kế chỉ còn lại cho các nhà thiết kế.

Bài viết tiếp tục dưới đây

Có rất nhiều thiết kế trong mã và tôi không có nghĩa là mã xây dựng giao diện người dùng. Ý tôi là thiết kế mã.

Mã được thiết kế tốt dễ dàng hơn nhiều để duy trì, tối ưu hóa và mở rộng, làm cho các nhà phát triển hiệu quả hơn. Điều đó có nghĩa là sự tập trung và năng lượng hơn có thể được chi tiêu cho việc xây dựng những điều tuyệt vời, điều này khiến mọi người hạnh phúc với những người sử dụng, nhà phát triển và các bên liên quan.

Có ba khía cạnh cấp cao, bất khả tri cấp cao đối với thiết kế mã đặc biệt quan trọng.

1. Kiến trúc hệ thống, bố cục cơ bản của cơ sở mã. Các quy tắc chi phối làm thế nào các thành phần khác nhau, chẳng hạn như mô hình, quan điểm và bộ điều khiển, tương tác với nhau.
2. Khả năng duy trì - Làm thế nào tốt, mã có thể được cải thiện và mở rộng?
3. Khả năng tái sử dụng, Làm thế nào có thể sử dụng lại là các thành phần ứng dụng? Làm thế nào dễ dàng mỗi việc thực hiện một thành phần được tùy chỉnh?

Trong các ngôn ngữ lỏng lẻo hơn, cụ thể là JavaScript, phải mất một chút kỷ luật để viết mã được thiết kế tốt. Môi trường JavaScript rất tha thứ đến nỗi nó dễ dàng ném bit và mảnh ở khắp mọi nơi và vẫn có những thứ hoạt động. Thiết lập kiến ​​trúc hệ thống sớm (và gắn bó với nó!) Cung cấp các ràng buộc cho cơ sở mã của bạn, đảm bảo tính nhất quán trong suốt.

Một cách tiếp cận mà tôi thích bao gồm một mẫu thiết kế phần mềm thử và đúng, mẫu mô-đun, có cấu trúc mở rộng cho vay một kiến ​​trúc hệ thống rắn và cơ sở mã có thể duy trì. Tôi thích các mô-đun xây dựng trong một plugin jQuery, tạo ra khả năng tái sử dụng đẹp, cung cấp các tùy chọn mạnh mẽ và phơi bày một API được chế tạo tốt.

Dưới đây, tôi sẽ đi qua cách tạo mã của bạn thành các thành phần được tổ chức tốt có thể được sử dụng lại trong các dự án sắp tới.

Mẫu mô -đun#Phần 2

Có rất nhiều mẫu thiết kế ngoài kia, và cũng như nhiều tài nguyên trên chúng. Addy Osmani đã viết một cuốn sách tuyệt vời (miễn phí!) Về các mẫu thiết kế trong JavaScript, mà tôi đánh giá cao cho các nhà phát triển ở tất cả các cấp.

Mẫu mô -đun là một nền tảng cấu trúc đơn giản có thể giúp giữ cho mã của bạn sạch sẽ và có tổ chức. Một mô -đun của người Viking chỉ là một đối tượng tiêu chuẩn có chứa các phương thức và thuộc tính, và sự đơn giản đó là điều tốt nhất về mô hình này: ngay cả một người không quen thuộc với các mẫu thiết kế phần mềm truyền thống cũng có thể nhìn vào mã và ngay lập tức hiểu cách nó hoạt động.

Trong các ứng dụng sử dụng mẫu này, mỗi thành phần có mô -đun riêng biệt. Ví dụ: để xây dựng chức năng AutoComplete, bạn đã tạo một mô -đun cho TextField và một mô -đun cho danh sách kết quả. Hai mô -đun này sẽ hoạt động cùng nhau, nhưng mã TextField sẽ chạm vào mã danh sách kết quả và ngược lại.

Việc tách rời các thành phần đó là lý do tại sao mẫu mô -đun là tuyệt vời để xây dựng kiến ​​trúc hệ thống rắn. Các mối quan hệ trong ứng dụng được xác định rõ; Bất cứ điều gì liên quan đến TextField đều được quản lý bởi mô -đun TextField, không được rải khắp cơ sở mã hóa có kết nối trong mã rõ ràng.

Một lợi ích khác của tổ chức dựa trên mô-đun là nó vốn có thể duy trì. Các mô -đun có thể được cải thiện và tối ưu hóa độc lập mà không ảnh hưởng đến bất kỳ phần nào khác của ứng dụng.

Tôi đã sử dụng mẫu mô-đun cho cấu trúc cơ bản của JPanelmenu, plugin jQuery mà tôi đã xây dựng cho các hệ thống menu ngoài-can. Tôi sẽ sử dụng nó như một ví dụ để minh họa quá trình xây dựng một mô -đun.

Xây dựng một mô -đun#Phần 3

Để bắt đầu, tôi xác định ba phương thức và một thuộc tính được sử dụng để quản lý các tương tác của hệ thống menu.

var jpm = {
    animated: true,
    openMenu: function( ) {
        …
        this.setMenuStyle( );
    },
    closeMenu: function( ) {
        …
        this.setMenuStyle( );
    },
    setMenuStyle: function( ) { … }
};

Ý tưởng là chia mã thành các bit nhỏ nhất, có thể tái sử dụng nhất có thể. Tôi có thể đã viết chỉ một phương thức toggleMenu( ), nhưng tạo ra các phương thức openMenu( ) và closeMenu( ) riêng biệt cung cấp nhiều khả năng kiểm soát và tái sử dụng hơn trong mô -đun.

Lưu ý rằng các cuộc gọi đến các phương thức và thuộc tính mô -đun từ bên trong chính mô -đun (chẳng hạn như các cuộc gọi đến ____10) được đặt trước với từ khóa

(function($) {
    // jQuery plugin code here
})(jQuery);

1, cách mà các mô -đun truy cập các thành viên của họ.

Đó là cấu trúc cơ bản của một mô -đun. Bạn có thể tiếp tục thêm các phương thức và thuộc tính khi cần thiết, nhưng nó không phức tạp hơn thế. Sau khi các nền tảng cấu trúc được đưa ra, các tùy chọn Lớp tái sử dụng và một API bị lộ có thể được xây dựng trên đầu.

plugin jQuery#Phần4

Khía cạnh thứ ba của mã được thiết kế tốt có lẽ là quan trọng nhất: khả năng tái sử dụng. Phần này đi kèm với một cảnh báo. Mặc dù rõ ràng có những cách để xây dựng và triển khai các thành phần có thể tái sử dụng trong JavaScript thô (chúng tôi khoảng 90 phần trăm cách đó với mô -đun của chúng tôi ở trên), tôi thích xây dựng các plugin jQuery cho những thứ phức tạp hơn, vì một vài lý do.

Quan trọng nhất, nó là một hình thức giao tiếp không phô trương. Nếu bạn đã sử dụng jQuery để xây dựng một thành phần, bạn nên làm cho điều đó hiển nhiên cho những người thực hiện nó. Xây dựng thành phần như một plugin jQuery là một cách tuyệt vời để nói rằng cần phải có jQuery.

Ngoài ra, mã triển khai sẽ phù hợp với phần còn lại của mã dự án dựa trên jQuery. Điều đó tốt cho lý do thẩm mỹ, nhưng điều đó cũng có nghĩa là (ở một mức độ nào đó) mà các nhà phát triển có thể dự đoán cách tương tác với plugin mà không cần nghiên cứu quá nhiều. Chỉ cần thêm một cách để xây dựng giao diện nhà phát triển tốt hơn.

Trước khi bạn bắt đầu xây dựng một plugin jQuery, hãy đảm bảo rằng plugin không mâu thuẫn với các thư viện JavaScript khác bằng ký hiệu

(function($) {
    // jQuery plugin code here
})(jQuery);

2. Điều đó đơn giản hơn rất nhiều so với âm thanh của nó, chỉ cần bọc mã plugin của bạn như vậy:

(function($) {
    // jQuery plugin code here
})(jQuery);

Tiếp theo, chúng tôi thiết lập plugin của chúng tôi và thả mã mô -đun được xây dựng trước đó bên trong. Một plugin chỉ là một phương thức được xác định trên đối tượng jQuery

(function($) {
    // jQuery plugin code here
})(jQuery);

3.

(function($) {
    $.jPanelMenu = function( ) {
        var jpm = {
            animated: true,
            openMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            closeMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            setMenuStyle: function( ) { … }
        };
    };
})(jQuery);

Tất cả những gì cần sử dụng plugin là một cuộc gọi đến chức năng bạn vừa tạo.

var jpm = $.jPanelMenu( );

Options#section5

Các tùy chọn rất cần thiết cho bất kỳ plugin thực sự có thể tái sử dụng vì chúng cho phép tùy chỉnh cho mỗi lần triển khai. Mỗi dự án mang theo một loạt các kiểu thiết kế, loại tương tác và cấu trúc nội dung. Tùy chọn có thể tùy chỉnh giúp đảm bảo rằng bạn có thể điều chỉnh plugin để phù hợp với các ràng buộc dự án đó.

Nó thực hành tốt nhất để cung cấp các giá trị mặc định tốt cho các tùy chọn của bạn. Cách dễ nhất để làm điều đó là sử dụng phương pháp JQuery từ

(function($) {
    // jQuery plugin code here
})(jQuery);

4, chấp nhận (ít nhất) hai đối số.

Là đối số đầu tiên của

(function($) {
    // jQuery plugin code here
})(jQuery);

4, hãy xác định một đối tượng với tất cả các tùy chọn có sẵn và các giá trị mặc định của chúng. Là đối số thứ hai, hãy chuyển qua các tùy chọn truyền qua. Điều này sẽ hợp nhất hai đối tượng, ghi đè các mặc định với bất kỳ tùy chọn được truyền vào.

(function($) {
    $.jPanelMenu = function(options) {
        var jpm = {
            options: $.extend({
                'animated': true,
                'duration': 500,
                'direction': 'left'
            }, options),
            openMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            closeMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            setMenuStyle: function( ) { … }
        };
    };
})(jQuery);

Ngoài việc cung cấp mặc định tốt, các tùy chọn trở thành gần như tự ghi chép, một số người có thể xem xét mã và xem tất cả các tùy chọn có sẵn ngay lập tức.

Phơi bày càng nhiều tùy chọn càng khả thi. Việc tùy biến sẽ giúp triển khai trong tương lai và sự linh hoạt không bao giờ đau.

API#section6

Tùy chọn là những cách tuyệt vời để tùy chỉnh cách thức hoạt động của một plugin. Mặt khác, API cho phép các phần mở rộng cho chức năng plugin plugin bằng cách hiển thị các phương thức và thuộc tính để mã triển khai tận dụng lợi thế.

Mặc dù nó rất tuyệt khi tiếp xúc càng nhiều càng tốt thông qua API, nhưng thế giới bên ngoài không nên truy cập vào tất cả các phương thức và thuộc tính nội bộ. Lý tưởng nhất, bạn chỉ nên phơi bày các yếu tố sẽ được sử dụng.

Trong ví dụ của chúng tôi, API lộ ra nên bao gồm các cuộc gọi để mở và đóng menu, nhưng không có gì khác. Phương thức

(function($) {
    // jQuery plugin code here
})(jQuery);

0 nội bộ chạy khi menu mở và đóng, nhưng công chúng không cần truy cập vào nó.

Để hiển thị API, hãy trả về một đối tượng với bất kỳ phương thức và thuộc tính mong muốn nào ở cuối mã plugin. Bạn thậm chí có thể ánh xạ các phương thức và thuộc tính được trả về cho các phương thức trong mã mô -đun, đây là nơi tổ chức đẹp của mẫu mô -đun thực sự tỏa sáng.

(function($) {
    $.jPanelMenu = function(options) {
        var jpm = {
            options: $.extend({
                'animated': true,
                'duration': 500,
                'direction': 'left'
            }, options),
            openMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            closeMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            setMenuStyle: function( ) { … }
        };

        return {
            open: jpm.openMenu,
            close: jpm.closeMenu,
            someComplexMethod: function( ) { … }
        };
    };
})(jQuery);

Các phương thức và thuộc tính API sẽ có sẵn thông qua đối tượng được trả về từ khởi tạo plugin.

var jpm = $.jPanelMenu({
    duration: 1000,
    …
});
jpm.open( );

Giao diện nhà phát triển đánh bóng#Phần7

Chỉ với một vài cấu trúc và hướng dẫn đơn giản, chúng tôi đã xây dựng cho mình một plugin có thể sử dụng lại, có thể mở rộng sẽ giúp cuộc sống của chúng tôi dễ dàng hơn. Giống như bất kỳ phần nào của những gì chúng tôi làm, thử nghiệm cấu trúc này để xem nó có hiệu quả với bạn, nhóm của bạn và quy trình làm việc của bạn không.

Bất cứ khi nào tôi thấy mình xây dựng một cái gì đó có tiềm năng tái sử dụng, tôi chia nó thành một plugin jQuery dựa trên mô-đun. Phần tốt nhất về phương pháp này là nó buộc bạn phải sử dụng và kiểm tra mã mà bạn viết. Bằng cách sử dụng một cái gì đó khi bạn xây dựng nó, bạn sẽ nhanh chóng xác định các điểm mạnh, khám phá những thiếu sót và lập kế hoạch thay đổi.

Quá trình này dẫn đến mã thử nghiệm chiến đấu đã sẵn sàng cho các đóng góp nguồn mở, hoặc được bán và phân phối. Tôi đã phát hành các plugin được đánh bóng (chủ yếu) của mình dưới dạng các dự án nguồn mở trên GitHub.

Ngay cả khi bạn không xây dựng một cái gì đó được phát hành trong tự nhiên, thì vẫn rất quan trọng để nghĩ về thiết kế mã của bạn. Bản thân tương lai của bạn sẽ cảm ơn bạn.