随着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. html5 区块与内联div 与span html块级元素

    HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块 ...

  2. Linux 重置root密码

    1.首先输入:sudo passwd root(设置root密码) 2.输入当前系统的账户密码(账户:my的密码) 3.输入新的root密码,确认新 4.密码,密码更新成功 5.在提示符处输入:su按 ...

  3. CentOS网卡显示为__tmpxxxxxxxx

    一台服务器做了2组端口绑定(bonding),其中一组bond总是不成功,发现少了eth0/eth5 两个网卡,后来通过ifconfig -a 发现多了两个__tmpxxx的网卡 ifconfig - ...

  4. 【javascript】javascript设计模式mixin模式

    概述: Mixin是JavaScript中用的最普遍的模式,几乎所有流行类库都会有Mixin的实现.任意一个对象的全部或部分属性拷贝到另一个对象上. 一 .混合对象 二 .混合类

  5. LoadRunner对移动互联网后端服务器压力测试

    一.LoadRunner简介 LoadRunner,是惠普公司研发的一款预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题,LoadRunner能够 ...

  6. post字符 特殊字符处理【转】

    今天和同事调试接口,由于产品设计的问题,传递的参数没有做任何的限制.同事就在传参数的时候加了些特殊字符到后台,但是后台打印的日志是 null... 然后上网搜了下解决办法:转 https://www. ...

  7. AdvStringGrid使用小结

    结合最近自己做的一些工作,用到了第三方控件AdvStringGrid,这里就常用的一些技巧做个小小的总结 (1)如何设置表格固定的列数,如下图所示: 这里固定的列数为3列,通过设置下面属性来改变固定的 ...

  8. centos7安装go语言环境

    安装包下载地址为:https://golang.org/dl/. 各个系统对应的包名: 解压安装 1.下载源码包:go1.7rc3.linux-amd64.tar.gz 2.将下载的源码包解压至 /u ...

  9. AndroidUI多线程网络请求更新导致BUG

    昨天发现一个问题,以前做好的UI列表不用正常显示了,必须,下拉一下,才能加载内容,以前是页面自动加载第一屏幕的. 这个就不好了,只是给页面加了一个按钮啊,不应该造成这么大的问题. 按钮就是设置了一个位 ...

  10. Git访问TFS出现权限不足(Using Personal Access Tokens to access Visual Studio Online)

    使用GIT克隆TFS服务器上的代码到本地时出现错误如下: fatal: Authentication failed for 'https://***.visualstudio.com/***Proje ...