2.4.1 模块的导出

a) ES6语法

  1. 在ES6中使用 export default 和 export 导出模块中的成员;
  2. 使用 import from 和 import ‘路径’ 还有 import {a, b} from ‘模块标识’ 导入其他模块
  1. #1. 新建test.js
  2. // 在 ES6 中，使用 export default 和 export 向外暴露成员：
  3. var info = {
  4.   name: 'zs',
  5.   age: 20
  6. }
  8. export default info
  10. /* 注意：
  11.    export default 向外暴露的成员，可以使用任意的变量来接收
  12.    在一个模块中，export default 只允许向外暴露1次
  13.    在一个模块中，可以同时使用 export default 和 export 向外暴露成员
  14. */
  17. export var title = '小星星'
  18. export var content = '哈哈哈'
  20. /*注意：
  21.      使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式叫做 【按需导出】
  22.      export 可以向外暴露多个成员， 同时如果某些成员在我们import 的时候不需要，则可以不在 {}  中定义
  23.      使用 export 导出的成员，必须严格按照导出时候的名称来使用  {}  按需接收；
  24.      使用 export 导出的成员，如果想换个名称来接收，可以使用 as 来起别名；
  25. */
  27. #2. main.js
  28. import minfo3, { title as title123, content } from './test.js'
  29. console.log(minfo3)    //这里的minfo3就是test.js中所暴露出来的default info
  30. console.log(title123 + ' --- ' + content)

注意点：

  1. #1.import命令具有提升特性
  2. foo();
  3. import { foo } from 'my_module'; // 会提升到顶部
  5. #2.import命令会执行所加载的代码，多次import同一个文件只会执行一次
  6. import 'lodash'
  7. import 'lodash'

b) CommonJS模块导出

  1. //1.导出单个成员
  2. var foo = 'bar'
  3. function add(x, y) {
  4.   return x + y
  5. }
  6. exports.foo = 'hello'
  7. exports.add = add
  9. //2.导出多个成员
  10. // 如果一个模块需要直接导出某个成员，而非挂载的方式
  11. module.exports = {
  12.   add: function () {
  13.     return x + y
  14.   },
  15.   str: 'hello'
  16. }
  18. //3.引入模块
  19. const lib = require('./test');

c) es6模块和CommonJS模块区别

1.ES6模块导入是编译时加载，CommonJS模块导入是运行时加载

  1. const lib = require('./test');                                 //运行时加载，后执行
  2. import { number, incCounter } from './test2';    //编译时加载，先执行

2.ES6模块输出的是值的引用，CommonJS模块输出的是一个值的拷贝

  1. #1.CommonJS
  2. // 01-require-lib.js
  3. //CommonJS模块化规范
  4. console.log("testtesttesttest")
  6. var counter = 3;
  7. var obj = {
  8.     name:"zhangsan"
  9. }
  10. function incCounter() {
  11.   counter++; 
  12.   obj.name = "lisi"
  13. }
  15. //导出模块 
  16. //模块输出的是值的拷贝，一旦输出一个值，模块内部的变化就影响不到这个值。
  17. module.exports = {
  18.   counter: counter,  //拷贝
  19.   obj:obj,  //引用
  20.   incCounter: incCounter,
  21. };
  24. // 01-require.js
  25. //如果多次通过require方式去引入同样的模块，模块的代码只会在初次引入的时候执行一次
  26. const test1 = require("./test")   //运行时
  27. console.log(test1);  // 3
  28. test1.incCounter();
  29. console.log(test1); // 3)
  31. const test2 = require("./test") 
  33. #2.ES6
  34. // lib.js
  35. export let number= 3;
  36. export function incCounter() {
  37.     number++;
  38. }
  39. // main.js
  40. import { counter, incCounter } from './lib';
  41. console.log(counter); // 3
  42. incCounter();
  43. console.log(counter); // 4

CommonJS多次加载同一模块的时候，只有第一次加载会运行一次，以后加载同一模块就直接从缓存取出该模块的module.exports属性。ES6多次加载同一模块的时候，只有第一次加载会执行一次，ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块

2.4.2 .vue中的数据导出

  1. #login.vue
  3. <template>
  4.   <div>
  5.     <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
  6.     <button @click="show">点我</button>
  7.   </div>
  8. </template>
  10. <script>
  11.   export default {
  12.     data() {
  13.       // 注意：组件中的 data 必须是 function
  14.       return {
  15.         msg: "123321"
  16.       };
  17.     },
  18.     methods: {
  19.       show() {
  20.         console.log("调用了 login.vue 中的 show 方法");
  21.       }
  22.     }
  23.   };
  24. </script>