René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"02--ES6模块","articleBody":"### 一、ES6模块体系简述\r\n- 1、上一篇“ javascript模块化进程 ”中也说到：历史上，JavaScript 一直没有模块体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。ES6之前，社区制定了一些模块加载方案，最主要的有 CommonJS（**服务器**）和 AMD/CMD（**浏览器**）两种。\r\n\r\n- 2、ES6 **在语言标准的层面上**，实现了模块功能，完全可以取代 CommonJS 和 AMD（CMD） 规范，成为**浏览器和服务器通用的模块解决方案**。\r\n\r\n### 二、ES6模块\r\n- 1、ES6 模块与CommonJS 、 AMD 模块区别\r\n\r\n  - ES6 模块的设计思想，是**尽量的静态化**，使得**编译时就能确定模块的依赖关系，以及输入和输出的变量**。\r\n\r\n  - CommonJS 和 AMD 模块，都只能在**运行时确定模块依赖关系（运行时加载）**，因为只有运行时才能得到模块对应的**对象**(如，CommonJS 模块就是对象，输入时必须查找对象属性）。\r\n\r\n  - **ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入**。\r\n\r\n- 2、ES6 模块特性\r\n\r\n  - **一个模块就是一个独立的文件，其内部的所有变量，外部无法获取**。\r\n\r\n   - **编译时加载或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高**。\r\n\t\r\n  - **ES6模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入，因此没法引用模块本身**。\r\n\r\n- 3、ES6模块构成的两个关键字\r\n\r\n  - export： **规定模块的对外接口**\r\n  - import： **输入模块提供的功能**\r\n\r\n- 4、export关键字\r\n\r\n- A、输出变量、函数、类\r\n\r\n```\r\n// 直接输出\r\nexport const name = 'jackxu';\r\n\r\nexport const add = (x = 0, y = 0) =\u003e {\r\n    return x + y;\r\n};\r\n\r\nexport class Hello {\r\n    sayHi() {\r\n        console.log('Hi~!');\r\n    }\r\n}\r\n\r\n// 统一输出\r\nconst name = 'jackxu';\r\n\r\nconst add = (x = 0, y = 0) =\u003e {\r\n    return x + y;\r\n};\r\n\r\nclass Hello {\r\n    sayHi() {\r\n        console.log('Hi~!');\r\n    }\r\n}\r\n\r\nexport { name, add, Hello }\r\n\r\n```\r\n- B、**输出的变量就是原变量名**，可以使用**as**关键字重命名\r\n\r\n```\r\nconst name = 'jackxu';\r\n\r\nconst add = (x = 0, y = 0) =\u003e {\r\n    return x + y;\r\n};\r\n\r\nclass Hello {\r\n    sayHi() {\r\n        console.log('Hi~!');\r\n    }\r\n}\r\n\r\nexport {\r\n    name as ESName,\r\n    add as addTwo,\r\n    Hello as Hi\r\n}\r\n```\r\n\r\n- 5、export使用注意事项\r\n\r\n- A、**export规定模块的对外接口，必须与模块内部的变量建立一一对应的关系**\r\n\r\n```\r\n// 错误写法\r\nconst add = (x = 0, y = 0) =\u003e {\r\n    return x + y;\r\n};\r\n\r\nexport add;\r\nexport 123;\r\n```\r\n![image](https://user-images.githubusercontent.com/24514952/36639420-21decbca-1a47-11e8-8a06-f6ea6d28abfe.png)\r\n\r\n```\r\n//  正确写法\r\nconst add = (x = 0, y = 0) =\u003e {\r\n    return x + y;\r\n};\r\n\r\nconst A = 1;\r\nexport { add, A }\r\n```\r\n- B、export命令可以出现在模块的任何位置，但必须**处于模块顶层**\r\n\r\n```\r\nconst fn = () =\u003e {\r\n    export const a = 'bar';\r\n};\r\n\r\nfn();\r\n\r\n```\r\n![image](https://user-images.githubusercontent.com/24514952/36639470-651614f6-1a48-11e8-9442-d73ffcf42841.png)\r\n\r\n- 6、import关键字\r\n\r\n- A、加载模块提供的功能(输入模块提供的功能)\r\n\r\n```\r\nimport { name, add, Hello } form '模块相对路径/模块绝对路径/模块文件名'\r\n```\r\n \u003e 模块后缀`.js`可以省略，相对路径`./`不能省略\r\n\r\n\u003e 模块文件名，由于不带路径，必须进行配置（如webpack+nodejs路径配置）\r\n\r\n如加载先前export输出变量：\r\n```\r\n// 加载多个变量\r\nimport { name, add, Hello } form './class/test17';\r\n\r\n// 加载单个变量\r\nimport { name } form './class/test17';\r\n```\r\n\r\n- B、模块的整体加载：用星号 * 指定一个对象，所有输出值都加载在这个对象上面\r\n```\r\nimport * as filters form '模块相对路径/模块绝对路径/模块文件名'\r\n```\r\n如整体加载先前export输出变量：\r\n```\r\nimport * as test form './class/test17';\r\n```\r\n\u003e 模块整体加载所在的那个对象（如上面test），应该是可以静态分析的，所以不允许运行时改变。\r\n\r\n如修改先前export输出的函数add，虽然不会报错，但不应这么操作。\r\n```\r\nimport * as test from './class/test17';\r\n\r\ntest.cname = '李四';  // 不恰当写法\r\ntest.add = () =\u003e 666;  // 不恰当写法\r\n```\r\n- C、import命令具有提升效果，会提升到整个模块的头部，首先执行。\r\n\r\n如先执行add，在import输入export输出的变量add\r\n```\r\nconsole.log(add(2));\r\n\r\nimport { add } from './class/test17';\r\n```\r\n- D、**import语句会执行所加载的模块**，如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。\r\n```\r\nimport '../../assets/styles/collect.css' // 仅仅执行模块，但是不输入任何值\r\n```\r\n- E、import是静态执行，所以**不能使用表达式和变量（这些只有在运行时才能得到结果的语法结构）**\r\n\r\n如下使用变量和表达式的import操作都会报错：\r\n```\r\nimport { 'n' + 'ame' } from './class/test17';\r\n```\r\n![image](https://user-images.githubusercontent.com/24514952/36639873-604f3ea4-1a50-11e8-9efd-913999633e33.png)\r\n\r\n```\r\nlet module = './class/test17';\r\n\r\nimport { name } from module;\r\n```\r\n![image](https://user-images.githubusercontent.com/24514952/36639894-b2238384-1a50-11e8-97c9-144c59c80c5a.png)\r\n\r\n```\r\nconst a = 1;\r\n\r\na === 1 ? import { name } from './class/test17' : '';\r\n```\r\n![image](https://user-images.githubusercontent.com/24514952/36639952-d3c67cfc-1a51-11e8-8df7-14b55d4413d5.png)\r\n\r\n- 7、export default关键字\r\n\r\n\u003e `export`输出的模块，`import`加载的时，需要知道加载的变量名、函数名或类名，否则无法加载。而实际业务中，很可能不知道具体变量名，这时候就需要使用export default关键字。\r\n\r\n- A、export default输出的模块，使用import加载的时候，变量名可以任意指定名字，但import后面不使用`{}`\r\n\r\n```\r\n//  export default输出\r\nconst name = 'jackxu';\r\n\r\nconst add = (x = 0, y = 0) =\u003e {\r\n    return x + y;\r\n};\r\n\r\nclass Hello {\r\n    sayHi() {\r\n        console.log('Hi~!');\r\n    }\r\n}\r\n\r\nexport default { name, add, Hello }\r\n\r\n// import 输入\r\nimport test from './class/test17';\r\n\r\nconsole.log(test.name);\r\nconsole.log(test.add(3, 6));\r\n```\r\nB、export default也可输出非匿名函数，系统默认函数名在模块外部无效，加载的时候视同匿名函数加载\r\n\r\n匿名函数：\r\n```\r\n//  export default输出\r\nexport default (arr = []) =\u003e {\r\n    return arr.filter(item =\u003e item \u003e 6);\r\n}\r\n\r\n// import 输入\r\nimport filterArr from './class/test17';\r\n\r\nconsole.log(filterArr([1, 4, 6, 8, 9, 10]));\r\n```\r\n非匿名函数：\r\n```\r\n//  export default输出\r\nexport default function filter_arr(arr = []) {\r\n    return arr.filter(item =\u003e item \u003e 6);\r\n}\r\n\r\n// import 输入\r\nimport filterArr from './class/test17';\r\n\r\nconsole.log(filterArr([1, 4, 6, 8, 9, 10]))；\r\n```\r\n- C、export default用于指定模块的默认输出，**一个模块只能有一个默认输出，因此export default命令只能使用一次**\r\n```\r\nconst _A = 123,\r\n    _B = (...arg) =\u003e new Map().set('arg', arg);\r\n    \r\nexport default _A;\r\nexport default _B;\r\n```\r\n![image](https://user-images.githubusercontent.com/24514952/36641358-69f42118-1a69-11e8-8e44-2ae282dd11ab.png)\r\n\r\n- D、export default本质： **输出一个名为default的变量或方法，然后系统允许为其任意取名**\r\n\r\ndemo1：\r\n```\r\n// babel转码前\r\nexport default () =\u003e {\r\n  console.log('山穷水尽，柳暗花明');\r\n}\r\n\r\n// babel转码后\r\n'use strict';\r\nObject.defineProperty(exports, \"__esModule\", {\r\n  value: true\r\n});\r\nexports.default = function () {\r\n  console.log('山穷水尽，柳暗花明');\r\n};\r\n```\r\ndemo2:\r\n```\r\n// babel转码前\r\nconst name = 'jackxu';\r\nconst fn = () =\u003e 5;\r\nexport default { name, fn };\r\n\r\n// babel转码后\r\n'use strict';\r\nObject.defineProperty(exports, \"__esModule\", {\r\n  value: true\r\n});\r\nvar name = 'jackxu';\r\nvar fn = function fn() {\r\n  return 5;\r\n};\r\nexports.default = { name: name, fn: fn };\r\n```\r\n- E、export default其实只是**输出一个叫做default的变量**，所以它后面**不能跟变量声明语句**。\r\n\r\n错误写法：\r\n```\r\nexport default const _B = 123;\r\n```\r\n![image](https://user-images.githubusercontent.com/24514952/36641550-2f68aed0-1a6c-11e8-9647-9933bb158c6e.png)\r\n\r\n正确写法：\r\n```\r\nconst _B = 123;\r\nexport default _B;\r\n\r\n// 对比export\r\nexport const _B = 123;\r\n```\r\n```\r\nexport default  66;\r\n\r\n// 对比export\r\nexport 66;  // 错误写法\r\n```\r\n\r\n**主要参考资料**:\r\n\r\n- [阮大师播客有关模块化介绍](http://www.ruanyifeng.com/home.html)\r\n- [ECMAScript 6 入门](http://es6.ruanyifeng.com)\r\n- [export of MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export)\r\n- [import of MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import)\r\n- [babel](http://babeljs.io)\r\n\r\n\r\n","author":{"url":"https://github.com/simplexcspp","@type":"Person","name":"simplexcspp"},"datePublished":"2018-02-25T12:53:00.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/2/JavaScript-Module/issues/2"}