BrowserifyやRequire.jsを導入するレベルでもない、プロダクト依存のモジュールをさくっと分割する方法。
scriptA.js
(function(exports) {
exports.nameOfModule = exports.nameOfModule || {};
var module = exports.nameOfModule;
// MethodA
// ===========================================================
module.nameOfMethodA = function() {
module.nameOfMethodB();
};
// propertyA
// ===========================================================
module.propertyA = 'hogehoge';
})(this);
scriptB.js
(function(exports) {
exports.nameOfModule = exports.nameOfModule || {};
var module = exports.nameOfModule;
// MethodB
// ===========================================================
module.nameOfMethodB = function() {
console.log(module.propertyA);
};
})(this);
上3行と下1行が共通部分。
window.nameOfModule
が展開されてグローバル空間からアクセスが可能。
モジュール中ではmodule.hogehoge
でモジュール中の他のパーツの読み出しが可能。
モジュール内の処理はネームスペースがmodule
とthis
だけで完結するので、頭使わなくていいかと。
順不同なのでgrunt-contrib-concat
でまとめたりminify
やuglyfy
もご自由にどうぞ。
Browserifyも検討したんだけど、作っていたものはページごとにイニシャライズの部分が違うので、全部を一つにまとめてしまうと、巨大なjsファイルがいくつも出来上がりそうなのでやめておいた。
単純に使い方間違っているだけかもしれないけれど、プレコンパイルなjsのモジュール系実装はSPAではないと向いていないのではないかと思った。