Javascript chứa các sự kiện hộp cát và ngăn xếp phía máy khách

Question

Tôi đang trong quá trình di chuyển ứng dụng web nặng JSF sang ứng dụng mô-đun REST và chủ yếu là JS.

Tôi đã theo dõi "kiến trúc ứng dụng javascript khả năng mở rộng" của Nicholas Zakas trên YUI hát (video xuất sắc) và tôi thực hiện phần lớn các cuộc trao đổi với thành công tốt đẹp, nhưng tôi có một số câu hỏi:

1. tôi thấy bài giảng hơi khó hiểu về mối quan hệ giữa mô-đun và hộp cát, một mặt, với hiểu biết của tôi, mô-đun sẽ không bị ảnh hưởng bởi điều gì đó xảy ra bên ngoài sandbox của họ và đây là lý do tại sao họ xuất bản sự kiện qua hộp cát (chứ không phải thông qua cốt lõi, vì cốt lõi là để ẩn thư viện cơ sở) nhưng mỗi mô-đun trong ứng dụng nhận được một sandbox mới? Không nên sandbox giới hạn sự kiện cho các modoules sử dụng nó hay các sự kiện nên được xuất bản trên trang? ví dụ. : nếu tôi có hai bảng có thể chỉnh sửa nhưng tôi muốn chứa từng bảng trong một hộp cát khác nhau và sự kiện của nó chỉ ảnh hưởng đến các mô-đun bên trong hộp cát đó, chẳng hạn như hộp thông báo trên mỗi bảng là một mô-đun/tiện ích khác, tôi có thể làm như thế nào với hộp cát cho mỗi mô-đun, tất nhiên tôi có thể thêm tiền tố cho các sự kiện với moduleid nhưng tạo ra khớp nối mà tôi muốn tránh ... và tôi không muốn đóng gói các mô-đun với nhau như một mô-đun cho mỗi kết hợp như tôi đã có 6-7 mô-đun.

2. Mặc dù tôi có thể ẩn thư viện cơ sở cho những thứ nhỏ như bộ chọn id v.v .. Tôi vẫn muốn sử dụng thư viện cơ sở cho phụ thuộc mô-đun và tải tài nguyên và sử dụng thứ gì đó như trình tải YUI hoặc dojo.require. 'Ẩn thư viện cơ sở nhưng các mô-đun được định nghĩa và được tải bởi thư viện cơ sở ... có vẻ hơi lạ với tôi.

3. thư viện không trả lại các đối tượng js đơn giản nhưng thường bao bọc chúng, ví dụ: : Bạn có thể làm một cái gì đó như $$ ('. Classname') mỗi (.. mà làm sạch mã rất nhiều, nó làm cho không có ý nghĩa để bọc cơ sở và sau đó trong mô-đun tạo ra một sự phụ thuộc cho thư viện cơ sở bằng cách thực hiện. nhưng không sử dụng các tính năng đó làm cho nhiều mã được viết có thể bị bỏ sót ... và việc triển khai chức năng đó rất dễ bị lỗi.

4. Có ai có kinh nghiệm xây dựng một ngăn xếp phía trước của đơn đặt hàng này không? là nó thay đổi thư viện cơ sở và/hoặc có các mô-đun từ các thư viện khác nhau, sử dụng yui datatable nhưng thực hiện xác nhận biểu mẫu với dojo ...?

5. Hơi kết hợp 2 + 4 nếu bạn chọn làm một cái gì đó như tôi cho biết và tải các tiện ích xác thực dojo mẫu cho các đầu vào thông qua trình tải YUI sẽ tha t có nghĩa là dojocore là một mô-đun và mô-đun hình thức phụ thuộc vào nó?

Cảm ơn.

Answer 1

Chúng tôi sử dụng mẫu này rất nhiều trong các ứng dụng của mình. Hãy xem sách Mẫu JavaScript của Stoyan Stefanov để biết chi tiết về cách triển khai mẫu Sandbox. Về cơ bản nó trông giống như thế này:

(function (global) { 
    var Sandbox = function fn (modules, callback) { 
     var installedModules = Sandbox.modules, 
      i = 0, 
      len = modules.length; 

     if (!(this instanceof fn)) { 
      return new fn(modules, callback); 
     } 

     // modules is an array in this instance: 
     for (; i < len; i++) { 
      installedModules[modules[i]](this); 
     } 

     callback(this); 
    }; 

    Sandbox.modules = {}; 
    global.Sandbox = Sandbox; 

})(this); 

// Example module: 
// You extend the current sandbox instance with new functions 
Sandbox.modules.ajax = function(sandbox) { 
    sandbox.ajax = $.ajax; 

    sandbox.json = $.getJSON; 
}; 

// Example of running your code in the sandbox on some page: 
Sandbox(['ajax'], function(sandbox) { 

    sandbox.ajax({ 
     type: 'post', 
     url: '/Sample/Url', 
     success: function(response) { 
      // success code here. remember this ajax maps back to $.ajax 
     } 
    }); 

});