Javascriptモジュール化プログラミングシリーズ1:モジュール化駆動

4291 ワード

Javascript関数プログラミング
Javascriptに関しては,Javascriptはプロセス向けのプログラミング言語であり,Cと同様に関数を用いて効果を達成する.

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
function test()
{
	alert("ok");
}
</script>
</HEAD>

<BODY>
<input type=button value="Click" onclick="test()">
</BODY>
</HTML>

Javascriptオブジェクトプログラミング
Javascript自体はクラスの概念はありませんが、確かにオブジェクト向けのプログラミング言語です.
詳細については、次を参照してください.
JavaScript実装クラスと継承
プロトタイプ(prototype)を使用すると、変数オブジェクトに直接プロパティまたは関数を追加できます.
次の方法でオブジェクトを定義することもできます.

<script>
var jsobj = {};
jsobj.attr1 = "value1";
</script>

詳細については、次を参照してください.
JavaScriptオブジェクトと文字列の変換
モジュラー要件
以上のような方法でプログラミングしてもjsコードの作成やインポートは同じです.
htmlのタグブロックに書くか、独立してjsファイルにしてページにインポートします.
ページコードが多い場合は、複数のjsファイルに分割してインポートすることもあります.
このように、実際の開発では、いくつかの問題に直面する可能性があります.
悩み1.予期せぬ変数値の改ざん
関数化された方法を使用する状況:jsグローバル変数を定義する可能性があります.このグローバル変数は、これらのfunction自体が同じ名前の変数を使用している場合、すべてのfunctionで使用されます.jsの変数は定義する必要がなく使用できることを知っています.最後に、そのグローバル変数の値は何なのか、本当に分かりにくく、制御しにくいです.
オブジェクトを使用する方法の状況:オブジェクト内で定義された属性と方法は外部にとって取得して変更することができ、このオブジェクトにはプライベート変数の説はありません.また、同じ名前のオブジェクトが異なるjsで定義されている場合、上書きされる状況が発生します.開発やデバッグに悩まされています.
悩み2.jsインポートに付随する問題
複数のjsインポートに分割すると、これらのjsは直接前後と依存関係があり、順序が間違っていて、問題を引き起こす可能性があります.
悩み3.インポートされたファイルの量が多く、ページの読み込みが遅い
現在のweb開発は、Ajax技術の盛んさに伴い、同じページに表示する機能が多く、局所的な置き換え、更新、非表示/表示機能が多い.このように、単一ページのインポートが必要なjsファイルの量は、非常に大きいに違いありません.これらのファイルはサービス側から転送されました.
モジュール化解決プローブ
これらの問題に対して、どのようにして良い解決方法を求めますか?

直ちに関数を実行して悩みを解決する1

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>

var module1 = (function(){
      var _v1 = 0;
	  var func1 = function(){alert("this is func1")};
	  var func2 = function(){alert("this is func2")};
	  return {"func1":func1,
	  "func2":func2};
}());

module1.func1();

</script>
</HEAD>

<BODY>

</BODY>
</HTML>

以上のようにmodule 1オブジェクトの属性_v 1はアクセスできません.プライベート変数が保護されます.
即時実行関数の説明については、以下を参照してください.
JS即時実行の関数式(function)書き方

持ち込みパラメータ方式で悩みを解決する2(増幅モードとも呼ばれる)

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>

var module1 = (function(){
      var _v1 = 0;
	  var func1 = function(){alert("this is func1")};
	  var func2 = function(){alert("this is func2")};
	  return {"func1":func1,
	  "func2":func2};
}());

var module2 = (function(mod){
    mod.func3 = function(){alert("this is func3")}
}(module1));

module1.func3();

</script>
</HEAD>

<BODY>

</BODY>
</HTML>

上記のコードを見ると、module 2はmodule 1の上で行われる拡張である.
module 2が実行されている場合、module 1が準備されていない場合は、ワイドアンプモードを使用します.

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>

var module2 = (function(mod){
    mod.func3 = function(){alert("this is func3")}
}(module1||{}));

var module1 = (function(){
      var _v1 = 0;
	  var func1 = function(){alert("this is func1")};
	  var func2 = function(){alert("this is func2")};
	  return {"func1":func1,
	  "func2":func2};
}());

</script>
</HEAD>

<BODY>

</BODY>
</HTML>

この編を総括してただレンガを投げて玉を引いて、モジュール化の動機の検討と方案のプリセットを紹介して、現在このjs libraryの豊富な時代に、すでにいくつかのとても良いlibraryが直接使って私たちにモジュール化の効果を達成することができます.
本編の後の章で詳しく紹介します

build/package with maven2

コンソールは機能的で強力です