ページごとに異なる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(); });