ディレクトリ
1.モジュラー
モジュラーの不可欠な一部となっている現代的なフロントエンドの開発です。また、バックエンド必要。
比較的独立したモジュールに複雑な問題で、この設計は、手続きの複雑さを軽減し、コードの再利用を増やすだけでなく、チームワークの開発とポスト維持・拡大に資することができます。
ECMAScript2015モジュールの概念の導入の初め、私たちは呼び出しますECMAScript Module、と呼ばれます：ESM。
2.モジュラーコア
- 独立範囲は - 効果的に単離コード、コードは、モジュール間でお互いに影響を及ぼさないであろう
- 内部データモジュールをエクスポートする方法 - モジュラーデータへのアクセスを
- 外部モジュールは、データをインポートする場合
3.ESM
ECMAScript2015/ECMAScript6スタート、JavaScriptネイティブは、モジュールの概念を導入し、今主流のブラウザは、非常に良いサポートを持っています。
3.1適用範囲の独立したモジュール
ファイルは、モジュール、独立した範囲であり、輸出は自動的にモジュール严格模式ケース、すなわち、： 'use strict'。
ファイルは、モジュールを使ってロードされている場合は、次のようになります。
- ファイルには、別のスコープを持つことになります。
- ファイル内のデフォルトのコードは、つまりstrictモードで実行されます
'use strict'。
厳格モード（'use strict'）：
- 変数は使用前に宣言する必要があります。
- いいえ可変リフトない（事前解決メカニズム）。
3.2導出モジュール内部データ
使用exportステートメントは、内部データモジュールをエクスポートします。
// 导出单个特性
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){...}
export class ClassName {...}
// 导出列表
export { name1, name2, …, nameN };
// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };
// 默认导出
export default expression;
export default function (…) { … }
export default function name1(…) { … }
export { name1 as default, … };
// 模块重定向导出
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;3.3インポート外部データモジュール
二つのモードに分かれてのインポート
- 静的インポート
- ダイナミックインポート
3.3.1静的インポート
ブラウザでimportのステートメントにのみ宣言できるtype="module"ラベルのスクリプトを使用しました。
そして、import文は、JSファイルのトップに記述する必要があります。
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";静的インポートモードは、遅延ロードをサポートしていない、
importあなたは非常にこのモジュールの先頭でなければなりません
document.onclick = function () {
// import 必须放置在当前模块最开始加载
// import m1 from './m1.js'
// console.log(m1);
}3.3.2ESMインポートエクスポート - 例：
プロジェクトパス：
index.htmlを：ESMのモジュラーの使用に注意してください、スクリプトタグは、type =「モジュール」属性でなければなりません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 在浏览器中，import 语句只能在声明了 type="module" 的 script 的标签中使用。 -->
<script type="module" src="./js/main.js"></script>
</body>
</html>main.js：
注意点：
- ファイルパスは「.jsファイルを終了する必要があります。
- あなたはすべての変数名と変数名のリストをインポートすると、ワンタイムをエクスポートする必要があり、あなたはエイリアスを使用して11個のオブジェクトにしたくありません。
- デフォルトのインポートは、{}エクスポートを追加することはできません。
- とき（別のモジュールまたはスクリプトファイルからエクスポートされた）モジュラーリダイレクト輸出、既存のスクリプトファイルの書き出しからモジュールから表現...
//导入m1模块
//1.导出单个特性:因为不是默认导出，所以需要声明变量接收,且文件必须有.js结尾
import {cssFunc1,cssFunc2,cssFunc3,M1Class} from './m1.js';
// 2.导入列表：:此处a,b,c必须和导出中的变量名一一对应
import {a,b,c} from './m1.js';
//3.重命名导出：导入导出的变量名需一一对象，想在导入时使用不同名字可使用别名， 变量名 as 别名
// import {name,pw} from './m1.js'
import {name as name1,pw as pw1} from './m1.js';
//4.默认导入：注意：default导入导出都不需要加{}
// import aa from './m1.js';
// import defaultFunc from "./m1.js"
// import defaultFunc2 from './m1.js';
import bb from './m1.js';
// 5.模块重定向导出
import * as obj from './m1.js'
import {v1,v2} from './m1.js';
import {value1,value2} from './m1.js';
import {default as defaultV} from './m1.js';
// 1.导出单个特性
let a1 = 10;
let m1Class = new M1Class();
m1Class.m1ClassFunc();
console.log("main.js",a1,cssFunc1,cssFunc2,cssFunc3);
//2.导入列表
console.log(a,b,c);//1 2 3
//3.重命名导出
// console.log(name,pw);//张三 1234
console.log(name1,pw1);//张三 1234
//4.默认导入
// defaultFunc();
// defaultFunc2();
// console.log(aa);
// console.log(bb);
//5.模块重定向导出
console.log(obj);//Module {…}
console.log(v1,v2);//2 3
console.log(value1,value2);//2 3
console.log(defaultV);//ƒ m2Func(){ console.log(v1+v2); }m1.js：
console.log("m1模块...");
function css1(){
console.log("m1模块下的css1方法");
}
//1.导出单个特性
export let cssFunc1 = css1;
export let cssFunc2 = function css2(){
console.log("m1模块下的css2方法");
}
export function cssFunc3(){
console.log("m1模块下的cssFunc3方法");
}
export class M1Class{
constructor(){
}
m1ClassFunc(){
console.log("m1模块下的m1ClassFunc");
}
}
//2.导出列表
let a = 1,b=2,c=3;
export {a,b,c};
//3.重命名导出
let username = "张三";
let password = "1234";
export {username as name,password as pw};
//4.默认导出
let aa = 1;
// export default aa;
// export default function() {
// let defaultVal = 33;
// console.log("defaultVal:"+defaultVal);
// }
// export default function defaultFunc2() {
// console.log("defaultFunc2方法");
// }
let bb = 2,cc = 3;
//不能同时导出多个。如export { bb as default,cc as default};
// export { bb as default};
// 5.模块重定向导出: from－从已经存在的模块、脚本文件…导出
export * from './m2.js';
export {v1,v2} from './m2.js';
export { v1 as value1, v2 as value2 } from './m2.js';
export { default } from './m2.js';m2.js：
let v1=2,v2=3;
export {v1,v2};
export default function m2Func(){
console.log(v1+v2);
}結果：
3.3.3動的（輸入を導入しました）
- 加えて、あるダイナミック同様の機能
import()に依存しない、type="module"スクリプトタグ。 - キーワードは、
import動的モジュールをインポートする関数を呼び出すようにすることができます。この方法の呼び出しでは、それが返されますpromise。 - await遅延ロード非同期の使用は、時間必須エクスポートの関数として導出デフォルト（）メソッドを使用して、非同期です
- 方法1：方法は、約束のオブジェクトを使用して
import('./m.js')
.then(m => {
//...
});
// 也支持 await
let m = await import('./m.js');
import()戻りデータを導入する方法としても、オブジェクトにパッケージ化するdefault真
例：インポート（）はプロミスオブジェクトから導出されます。
M3.jsは、最初のページロードではありませんが、負荷がクリックされたときにファイルをロードします。
m3.js：
let obj = {
a:1,
b:2
}
export default obj;main.js：あなたはimport文を経由してインポートする場合
//6.动态导入：通过import()方法导入，返回一个promise对象进行异步延迟加载
document.onclick = function(){
//直接通过import导入会报错
// import obj from 'm3.js';
// console.log(obj);
import('./m3.js').then(obj=>{
console.log(obj);
});
}結果：
- 第二の方法：のawait遅延ロード非同期（async）使用
await遅延ロード非同期の使用は、時間必須エクスポートの関数として導出デフォルト（）メソッドを使用して、非同期です
m3.js：
function css(){
console.log("css");
}
export default css;main.js：
//使用async await进行异步延迟加载
document.onclick = async function(){
let m1 = await import('./m3.js');
console.log(m1);
m1.default();
}結果：
4.下位互換性モジュラー
- CommonJS
- AMD
- UMD
- ESM
それかどうかに焦点を当てたモジュラー仕様の種類は、次のとおりです。
- 独立したモジュールスコープ
- エクスポートの内部データモジュール
- 外部データのインポートモジュール
5.CommonJS
そこには、標準的ではないが、アプリケーションサーバは強い需要を有する向かって付勢されているモジュール式の早期フロントエンドに及び、CommonJS仕様は標準モジュラーサーバ側バイアスの集合である本明細書の使用にNodeJS。
NodeJSと遠位JSが同じルートで、V8 NodeJSパーサ、このNodeJSに基づいてのECMAScript最も基本的な言語は、ブラウザ以外の手段を動作させるオペレーティングシステム、ネットワーク、ハードドライブなどのファイルを、拡張します。
CommonJSは、ファイルシステムを操作することによって行われ、モジュラー仕様をバックエンドファイルシステムが動作することはできませんが、フロントエンド、フロントエンドはCommonJSの仕様を使用することはできません。
5.1適用範囲の独立したモジュール
ファイルには、モジュール、独立したスコープです。
CommonJSローディング方法は、同期混合モジュラー文書を使用することです。唯一の成功したモジュラー負荷後に実装をダウン続けます。
5.2エクスポートモジュール内部データ
module.exports又はexports内部データモジュールオブジェクトを導出しました。
注：module.exportsまたはexports 二つの方法を同時に使用することはできません。
// a.js
let a = 1;
let b = 2;
module.exports = {
x: a,
y: b
}
// or
exports.x = a;
exports.y = b;5.3インポート外部データモジュール
require外部モジュール機能データを導入
// b.js
let a = require('./a');
a.x;
a.y;仕様は、例の5.4CommonJSを使用しています
nodeJS環境によって、使用してnodemonのmain.jsはmain.js.を開始します
m1.js：
let a = 1, b =2;
// module.exports = {
// x:a,
// y:b
// }
exports.l = a;
exports.m = b;main.js：
let obj = require('./m1');
// console.log(obj);//{ x: 1, y: 2 }
console.log(obj);//{ l: 1, m: 2 }
6.AMD
一部はCommonJSの仕様（ファイルシステムに基づいて、同期がロードされている）を備えていますので、それはブラウザには適用されませんので、さらに定義された仕様は、ブラウザに適用されます
AMD(Asynchronous Module Definition)。AMD没有办法获取本地文件，因此使用异步文件加载方式实现模块化加载。
https://github.com/amdjs/amdjs-api/wiki/AMD
ブラウザや仕様を実装具体的なコードはありません、我々はいくつかのサードパーティのライブラリによって解決することができます。requireJSとして。
7.AMD - requireJS
公式サイト：https://requirejs.org/
データ・メインページのファイルのエントリで指定する必要があります。
// 1.html
<script data-main="scripts/main" src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>7.1適用範囲の独立したモジュール
defineブロックを定義する方法、及びこの方法のための第2の独立したスコープ・コールバック・パラメータを生成することにより
// scripts/Cart.js
define(function() {
// 模块内部代码
})7.2導出モジュール内部データ
二つの方法でモジュールをエクスポートします。
- 道を返します。
- 使用CommonJSスタイルの輸出
return内部データモジュールを導出する：この方法は、他の物事のオブジェクトを導出することができます。
// scripts/Cart.js
define(function() {
return class Cart {
add(item) {
console.log(`添加商品：${item}`)
}
}
})7.3インポート外部データモジュール
フロント依存外部モジュールを介してインポートリストデータ
// scripts/main.js
// 定义一个模块，并导入 ./Cart 模块
define(['./Cart'], function(Cart) {
let cart = new Cart()
cart.add({name: 'iphoneXX', price: 1000000})
})7.4AMD - requireJSの用途例
- あなたは、ページ内にある必要があり、ファイルエントリ、メインデータで指定されました。
- エントリは、データのメインを使用してファイルを指定すると、ページがサーバー環境で実行されなければならないので、動的に、負荷にJSファイルをロードするためのAJAXの方法（メソッドのネットワーク要求）を介したファイル（main.js）、その後、スクリプトタグを作成します;
defineモジュラーアプローチ、及び分離モジュールのコードを定義します。- エクスポートモジュール：モード1：によっては、再
return内部データモジュールを導出するステップと、第二の方法：CommonJSスタイルが導き出さ。
index.htmlを：
あなたは、エントリデータ-メインファイルを指定する必要があります。
<body>
<script data-main="js/main.js" src="js/require.js"></script>
</body>
</html>require.js：
ゆっくりと公式サイトの負荷として、実行した後、その後、JSとは、指定されたディレクトリ内のrequire.jsファイルを生成し、Webページの下に、次のアドレスをコピー
https://cdn.bootcss.com/require.js/2.3.6/require.min.jsmain.js：
インポートファイルは、ファイルがアプリケーションのために括弧[]で使用されなければならない場合
//导入模块化文件时，通过方法的参数获取到模块中导出的数据
//注意导入时，文件名需要使用中括号
define(['./m1'],function(Cart){
let cart = new Cart()
return cart.add({name: 'iphoneXX', price: 1000000})
}
);
m1.js：
リターンの方法により、モジュラーデータをエクスポートします。
define(function () {
return class Cart {
add(item) {
console.log("m1模块");
console.log(`添加商品：${item}`, item)
}
};
});結果：
CommonJSの8.requireJSスタイル
require.jsまた、サポートしているCommonJSスタイルの構文を
8.1導出モジュール内部データ
// scripts/Cart.js
define(['require', 'exports', 'module'], function(require, exports, module) {
class Cart {
add(item) {
console.log(`添加商品：${item}`)
}
}
exports.Cart = Cart;
})
// 忽略不需要的依赖导入
define(['exports'], function(exports) {
class Cart {
add(item) {
console.log(`添加商品：${item}`)
}
}
exports.Cart = Cart;
})
// 如果是依赖的导入为：require, exports, module，也可以省略依赖导入声明
define(function(require, exports, module) {
class Cart {
add(item) {
console.log(`添加商品：${item}`)
}
}
exports.Cart = Cart;
})8.2インポート外部データモジュール
//CommonJS风格导入导出模块化数据
define(function(require) {
//注意如果导出的是类，则需要将对象中的类解构出来才能用
let {Cart} = require('./m2');
let cart = new Cart();
cart.add({name: 'iphoneXX', price: 1000000})
})8.3requireJSのCommonJSスタイルの例
m2.js：
// define(['require', 'exports', 'module'], function(require, exports, module) {
// class Cart {
// add(item) {
// console.log("m2模块");
// console.log(`添加商品：${item}`, item)
// }
// }
// exports.Cart = Cart;
// })
// // 忽略不需要的依赖导入
// define(['exports'], function(exports) {
// class Cart {
// add(item) {
// console.log(`添加商品：${item}`,item)
// }
// }
// exports.Cart = Cart;
// })
// 如果是依赖的导入为：require, exports, module，也可以省略依赖导入声明
define(function(require, exports, module) {
class Cart {
add(item) {
console.log(`添加商品：${item}`,item)
}
}
exports.Cart = Cart;
})
main.js：
//CommonJS风格导入导出模块化数据
define(function(require) {
//注意如果导出的是类，则需要将对象中的类解构出来才能用
let {Cart} = require('./m2');
let cart = new Cart();
cart.add({name: 'iphoneXX', price: 1000000})
})9.UMD
厳密に言えば、UMDモジュール仕様、に属していない主にプロセスに使用されているCommonJS、AMD、CMD互換性、モジュールコードの違いは、異なる環境下でモジュールの前面に適切に実行することができます
- モジュールは、ターゲットオブジェクト、及びnodeJS環境で導出さobejctエクスポートのタイプを決定した場合。
- そしてdefine.amd定義する機能は、次のAMDの使用、真です。
- 裁判官は、自己実行中のエクスポート機能を実行します後。
- AMDは、判決を通じて、ブラウザでエクスポートモジュラーを実行することができ、そして次の、その後、バックエンドnodeJS CommonJSの仕様モジュラーエクスポート]を使用することができます
(function (root, factory) {
if (typeof module === "object" && typeof module.exports === "object") {
// Node, CommonJS-like
module.exports = factory(require('jquery'));
}
else if (typeof define === "function" && define.amd) {
// AMD 模块环境下
define(['jquery'], factory);
}
}(this, function ($) { // $ 要导入的外部依赖模块
$('div')
// ...
function b(){}
function c(){}
// 模块导出数据
return {
b: b,
c: c
}
}));
