ページごとに異なるJSの割り当てこんな感じにしてる

説明しやすいのでRailsの例挙げる。controller+actionというアクションごとにユニークなIDをbodyに振って、IDに対してページごとに異なるfunctionを紐付けるようにしてる。わりと手軽で便利なのでこうしてるけど、他の人はどうしてるのだろう…。前はlocation.pathnameに対して正規表現で結びつけてたけど、正規表現書くのおかしい気がしてサーバ側がIDを提供することにした。

Helper

module ApplicationHelper
  def page_key
    [controller.controller_name, controller.action_name].join("-")
  end
end

View

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body id="<%= page_key %>">
    ...
  </body>
</html>

JavaScript

var MyApp = {
  dispatches: [],

  register: function(pageKey, callback) {
    this.dispatches.push({
      pageKey: pageKey,
      callback: callback
    });
  },

  dispatch: function() {
    var self = this;
    $.each(this.dispatches, function() {
      if (this.pageKey == self.pageKey()) {
        this.callback.apply(self);
      }
    });
  },

  pageKey: (function() {
    var pageKeyCache;
    return function() {
      return pageKeyCache || (pageKeyCache = $('body').attr('id'));
    };
  })(),

  ...
};

MyApp.register('entries-show', function() {
  this.clickToToggleEntryEditForm();
  this.clickToToggleEntryDeleteForm();
  this.keyupToUpdatePreview();
});

MyApp.register('entries-new', function() {
  this.keyupToUpdatePreview();
});

...

$(function() {
  MyApp.dispatch();
});