Làm cách nào để tổ chức mã Javascript của bạn?

Question

Khi tôi lần đầu tiên bắt đầu với Javascript, tôi thường chỉ cần đặt bất cứ điều gì tôi cần vào các chức năng và gọi chúng khi tôi cần chúng. Đó là sau đó.

Bây giờ, khi tôi đang xây dựng các ứng dụng web ngày càng phức tạp hơn với Javascript; tận dụng sự tương tác của người dùng phản ứng nhanh hơn, tôi nhận ra rằng tôi cần phải làm cho mã của mình dễ đọc hơn - không chỉ bởi tôi, mà là bất kỳ ai thay thế tôi. Bên cạnh đó, tôi muốn giảm bớt những khoảnh khắc của 'cái quái gì vậy, tại sao tôi lại làm điều này' khi tôi đọc đoạn mã của riêng mình sau (vâng, tôi thành thật ở đây, tôi có những khoảnh khắc tôi nghĩ bản thân mình, mặc dù tôi cố gắng tránh những trường hợp như vậy)

Một vài tuần trước, tôi đã vào Joose, và cho đến nay, nó đã được tốt, nhưng tôi tự hỏi những gì còn lại để làm cho đoạn mã của họ thành có ý nghĩa phân đoạn và có thể đọc được bởi lập trình viên tiếp theo.

Bên cạnh việc làm cho nó dễ đọc, các bước của bạn trong việc làm cho HTML của bạn được tách ra khỏi logic mã của bạn là gì? Giả sử bạn cần tạo các hàng bảng động với dữ liệu. Bạn có bao gồm điều đó trong mã Javascript của bạn, gắn phần tử td vào chuỗi hoặc bạn có làm gì khác không. Tôi đang tìm kiếm các giải pháp và ý tưởng thực tế trên thế giới, chứ không phải một số ý tưởng lý thuyết do một số chuyên gia đặt ra.

Vì vậy, trong trường hợp bạn không hiểu những điều trên, bạn có sử dụng các phương pháp OOP hay không. Nếu bạn không sử dụng cái gì?

Answer 1

Đối với thực sự Các ứng dụng nặng JS, bạn nên thử bắt chước Java.

• Có JS ít nhất trong HTML của bạn càng tốt (tốt nhất - chỉ là gọi hàm bootstrap)
• Phá vỡ các mã thành các đơn vị hợp lý, giữ cho chúng tất cả trong tập tin riêng biệt
• Sử dụng một kịch bản để nối/rút gọn các tập tin vào một gói duy nhất mà bạn sẽ đóng vai trò như một phần của ứng dụng của bạn
• namespace Sử dụng JS để tránh làm lộn xộn không gian tên toàn cầu:

 

var myapp = {}; 
myapp.FirstClass = function() { ... }; 
myapp.FirstClass.prototype.method = function() { ... }; 
myapp.SecondClass = function() { ... }; 

Sử dụng tất cả các kỹ thuật này cùng nhau sẽ mang lại một dự án rất dễ quản lý, ngay cả khi bạn không sử dụng bất kỳ khung công tác nào.

Answer 2

Tôi sử dụng javascript không phô trương, vì vậy, bên ngoài các thẻ tập lệnh tôi không giữ bất kỳ javascript nào trong html.

Hai thiết bị được tách hoàn toàn.

Chức năng javascript sẽ bắt đầu khi cây DOM hoàn thành, sẽ đi qua html và thêm các sự kiện javascript, và bất kỳ điều gì khác cần phải được thay đổi. Để sắp xếp, tôi có xu hướng có một số tệp javascript được đặt tên tương tự như các trang html mà họ sử dụng và sau đó cho các chức năng phổ biến, tôi có xu hướng nhóm chúng theo những gì chúng làm và chọn tên giải thích rằng .

Vì vậy, ví dụ, nếu tôi có chức năng giao diện người dùng sau đó tôi có thể gọi họ là: myapp_ui_functions.js

tôi cố gắng đặt tên của các ứng dụng trong tên tập tin, trừ khi có một số javascript đó là chung cho nhiều các dự án, chẳng hạn như strings.js.

Answer 3

Tôi đã viết lại rất nhiều mã có thể sử dụng lại của tôi dưới dạng plugin jQuery. Tôi chuyển sang jQuery từ Prototype khi tôi bắt đầu làm ASP.NET MVC. Làm thêm giờ tôi đã di chuyển rất nhiều mã tái sử dụng của tôi, hoặc ít nhất là các ý tưởng, từ OO dựa trên Prototype đến các plugin kiểu jQuery. Hầu hết chúng được lưu trữ trong các tệp JS của riêng chúng (chủ yếu là các ứng dụng mạng nội bộ nên tốc độ tải trang khá cao dù có yêu cầu thêm). Tôi cho rằng tôi có thể thêm một bước xây dựng để kết hợp chúng nếu tôi cần.

Tôi cũng đã định vị trên phương pháp tiếp cận MasterPage sử dụng ContentPlaceHolder cho tập lệnh ngay trước thẻ body đóng. Tải giao diện người dùng jQuery/jQuery tiêu chuẩn và bất kỳ JS phổ biến nào khác nằm ngay trước trình giữ chỗ tập lệnh trong MasterPage. Tôi có một chút JS ở trên cùng của MasterPage để định nghĩa một mảng chứa bất kỳ chức năng nào mà một phần lượt xem cần chạy trên tải trang. Các hàm này được chạy từ hàm document.ready() cơ bản trong MasterPage.

Tất cả JS của tôi hoàn toàn tách biệt với dấu của tôi.Một số JS có thể tồn tại trong các khung nhìn một phần - chúng được đóng gói khi một phần có thể được bao gồm nhiều lần để làm cho nó cụ thể cho cá thể của khung nhìn đó - nhưng thường thì không. Thông thường chỉ được bao gồm trong phần giữ chỗ để nó được tải ở dưới cùng của trang.

Answer 4

Ngoài ra, nếu bạn muốn đi OO nặng, hãy kiểm tra MochiKit: http://www.mochikit.com/

Answer 5

Tôi có (thường là) một tập tin có chứa một loạt các chức năng và đó là nó. Điều đó được bao gồm trong mọi trang sử dụng Javascript. Trong các trang bản thân, tôi sẽ làm cho các cuộc gọi đến các chức năng như:

$(function() { 
    $("#delete").click(delete_user); 
    $("#new").click(new_user); 
}); 

nơi delete_user() và new_user() được định nghĩa trong tập tin bên ngoài.

Tôi cũng sử dụng Javascript không phô trương, đối với tôi có nghĩa là jQuery (có các thư viện khác không phô trương).

Bạn không muốn tệp riêng biệt cho mỗi trang. Điều đó chỉ có nghĩa là các yêu cầu HTTP bên ngoài không cần thiết hơn. Với một tập tin — giả sử bạn đã lưu trữ nó một cách hiệu quả — nó sẽ được tải xuống một lần và đó là nó (cho đến khi nó thay đổi).

Nếu tôi có một lượng lớn Javascript hoặc trang web được chia thành nhiều khu vực một cách hiệu quả thì tôi có thể tách Javascript nhưng điều đó không thường xảy ra.

Ngoài ra, về mã nguồn, tôi có thể có nhiều tệp JS nhưng tôi thường kết thúc chúng thành một tệp tải xuống cho ứng dụng khách (để giảm yêu cầu HTTP).

Thêm tại Multiple javascript/css files: best practices? và Supercharging Javascript in PHP.

Answer 6

Tôi thấy rằng việc phát triển javascript của bạn bằng phương pháp OO là cách để đi nếu bạn muốn nó sạch sẽ, dễ đọc và thậm chí phần nào an toàn. Tôi đăng các câu dưới đây

Cleanest format for writing javascript objects

Và có một số phản ứng tuyệt vời về cách viết mã javascript của tôi tốt. Nếu bạn tuân theo các nguyên tắc cơ bản này, bạn có thể sử dụng hầu như bất kỳ thư viện nào, chẳng hạn như yui, jquery và prototype, một cách dễ dàng.