ES module 实现方式

随着js社区不断发展，js功能更加强大，细数js的几种 module 方式。

整理了七种模块化方式

1.作为新手，练习小的demo，比较喜欢的方式.不适合大的项目。

<!--html-->
<script>
    // module1 code
    // module2 code
</script>

手动添加注释来标明模块范围，类似于CSS里的分节注释：

/* -----------------
 * TOOLTIPS
 * ----------------- */

所有js代码一个js文件写穿，很容易查看，文件较少。原始的模块方案。

优点：浏览代码容易，可以通过锚点，快速找到代码。

缺点：文件太长，难以维护。没有实质性的好处，比如（模块化作用域，依赖管理，模块间错误隔离）。

 

2.多script标签

<!--html-->
<script type="application/javascript" src="PATH/polyfill-vendor.js" ></script>
<script type="application/javascript" src="PATH/module1.js" ></script>
<script type="application/javascript" src="PATH/module2.js" ></script>
<script type="application/javascript" src="PATH/app.js" ></script>

把各个模块拆分成独立文件，有3个好处：

• 通过控制资源加载顺序来处理模块依赖

• 有模块间错误隔离（module1.js初始化执行异常不会阻断module2.js和app.js的执行）

• 各模块位于单独文件，切实提高了维护体验

但还存在2个问题：

• 没有模块作用域

• 资源请求数量与模块化粒度相关，需要寻找性能与模块化收益的平衡