Tệp JavaScript cho mỗi chế độ xem trong Rails

Question

Theo đề xuất 'không phô trương JavaScript', tôi muốn tách logic JavaScript của mình thành
các tệp riêng biệt. Tuy nhiên tôi không biết cách tổ chức chúng.

Tôi có nên:

1. Chỉ cần ném tất cả các ứng dụng javascript vào Application.js tập tin và tải nó với trang bố trí? Đây là cách tiếp cận đơn giản nhưng tôi sẽ kết thúc với một Application.js cồng kềnh. Một số người dùng có thể chỉ muốn truy cập một vài trang, nhưng toàn bộ tệp này sẽ được tải trước không tốt.
2. Hoặc tôi có nên tạo tệp javaScript riêng cho từng chế độ xem và tải chúng độc lập không? Điều này tạo ra một bộ câu hỏi. Làm cách nào để liên kết từng tệp js với chế độ xem tương ứng?
   Cảm ơn.

Answer 1

Tải JavaScript chính trong application.js mọi lúc. Bây giờ tạo tệp cho các nhu cầu khác nhau. Tạo tệp form.js, tệp myfancypart.js, v.v. Không tải chúng trong bố cục application.html.erb. Tải chúng tự động khi bạn cần chúng:

application.html.erb:

<%= javascript_include_tag "application" %> 
<%= yield :javascript_includes %> 

đầu view.html.erb của bạn:

<% content_for :javascript_includes do %> 
    <%= javascript_include_tag "forms.js" %> 
<% end %> 

Tất cả mọi thứ trong khối content_for sẽ được nạp vào lợi nhuận: javascript_includes.

Answer 2

Tôi đề nghị đưa tất cả vào một tệp, sau đó bạn có thể rút gọn và gzip. Khách hàng sẽ chỉ phải tải xuống một lần vì ứng dụng sẽ được lưu trong bộ nhớ cache trên tất cả các yêu cầu tiếp theo.

Một điều khác mà bạn có thể quan tâm là sprockets, một trình quản lý phụ thuộc javascript, bạn có thể cài đặt bằng gem. Bạn có thể lấy thêm thông tin về sprockets từ trang web (http://getsprockets.org/) hoặc từ trang github (http://wiki.github.com/sstephenson/sprockets). Nó làm cho việc viết các ứng dụng javascript lớn dễ quản lý hơn nhiều.

Answer 3

Người ta có thể sử dụng để bao gồm Jammit css và javascript file

để xem chi tiết: http://documentcloud.github.com/jammit/

Sử dụng:

bước 1:

Thêm js-file trong assets.yml (xem mã bên dưới)

javascripts:

footer: 

- app/javascripts/lib/*.js 
- app/javascripts/jquery-plugins/*.js 
- app/javascripts/custom/*.js 
- app/javascripts/application.js 

tiêu đề:

- app/javascripts/core/*.js 
- app/javascripts/head/*.js 

bước 2:

Thêm mã đơn giản trong cách bố trí ứng dụng:

<%= include_javascripts :header %> 
<%= include_javascripts :footer %> 

Answer 4

này thay đổi với Rails 3.1 và các đường ống dẫn tài sản !!!

Các tệp riêng biệt là tốt nhất như bạn chỉ ra. Các vấn đề về cách tham khảo tất cả và liên kết chúng biến mất với đường ray 3.1 nhằm mục đích biên dịch tất cả chúng thành các tệp duy nhất để sản xuất.

Answer 5

có thể bạn muốn sử dụng application_helper

def javascript(*files) 
    content_for(:head) { javascript_include_tag(*files) } 
end 

def stylesheet(*files) 
    content_for(:head) { stylesheet_link_tag(*files) } 
end