首页 > 代码库 > 关于代码分割
关于代码分割
省略废话。
1.ES6之前两个比较流行的模块机制CommonJS和AMD。CommonJS模块就是对象,加载模块时加载的是拷贝;而ES6加载的是对export的引用。
2.ES6模块不是对象,使用可出现在模块顶层任何位置的export显式指定输出的代码(变量、函数、class):
export:
export var name=‘microsoft‘;
---another example 推荐在底部用{}输出需要的代码
var value_x=‘microsoft‘;
export { value_x,value_y ,method_y};
如果想给export的变量改名字,可以使用as:
export { value_x,value_y as alias_name ,method_y};
export function fn_name(){};
*export的变量是动态绑定其所在模块的。比如setTimeout后改变value_x的值,接收者得到的value_x也会定时改变。
import:
import { value_x,mothed_y } from strUrl;
value_x,mothed_y的名称必须与 strUr 中export的名称相同。如果想给import的变量改名字,可以使用as:
import { value_x as value_z,mothed_y } from strUrl;
*import具有提升效果。
*import会执行所加载的模块。
*import命令中接收的变量名要在{}中
整体加载:
可以用*指定一个对象,所有import的东西都加载到这对象上:
import * as mod from strUrl;
var x=mod.value_x;
也可以用module命令:
module mod from strUrl;
var x=mod.value_x;
export default:
上面说了import命令中加载的变量名称要和export输出的名称一致,我们也可以在输出模块中用export default指定默认输出:
export default function(){}; --比如一个匿名函数或对象
然后自己在加载的时候给接收的函数/对象命名:
import customName from strUrl;
*import后不用加{}。因为export default在模块中只能使用一次,只输出一个变量/方法/class。
*无论export default输出的是不是匿名,都视为匿名。
*除了默认输出外还想加载其他变量:
import customName,{value_x,method_x} from strUrl;
*export * from strOtherMod 命令,先加载strOtherMod 再将其输出,*会忽略strOtherMod 的默认输出。
关于代码分割