(3)javascriptモジュール化

引用

jsモジュール化プログラミングを実現

1 functionを利用してモジュールの戻り値のない

を作成する.

2 functionを利用してモジュールを作成する戻り値

がある.

3はfunctionを利用してモジュール伝達可能

を作成する.

4動的モジュール追加方法

まとめ

1.引用

jsのモジュール化を実現する前に、なぜモジュール化プログラミングを実現するのかをまず考えてみましょう.モジュール化プログラミングを実現するメリットは何ですか?あるいはモジュール化プログラミングを実現することで、私たちはどのような問題を解決することができますか?このブログを読む前にjsの役割ドメインチェーンが分からない場合は、jsの役割ドメインチェーンの原理:Javascriptの役割ドメインチェーンを必ず見てください.

2.jsモジュール化プログラミングを実現

1つのWebサイトの開発の過程で、きっと1人で単独で完成したのではありませんて、複数人で共同で1つのウェブサイトの開発を完成して、すべての人はいくつかのjsファイルの編纂を担当して、仮に私達は今1つのプロジェクトが2人で開発して、Aはa.jsの編纂を担当して、Bはb.jsの編纂を担当して、その中のa.jsは1つの関数をdealと言って、Bの中にも1つの関数をdeal下図のように
a.js

    function deal(){
        return 1;
    }

b.js

    function deal(){
        return 2;
    }

私たちが呼び出すときは必ずホームページでこのように参照します.

   <script src="a.js">script>
　　<script src="b.js">script>

注意:ここで問題が発生しました.私たちは役割ドメインチェーンで話しました.ラベルの下は1級の役割ドメインであり、同時に1級の役割ドメインは共有されています.つまり、1級の役割ドメインに2つのdeal関数が現れました.では、deal関数を呼び出すと、0に戻りますか、それとも1に戻りますか.(後に導入されたjsファイルのdeal関数は、前に導入されたjsファイルのdeal関数を上書きします)これは、コードの互換性をもたらします.これこそ関数の互換性がありません.コードが多くなると、コードからバグを探すのも非常にクラスのプロセスになります.jsのモジュール化を実現する必要があります(つまり、jsの役割ドメインを制御します).

2.1 functionによるモジュールの作成(戻り値なし)

a.js

    var moduleA = function(){
        this._count = 0;
　　　　  this.deal= function(){
　　　　　　return 0;
　　　　};
　　}

b.js

    var moduleB = function(){
        this._count = 0;
　　　　 this.deal= function(){
　　　　　　return 1;
　　　　};
　　}

解釈:関数を使用して、2つの2次作用ドメインを作成しました.1つのjsファイルは1つの属性だけを外部に漏らすので、作用ドメインをコントロールすることができますが、1つの欠点があります.私たちの_conutがプライベート属性である場合、var a=new moduleA();alert(a._count)、すなわちプライベート属性にアクセスできます.

2.2 functionによるモジュールの作成(戻り値あり)

外部アクセスクラスのプライベート属性を望まないという欠点を解決するために,関数に戻り値を追加することで実現した.
a.js

var moduleA = function(){
        this._count = 0;
　　　　this.deal= function(){
　　　　　　return 0;
　　　　};
        return {
            deal:this.deal
        }
　　}

解釈:このときvar a=new moduleA();alert(a._count)、このときa.countは定義されていません.しかし、この書き方には欠点があります.例えば、私のモジュールでjqueryオブジェクトを使いたいのですが、どうすればいいですか.

2.3 functionを使用してモジュールを作成する(参照可能)

functionのコンストラクション関数を用いてモジュール内でグローバルオブジェクトを呼び出す

var moduleB = (function ($) {
    this.$=$;
　　　　

　　})($);

2.4モジュールの動的追加方法

もし私たちのモジュールが拡張方法を望んでいるとしたら、私たちはどのように実現すればいいのでしょうか.

var moduleA = (function (m){
       m.talk= function () {
　　　　　　
　　　　};
　　　　return m;

　　})(moduleA);

moduleAにtalkという方法を動的に追加しました

3.まとめ

上記では、jsのモジュール化プログラミングを実現するための4つの方法を提供しましたが、多くの問題があります.例えば、

   <script src="a.js">script>
　　<script src="b.js">script>

問題1:jsファイルをロードするとき、ファイルが大きすぎると、ページに偽死現象が発生します.2:モジュールを実現する方法はすべて私たちが考えているので、同じ方法でモジュールを書かなければならないという規範が欠けています.
この2つの問題は次のブログで紹介します.つまり、私たちのAMD規範です.