2011-04-08 89 views
9

在Ruby中嘗試新事物 - 在每個頁面上我正在用jQuery做非常豐富的東西。很明顯,如果我把所有的jquery放到application.js中,它將會非常快速地增長。在Rails中實現每頁JavaScript的好方法是什麼?

它是在最後一個好方法懶加載特定頁面的js文件?例如:

<script> 

$(document).ready(function() { 

    $.getScript("/javascripts/this_pages_scripts.js"); 

}); 
</script> 

有沒有一種軌道方式做到這一點?我知道new.js.erb等文件和ujs,但我仍在談論更多特定於頁面的js - 你知道,拖放初始化程序,對話創建者等。

非常感謝。

+1

當你說「非常快」時,你可能會誇大其詞。 20-30KB的JavaScript是很多,但它不是「大」,因爲它可以被髮送到約3KB的瀏覽器,並且如果你的服務器配置正確,它將在請求之間被緩存。只有像jQuery-UI或Google Maps這樣的大型圖書館應該關注你,而不是在沒有使用它們的頁面上加載這些圖書館可以提供幫助。 – tadman 2011-04-08 15:20:41

回答

11

有,我用兩種方式:

對於細小的,瑣碎的腳本,只是平添幾分養眼的,我經常有他們的內聯模板,他們修改(就像你已經證明) ,因爲我更容易跟蹤這種方式。

對於任何一個以上的兩個小行我保持低調,但加載它使用content_for

我的應用程序佈局看起來像這樣(在HAML):

= javascript_include_tag 'jquery.144.min','rails','jquery.tools','application' 
= yield :scripts 

的重要組成部分,是yield :scripts。然後,在一個網頁,我需要一些javascript我做的:

- content_for :scripts do 
    = javascript_include_tag 'photo_form' 

這將加載在標題中的JavaScript,但只有當給定的模板中。 content_for使用相應的名稱將內容發送到yield方法。

你可以堅持一個這樣的產量塊 - 我還有一個就在結束標籤之前。 Yield/content_for真的很方便。

注意,正如tadman在評論中指出的那樣,任何不必在頭部加載的東西都應該在頁面的最後加載。

最後一件事是知道的,如果你有更復雜的東西,你也可以用你的模板和應用程序視圖之間的實例變量。例如,我在應用程序佈局中有一個菜單欄。所以,有時候我只想在某些頁面上觸發一個特定於上下文的按鈕或附加的按鈕行。

在我的應用程序佈局我叫偏這使得菜單,菜單的代碼如下所示:

#menubar (normal menu stuff) 
    - if @special_menu 
    #special_menu 

這樣,那麼在任何模板,你可以這樣做:

- @special_menu = true 

...併爲該頁面顯示給定的菜單。你也可以在控制器動作中做到這一點,我有一個控制器,我添加了一個之前的過濾器,將其中一個菜單標誌設置爲true。對於任何可能需要有條件地包含的JavaScript複雜集合,您都可以做同樣的事情。

大多數的這些想法我觀看這部railscast有:http://railscasts.com/episodes/30-pretty-page-title

你應該看一看!

+0

只要有可能,JavaScript文件應該在文檔中加載得非常晚,以避免它們阻止頁面呈現。例如,分析應該是''標籤關閉之前的最後一件事情。 jQuery需要儘早加載,其他任何使用'$(document).ready(...)'的原因都很明顯。 – tadman 2011-04-08 15:18:37

+0

好的提示Tadman,謝謝! – Andrew 2011-04-08 15:31:50

0

設置一個符號來表示的文件名在你的頭,並調用它的控制器

@script = "prototype" 

然後在視圖:

<%= javascript_include_tag @script %> 

或者加載多個

@scripts = ["prototype", "dropdown"] 

然後

<% @scripts.each do |s| %> 
    <%= javascript_include_tag s %> 
<% end &> 
+0

然後在每個控制器中使它變得不同 – 2011-04-08 14:27:33

+0

這並不真正回答有關Rails約定用於跨文件構造JavaScript的大部分問題。順便說一句,您可以使用splat運算符將數組展開爲la'js =%w {foo bar}; javascript_include_tag * js'。 – coreyward 2011-04-08 14:31:20

0

我個人使用requireJS和一個自定義特徵檢測庫來處理這個問題。

然後我有一行將requirejs腳本及其data-main屬性包含在我的佈局/主/共享視圖頁面中。 (我對rails並不熟悉,但對於任何其他MVC都是如此)。

我已經寫了一個很好的回答關於這個地方。您可能能夠找到它。

相關問題