コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JSコードのモジュール化を実装する方法

JSコードのモジュール化を実装する方法

巴扎黑
リリース： 2017-05-27 10:53:20
オリジナル
1714 人が閲覧しました

なぜモジュール パターンを使用するのでしょうか?

グローバル スコープで宣言された変数と関数は自動的にグローバル オブジェクト Window のプロパティになるため、多くの場合、グローバル変数が増えると、名前の競合やいくつかの非常に重要な保守性の問題が発生します。バグが発生する可能性が高くなります! したがって、モジュール化の目的の 1 つは、この問題を解決することです

このモードでは、アプリケーションのシナリオが少なくなります。すべてのコードは IIFE (即時実行される匿名関数) を通じてパッケージ化されているため、すべての変数と関数は関数内に隠されており、グローバルな状況を汚染しません。

使用シナリオ:

コードが他のコードに依存しない場合

    • 実行時にコードを継続的に拡張または変更する必要がない場合。コードは短く、他のコードと対話する必要はありません。単一グローバル変数モードは、グローバル変数を作成することのみを意味し、グローバル変数の名前は一意である必要があり、他のコードと競合してはなりません。現在または将来の組み込み API をすべてこのグローバル変数にマウントします。

    • これは、次のようなさまざまな人気のあるクラス ライブラリで広く使用されています:

    • YUI は唯一の YUI グローバル オブジェクトを定義します

JQuery は 2 つのグローバル オブジェクト $ と JQuery を定義します

Dojo は dojo グローバル オブジェクトを定義します

Closure は goog グローバル オブジェクトを定義します

例: 

var Mymodule= {}; 
 
Mymodule.Book = function(){...}; 
Mymodule.Book.prototype.getName = function(){....}; 
 
Mymodule.Car = function(){...}; 
Mymodule.Car.prototype.getWheels = function(){....};
ログイン後にコピー

  1. の定義module

  2. モジュールとは新しいグローバル変数や名前空間を作成するのではなく、すべてのコードを 1 つの関数に格納します。同じモジュールを他のモジュールに依存させることができます。 

    function CoolModule(){ 
        var something = 'cool'; 
        var another = [1,2,3]; 
        function doSomething(){ 
            console.log( something); 
        } 
        function doAnother(){ 
            console.log(another.join('!')); 
        } 
        return { 
            doSomething: doSomething, 
            doAnother: doAnother 
        }; 
} 
var foo = CoolModule(); 
foo.doSomething(); //cool 
foo.doAnother(); //1!2!3
    ログイン後にコピー
  3. CoolModuleはこちら これはモジュールですが、単なる関数です。ここで CoolModule 関数が呼び出され、モジュールのインスタンス foo が作成されます (CoolModule はオブジェクトを返すため、その属性の 1 つは内部オブジェクトを参照します)。モジュール CoolModule はモジュールのパブリック API を返します (内部関数を直接返すこともできます)。したがって、モジュール パターンは次の 2 つの必要な条件を満たす必要があります:

  4. CoolModule

など、関数は少なくとも 1 回呼び出される必要があります (呼び出しごとに新しいモジュール インスタンスが作成されます)。クローズされた関数には、内部関数がプライベート スコープでクロージャを形成し、アクセス可能にする またはプライベート状態を変更する

シングルトン モジュール パターンの実装: 

var foo = ( function CoolModule(){ 
        ...//代码同上例 
})(); 
foo.doSomething(); 
foo.doAnother();
ログイン後にコピー
モジュール内にパブリック API オブジェクトへの内部参照を保持することもできるため、モジュール インスタンスメソッドやプロパティの追加と削除など、内部で変更できます 
function CoolModule(){ 
    var something = 'cool'; 
    var another = [1,2,3]; 
    function change() { 
        pubicAPI.doSomething = doAnother; 
    } 
    function doSomething(){ 
        console.log( something); 
    } 
    function doAnother(){ 
        console.log(another.join('!')); 
    } 
    var pubicAPI = { 
        change: change, 
        doSomething: doSomething 
    }; 
    return pubicAPI; 
} 
var foo = CoolModule(); 
foo.doSomething(); //cool 
foo.change(); 
foo.doSomething(); //1!2!3 
var foo1 = CoolModule(); 
foo1.doSomething(); //cool
ログイン後にコピー

最新のモジュールメカニズム

名前空間は、グローバル変数にプロパティを追加することで表される単なる機能グループです。

名前空間に従ってさまざまな関数をグループ化すると、単一のグローバル変数を整理した状態に保つことができ、また、チーム メンバーが新しい関数を定義する必要があるセクションや、既存の関数を見つけるためにどのセクションに移動すればよいのかを把握できるようになります。

　　例如：定义一个全局变量Y，Y.DOM下的所有方法都是和操作DOM相关的，Y.Event下的所有方法都是和事件相关的。

  1. 　　常见的用法是为每一个单独的JS文件创建一个新的全局变量来声明自己的命名空间;

  2. 　　每个文件都需要给一个命名空间挂载功能;这时就需要首先保证该命名空间是已经存在的，可以在单全局变量中定义一个方法来处理该任务：该方法在创建新的命名空间时不会对已有的命名空间造成破坏，使用命名空间时也不需要再去判断它是否存在。

var MyGolbal = { 
    namespace: function (ns) { 
        var parts = ns.split('.'), 
            obj = this, 
            i, len = parts.length; 
        for(i=0;i<len;i++){ 
            if(!obj[parts[i]]){ 
                obj[parts[i]] = {} 
            } 
            obj = obj[parts[i]]; 
        } 
        return obj; 
    } 
}; 
MyGolbal.namespace(&#39;Book&#39;); //创建Book 
MyGolbal.Book; //读取 
MyGolbal.namespace(&#39;Car&#39;).prototype.getWheel = function(){...}
ログイン後にコピー

　　大多数模块依赖加载器或管理器，本质上都是将这种模块定义封装进一个友好的API

var MyModules = (function Manager() { 
    var modules = {}; 
    function define(name, deps, impl) { 
        for(var i=0; i<deps.length; i++){ 
            deps[i] = modules[deps[i]]; 
        } 
        modules[name] = impl.apply(impl,deps); 
    } 
    function get(name) { 
        return modules[name]; 
    } 
    return { 
        define: define, 
        get: get 
    }; 
})();
ログイン後にコピー

　　以上代码的核心是modules[name] = impl.apply(impl,deps);，为了模块的定义引入了包装函数(可以传入任何依赖)，并且将模块的API存储在一个根据名字来管理的模块列表modules对象中;

　　使用模块管理器MyModules来管理模块：

MyModules.define(&#39;bar&#39;,[],function () { 
    function hello(who) { 
        return &#39;let me introduce: &#39;+who; 
    } 
    return{ 
        hello: hello 
    }; 
}); 
MyModules.define(&#39;foo&#39;,[&#39;bar&#39;],function (bar) { 
    var hungry = &#39;hippo&#39;; 
    function awesome() { 
        console.log(bar.hello(hungry).toUpperCase()); 
    } 
    return { 
        awesome: awesome 
    }; 
}); 
var foo = MyModules.get(&#39;foo&#39;); 
foo.awesome();//LET ME INTRODUCE: HIPPO
ログイン後にコピー

　　异步模块定义(AMD):

define(&#39;my-books&#39;, [&#39;dependency1&#39;,&#39;dependency2&#39;],  
    function (dependency1, dependency2) { 
        var Books = {}; 
        Books.author = {author: &#39;Mr.zakas&#39;}; 
        return Books; //返回公共接口API 
    } 
);
ログイン後にコピー

　　通过调用全局函数define()，并给它传入模块名字、依赖列表、一个工厂方法，依赖列表加载完成后执行这个工厂方法。AMD模块模式中，每一个依赖都会对应到独立的参数传入到工厂方法里，即每个被命名的依赖最后都会创建一个对象被传入到工厂方法内。模块可以是匿名的(即可以省略第一个参数)，因为模块加载器可以根据JavaScript文件名来当做模块名字。要使用AMD模块，需要通过使用与AMD模块兼容的模块加载器，如RequireJS、Dojo来加载AMD模块

requre([&#39;my-books&#39;] , function(books){ 
            books.author; 
            ... 
   } 
)
ログイン後にコピー

　　以上所说的模块都是是基于函数的模块，它并不是一个能被稳定识别的模式(编译器无法识别)，它们的API语义只是在运行时才会被考虑进来。因此可以在运行时修改一个模块的API

　　未来的模块机制

　　ES6为模块增加了一级语法支持，每个模块都可以导入其它模块或模块的特定API成员，同样也可以导出自己的API成员;ES6的模块没有‘行内’格式，必须被定义在独立的文件中(一个文件一个模块)ES6的模块API更加稳定，由于编译器可以识别，在编译时就检查对导入的API成员的引用是否真实存在。若不存在，则编译器会在运行时就抛出‘早期’错误，而不会像往常一样在运行期采用动态的解决方案;

　　bar.js

function hello(who) { 
    return &#39;let me introduce: &#39;+who; 
} 
export hello; //导出API: hello
ログイン後にコピー

　　foo.js

//导入bar模块的hello() 
import hello from &#39;bar&#39;; 
 
var hungry = &#39;hippo&#39;; 
function awesome() { 
    console.log(hello(hungry).toUpperCase()); 
} 
export awesome;//导出API: awesome
ログイン後にコピー

　　baz.js

//完整导入foo和bar模块 
module foo from &#39;foo&#39;; 
module bar from &#39;bar&#39;; 
foo.awesome();
ログイン後にコピー

  1. 　　import可以将一个模块中的一个或多个API导入到当前作用域中，并分别绑定在一个变量上;

  2. 　　module会将整个模块的API导入并绑定到一个变量上;

  3. 　　export会将当前模块的一个标识符(变量、函数)导出为公共API;

  4. 　　模块文件中的内容会被当做好像包含在作用域闭包中一样来处理，就和函数闭包模块一样;

以上がJSコードのモジュール化を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
JS，模块化
ソース：php.cn
前の記事：Agularjs が双方向データ バインディングを使用してアコーディオン効果を実現する方法の詳細な紹介 次の記事：ポップアップボックスで配送先住所を選択し、対応する住所情報を返すlayer.jsの実装について詳しく紹介します。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
テンプレートのメソッドで定義された変数の使用 Vue (v3 ではなく v2) を使用するのは初めてで、テンプレート内 (メソッド内で定義された) で変数を使用しようとしています。私の簡略化されたコード: <templa...
から 2024-04-06 18:10:25
0
2
513
Nuxtjs 認証モジュールの内部動作を理解する 実際に Nuxtjsauth モジュールをプロジェクトに統合しようとしていますが、認証モジュールが実際にどのように機能するのか理解できません。誰かがこの概念を理解するのを手伝ってく...
から 2024-04-06 15:38:16
0
1
371
Nuxt.js で作成したダッシュボードをデプロイするには SSG を使用する必要がありますか? Nuxt.jsを使用して社内向けのダッシュボードを開発していきます。これは内部ダッシュボードであるため、ユニバーサル スキーマは必要ありません。通常、ほとんどのダッシュボードは S...
から 2024-04-06 13:17:44
0
1
493
vite を使用して React アプリケーションを構築するときに発生する Axios 関連のエラー Axios は運用環境では完全に動作しますが、アプリケーションをビルドするとこのエラーが発生します。 >react-app@0.0.0build>vitebuildvi...
から 2024-04-05 13:20:02
0
1
326
JavaScript が期待どおりに実行されない htmlcssjs をレスポンシブにしようとしていますが、期待どおりに動作しません。最小化するとすでにレスポンシブになりますが、onclick では動作しません。ナビゲーションとナ...
から 2024-04-04 13:05:32
0
1
306
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート