首页 > 代码库 > 关于代码分割

关于代码分割

省略废话。

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

 

关于代码分割