微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Javarscript中模块(module)、加载(load)与捆绑(bundle)详解

分类：JavaScript作者：编程之家

JS模块简介

js模块化，简单说就是将系统或者功能分隔成单独的、互不影响的代码片段，经过严格定义接口，使各模块间互不影响，且可以为其他所用。

常见的模块化有，C中的include (.h)文件、java中的import等。

为什么JS需要模块

很显然，没有模块我们也可以实现同样的功能，为什么我们还要使用模块来写js代码呢？下面几点是模块化给我们带来的一些变化：

  • 抽象代码：我们在使用模块来调用一个api时，可以不用知道内部是如何实现的，避免去理解其中复杂的代码；
  • 封装代码：在不需要再次修改代码的前提下，我们可以在模块内部隐藏其具体实现；
  • 复用代码：一些常用的、通用的功能，以模块来实现可以避免过多的重复代码；
  • 管理依赖：可以通过简单的修改依赖项来管理功能的实现，而不需要去重新修改自己内部的代码实现。
  • …

ES5及之前的模块系统

在ES5及之前版本，还没有原生的模块语法。不过这并不代表ES5之前，前端没有使用模块。简单介绍两种：IIFE、Revealing Module.

IIFE

Immediately Invoked Function Expression，立即执行函数表达式。

rush:js;"> (function(){ // ... })()

看上面的代码，IIFE可以说成是一个在定义的时候就执行的匿名函数。注意函数是先被”()”包起来了，然后后面紧跟”()”表示执行函数。如果是以下代码，将会报错：

Uncaught SyntaxError: Unexpected token )

这种写法表示，先定义一个匿名函数，然后再去解析”()”。由于在第一行”function”出现在首位，这表明此处定义一个函数，函数后紧跟”()”，此时表示单独解析”()”，就会报出上面的错误信息，因此需要先将函数定义包裹起来。 “(function…)”这种写法表示执行”()”内部代码，并返回该语句执行结果，此处返回结果为该函数，后面紧跟”()”即表示执行该函数。IIFE可以帮助我们做到：

  • 不需要了解具体的代码实现情况下取得想要的效果；
  • 在内部定义的变量不会污染全局作用域。

显而易见，这种编码方式并没有提供良好的机制来解决依赖管理问题。

Revealing Module

根据字面暂解释为揭示模式，与IIFE形式类似，但是提供了一个返回值。方便集中管理公有的api，使模块、公用api更加简洁清晰。

rush:js;"> // Expose module as global variable var singleton = function(){ // Inner logic function sayHello(){ console.log('Hello'); } // Expose API return { sayHello: sayHello } }()

稍微注意下，上面的代码，我们并没有用”()”去包裹，因为关键字”function”并不在该行的开头。

我们可以像下面这样使用模块api:

Hello

当然，我们也可以以构造函数形式导出：

rush:js;"> // Expose module as global variable var Module = function(){ // Inner logic function sayHello(){ console.log('Hello'); } // Expose API return { sayHello: sayHello } }

请注意，上面函数在定义的时候并没有执行。

我们可以这么使用它：

Hello

与IIFE一样，揭示模式并没有提供良好的解决依赖管理的方案。

更多模块化解决方案

ES6或者ES2015，自带原生的模块语法。

在这之前，有以下几种常见的用于模块化的解决方案：

  • AMD
  • CMD
  • Commonjs
  • UMD
  • System.register
  • ES6

AMD

AMD，Asynchronous Module DeFinition，异步模块定义。AMD形式被用于浏览器端，使用”define”来定义模块依赖：

rush:js;"> //Calling define with a dependency array and a factory function define(['dep1','dep2'],function (dep1,dep2) { //Define the module value by returning a value. return function () {}; });

CMD

CMD，Common Module DeFinition，通用模块定义。该规范由国内大神玉伯提出，与AMD区别在与AMD是依赖关系前置，有该依赖就必须先加载依赖，CMD是按需加载。

rush:js;"> // CMD define(function(require,exports,module) { var a = require('./a') a.doSomething() // 此处略去 100 行 var b = require('./b') // 依赖可以就近书写 b.doSomething() // ... }) // AMD 默认推荐的是 define(['./a','./b'],function(a,b) { // 依赖必须一开始就写好 a.doSomething() // 此处略去 100 行 b.doSomething() ... })

Commonjs

Commonjs在Node.js中用的较多，使用”require”来定义依赖，使用”module.exports”来定义模块:

rush:js;"> var dep1 = require('./dep1'); var dep2 = require('./dep2'); module.exports = function(){ // ... }

UMD

UMD，Universal Module DeFinition，通用模块定义。可以用于浏览器端与Node.js端：

rush:js;"> (function (root,factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['b'],factory); } else if (typeof module === 'object' && module.exports) { // Node. Does not work with strict Commonjs,but // only Commonjs-like environments that support module.exports,// like Node. module.exports = factory(require('b')); } else { // browser globals (root is window) root.returnExports = factory(root.b); } }(this,function (b) { //use b in some fashion. // Just return a value to define the module export. // This example returns an object,but the module // can return a function as the exported value. return {}; }));

System.register

System.register方式设计初衷主要是为了在ES5中能够支持ES6模块语法:

rush:js;"> import { p as q } from './dep'; var s = 'local'; export function func() { return q; } export class C { }

ES6 module

ES6中自带原生的模块语法，使用关键字”export”来导出模块的公用api：

rush:js;"> // lib.js // Export the function export function sayHello(){ console.log('Hello'); } // Do not export the function function somePrivateFunction(){ // ... }

以关键字”import”来导入模块：

Hello

目前各浏览器对ES6的支持度不一，因此我们现在需要使用编译器，像Babel，来将ES6的代码编译成ES5的形式。

模块加载器

一个模块加载器可以理解模块，并以固定的形式来加载模块。

模块加载器工作在运行时，流程大致如下：

  • 你在浏览器中运行模块加载器；
  • 你告诉模块加载器需要加载哪个主文件；
  • 模块加载器下载并解析主文件；
  • 模块加载器按需加载其他文件。

一些比较常见的模块加载器有：

  • RequireJS：以AMD风格加载模块；
  • SeaJS：以CMD风格加载模块；
  • SystemJS：以AMD,Commonjs,UMD 或者 System.register风格加载模块；
  • jspm：jspm基于SystemJS，是模块加载器，同时也具备浏览器端包管理功能。

模块打包

模块打包可以替换模块加载器。

然而，相比模块加载器，模块打包动作是在编译时运行的：

截止目前，比较常用的模块打包方案有以下两种：

  • browserify:为Commonjs模块打包；
  • Webpack: 为AMD、Commonjs、ES6模块打包。

总结

为了在现代js开发环境中更好的使用这些工具，你首先需要知道模块、模块化解决方案、模块加载、模块打包之前的区别。

模块是一段封装好的代码，可以以公用api形式导出并在其他代码中被加载和调用；

模块化解决方案或者模块化思想，实际含义是定义一个模块的语法。由于定义语法的差异，目前常用的有AMD、CMD、Commonjs、UMD等；

模块加载，在运行期解析和加载模块。常见的有RequireJS、SeaJS、SystemJS和jspm；

模块打包，其替换了模块加载的概念，在编译期间生成一个所有代码整合后的bundle.js文件。常见的有browserify和Webpack。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家编程之家的支持。

原文地址：https://www.jb51.cc/js/38957.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

bundlebundlebundlejavascriptload加载jsmodulemodule模块模块模块

相关推荐

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled="disabled"时发现，无法序列化form获取到select标签的值；当我们使用readonly="readonly&quo
还在问跨域？本文记录js跨域的多种实现实例
前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、
formData批量上传的多种实现
前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD
laypage 物理分页与逻辑分页实例
前言 以下介绍摘自 layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素
乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot