javascriptモジュール化(一)--概要
7609 ワード
はじめに、長い間文章を書いていませんでしたが、今回は主にjsのモジュール化をまとめます.
1.モジュール
モジュールの役割:実装実装、露出インターフェース、宣言依存.まず対比してみます.下のコードにはモジュールシステムが適用されていません.
(1)パッケージなし
一部の作用領域を作成することができ、内部メンバ変数をカプセル化し、出力するインターフェースバージョンをreturnによって出力することができます.
グローバル変数の曝露問題を解決し、namespaceのようなグローバル変数だけを暴露すると、すべてのモジュールの声明が実現されます.
職責:(1)依存管理:ロード／分析／注入／初期化(2)決定モジュールの書き方は、次の3つの典型的なモジュールシステムの書き方をまとめます.
(1)common js
利点:成熟した管理に依存する信頼性の高い .コミュニティが活発で、規範的な受け入れ度が高い 運転時にサポートします.モジュール定義はとても簡単です. ファイルレベルのモジュール機能ドメイン分離 は、循環依存性 を処理することができる.
短所:は標準組織の規範ではありません. 同期のrequireは、ブラウザの非同期ローディングのプロセスを考慮していませんが、まだ使用する方法があります.多くのツールが複数のモジュールのファイルを一つのファイルに包むことができます. 下を見て
(2)AMD
非同期環境における天然の役割AMDコードの書き方:
利点:成熟した管理に依存する信頼性の高い .コミュニティが活発で、規範的な受け入れ度が高い はもっぱら に適合しています. Communjsのような書き方をサポートします. は、プラグインapiを介して、非jsリソースのロードをサポートすることができる .成熟したパッケージ構築ツールは、プラグイン に結合することができます.
短所:モジュール定義が煩雑で、追加のネストが必要です. はライブラリレベルのサポートだけで、追加のライブラリ を導入する必要があります.サイクル依存性を処理できない 条件ローディングができませんでした.
(3)ES 6/module
言語レベルのサポート、将来のモジュール化
1.モジュール
モジュールの役割:実装実装、露出インターフェース、宣言依存.まず対比してみます.下のコードにはモジュールシステムが適用されていません.
(1)パッケージなし
math.js:(1)パッケージ性がない(2)インターフェースが目立たない function add(a,b){
return a+ b
}
function sub(a,b){
return a - b
}caculator.js:(1)math.jsに依存していますが、依存宣言はありません(2)グローバル状態を使用します. var action = "add";
function compute(a,b){
switch (action){
case "add": return add(a,b)
case "sub": return add(a,b)
}
}
math.js:(1)構造が良い(2)アクセス制御がない var math = {
add:function add(a,b){
return a+ b
},
sub:function sub(a,b){
return a - b
}
}
caculator.js:(1)match.jsに依存していますが、依存宣言がない(2)属性がプライベートであるとは明示できず、パッケージがありません. var caculator = {
action:'add';
compute:function compute(a,b){
switch (action){
case "add": return math.add(a,b)
case "sub": return math.add(a,b)
}
}
}
一部の作用領域を作成することができ、内部メンバ変数をカプセル化し、出力するインターフェースバージョンをreturnによって出力することができます.
var caculator = (function(){
var action = "add";
return{
compute:function compute(a,b){
switch (action){
case "add": return math.add(a,b)
case "sub": return math.add(a,b)
}
}
}
})()
caculator－1.js:(1)依存宣言(2)が依然としてグローバル変数を汚染していることを示す(3)手動で依存管理を行ってモジュールモードを暴露しなければならない:return部分はバージョンとは違って、方法を関数体に定義し、returnは方法だけである.具体的にはこの子供靴の文章を参考にしてください.Javascriptデザインモード. var caculator = (function(m){
var action = "add";
function compute(a,b(){
switch (action){
case "add": return m.add(a,b)
case "sub": return m.add(a,b)
}
}
return{
compute:compute
}
})(math)
グローバル変数の曝露問題を解決し、namespaceのようなグローバル変数だけを暴露すると、すべてのモジュールの声明が実現されます.
caculator－2.js:(1)最初のパラメータはモジュール宣言である.(2)第二のパラメータは声明の依存性であり、現在は依存性がない.(3)3番目のパラメータはモジュールの構成です. namespace("math",[],function(){
function add(a,b){
return a+ b
}
function sub(a,b){
return a - b
}
return{
add:add,
sub:sub
}
})
math.js:(1)依存性がある(2)matchをパラメータとして導入する. namespace("caculator",["math"],function(m){
var action = "add"
function compute(a,b){
return m[action](a,b)
}
return{
compute:compute
}
})
caculator.jsのコード:まだ依存管理の問題が解決されていません.各モジュールが異なるファイルに分散している場合、スクリプトローディング順序は手動で並べ替えられます. var namespace = (function(){
//
var cache = {}
function createModule(name,deps,definition){ // ： ， ，
// ， ，
if(arguments.length === 1){
return cache[name]
}
// ，
deps = deps.map(function(depName){
return ns(depName)
})
//
cache[name] = definition.apply(null,deps)
return cache[name];
}
return createModule
})()
職責:(1)依存管理:ロード／分析／注入／初期化(2)決定モジュールの書き方は、次の3つの典型的なモジュールシステムの書き方をまとめます.
(1)common js
利点:
短所:
namespace browserify,webpack,componentで書いたコード:commonjs: function add(a,b){
return a+ b
}
function sub(a,b){
return a - b
}
exports.add = add
exports.sub = submath.js: var math = require("./math"); //
function Caculator(container){
this.left = container.querySelector(".j-left" );
this.right = container.querySelector(".j-right" );
this.add = container.querySelector(".j-add" );
this.result = container.querySelector(".j-result");
this.add.addEventListener("click",this.compute.bind(this));
}
Caculator.prototype.compute = function(){
this.result.textContent = math.add(+this.left.value, +this.right.value)
}
exports.Caculator = Caculator; //
caculator.jsとmath.jsは、まずcaculator.jsをインストールし、コマンドライン入力コマンド:browserifyは、名前空間のようなファイル形式でカプセル化される.(2)AMD
非同期環境における天然の役割AMDコードの書き方:
browserify caculator.js > caculator-bundle.js:最初のパラメータは依存リストである. define([],function(){
function add(a,b){
return a+ b
}
function sub(a,b){
return a - b
}
return{ //
add:add,
sub:sub
}
})
math.js:パラメータ1は依存声明であり、パラメータ2は依存注入である. define(["./math"],function(math){
function Caculator(container){
this.left = container.querySelector(".j-left" );
this.right = container.querySelector(".j-right" );
this.add = container.querySelector(".j-add" );
this.result = container.querySelector(".j-result");
this.add.addEventListener("click",this.compute.bind(this));
}
Caculator.prototype.compute = function(){}
return{
Caculator:Caculator
}
})caculator.jsという名前でサポートされています. define（function(require,exports){
var math = require("./math");
function Caculator(container){
this.left = container.querySelector(".j-left" );
this.right = container.querySelector(".j-right" );
this.add = container.querySelector(".j-add" );
this.result = container.querySelector(".j-result");
this.add.addEventListener("click",this.compute.bind(this));
}
Caculator.prototype.compute = function(){}
exports.Caculator = Caculator;
})
Simplified CommonJS wrapping factory.toString().利点:
/require\(['"]([^'"]*)['"]\)/.exec(factory.toString())[1]で、ブラウザ環境短所:
(3)ES 6/module
言語レベルのサポート、将来のモジュール化