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

Dies ist, wie ich das Style-Problem gelöst habe: (entschuldigen Sie das Haml)

%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
    = yield

So starte ich alle seitenbezogenen .css.sass Dateien mit:

#post
  /* Controller-spezifischer Code hier */
  &#index
    /* Ansicht-spezifischer Code hier */
  &#new
  &#edit
  &#show

So können Sie ganz einfach Kollisionen vermeiden. Wenn es um .js.coffee Dateien geht, könnten Sie Elemente einfach initialisieren wie;

$('#post > #edit') ->
  $('form > h1').css('float', 'right')

Ich hoffe, das hat geholfen.

Answer 2

JavaScripts werden nur zusammengeführt, wenn Sie Rails (genauer gesagt Sprockets) dazu auffordern, sie zusammenzuführen.

Answer 3

Das Paloma-Projekt bietet einen interessanten Ansatz zur Verwaltung von seitenabhängigem JavaScript-Code.

Ein Anwendungsbeispiel aus ihrer Dokumentation:

var UsersController = Paloma.controller('Benutzer');

// Wird ausgeführt, wenn Rails User#new aufgerufen wird.
UsersController.prototype.new = function(){
   alert('Hallo Sexy Benutzer!');
};

Answer 4

Auch wenn Sie hier mehrere Antworten haben, denke ich, dass Ihre Bearbeitung wahrscheinlich die beste Wahl ist. Ein Designmuster, das wir in unserem Team verwenden und das wir von Gitlab übernommen haben, ist das Dispatcher-Muster. Es führt etwas Ähnliches wie das aus, worüber Sie sprechen, jedoch wird der Seitenname im body-Tag von Rails festgelegt. Zum Beispiel, in Ihrer Layout-Datei, fügen Sie einfach etwas wie (in HAML) ein:

%body{'data-page' => "#{controller}:#{action}" }

Dann haben Sie nur einen Abschluss und eine switch-Anweisung in Ihrer dispatcher.js.coffee-Datei in Ihrem javascripts-Ordner, wie hier gezeigt:

$ ->
  new Dispatcher()

class Dispatcher
  constructor: ->
    page = $('body').attr('data-page')
    switch page
      when 'products:index'
        new Products() 
      when 'users:login'
        new Login()

Alles, was Sie in den einzelnen Dateien (zum Beispiel products.js.coffee oder login.js.coffee) tun müssen, ist, sie in eine Klasse einzuschließen und dann dieses Klassensymbol global zu machen, damit Sie darauf im Dispatcher zugreifen können:

class Products
  constructor: ->
    # do stuff
@Products = Products

Gitlab hat mehrere Beispiele dafür, mit denen Sie herumspielen können, falls Sie neugierig sind :)

Answer 5

Verschieben Sie alle Ihre gemeinsamen JS-Dateien in einen Unterordner wie 'app/assets/javascript/global' und ändern Sie dann in der application.js die Zeile //= require_tree . in //= require_tree ./global.

Jetzt sind Sie frei, Ihren Controller-spezifischen JS im Stammverzeichnis 'app/assets/javascript/' zu platzieren und sie werden nicht im kompilierten JS enthalten, sondern nur verwendet, wenn Sie sie über = javascript_include_tag in Ihrem Controller/View aufrufen.