ES module 实现方式
2024-09-26 10:14:22
随着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个问题:
没有模块作用域
资源请求数量与模块化粒度相关,需要寻找性能与模块化收益的平衡
最新文章
- 【HTML5】HTML5本地数据库(Web Sql Database)
- SPAN的高度问题
- C#设计模式——职责链模式(Chain Of Responsibility Pattern)
- iPhone的震动 基于SDK8.0 Swift实现
- 【源码】基于SQLite实现CMS论坛(BBS)----附件SQLite可视化界面客户端
- 80. Remove Duplicates from Sorted Array II
- URL参数加密解密
- mybatis缓存清除方法
- php 实时推送代码
- Zend Guard Loader和Zend Optimizer的安装(更新中)
- ASP.NET State Service
- gulp实时编译less,压缩合并requirejs模块文件
- js几秒以后倒计时跳转示例
- Java (三、数组)
- Docker镜像拉不下来?试试这些
- 在 ASP.NET Core 中发送邮件遇到的坑_学习笔记
- 『转载』hadoop2.x常用端口、定义方法及默认端口
- WIN7系统怎样增加C盘空间
- django+uwsgi+nginx数据表过大引起";out of memory for query result";
- Wifidog初分析