Nhiều trường hợp trên một trang với Javascript

Question

Tôi đang gặp khó khăn trong việc tìm hiểu cách xử lý nhiều phiên bản của một số hàm javascript mà tôi muốn chạy trên một trang. Đó là một phần của dự án phân tích tùy chỉnh mà tôi đang làm việc.

Tôi có hàm gọi là initData(); Hàm này sử dụng một setInterval để gọi một hàm khác gửi một ping tới máy chủ của tôi sau mỗi 1000ms.

Vấn đề là tôi muốn có thể có nhiều trường hợp của chức năng này trên một trang. Vấn đề hiện tại của tôi là ngay khi dụ thứ hai được gọi là nó sẽ ghi đè tất cả các biến từ lần đầu tiên.

Cách tốt nhất để giải quyết vấn đề này là gì? Có cách nào để làm cho các chức năng tách biệt và/hoặc các cá thể riêng biệt sao cho chúng không ảnh hưởng lẫn nhau?

Answer 1

Theo mặc định tất cả các biến (và do đó cũng có khai báo hàm) sống trong không gian tên chung.

Cách duy nhất để giới thiệu một không gian tên riêng biệt trong javascript là với một cuộc gọi hàm. Đây là cách bạn làm điều đó:

(function() { 
    /* your stuff here */ 
}()); 

Bạn quấn nội dung của bạn vào một chức năng ẩn danh, rồi gọi ngay lập tức. Bằng cách này, các chức năng của bạn sẽ tách biệt, ngay cả với cùng một tên.

Ví dụ

Vì vậy, ví dụ, nếu bạn có mã như thế này:

var my, local, data; 

function initData() { 
    // use my, local and data here. 
} 

và bạn có một nơi nào đó khác:

var some, other, data; 

function initData() { 
    // use some, other, data here. 
} 

sau đó một initData sẽ ghi đè lên người kia initData. Tuy nhiên, nếu bạn quấn từng chi tiết của riêng mình (function() {}()); thì chúng sẽ tách biệt.

(function() { 
    var my, local, data; 

    function initData() { 
     // use my, local and data here. 
    } 
}()); 


(function() { 
    var some, other, data; 

    function initData() { 
     // use some, other, data here. 
    } 
}()); 

Xin lưu ý rằng những tên này không còn trong không gian tên chung, do đó chúng không có sẵn để sử dụng ngoài chức năng ẩn danh.

Một toàn cầu

Để kiểm soát số tiền và những gì bạn phơi bày trong không gian tên toàn cầu, đó là tùy chỉnh để lộ những gì bạn cần thông qua một đối tượng toàn cầu, thường là trong tất cả các chữ in hoa.

FOO.module1.initData(); 
FOO.module2.initData(); 

Bạn sẽ làm điều này bằng cách đảm bảo rằng FOO tồn tại và nếu không: hãy tạo nó.

var FOO = this.FOO || {}; 

Cùng với không gian tên mô-đun của bạn:

FOO.module1 = FOO.module1 || {}; 

và sau đó bên trong của hàm nặc danh, phơi bày những gì bạn muốn.

Ví dụ hoàn chỉnh

mô-đun1.js:

var FOO = this.FOO || {}; 
FOO.module1 = FOO.module1 || {}; 

(function() { 
    var my, local, data; 

    function initData() { 
     // use my, local and data here. 
    } 

    FOO.module1.initData = initData; 
}()); 

module2.js:

var FOO = this.FOO || {}; 
FOO.module2 = FOO.module2 || {}; 

(function() { 
    var some, other, data; 

    function initData() { 
     // use some, other and data here. 
    } 

    FOO.module2.initData = initData; 
}()); 

controller.js:

FOO.module1.initData(); 
FOO.module2.initData(); 

Một mẹo cuối cùng

Bộ điều khiển như bằng văn bản là phụ thuộc vào cả hai module1.js và module2.js và cần được tải cuối cùng. Điều đó có thể tránh được bằng cách sử dụng một cái gì đó như 's document.ready, làm cho nó chờ đợi cho tất cả các kịch bản để tải.

jQuery(document).ready(function() { 
    FOO.module1.initData(); 
    FOO.module2.initData(); 
}); 

Nếu bạn chưa sử dụng jQuery, bạn có thể sử dụng tập lệnh nhỏ như domReady để tránh sưng lên.