iife(直ちに関数を実行)からes 6までのmodule
1308 ワード
一、es 6を使用する前に(他のモジュールでプラグインを管理していない)
a.jsファイルは以下の通りです.
b.jsファイルがモジュールaを使用する必要がある場合:
二、es 6を使用した後
a.jsは:
b.jsファイルがモジュールaを使用する必要がある場合:
まとめ
es 6を使用すると,コードが簡潔になる一方で,最も重要なのはグローバルネーミング空間の汚染を除去し,モジュール間の依存関係が明確になることである.まだブラウザがes 6をよくサポートしていませんが、babelを使ってes 6をes 5に変えることができます.今からes 6を使って開発しましょう.
a.jsファイルは以下の通りです.
// a
var a = (function(){
//
var _f = function () {
console.log('_f');
};
// 1
var f1 = function () {
console.log('f1');
};
// 2
var f2 = function () {
console.log('f2');
_f();
};
return {
f1: f1,
f2: f2
};
}());
b.jsファイルがモジュールaを使用する必要がある場合:
// b
var b = (function(){
// 1
var f1 = function () {
// a
a.f1();
};
return {
f1: f1
};
}());
二、es 6を使用した後
a.jsは:
// a
//
let _f = function () {
console.log('_f');
};
// 1
let f1 = function () {
console.log('f1');
};
// 2
let f2 = function () {
console.log('f2');
_f();
};
export default {f1, f2};
b.jsファイルがモジュールaを使用する必要がある場合:
// a,alias
import alias from './a';
// 1
let f1 = function () {
// a
alias.f1();
};
export default {f1};
まとめ
es 6を使用すると,コードが簡潔になる一方で,最も重要なのはグローバルネーミング空間の汚染を除去し,モジュール間の依存関係が明確になることである.まだブラウザがes 6をよくサポートしていませんが、babelを使ってes 6をes 5に変えることができます.今からes 6を使って開発しましょう.