Mẫu mô-đun JavaScript với ví dụ [đã đóng]

Tôi không thể tìm thấy bất kỳ ví dụ có thể truy cập nào cho thấy cách hai (hoặc nhiều) mô-đun khác nhau được kết nối để làm việc cùng nhau.

Vì vậy, tôi muốn hỏi liệu có ai có thời gian để viết một ví dụ giải thích cách các mô-đun làm việc cùng nhau không.

Để tiếp cận với mẫu thiết kế Modular, trước tiên bạn cần hiểu các khái niệm này:

Biểu hiện chức năng được gọi ngay lập tức (IIFE):

(function() {
      // Your code goes here 
}());

Có hai cách bạn có thể sử dụng các chức năng. 1. Khai báo hàm 2. Biểu thức hàm.

Dưới đây là sử dụng biểu thức chức năng.

Không gian tên là gì? Bây giờ nếu chúng ta thêm không gian tên vào đoạn mã trên thì

var anoyn = (function() {
}());

Đóng cửa trong JS là gì?

Điều đó có nghĩa là nếu chúng ta khai báo bất kỳ hàm nào với bất kỳ phạm vi biến / bên trong hàm khác (trong JS chúng ta có thể khai báo một hàm bên trong hàm khác!) Thì nó sẽ luôn tính phạm vi hàm đó. Điều này có nghĩa là bất kỳ biến nào trong chức năng bên ngoài sẽ luôn được đọc. Nó sẽ không đọc biến toàn cục (nếu có) có cùng tên. Đây cũng là một trong những mục tiêu của việc sử dụng mô hình thiết kế mô-đun để tránh xung đột đặt tên.

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

Bây giờ chúng tôi sẽ áp dụng ba khái niệm tôi đã đề cập ở trên để xác định mẫu thiết kế mô-đun đầu tiên của chúng tôi:

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

jsfiddle cho mã ở trên.

Mục tiêu là để che giấu khả năng tiếp cận biến đổi từ thế giới bên ngoài.

Hi vọng điêu nay co ich. Chúc may mắn.

Tôi thực sự muốn giới thiệu bất cứ ai tham gia chủ đề này để đọc cuốn sách miễn phí của Addy Osmani:

"Học các mẫu thiết kế JavaScript".

http://addyosmani.com/resource/essentialjsdesignpotypes/book/

Cuốn sách này đã giúp tôi rất nhiều khi tôi bắt đầu viết JavaScript dễ bảo trì hơn và tôi vẫn sử dụng nó làm tài liệu tham khảo. Hãy nhìn vào các triển khai mô hình mô-đun khác nhau của anh ấy, anh ấy giải thích chúng thực sự tốt.

Tôi nghĩ rằng tôi sẽ mở rộng câu trả lời ở trên bằng cách nói về cách bạn kết hợp các mô-đun với nhau vào một ứng dụng. Tôi đã đọc về điều này trong cuốn sách crockford doug nhưng chưa quen với javascript, tất cả vẫn còn một chút bí ẩn.

Tôi đến từ nền tảng ac # vì vậy đã thêm một số thuật ngữ tôi thấy hữu ích từ đó.

Html

Bạn sẽ có một số tệp html cấp cao nhất. Nó giúp nghĩ về điều này như tập tin dự án của bạn. Mọi tệp javascript bạn thêm vào dự án đều muốn đi vào điều này, thật không may là bạn không nhận được hỗ trợ công cụ cho việc này (Tôi đang sử dụng IDEA).

Bạn cần thêm tệp vào dự án với các thẻ script như thế này:

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

Nó xuất hiện làm sập các thẻ khiến mọi thứ thất bại - trong khi có vẻ như xml thực sự là một thứ gì đó với các quy tắc điên rồ hơn!

Không gian tên tập tin

MasterFile.js

myAppNamespace = {};

đó là nó. Đây chỉ là để thêm một biến toàn cục duy nhất cho phần còn lại của mã của chúng tôi. Bạn cũng có thể khai báo các không gian tên lồng nhau ở đây (hoặc trong các tệp của riêng họ).

Mô-đun

Một sốComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

Những gì chúng ta đang làm ở đây là gán một hàm đếm tin nhắn cho một biến trong ứng dụng của chúng ta. Đây là một hàm trả về một hàm mà chúng ta thực thi ngay lập tức .

Các khái niệm

Tôi nghĩ rằng nó giúp nghĩ về dòng trên cùng trong Một số thành phần là không gian tên nơi bạn đang khai báo một cái gì đó. Nhắc nhở duy nhất cho điều này là tất cả các không gian tên của bạn cần xuất hiện trong một số tệp khác trước - chúng chỉ là các đối tượng được bắt nguồn từ biến ứng dụng của chúng tôi.

Hiện tại tôi chỉ thực hiện các bước nhỏ với điều này (tôi đang cấu trúc lại một số javascript bình thường từ một ứng dụng extjs để tôi có thể kiểm tra nó) nhưng có vẻ khá hay vì bạn có thể xác định các đơn vị chức năng nhỏ trong khi tránh được vũng lầy của 'điều này ' .

Bạn cũng có thể sử dụng kiểu này để xác định các hàm tạo bằng cách trả về một hàm trả về một đối tượng có một tập hợp các hàm và không gọi nó ngay lập tức.

Tại đây https://toddmotto.com/mastering-the-module-potype bạn có thể tìm thấy mô hình được giải thích kỹ lưỡng. Tôi sẽ nói thêm rằng điều thứ hai về JavaScript mô-đun là cách cấu trúc mã của bạn trong nhiều tệp. Nhiều người có thể khuyên bạn nên đi với AMD, nhưng tôi có thể nói từ kinh nghiệm rằng bạn sẽ kết thúc ở một số điểm với phản hồi trang chậm vì nhiều yêu cầu HTTP. Cách thoát là biên dịch trước các mô-đun JavaScript của bạn (một cho mỗi tệp) thành một tệp theo tiêu chuẩn CommonJS. Hãy xem các mẫu tại đây http://dsheiko.github.io/cjsc/

Bạn có thể tìm thấy Mô hình JavaScript ở đây http://www.sga.su/module-potype-javascript/