Js基础-模块化语法

一、CommonJs规范

• 允许模块通过require方法来同步加载(同步阻塞)所要依赖的其他模块，然后通过module.exports来导出需要暴露的接口。

1. 如何导出变量、方法、对象。

   //创建math1.js文件，module表示当前模块(即：当前文件math1.js)，exports是module上的属性      
   module.exports = function add(a, b) { return a + b; }
   

2. 如何引用其他文件的变量、方法 、对象。

   //创建main2.js，并在其中引用模块中的add方法
   var {add} = require(“./math1.js”);     
   console.log(add(1, 2));   //调用add必须得等待main1.js请求加载成功。
   

二、ES6模块化

1. 导出唯一的对象，使用：export default。

   1. 导出一个对象，创建main1.js，内容如下：

      export default {  //导出的对象没有名字
              a: 100
      }
      // 相当于： 
      
      var data = { a: 100};
      export { data as default };  //给导出的对象命名data
      

   2. 创建mian2.js文件，并引用main1.js中的对象

      import obj from “./mian1.js”;    //由于用default导出，所以可以用任意变量名接收
      console.log(obj.a)
      // 相当于:
      
      import { default as obj } from “./mian1.js”; //给导入的无名对象命名为obj
      

2. 当要输出多个对象时，不能用default了，且import时候要加{…}

   1. 导出多个对象，创建mian1.js，内容如下：

   var a = 100；
   var b = 10；
   var c = function() { }
   export {a, b, c};
                
   //注：可以使用as关键词对导出变量进行重命名
   export {
         a as newA,
         b as newB, 
         c  as newC
   };
   

   2. 导入内容，创建mian2.js， 并引用main1.js导出的变量

      import {a, b, c}  from “./mian1.js”;
      import {newA, newB, newC} form ”./mian1.js”;
                     
      //注：可以使用as关键词对导入的变量重命名,可以只导入对象中的一个属性
      import  {a as renameA} form “./mian1.js”;
      

3. 注意事项：

   • export语句输出的接口是对应值的引用，是一种动态绑定关系，通过该接口可以获取模块内部实时的值，不可对引入变量重新赋值。 对比CommomJs规范： CommonJs模块输出的是值的缓存，不存在动态更新，可以对引入变量重新赋值。
   • export可以放在模块顶层的任何位置（即：跟全局变量同层），若出现在函数中、if(){ }大括号中，就会报错，import同理。
   • import命令输入的变量都是只读的，因为它的本身就输入接口，也就是说，通过导入变量去改写变量的值，会报错。 但是如果是一个对象，改写对象的属性是允许的。（对象只能改变值但不能改变引用地址）。