JSのモジュール性の分析

この記事では主に JS のモジュール化の分析を紹介します。これを必要な友人に共有します。

1. モジュールとモジュール化とは何ですか?

複雑なプログラムを特定の仕様に従って複数のファイルにカプセル化し、それらを結合します

2. なぜモジュール化するのでしょうか?

複雑さを軽減し、デカップリングを改善し、展開を容易にする

3. モジュール化の利点

• 名前の競合を回避する (名前空間の汚染を減らす)

• より適切な分離、オンデマンドの読み込み

• 高い再利用性

高い保守性

• 4. モジュール仕様

1. CommonJS (ノードはこの仕様に基づいて記述されています)

注:

各ファイルはモジュールとみなすことができます

サーバー側: モジュールは実行時に同期的にロードされます

ブラウザ側: モジュールは事前にコンパイルおよびパッケージ化する必要があります

基本構文:

モジュールの紹介: require(xxx)

サードパーティモジュール: xxx はモジュール名です

カスタムモジュール: xxx はモジュールファイルのパスです

公開されたモジュール: exports.xxx = 値module.exports = value

公開されたモジュールの本質は、exports オブジェクトです

Exports 自体は空のオブジェクトです exports.xxx = value は、属性またはメソッドをエクスポート オブジェクトに追加することです

Module .exports = value は、元の空のオブジェクトを新しい value オブジェクトで直接上書きします

実装:

サーバー側の実装: Node.js

ブラウザ側の実装: Browserify (CommonJS ブラウザ側のパッケージ化ツール)

browserify をダウンロードしてインストールします

グローバル: npm install browserify -g

ローカル: npm install browserify --save-dev

モジュール コードを定義します (js ファイル コードと対応するコンテンツを公開します)

導入モジュール app.jsでrequireを使用してモジュールを導入しますが、ブラウザがrequireメソッドを認識しないのでjsをパッケージ化して処理する必要があります

browserify js/src/app.js -o js/distと入力します。ターミナルのルート ディレクトリの /bundle.js (js/src/app.js ソース ファイル js/dist/bundle.js はパッケージ化された出力ファイルです)

ページを使用して紹介:

1a471bc30ff07b77350dbb32ce7510122cacc6d41bbb37262a98f745aa00fbf0 (ブラウザが実際に実行するのは、パッケージ化され生成されたファイルです)

2. AMD

2. ブラウザ側のモジュール化仕様とモジュールロードに特別に使用されます 非同期です

基本構文:

公開モジュールを定義します:

　//定义没有依赖的模块：
　　define(function(){
　　　　return 模块
　　})
　　//定义有依赖的模块：
　　define(['module1','module2'],function(m1,m2){
　　　　return 模块
　　})

module を使用して導入します:

require(['module1','module2'],function(m1,m2){
　　　　使用m1/m2
　　})

実装 (browユーザー側):

Require.js

3 、CMD (理解)

説明: 特にブラウザ側で使用され、モジュールのロードは非同期であり、モジュールは使用時にロードされて実行されます

基本構文:

公開モジュールの定義:

　//定义没有依赖的模块：
　　define(function(require,exports,module){
　　　　exports.xxx = value
　　　　module.exports = value
　　})
　　//定义有依赖的模块：
　　define(function(require,exports,module){
　　　　//引入依赖模块(同步)
　　　　var module2 = require("./module2")
　　　　//引入依赖模块（异步）
　　　　require.async("./module3",function(m3){
　　　　})
　　　　//暴露模块
　　　　exports.xxx = value
　　})

モジュールの導入と使用:

require(function(require){
　　　　var m1 = require('./module1')
　　　　var m4 = require('./module4')
　　　　m1.show()
　　　　m4.show()
　　})

実装(ブラウザ側): Sea.js

4、ES6

注: 依存モジュールコンパイルしてパッケージ化する必要があります

Syntax：

エクスポートモジュール：XXX

HITTRYモジュールをエクスポート：「URL」からXXXをインポートする

ページはじめに

インペンテーション（ブラウザー側）：

Babel を使用して ES6 から ES5 コードをコンパイルする

B rowserify を使用する js のコンパイルとパッケージ化

以上がこの記事の全内容であり、その他の関連コンテンツについても役立つことを願っています。 、PHP 中国語 Web サイトに注意してください。 関連するおすすめ:

JavaScriptの読み込み解析について

JavaScriptの即時実行機能の解析について

以上がJSのモジュール性の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。