そんなことしたら何もかけないのでとりあえず書いてみる方向に転換してみる。
ディレクトリ構成
- test.html テスト用画面
- test.js テスト用画面の初期化スクリプト
- module.js モジュール管理
- completion.js 管理されるモジュール
概要
1. モジュールごとに識別名を割り振り、それで管理。どこかでモジュール名を集中管理することになるのでやりたくない。
2. URL指定させずに、ファイル名指定させる。ファイルの存在位置は、表示htmlのURLからの相対か、特定のディレクトリ群で決め打ちする。
- 指定したURLのjsを読み込む
- 読み込んだURLを記憶して同URLのjsの読み込みを抑制する
- URLベースの指定なので相対でURL文字列自体がことなると意味なし
- 読み込みミスった場合のハンドリングがない
- アンロードはどうしたらいいの？
- 名前空間衝突への考慮
URLベースの指定について
以下の選択肢で妄想。1. モジュールごとに識別名を割り振り、それで管理。どこかでモジュール名を集中管理することになるのでやりたくない。
2. URL指定させずに、ファイル名指定させる。ファイルの存在位置は、表示htmlのURLからの相対か、特定のディレクトリ群で決め打ちする。
test.html
<html> <head> </head> <body> <input type="text" id="loginId"> <input type="button" id="completing" value="completing"> <div id="scriptDeclaration"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="module.js"></script> <script src="test.js"></script> </div> </body> </html>
module.js
var console = console || {};
console.log = console.log || function(data){alert(data);};
function ModuleLoader(){
console.log('construtor worked.');
this.loadedModules = [];
}
ModuleLoader.prototype.require = function(url) {
var that = this;
console.log(url + ' is loading...');
if($.inArray(url, this.loadedModules) == -1){
$.getScript(url, function(data, status){
if(status === 'success'){
that.loadedModules.push(url);
} else {
console.log(status);
}
});
} else {
console.log(url + ' is already loaded.');
}
}
var mymodule = mymodule || new ModuleLoader();
test.js
var mymodule = mymodule || {};
mymodule.require('./completed.js');
mymodule.require('./completed.js');
mymodule.require('./completed.js');
$(function(){
$('#completing').click(function(){
$('#loginId').val(mymodule.compl.getCompletedScript());
});
});
test.js
function Completion(){
console.log('Completion loaded')
}
Completion.prototype.getCompletedScript = function(){
return 'completed';
}
var mymodule = mymodule || {};
mymodule.compl = new Completion();
