2010-03-17 14 views
16

我正在使用content_for和yeild將javascript文件注入到我的佈局的底部,但是想知道包含內聯javascript的最佳做法是什麼。具體來說,我不知道在哪裏把腳本類型聲明:在rails中包含使用content_for的inline javascript

<% content_for :javascript do %> 
    <script type="text/javascript"> ... </script> 
<% end %> 

<% content_for :javascript do %> ... <% end %> 
    <script type="text/javascript"> 
    <%= yield :javascript %> 
    </script> 
<% end %> 

我使用的第一個選項現在想知道,如果它是壞的,包括多個

...

在一個視圖內的聲明。有時候我會有偏見導致這種情況。

+0

你的用例是什麼?這是動態生成的JS? – jonnii 2010-03-17 18:13:01

+0

什麼是動態生成的js的例子?有時我需要在運行時將視圖中的變量傳遞給JavaScript函數。 – TenJack 2010-03-17 18:27:43

回答

26

我更喜歡有佈局的產量是這樣的:

<html> 
    <!-- other stuff --> 
    <body> 
    <!-- other stuff --> 
    <%= yield :javascript %> 
    </body> 
</html> 

然後在視圖中,你可以寫:

<% content_for :javascript do %> 
    <script type='text/javascript'> 
    function doMagic() { 
     //Mind-blowing awesome code here 
    } 
    </script> 

<% end %> 

<!-- More view Code --> 

<%= render :partial => "sub_view_with_javascript" %> 

而且在部分_sub_view_with_javascript.html.erb你也可以寫:

<% content_for :javascript do %> 
    <script type='test/javascript'> 
    function DoMoreMaths() { 
     return 3+3; 
    } 
    </script> 
<% end %> 

我推理這種方法是yield和content_for是不同的nt文件。將腳本標記放在每個content_for 但不是,它允許語法突出顯示器識別每個文件中的語言更改並幫助我。

如果您在同一個符號(在我們的例子中爲:javascript)在單個文件中有多個content_for調用,我會考慮將它們全部整合到最上面,但它非常適合用於偏分量。

而且HTML非常樂意擁有儘可能多的腳本塊。唯一可能的問題是在使用像firebug這樣的開發人員工具中的代碼時,需要多一點時間爲您的函數找到正確的腳本塊。這隻發生在我需要設置一個JavaScript斷點進行調試時。

+0

我讀過最好是在標記之前將javascript放在佈局末尾,以便頁面加載速度更快。你的意思是使用元素嗎? – TenJack 2010-03-17 18:25:56

+0

我以前沒有聽說過,而且當然包括了一些事情,但你說得對,根據雅虎的說法,http://developer.yahoo.com/performance/rules.html頭部的腳本可以減慢加載速度。我根據這個改變了我的答案。 – Tilendor 2010-03-17 18:34:47

+0

@TenJack據我所知,在標記之前加載JavaScript允許瀏覽器開始下載html,css和圖像,而不用等待所有的js文件。所以把你的小js腳本內聯不會改變任何東西。無論哪種方式,這些自定義腳本都不會很大;如果它們變成這樣,我將它們移動到單獨的.js文件中。 – 2013-03-29 15:45:36

1

下面是一個解決方案,如果你真的想在你的html中保持< script>標記的數量最小,並且仍然能夠讓你的IDE高亮顯示javascript。如果你想在你的HTML或與Facebook JS API調用JS加載的API時,只等一個$(文件)。就緒()調用它使用jQuery真正有用的...

layout_helper.rb:

def javascript_jquery_ready(script) 
    content_for(:javascript_jquery_ready) { 
     script .gsub(/(<script>|<\/script>)/, "") 
    } 
    end 

application.html.erb:

<script> 
    $(document).ready(function(){ 
     <%= yield(:javascript_jquery_ready) %> 
    }); 
</script> 

任何視圖的文件:

<% javascript_jquery_ready (capture do %> 
    <script> 
    $('#share_access_link').click(function(){ 
     $('#share_access_form').slideToggle(); 
    }); 
    </script> 
<% end) %> 

該溶液E因爲我不需要爲每個js代碼創建部分代碼,所以請讓我的代碼在我的IDE中保持組織和可讀性。即使它對最終用戶沒有任何改變,html結果也更清晰。