Module 的語法 · 教案-標準教案-前端高階(v1)

## Module語法 > 1.概述 > 2.嚴格模式 > 3.export命令 > 4.import命令 > 5.整體加載 > 6.export default 命令 > 7.export 與 import 的復合寫法 > 8.模塊的繼承 > 9.跨模塊常量 ### 概述 > 歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發大型的、復雜的項目形成了巨大障礙在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種，前者用于服務器，后者用于瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案 ### 2.嚴格模式 ES6 的模塊自動采用嚴格模式，不管你有沒有在模塊頭部加上"use strict"; 嚴格模式主要有以下限制。變量必須聲明后再使用函數的參數不能有同名屬性，否則報錯不能使用with語句不能對只讀屬性賦值，否則報錯不能使用前綴 0 表示八進制數，否則報錯不能刪除不可刪除的屬性，否則報錯不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop] eval不會在它的外層作用域引入變量 eval和arguments不能被重新賦值 arguments不會自動反映函數參數的變化不能使用arguments.callee 不能使用arguments.caller 禁止this指向全局對象不能使用fn.caller和fn.arguments獲取函數調用的堆棧增加了保留字（比如protected、static和interface）上面這些限制，模塊都必須遵守。由于嚴格模式是 ES5 引入的，不屬于 ES6，所以請參閱相關 ES5 書籍，本書不再詳細介紹了。其中，尤其需要注意this的限制。ES6 模塊之中，頂層的this指向undefined，即不應該在頂層代碼使用this。 ### 3.export命令模塊功能主要由兩個命令構成：export和import。export命令用于規定模塊的對外接口，import命令用于輸入其他模塊提供的功能。一個模塊就是一個獨立的文件。該文件內部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量 ~~~ export var a = 'hello'; export var b = 'world'; export var c = 'es6'; ~~~ ~~~ export {a, b, c}; ~~~ ~~~ export function multiply(x, y) { return x * y; }; ~~~ ~~~ function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion }; ~~~ 需要特別注意的是，export命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系。 ~~~ // 報錯 export 1; // 報錯 var m = 1; export m; ~~~ ~~~ // 寫法一 export var m = 1; // 寫法二 var m = 1; export {m}; // 寫法三 var n = 1; export {n as m}; ~~~ ~~~ // 報錯 function f() {} export f; // 正確 export function f() {}; // 正確 function f() {} export {f}; ~~~ export語句輸出的接口，與其對應的值是動態綁定關系，即通過該接口，可以取到模塊內部實時的值 ~~~ export var foo = 'bar'; setTimeout(() => foo = 'baz', 500); ~~~ export命令可以出現在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級作用域內，就會報錯 ~~~ function foo() { export default 'bar' // SyntaxError } foo() ~~~ ### 4.import 命令 ~~~ import {firstName, lastName, year} from './profile.js'; function setName(element) { element.textContent = firstName + ' ' + lastName; } ~~~ ~~~ import { lastName as surname } from './profile.js'; ~~~ import命令輸入的變量都是只讀的，因為它的本質是輸入接口。也就是說，不允許在加載模塊的腳本里面，改寫接口。 ~~~ import {a} from './xxx.js' a = {}; // Syntax Error : 'a' is read-only; ~~~ import命令具有提升效果，會提升到整個模塊的頭部，首先執行。 ~~~ foo(); import { foo } from 'my_module'; ~~~ 由于import是靜態執行，所以不能使用表達式和變量，這些只有在運行時才能得到結果的語法結構。 ~~~ // 報錯 import { 'f' + 'oo' } from 'my_module'; // 報錯 let module = 'my_module'; import { foo } from module; // 報錯 if (x === 1) { import { foo } from 'module1'; } else { import { foo } from 'module2'; } ~~~ import語句會執行所加載的模塊，因此可以有下面的寫法 ~~~ import 'lodash'; ~~~ 如果多次重復執行同一句import語句，那么只會執行一次，而不會執行多次。 ~~~ import 'lodash'; import 'lodash'; ~~~ 上面代碼加載了兩次lodash，但是只會執行一次。 ~~~ import { foo } from 'my_module'; import { bar } from 'my_module'; // 等同于 import { foo, bar } from 'my_module'; ~~~ ### 5.模塊的整體加載 ~~~ export function area(radius) { return Math.PI * radius * radius; } export function circumference(radius) { return 2 * Math.PI * radius; } ~~~ 加載模塊 ~~~ import { area, circumference } from './circle'; console.log('圓面積：' + area(4)); console.log('圓周長：' + circumference(14)); ~~~ 也可以 ~~~ import * as circle from './circle'; console.log('圓面積：' + circle.area(4)); console.log('圓周長：' + circle.circumference(14)); ~~~ 不允許運行時改變 ~~~ import * as circle from './circle'; // 下面兩行都是不允許的 circle.foo = 'hello'; circle.area = function () {}; ~~~ ### 6.export default命令從前面的例子可以看出，使用import命令的時候，用戶需要知道所要加載的變量名或函數名，否則無法加載。但是，用戶肯定希望快速上手，未必愿意閱讀文檔，去了解模塊有哪些屬性和方法。為了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令，為模塊指定默認輸出。 ~~~ export default function () { console.log('foo'); } ~~~ ~~~ // import-default.js import customName from './export-default'; customName(); // 'foo' ~~~ export default命令其實只是輸出一個叫做default的變量，所以它后面不能跟變量聲明語句 ~~~ // 正確 export var a = 1; // 正確 var a = 1; export default a; // 錯誤 export default var a = 1; ~~~ ### 7.export 與 import的復合寫法如果在一個模塊之中，先輸入后輸出同一個模塊，import語句可以與export語句寫在一起。 ~~~ export { foo, bar } from 'my_module'; // 可以簡單理解為 import { foo, bar } from 'my_module'; export { foo, bar }; ~~~ ~~~ // 接口改名 export { foo as myFoo } from 'my_module'; // 整體輸出 export * from 'my_module'; ~~~ ~~~ export { es6 as default } from './someModule'; // 等同于 import { es6 } from './someModule'; export default es6; ~~~ ### 8.模塊的繼承 ~~~ // circleplus.js export * from 'circle'; export var e = 2.71828182846; export default function(x) { return Math.exp(x); } ~~~ ### 9.跨模塊常量 ~~~ // constants.js 模塊 export const A = 1; export const B = 3; export const C = 4; // test1.js 模塊 import * as constants from './constants'; console.log(constants.A); // 1 console.log(constants.B); // 3 // test2.js 模塊 import {A, B} from './constants'; console.log(A); // 1 console.log(B); // 3 ~~~ ~~~ // constants/db.js export const db = { url: 'http://my.couchdbserver.local:5984', admin_username: 'admin', admin_password: 'admin password' }; // constants/user.js export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator']; ~~~ ### 課后習題 1.下面的代碼有什么問題？ ~~~ export 2; var x = 3; export x; ~~~ ~~~ export default var a = 1; ~~~ ~~~ import {x} from 'xx.js'; x = []; ~~~ ~~~ import { 'a' + '1'} form 'xxx.js'; ~~~ 2.編寫一個js模塊。模塊里導出加減乘除這四種方法。