Unter Verwendung von Rails 3.1, wo platzieren Sie Ihren "seitenübergreifenden" JavaScript-Code?

Question

Nach meinem Verständnis wird Ihr gesamter JavaScript-Code in eine Datei zusammengeführt. Rails macht dies standardmäßig, wenn es //= require_tree . am Ende Ihrer application.js-Manifestdatei hinzufügt.

Dies klingt wie ein Lebensretter, aber ich mache mir ein wenig Sorgen um seitenbezogenen JavaScript-Code. Wird dieser Code auf jeder Seite ausgeführt? Das Letzte, was ich möchte, ist, dass alle meine Objekte für jede Seite instanziiert werden, wenn sie nur auf einer Seite benötigt werden.

Besteht nicht auch das Risiko von konkurrierendem Code?

Oder setzen Sie einfach ein kleines script-Tag am Ende der Seite, das einfach eine Methode aufruft, die den JavaScript-Code für die Seite ausführt?

Brauchen Sie dann nicht mehr require.js?

Danke

EDIT: Ich schätze alle Antworten... aber ich glaube nicht, dass sie wirklich das Problem ansprechen. Einige von ihnen handeln von Styling und scheinen nicht zuzutreffen... und andere erwähnen nur javascript_include_tag... was ich weiß (offensichtlich...) aber anscheinend ist der Weg für Rails 3.1, zukünftig Ihren gesamten JavaScript-Code in eine Datei zu packen, anstatt einzelnes JavaScript am Ende jeder Seite zu laden.

Die beste Lösung, die ich mir vorstellen kann, ist, bestimmte Funktionen in div-Tags mit ids oder classen zu packen. Im JavaScript-Code prüfen Sie einfach, ob die id oder class auf der Seite vorhanden ist, und wenn ja, führen Sie den entsprechenden JavaScript-Code aus. Auf diese Weise wird der JavaScript-Code nicht ausgeführt, wenn das dynamische Element nicht auf der Seite ist - obwohl er in der großen application.js-Datei enthalten ist, die von Sprockets gebündelt wird.

Meine obige Lösung hat den Vorteil, dass z.B. wenn eine Suchleiste auf 8 der 100 Seiten enthalten ist, sie nur auf diesen 8 Seiten läuft. Außerdem müssen Sie den Code nicht auf 8 der Seiten der Website einfügen. Tatsächlich müssen Sie niemals wieder manuelle Skript-Tags auf Ihrer Website einfügen.

Ich denke, das ist die eigentliche Antwort auf meine Frage.

Answer 1

Die Antwort von ryguy ist eine gute Antwort, auch wenn sie in negative Punkte abgelehnt wurde.

Vor allem, wenn Sie etwas wie Backbone JS verwenden - jede Seite hat ihre eigene Backbone-Ansicht. Dann hat die erb-Datei nur eine einzelne Zeile Inline-Javascript, die die richtige Backbone-Ansichtsklasse startet. Ich betrachte es als eine einzige Zeile 'Klebstoffcode' und daher ist es in Ordnung, dass es Inline ist. Der Vorteil ist, dass Sie Ihr "require_tree" beibehalten können, das es dem Browser ermöglicht, das gesamte Javascript zu zwischenspeichern.

In show.html.erb haben Sie etwas Ähnliches wie:

<% provide :javascript do %>
  <%= javascript_include_tag do %>
    (new app.views.ProjectsView({el: 'body'})).render();
  <% end %>
<% end %>

und in Ihrer Layoutdatei benötigen Sie:

<%= yield :javascript %>

Answer 2

Ich habe eine weitere Lösung, die zwar primitiv ist, aber gut für mich funktioniert und keine komplizierten selektiven Ladenstrategien benötigt. Fügen Sie es in Ihre normale Dokument bereit Funktion ein, testen Sie dann jedoch den aktuellen Fensterort, um zu sehen, ob es sich um die Seite handelt, für die Ihr JavaScript vorgesehen ist:

$(document).ready(function() {
   if(window.location.pathname.indexOf('/yourpage') != -1) {
          // der JavaScript-Code, den Sie ausführen möchten
   }
}

Dies ermöglicht es immer noch, dass alle js von Rails 3.x in einem kleinen Paket geladen werden, verursacht jedoch nicht viel Overhead und keine Konflikte mit Seiten, für die das js nicht gedacht ist.

Answer 3

Schritt1. Entfernen Sie require_tree . in Ihrer application.js und application.css.

Schritt2. Bearbeiten Sie Ihre application.html.erb (standardmäßig von Rails) im Layout-Ordner. Fügen Sie "params[:controller]" in den folgenden Tags hinzu.

<%= stylesheet_link_tag    'application', params[:controller], media: 'all', 'data-turbolinks-track' => true %>

<%= javascript_include_tag 'application', params[:controller], 'data-turbolinks-track' => true %>

Schritt3. Fügen Sie eine Datei in config/initializers/assets.rb hinzu

%w( controller_one controller_two controller_three ).each do |controller|
  Rails.application.config.assets.precompile += ["#{controller}.js", "#{controller}.js.coffee", "#{controller}.css", "#{controller}.scss"]
end

Referenzen: http://theflyingdeveloper.com/controller-specific-assets-with-rails-4/

Answer 4

Ich habe einige Antworten zusammengefasst in:

Anwendungshelfer:

module ApplicationHelper
  def js_page_specific_include
    page_specific_js = params[:controller] + '_' + params[:action]
    if Rails.application.assets.find_asset(page_specific_js).nil?
      javascript_include_tag 'application', 'data-turbolinks-track' => true
    else
      javascript_include_tag 'application', page_specific_js, 'data-turbolinks-track' => true
    end
  end
end

layouts/application.html.haml:

%html{lang: 'uk'}
  %head   
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
   bla-bla-bla
    = js_page_specific_include   
   bla-bla-bla

Answer 5

Erstens: Entfernen Sie \\=require_tree aus application.js Zweitens: Ihr gesamter JS-Code muss unter /app/assets/javascript und Ihr gesamter CSS-Code unter /app/assets/stylesheetsgelegt sein