JavaScriptモジュール化プログラミング(メモ)
第一章JavaScriptモジュール化プログラミング
(一):モジュールの書き方
最初の書き方/モジュールとは、特定の機能を実現する方法のことです.異なる関数(および状態を記録する変数)を簡単に一つのモジュールでも一緒に置いてください. function m 1(){ //... } function m 2(){ //... }//上の関数m 1()とm 2()は、モジュールを構成しています.使用時に直接呼び出してもいいです./欠点:グローバル変数が汚染されています.他のモジュールと変数名が衝突しないとは保証できません.また、モジュールメンバー間の直接関係が見えません.
二対象の書き方
// , ;
var module = new Object({
_count:0,
m1:function(){
// ...
},
m2:function(){
// ...
}
});
// m1() m2(), module ; ;
module.m1();
// , , ;
module._count = 4;
var module = (function(){
var _count = 0;
var m1 = function(){
// ...
};
var m2 = function(){
};
return {
m1:m1,
m2:m2
};
})();
// , _count ;
console.info(module._count); // undefined;
// JavaScript ;
// , , , " ";
var module = (function(mod){
mod.m3 = function(){
// ...
};
return mod;
})(module);
// module m3(), module ;
// , , ;
// , , " ";
var module = (function(mod){
// ...
return mod;
})(window.module || {});
// " " ," " " " ;
// , ;
// , ;
var module = (function($,YAHOO){
// ...
})(jQuery,YAHOO);
// module jQuery YUI , ( ) module;
// , ;
一つのモジュールの仕様/現在、JavaScriptモジュールの仕様は全部で二つあります.
二Common JS/node.jsはjavascript言語をサーバー側プログラミングに使用します.このマークは「JavaScriptモジュール化プログラミング」が正式に誕生しました./node.jsのモジュールシステムは、Common JS規格を参照して実現しました.Common JSにはグローバルな方法があります.モジュールをロードするために. var math=require('math') //モジュールをロードする; math.add(2,3) //モジュールメソッド=>5を呼び出します.
三ブラウザ環境//前のセクションのコードはブラウザで実行されます. var math=require('math') math.add(2,3)///問題:require(math')などのmath.jsでロードが完了しないと、math.add(2,3)//ブラウザのモジュールは、「同期ローディング」を採用できないので、「非同期ローディング」しか採用できません.
4 AMD AMD(Aynchronous Module Definition)は非同期モジュールで定義されています.／非同期ローディングモジュールを採用しています.モジュールのローディングは後のステートメントの動作に影響しません.このモジュールのステートメントに依存しています.すべては一つのコール関数で定義されています. require([module],calback)//module:行列です.中のメンバーはロードするモジュールです./calback:ローディング成功後のコールバック関数です. require(''math')、function(math){ math.add(2,3) });//math.add()はmatchモジュールと同期していないので、ブラウザで仮死が発生しません.したがって、AMDはブラウザ環境に適しています.
第三章JavaScriptモジュール化プログラミング(三):require.jsの使い方はどうしてrequire.js/を使って順番に複数のjsファイルをロードしなければならないですか?保護はいずれも困難になります./だから、require.jsはこの二つの問題を解決しました./1.jsファイルの非同期ロードを実現して、ウェブページの応答を失わないようにします.
二require.jsのロード1.ロードrequire.js
2.main.jsをロードします.
三主モジュールmain.jsの書き方
1.main.jsが他のモジュールに依存しない場合は、JavaScriptコードに直接書き込むことができます. alert('ロード成功!')、
2.main.jsがモジュールに依存する場合、AMD仕様で定義されているrequire()関数を使用します. require(''moduleA'、'moduleB'、'moduleC')、function(moduleA、moduleB、moduleC){br/> //...
})<2つのパラメータを受信した関数:
/パラメーターの1つは、依存するモジュール、すなわちメインモジュールに依存する3つのモジュールを表します.
/パラメータ2:コールバック関数は、前に指定したモジュールが全部ロードされたら呼び出されます.ロードされたモジュールはパラメータ形式で関数に入ってきます.したがって、コールバック関数の内部でこれらのモジュールが使用できます.非同期ローディングモジュールは、ブラウザが応答を失うことはありません.前のモジュールだけがローディングに成功した後、動作し、依存性の問題を解決しました. require(''jquery'、'undersscore'、'backbone')、function($u、Backbone){br/> //...
});
4モジュールのロード
/require.com fig()を使用して、モジュールのロード挙動をカスタマイズできます.
//require.co nfig()はメインモジュールのヘッダに書いてあります. require.co nfig(
paths:
「jquery」:「jquery.min」、
「アンダースコア」:「アンダースコア.min」、
「backbone」:「backbone.min」 }
});
//ロードされているモジュールとメインモジュールが同じディレクトリでない場合は、それぞれのパスを指定します. require.co nfig(
paths:
「jquery」:「lib/jquery.min」 「アンダースコア」:「lib/undersscore.min」、
「backbone」:「lib/backbone.min」 }
});
require.co nfig(
baseUrl:「js/lib」 paths:
「jquery」:「jquery.min」、
「アンダースコア」:「アンダースコア.min」、
「backbone」:「backbone.min」 }
});
//モジュールが別のホストにある場合は、そのURLを直接指定することもできます. require.co nfig(
paths:
「jquery」:「https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min<
}
});
///そのため、require.jsは最適化ツールを提供しています.モジュールの配置が完了したら、このツールを使って複数のモジュールを一つのファイルに統合して、HTTP要求数を減らすことができます.
＜p＞5 AMDモジュールの書き方(/p)
/require.jsにロードされたモジュールはAMD規格を採用しています.つまり、モジュールはAMDの規定に従って書かなければなりません. define(function){
var add=function(x,y){
return x+y;
};
return{
add:add
};
});
require(''math')、function(
alert(math.add(1,1);
});<このモジュールが他のモジュールに依存する場合、define()関数の最初のパラメータは、モジュールの依存性を示す配列でなければなりません. define(''myLib')、function(
function foo(){br/> myLib.doSomething()
}
return{
foo:foo
};
});
＜p＞6規範でないモジュールをロードする
＜p＞／非規範的なモジュールをロードし、require()でローディングする前に、require.co.nfig()方法を使って、それらのいくつかの特徴を定義します. require.co nfig(
shim:{
'アンダースコア:<
exports:'
},
'backbone':
deps:''undersscore'、'jquery'、
exports:'Backbone'
}
}
});
/(1)deps配列を定義し、モジュールの依存性を示します. shim:{
'jquery.scroll':{br/> deps:''jquery'、
exports:'jQuery.fn.scroll'
}
};
＜p＞7 require.jsプラグイン
＜p＞1.domready:ページDOM構造のロードが完了したら、コールバック関数を実行させることができます. require(''domready!')、function(
//caled once the DOM is ready;
}) <2.textとイメージ:require.jsテキストと画像ファイルの読み込みを許可します.
define('text!review.txt'、'image!cat.jpg')、function(
consolie.log(review)
Dcument.body.apendChild(cat);
});
＜div class=「clearfix」＞
＜span id=「artbaot」class=「jbTestPos」/>