关于代码分割

Posted 2020-10-01 瓶子2333

省略废话。

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 的默认输出。