Ngày nay, chúng tôi có rất nhiều thư viện Javascript trên mỗi trang ngoài các tệp Javascript mà chúng tôi tự viết. Làm thế nào để bạn quản lý tất cả? Làm thế nào để bạn khai thác chúng một cách có tổ chức?Làm cách nào để quản lý các tệp Javascript của bạn?
Trước hết, YUI Compressor.
Việc sắp xếp chúng được tổ chức tùy thuộc vào bạn, nhưng hầu hết các nhóm mà tôi đã xem chỉ có đưa ra quy ước có ý nghĩa đối với ứng dụng của chúng.
Nói chung là tối ưu để đóng gói tệp của bạn theo cách sao cho bạn có một số lượng nhỏ các gói có thể được đưa vào bất kỳ trang nhất định nào để lưu vào bộ đệm tối ưu.
Bạn cũng có thể xem xét việc chia javascript của mình thành các phân đoạn dễ dàng chia sẻ trong toàn bộ nhóm.
Ngoài ra còn có một phiên bản trực tuyến: http://refresh-sf.com/yui/ – ine
Tôi sẽ có một thư mục cho tất cả javascript và thư mục con của thư mục thứ ba/thư viện được chia sẻ và thư mục con cho từng thành phần của trang web để giữ mọi thứ được sắp xếp.
Ví dụ:
/
+--/javascript/
+-- lib/
+-- admin/
+-- compnent1/
+-- compnent2/
Sau đó chạy tất cả mọi thứ thông qua một minifier/obfuscator trong quá trình xây dựng.
I'v được sử dụng này thời gian gần đây: http://code.google.com/apis/ajaxlibs/
Và sau đó có một "JScripts" thư mục mà tôi giữ mã tùy chỉnh của tôi.
Tổ chức
Tất cả các kịch bản của tôi được duy trì trong một cấu trúc thư mục mà tôi làm theo bất cứ khi nào tôi làm việc trên một trang web. Cấu trúc thư mục bình thường đi một cái gì đó như thế này:
+--root
|--javascript
|--lib
|--prototype.js
|--scriptaculous
|--scriptaculous.js
|--effects.js
|--..
|--myOwnScript.js
|--myOwnScript2.js
Nếu, cơ hội giảm giá, mà tôi đang làm việc trên một đội sử dụng một số tiền inordinate kịch bản, sau đó tôi sẽ thường tạo ra một tùy chỉnh thư mục trong chúng tôi sẽ tổ chức các kịch bản theo mối quan hệ. Tuy nhiên, điều này không xảy ra khủng khiếp.
nén
Mặc dù có rất nhiều máy nén và bộ obfuscate khác nhau trên mạng, tôi luôn luôn trở về với YUI Compressor.
Bao gồm
Trừ khi một trang web đang sử dụng một số hình thức của một trang chính, CMS hoặc thứ gì đó quyết định những gì có thể được đưa vào một trang ngoài tầm kiểm soát của tôi, tôi chỉ bao gồm các tập lệnh nhất thiết là cho trang đã cho chỉ vì lợi ích nhỏ. Nếu một trang không yêu cầu bất kỳ tập lệnh nào, sẽ không có vùi tập lệnh trên trang đó.
Trong dự án cuối cùng của tôi, chúng tôi có ba loại tệp JS, tất cả chúng trong một thư mục JS.
Nỗ lực lớn nhất là có hầu hết mã trên hai loại đầu tiên, có mã tùy chỉnh chỉ biết những gì gọi và khi nào.
Đây có thể là một cách tiếp cận khác với những gì bạn đang tìm kiếm, nhưng tôi đã thử nghiệm ý tưởng về các mẫu JavaScript trong công cụ blog của chúng tôi. Tóm lại, bạn gán một mẫu Javascript cho một id trang sử dụng cơ sở dữ liệu và nó sẽ bao gồm và rút gọn tất cả các tệp JavaScript được liên kết với mẫu đó và tạo một tệp trong bộ nhớ cache phía máy chủ với id mẫu làm tên tệp. Khi một trang được tải, nó sẽ gọi tệp mẫu trước tiên sẽ kiểm tra xem tệp có tồn tại trong bộ nhớ cache hay không và tải nó nếu có. Nếu nó không tồn tại, nó tạo ra nó trên bay và bao gồm nó. Tôi cũng sử dụng tệp mẫu để gzip tệp JavaScript của tập đoàn.
Ý tưởng mẫu sẽ hoạt động tốt cho JavaScript trên toàn trang web (như thư viện JavaScript) nhưng không bao gồm JavaScript dành riêng cho từng trang. Tuy nhiên, bạn vẫn có thể sử dụng cùng một cách tiếp cận cho JavaScript cụ thể của trang bằng cách bao gồm tệp thứ hai thực hiện tương tự như trên.
Cal Henderson (của Flickr nổi tiếng) đã viết Serving JavaScript Fast một thời gian trở lại. Nó bao gồm việc phân phối nội dung chứ không phải tổ chức, nhưng nó có thể trả lời một số câu hỏi của bạn.
Dưới đây là những điểm đạn:
Tôi sẽ thêm một vài điểm nhấn của riêng tôi:
lib là một khởi đầu tốt. Bạn cũng có thể chia các tệp JS của riêng bạn thành các thư mục con nếu nó có ý nghĩa. Lý tưởng nhất, bạn sẽ có thể sắp xếp chúng theo cách sao cho các tệp trong một thư mục con nhất định có thể được nối vào một tệp.
My answer cho một câu hỏi tương tự. – roosteronacid