js模块化管理起步-import和export用法

http://blog.csdn.net/q646926099/article/details/66476125 ES6之模前已经出现了js块加载的方案，最主要的是CommonJS和AMD规范。commonJS主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。ES6模块主要有两个功能：export和importexport用于对外输出本模块（一个文件可以理解为一个模块）变量的接口import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。 1.导出属性基本 test.js:[javascript] <a href="http://blog.csdn.net/q646926099/article/details/66476125#" title="view plain">view plain</a> <a href="http://blog.csdn.net/q646926099/article/details/66476125#" title="copy">copy</a> var name="xiaoqiu"; var age=22; export {name,age}; 定义好模块的输出以后就可以在另外一个模块通过import引用。 index.js:import {name,age} from './test.js' 1.通过import引用另一个模块输出的参数 2.整体输入 module指令，整体接收 test.js:[javascript] <a href="http://blog.csdn.net/q646926099/article/details/66476125#" title="view plain">view plain</a> <a href="http://blog.csdn.net/q646926099/article/details/66476125#" title="copy">copy</a> export function getName() { return name; } export function getAge() { return age; } index.js:import * as test from './test.js' 2.通过import * as xx from xxx.js 指令达到整体输入[javascript] <a href="http://blog.csdn.net/q646926099/article/details/66476125#" title="view plain">view plain</a> <a href="http://blog.csdn.net/q646926099/article/details/66476125#" title="copy">copy</a> console.log("import:"+test.getName()+"..."+test.getAge()); 3.默认导出.如果我们只想导出一个简单的值或者想在模块中保留一个候选值，就可以使用默认导出默认导出一个模块只能使用一次，在另外导入的时候就不需要花括号了.[javascript] <a href="http://blog.csdn.net/q646926099/article/details/66476125#" title="view plain">view plain</a> <a href="http://blog.csdn.net/q646926099/article/details/66476125#" title="copy">copy</a> export default{ name:'xiaoqiu', getAge:function(){ return 22; } } 导入时就不需要花括号了：import test from './test.js';[javascript] <a href="http://blog.csdn.net/q646926099/article/details/66476125#" title="view plain">view plain</a> <a href="http://blog.csdn.net/q646926099/article/details/66476125#" title="copy">copy</a> console.log(input.getAge()); 注意:export default 和 export default function xxx(){}如果使用了 export default function xxx 那么在引用的时候只能是 import xxx from './test.js'. xxx只能是function的名称，使用的时候直接xxx()调用当前函数了。