JSモジュール化

璣33751;菗一、理解1、モジュール、モジュール化は何ですか?複雑なプログラムを一定の仕様に基づいていくつかのファイルにカプセル化し、結合します.
2、なぜモジュール化されますか?複雑さを低減し、結合性を高め、配置が便利である.
3、モジュール化の利点ネーミング衝突を避ける(名前空間の汚染を減らす)より良い分離は、必要に応じてより高い多重性の高いメンテナンス性をロードする4、ページによってscriptモジュールをロードする使用例を紹介します.フロントエンドフレームlayuiのjs部分はモジュール化を採用することです.
layui.useはモジュールlayuiを導入するので、defineは定義モジュールです.
葃葃33751;二、モジュール化規範1、Common JS(nodeはこの規範に基づいて編纂します)説明:すべての文書はモジュールとして利用できます.
サーバー側:モジュールのロードは実行時に同期してロードされます.
ブラウザ側で:モジュールは事前にコンパイルして包装処理する必要があります.
基本文法:モジュール導入:require(xxx)
第三者モジュール:xxxはモジュール名です.
カスタムモジュール:xxxはモジュールファイルのパスです.
暴露モジュール:exports.xxx=valueとmodule.exports=value
露出されたモジュールの本質はexportオブジェクトです.
exports自体は空の対象です.exports.xxx=valueはexportsオブジェクトに属性または方法を追加します.
module.export=valueは直接valueの新しいオブジェクトで元の空きオブジェクトをカバーします.
実現:サーバー側実現:Node.js
ブラウザ側実現:Browserify(CommunJSのブラウザ端のパッキングツール)
ダウンロードしてbrowserifyをインストールします.
グローバル:npm install browserify-g
局部:npm install browserify--save-dev
モジュールコード(jsファイルコードを定義し、該当内容を暴露する)
モジュールを導入してap.jsの中でrequireでモジュールを導入しますが、ブラウザはrequire方法が分かりません.
ルートディレクトリ下の端末にbrow serify js/src/ap.js-o js/dist/bundle.jsを入力します(js/src/ap.jsソースファイルjs/dist/bundle.jsはパッケージ出力のファイルです)
ページ使用の紹介:

 （               ）

2、AMD :ブラウザ のモジュール に し、モジュールのロードは です.
: モジュールを します.

　　//         ：

　　define(function(){

　　　　return   

　　})

　　//        ：

　　define(['module1','module2'],function(m1,m2){

　　　　return   

　　})

      ：

 　　require(['module1','module2'],function(m1,m2){

　　　　  m1/m2

　　})

(ブラウザ ):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、ES 6 : モジュールはコンパイル・パッキング が です.エクスポートモジュール:export xxx
モジュール:import xxx from"url"
ページの
(ブラウザ ):Babelを ってES 6コードをES 5コードにコンパイルする
Browserifyでコンパイルしてjsを します.