2012-02-16 37 views
17

Đến từ nền OOP cổ điển, gần đây tôi đã bắt đầu tìm hiểu thêm về JavaScript. Tuy nhiên, có một điều tôi không thể hiểu rõ:Cách sắp xếp các hàm JS trong nhiều tệp

Trong các ngôn ngữ OOP cổ điển, bạn thường tạo một tệp riêng cho mỗi lớp, vì điều đó giúp bạn duy trì mã của mình dễ dàng hơn. JS không có các lớp thực, và theo như tôi biết thì cũng không phải là một cách thực sự thẳng về phía trước để bao gồm một tệp JS khác từ một tệp. Tuy nhiên, khi bạn đang làm việc với một nhóm trên một dự án JS lớn, bạn có thể muốn chia dự án thành nhiều tệp. Làm thế nào được thực hiện? Bạn đặt gì vào các tệp đó và bạn làm cách nào để tải chúng đúng cách?

Trả lời

9

Tôi thích câu hỏi của bạn. Tôi viết JavaScript của tôi rất hướng đối tượng và giữ các nhà xây dựng đối tượng của tôi trong các tệp riêng của họ. Tôi ném tất cả các tệp .js của tôi vào một thư mục mà tôi có thể sắp xếp thành các thư mục con theo bất kỳ cách nào tôi muốn. Sau đó, tôi chạy một kịch bản "make". Sau đây là một kịch bản Bash tôi đã viết. Tôi làm việc tại một máy Linux, do đó, kịch bản Bash là một giải pháp tự nhiên đối với tôi bất kỳ ai làm việc trong Linux.

#!/bin/bash 

echo '' > temp0.js 
find ./bin/external -name \*.js -exec cat {} >> temp0.js \; 

echo ''> temp1.js 
echo '(function(){' > temp1.js 
find ./bin/prop -name \*.js -exec cat {} >> temp1.js \; 
echo '})();' >> temp1.js 

cat temp0.js temp1.js > script.js 
rm temp1.js temp0.js 

Hãy tha thứ cho tôi nếu tập lệnh bash này là nghiệp dư. Tôi sẽ dễ dàng thừa nhận trong kịch bản bash Tôi chỉ hack với nhau bất cứ điều gì làm việc, nhưng tôi thích JavaScript của tôi để được sạch sẽ và có tổ chức và hướng đối tượng.

Tập lệnh bash này đi vào thư mục cùng với thư mục có tên "bin" chứa tất cả tệp .js javascript. Trong đó, thư mục con "bên ngoài" chứa các tập lệnh mượn khác nhau như JQuery. Tôi đang đặt các tập lệnh .js của riêng mình trong một thư mục có tên là "prop" trong ví dụ trên. Kịch bản lệnh bash nhận tất cả các tập lệnh này và ghép chúng lại. Nó cũng kết thúc tốt đẹp các tập tin prop của riêng tôi trong một hàm ẩn danh để cung cấp cho chúng một không gian tên riêng (sắp xếp).

Tôi đoán rõ ràng đây không phải là những gì bạn muốn - Java - nhưng tôi nghĩ rằng loại tùy chọn này là những gì chúng tôi phải làm trong JavaScript.

+1

Tôi thực sự thích giải pháp này! Đây cũng là câu trả lời hoàn chỉnh nhất mà tôi nhận được, vì vậy cảm ơn! – Tiddo

1

Bạn có thể nhóm các tệp theo bất kỳ phương pháp lôgic nào bạn muốn. Thông thường nó được thực hiện bởi tính năng - tập tin này làm động logo, tập tin này làm cho chức năng trình chiếu trang chủ, tập tin này xử lý các thanh thả xuống của thanh điều hướng. Tôi tưởng tượng bạn thường có nhóm của bạn chia thành một tổ chức tương tự, trong đó mỗi người chịu trách nhiệm về một tính năng cụ thể. Ngoài ra, quản lý kiểm soát nguồn hoạt động giống như bất kỳ dự án nào khác, nơi người dùng phải kiểm tra hoặc cam kết mã khi họ làm việc trên đó.

4

Mô hình nguyên mẫu JavaScripts rất OOP và bạn có thể tự do chia nhỏ mã trong bao nhiêu tệp tùy ý. Có một vài cách khác nhau để tải phụ thuộc, RequireJS là một cách phổ biến.

2

Bạn sẽ phải phân đoạn mã theo bất kỳ cách nào có ý nghĩa cho dự án của bạn.

Về cách bao gồm các tập lệnh, điều đó khó khăn hơn. Cách đơn giản nhất là chỉ cần bao gồm nhiều file JavaScript, hoặc tuần tự gọi từ HTML (<script src="..."></script><script src="..."></script>) hoặc với một người quản lý phụ thuộc hoặc kịch bản tải như Yepnope hoặc RequireJS ..

Tuy nhiên, nếu bạn muốn đưa vào chỉ là một kịch bản từ HTML của bạn, bạn có thể ghép các tệp (sử dụng tập lệnh xây dựng với Ant hoặc tương tự) hoặc hack Javascript để bao gồm các tập lệnh khác như được mô tả tại đây: How do I include a JavaScript file in another JavaScript file?

Các vấn đề liên quan