AngularJS RequireJS Trình duyệt và mô-đun Javascript/cơn ác mộng phạm vi toàn cầu

Question

Tôi đã đào một chút gần đây trong tất cả trận chiến CommonJS và AMD và đây là kết quả của tôi ... (BTW Tôi không thuyết giảng ở đây) nhận được một số hiểu biết mang tính xây dựng ...) Yêu cầu mang đến nhiều phức tạp cho các mô-đun Góc của tôi, nó cảm thấy sai với tôi vì nó là một gói mô-đun trong một mô-đun ... Cách Browserify rõ ràng hơn nhưng nó hoạt động chính xác với mọi bạn cần phải có tất cả sự phụ thuộc và phụ thuộc phụ thuộc của bạn được thực hiện một cách chính xác và không may chúng ta không sống trong một thế giới hoàn hảo ... vì vậy bạn phải shim và shim sự phụ thuộc bên trong của Libs shimmed ... Tôi không một người hâm mộ cực kỳ phức tạp ...

Cách tôi hiện đang đi (và tùy thuộc vào tất cả những lời chỉ trích xây dựng của bạn ...)

Tôi có một tập tin grunt nối và rút gọn tất cả tài nguyên của tôi, libs như BreezeJS, $, Q, Ladda, v.v. . rò rỉ trên phạm vi toàn cầu ... Sau đó, tôi tuyên bố mô-đun kiểu này cho các globals:

module.value('gLadda', (function(){ 

    if("Ladda" in window && "Spinner" in window){ 
     return Ladda; 
    }else{ 
     throw new Error("The Globals Ladda || Spinner are missing"); 
    } 

})()); 

Sau trong ứng dụng của tôi, tôi làm việc với các phụ thuộc "Angularify", tôi đã không sử dụng kỹ thuật này trong một nhóm và tôi tự hỏi nếu điều này là bắn một số đèn đỏ cho một số, và nếu họ sẽ giải thích lý do tại sao ... Cảm ơn bạn đã dành thời gian của bạn.

Answer 1

Từ yêu cầu tính năng tôi có cho inclusion of an AMD loader như một phần của các mô-đun bổ sung.

Góc đi kèm với một tính năng cho phép người dùng tạo các định nghĩa Mô-đun và tìm kiếm các thực thể như bộ điều khiển sau bằng một Mã định danh Chuỗi. Góc không đi kèm với khả năng tải tập lệnh được lưu trữ trong một tệp riêng biệt có nghĩa là bạn còn lại với bốn tùy chọn:

1. Lưu tất cả javascript của bạn vào một tệp.
2. Tách javascript của bạn thành các tệp riêng biệt và thêm thẻ tập lệnh cho mỗi tệp.
3. Sử dụng trình tải tệp AMD như requireJS để quản lý tệp tập lệnh và phụ thuộc của tệp.
4. Sử dụng trình biên dịch trước như browserify để hợp nhất các tệp kiểu tệp nút thành một tệp tập lệnh duy nhất.

Khi dự án phát triển, các tệp trở nên khó quản lý hơn, không chỉ vì kích thước của chúng mà còn bởi vì sự phụ thuộc giữa các mô đun trở nên phức tạp hơn. Các dự án lớn cũng có thể được hưởng lợi từ việc tải xuống bộ nạp AMD chậm.

Trình tải mô-đun AMD liệt kê các phụ thuộc cần phải có trước khi tệp này có thể chạy. Vấn đề là các phụ thuộc AMD gần với danh sách Injection được sử dụng bởi Angular nhưng không chính xác giống nhau. Một vấn đề có thể được nhìn thấy trong mã này:

define(['angular'], function(angular) { 
    return angular.module('myApp.controllers', ['myApp.services']) 
    .controller('MyController', ['$scope', 'myService', 
     function($scope, myService) { 
     $scope.data = myService.getData(); 
     } 
    ]) 
}; 

Các xác định tuyên bố ở đầu nói để đảm bảo rằng angular được khởi tạo trước khi chạy chức năng này. Tuyên bố angular.module nói để tra cứu '$ scope' và 'myService' và đưa chúng vào các biến $scope và myService. Vấn đề là bộ nạp AMD có thể không khởi tạo tệp định nghĩa myApp.services, trong đó bạn có thể giả định được định nghĩa myService, bởi vì nó không xuất hiện trong câu lệnh xác định ở trên. Điều này tạo ra sự ngắt kết nối lớn giữa danh sách tiêm và danh sách phụ thuộc AMD. Không chỉ khó mà biết được 'myApp.dịch vụ; đã được tải, cũng rất khó để nói những thành phần cụ thể nào có sẵn trong 'myApp.services'. IOW là 'myService' vừa nạp vừa tiêm?

Tôi hiện đang sử dụng tùy chọn # 3 dưới dạng requirej vì tôi cần có khả năng tự động tải bộ điều khiển thông qua định tuyến (Xem liên kết đầu tiên). Ngoài ra, kích thước của ứng dụng tôi đang làm việc bây giờ làm cho browserfy không thực tế vì có rất nhiều trang. Tuy nhiên, tôi đồng ý rằng điều này là tối ưu nhưng tôi không thấy bất kỳ lựa chọn nào khác vào lúc này.
Từ quan điểm thực tế, tôi xác định một tiêm cho mỗi tệp. Tôi cũng cố gắng làm cho tất cả các mảng tiêm phù hợp với mảng yêu cầu. Điều này là không cần thiết nhưng nó làm cho mã dễ bảo trì hơn.

tôi thấy những bài viết này hữu ích trong việc viết này:

https://github.com/marcoslin/angularAMD

http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx