模块化中的输入输出命令

模块化

• 概念：将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来
• ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器,CommonJS和AMD模块采用‘运行时加载’-----先加载模块中的所有方法生成一个对象，然后再从这个对象上面读取所需要用的方法
• 使用：通过require引入文件生成对象，再通过对象调用
• ES6采用静态加载—只加载所需要用的方法其余的不加载，效率即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

ES6的模块化

export命令

• 主要用于暴露方法或者是变量供外部文件使用

•   //暴露变量
    //方式一
    export var firstName = 'Michael';
    export var lastName = 'Jackson';
    
    //方式二
    var firstName = 'Michael';
    var lastName = 'Jackson';
    export { firstName, lastName, year };  //推荐使用
    
    //暴露函数
    //法一
    export function test(x,y){}
    //法二
    function t1(){}
    function t2(){}
    export{
    t1 as rename1,  //可利用as重命名
    t2 as rename2
    }
  

• 注意事项
  • 最好采用对象的方式暴露变量或者是方法
  • export可以出现在模块顶层的任何位置，否则会报错

import命令

• 使用暴露的外部文件的变量或者是方法

•   import { firstName, lastName, year } from './profile.js';  //也可以使用as进行重命名
    function setName(element) {
      element.textContent = firstName + ' ' + lastName;
    }
    //整体加载
    import * as obj from 'fs'
    console.log(obj.a)  //虽然加在了obj这个对象上，但是变量还是只读不能修改
  

• 重点:import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。但如果暴露的是一个对象就可以修改里面的属性值
• 注意：import命令具有提升效果,会提升到整个模块的顶部，首先执行,引入的模块最好加上后缀名否则会报错

export default命令

• 利用export default暴露的变量或者是函数在引入时可以不用匹配变量名

•   export default function () {  //输出
    	 console.log('foo');
    	}
    	
    import customName from './export-default';  //输入，
    customName(); // 'foo'
  

• 不能使用大括号匹配，因为模块中export default只有一个

     export default{ //输出
     	a：1，
     	b:2
     }
     import {a,b} from 'fs.js' //报错，查找不到a
     import data from 'fs.js'  //正确
  

• 本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字

•   	// modules.js
    		function add(x, y) {
    		  return x * y;
    		}
    		export {add as default};
    		// 等同于
    		// export default add;
    		
    		// app.js
    		import { default as foo } from 'modules';
    		// 等同于
    		// import foo from 'modules';
  

参考文章：https://es6.ruanyifeng.com/#docs/module