随着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.jsapp.js的执行)

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

但还存在2个问题:

  • 没有模块作用域

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

ES module 实现方式的更多相关文章

  1. UMD、CommonJS、ES Module、AMD、CMD模块的写法

    AMD异步模块规范 RequireJS就是AMD的一个典型的实现. 以下是一个只依赖与jQuery的模块代码: // foo.js define(['jquery'], function($){ // ...

  2. 前端模块化之ES Module

    一.概述 之前提到的几种模块化规范:CommonJS.AMD.CMD都是社区提出的.ES 2015在语言层面上实现了模块功能,且实现简单,可以替代CommonJS和AMD规范,成为在服务器和浏览器通用 ...

  3. 彻底掌握 Commonjs 和 Es Module

    目录 Commonjs commonjs 实现原理 require 文件加载流程 require 模块引入与处理 require 加载原理 require 避免重复加载 require 避免循环引用 ...

  4. 使用 ES Module 的正确姿势

    前面我们在深入理解 ES Module 中详细介绍过 ES Module 的工作原理.目前,ES Module 已经在逐步得到各大浏览器厂商以及 NodeJS 的原生支持.像 vite 等新一代的构建 ...

  5. JS 模块化- 05 ES Module & 4 大规范总结

    1 ES Module 规范 ES Module 是目前使用较多的模块化规范,在 Vue.React 中大量使用,大家应该非常熟悉.TypeScript 中的模块化与 ES 类似. 1.1 导出模块 ...

  6. JS JavaScript模块化(ES Module/CommonJS/AMD/CMD)

    前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...

  7. 关于Python Package下的Module import方式[转]

    2012年有一个目标我没有达成,那就是深入学习和使用Python语言.这个目标被其他学习任务和工作无情的抢占了,当然最主要的原因还是我重视不够^_^. 近期恰逢有一些Python工程的开发工作要做,就 ...

  8. Node.js简易服务器,配合type="module" 实现html文件script标签 ES module引入模块

    相信大家在测试type="module" 在html文件中直接模块化引入 js时,会出现一个跨域问题. 当我们将<script ></scirpt> 标签t ...

  9. 记录个人数组、字符串自己常忘记的方法,以及ES常用处理方式

    记录自己在工作中,时不时使用,每次都要去查一下的基础方法.以及ES6经常使用的方法 一.Array 1.concat 合并数组 2.shift 获取数组第一个元素 unshift 向数组首位添加一个元 ...

随机推荐

  1. JQuery 判断指定ID是否存在

  2. 纯C语言跑分(详细注释)

    #include <stdio.h> #include <time.h>//clock()所属头文件 ;//快排的数据规模 ,N=;//整点.浮点运算的规模 ;//计算圆周率的 ...

  3. 控制HTML页面内容不能选中的方法

    方法有二 一: css 方法 user-seletct: none;-webkit-user-seletct: none;-moz-user-seletct: none;-ms-user-seletc ...

  4. iOS设计模式 - 策略

    iOS设计模式 - 策略 效果 说明 1. 把解决相同问题的算法抽象成策略(相同问题指的是输入参数相同,但根据算法不同输出参数会有差异) 2. 策略被封装在对象之中(是对象内容的一部分),策略改变的是 ...

  5. 整合VIM和Graphviz,并且使用本办法实现实时预览

    在编程或是整理知识的时候一直苦于没有一款可以帮助理清思路的工具. 在网上苦寻良久,终于找到了一款可心可意的小软件 —— Graphviz. 折腾了一番,终于可以凑合着用了. 现将折腾的成果记录于此以作 ...

  6. php中的static

    静态成员是一种类变量,可以把它看成时属于整个类而不是属于类的某个实例.与一般的实例变量不同的是,静态成员只保留一个变量值,而这个变量值对所有的实例都是有效的,也就是说,所有的实例共享这个成员. $th ...

  7. 高可用web框架

    nginx nginx简介 Nginx是一个自由.开源.高性能及轻量级的HTTP服务器及反转代理服务器.Nginx以其高性能.稳定.功能丰富.配置简单及占用系统资源少而著称. Nginx 超越 Apa ...

  8. SpringMvc+Spring+MyBatis+Maven

    使用Maven构建项目 1) 创建一个Maven的war工程 2) 在webapp/WEB-INF下创建一个web.xml文件 <?xml version="1.0" enc ...

  9. Eureka 集群高可用配置.

    SERVER:1 server: port: 1111 eureka: instance: hostname: ${spring.cloud.client.ip-address} instance-i ...

  10. [19/04/27-星期六] GOF23_结构型模式(装饰模式、外观模式)

    一.装饰模式(decorator) 职责:动态的为一个对象增加新的功能. 是一种用于代替继承的技术,无须通过继承增加子类就能扩展对象的新功能.使用对象的关联关系代替继承关系,更加灵活,避免类体系的膨胀 ...