JavaScript 模块化详解
目录
- 前言：
- 1.概念
- 2.模块化的好处
- 3.引入多个script标签后出现的问题
- 一、CommonJS
- 二、AMD
- 三、CMD
- 四、ES6模块化
前言：
1.概念
- 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起；
- 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。
2.模块化的好处
- 避免命名冲突(减少命名空间污染)；
- 更好的分离, 按需加载；
- 更高复用性；
- 更高可维护性。
3.引入多个script标签后出现的问题
- 请求过多（依赖的模块过多，请求就会过多）；
- 依赖模糊（不知道模块的具体依赖关系，导致加载顺序出错）；
- 难以维护（以上两个原因就会造成这个结果）。
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jQuery.js"></script> <script src="module.js"></script> </head> <body> <div>123</div> </body> <script> myModule.foo(); myModule.bar(); console.log(myModule.data) ; myModule.data = 'xxxx'; myModule.foo(); </script> </html>
//module.js IIFE（匿名函数自调用）
;(function(window,$){
let data = "www.baidu.com";
function foo() {
console.log(`foo() ${data}`);
//这里需要使用jQuery库
$('body').css('background', 'red')
}
function bar() {
console.log(`bar() ${data}`);
otherFun();
}
function otherFun() {
console.log(`otherFun()`);
}
window.myModule = { foo, bar };
})(window, jQuery)
一、CommonJS
- NODE 就是基于
commonJS模块规范，每一个文件就是一个模块；有自己的作用域；在服务器端，模块的加载是同步的；在浏览器端，模块需提前编译打包处理
特点：
- 所有代码都运行在模块作用域，不会污染全局作用域；
- 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
- 模块加载的顺序，按照其在代码中出现的顺序。
语法：
- 暴露模块：
js module.exports = value或者js exports.xxx = value - 引入模块：
js require('xxx')如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径
CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
require命令用于加载模块文件。require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错。
CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值
二、AMD
- 相比于CommonJS的同步加载模块，AMD更适合于浏览器端的非同步模块加载，因为AMD允许指定回调函数
- 目录结构
使用require.js
<!-- index.html --> <script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
//定义一个没有依赖的module1模块
define('module1', () => {
let count = 0;
const add = () => ++ count;
const reset = () => count = 0;
const upperCase = string => string.toUpperCase()
return {
add,
reset,
upperCase
}
})
//定义一个有依赖的module2模块，依赖module1
define('module2',['module1'], (module1) => {
const showMsg = () => module1.upperCase('hello-amd');
return {
showMsg
}
})
<!-- 在html文件中使用模块 -->
<body>
<script>
require.config({
paths: {
module1: './modules/module1',
module2: './modules/module2'
}
})
require(['module1', 'module2'], (module1, module2) => {
console.log(module1.add()) // 1
console.log(module1.reset()) //0
console.log(module2.showMsg()) //HELLO-AMD
})
</script>
</body>
三、CMD
- CMD集CommonJS与AMD的优点于一身，cmd 规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行（实现了按需加载，而AMD是不支持按需加载的）
- 目录结构
使用sea.js
<script src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>
//定义模块module1
define((require, exports, module) => {
let string = 'I am a string';
const readString = () => 'module1 show() ' + string;
//向外暴露
exports.readString = readString;
})
//定义模块module2
define((require, exports, module) => {
exports.msg = "正是在下啊"
})
//定义模块module
define((require, exports, module) => {
//引入依赖模块（同步）
var module1 = require('./module1');
console.log(module1.readString()) // module1 show() I am a string
//引入依赖模块（异步）
require.async('./module2', md2 => {
console.log(`这是异步引入的:${md2.msg}`) //这是异步引入的:正是在下啊
})
})
<!-- html文件使用module -->
<body>
<script>
seajs.use('./modules/module')
</script>
四、ES6模块化
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。
两个关键字 import和export
- import 导入
- export 导出
//mian.js
export default {
showMsg() {
console.log('hahahahahah')
}
}
export const msg = "正是花好月圆时！"
//index.js
import module1 from "./module1"; //对应export default
module1.showMsg()
import { msg } from './module1'; //对应export
console.log(msg)
/*tips: 不要在html里使用<script type="module">
import ....., 有跨域问题，可以在vscode里下载一个插件，或者本地起服务都可以解决，就不赘述了。
</script>*/
到此这篇关于JavaScript 模块化详解的文章就介绍到这了,更多相关JavaScript 模块化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
详解NodeJS模块化
目录 一.前言 二.正文 2.1.什么是模块 2.2.Resolving 2.3.require.resolve 2.4.模块间的父子依赖关系 2.5.exports, module.exports 2.6.模块循环依赖 2.7..json和.node 2.8.Wrapping 2.9.Cache 三.总结 一.前言 我们知道,Node.js是基于CommonJS规范进行模块化管理的,模块化是面对复杂的业务场景不可或缺的工具,或许你经常使用它,但却从没有系统的了解过,所以今天我们来聊一聊Node
-
浅谈JS前端模块化的几种规范
前言 有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端.客户端提供一个纯粹的js执行引擎,不需要 WebView 容器.iOS 端有成熟的JavaScriptCore.Android 可以使用 V8 引擎.这样一个引擎配套有一个 SDK,访问 Native 的基础能力和数据运算能力,可以看成是一个阉割版的 Hybrid SDK 额外增加了一些数据处理能力. 问题结束了吗?处理逻辑的时候还需要用到2个库:cheer
-
详解Js模块化的作用原理和方案
一.模块化概念 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起:块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信. 二.模块化作用 为什么要用模块化的JavaScript? 因为在实际的开发过程中,经常会遇到变量.函数.对象等名字的冲突,这样就容易造成冲突,还会造成全局变量被污染: 同时,程序复杂时需要写很多代码,而且还要引入很多类库,这样稍微不注意就容易造成文件依赖混乱: 为了解决上面的的问题,我们才开始使用模块化的js,所以说模块
-
javascript中导出与导入实现模块化管理教程
在理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块.但是,在ES6以前,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.如果要想在前端做模块化开发,必须依赖第三方框架来实现,如:requireJS与seaJS. javascript中的导出和导入实现模块化管理 requireJS是AMD规范的起源,seaJS是CMD规范的起源,由于两者功能高度重合,后来seaJS不再维护,从此淡出人们的视野,于
-
如何理解JavaScript模块化
目录 1. 浏览器支持 2. export 导出模块 3. import 导入模块 4. 创建模块对象 5. export import 中转站 6. 动态加载模块 1. 浏览器支持 使用JavaScript 模块依赖于 import 和 export,import 和 export 的浏览器支持程度是最新的浏览器版本都是支持的,但 IE 和旧版本的浏览器不支持,因此若想兼容 IE 和旧版本的浏览器基本就不能使用了. export 和 import 是成对出现,配合工作的 JS模块化是各种JS框
-
Node.js中的模块化，npm包管理器详解
目录 模块化的基本概念 什么是模块化 模块化拆分的好处 Node.js中的模块化 Node.js中模块的分类 加载模块 模块作用域 向外共享模块作用域中的成员 module对象 exports对象 npm与包 包 如何下载包 在项目中安装包的命令 解决下包速度慢的问题 为什么下包速度慢 解决方法一--淘宝NPM镜像服务器 解决方法二--切换npm的下包镜像源 解决方法三--nrm 总结 模块化的基本概念 什么是模块化 模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程.对于整个
-
JavaScript 模块化详解
目录 前言: 1.概念 2.模块化的好处 3.引入多个script标签后出现的问题 一.CommonJS 二.AMD 三.CMD 四.ES6模块化 前言: 1.概念 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起: 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信. 2.模块化的好处 避免命名冲突(减少命名空间污染): 更好的分离, 按需加载: 更高复用性: 更高可维护性. 3.引入多个script标签后出现的问题 请求过多(依赖的模
-
Node.js基础入门之使用方式及模块化详解
目录 什么是Node.js ? Node.js下载 Node.js和JavaScript的区别 Node.js安装与验证 Node.js使用方式 1. REPL模式 2. 文件模式 Node.js模块化 1. 什么是模块? 2. 模块分类 3. 创建自定义模块 4. 调用自定义模块 5. 模块测试 6. 主模块 7. 模块组成 在这个竞争日益激烈的今天,已经不是一门语言,一项技术走天下的时代了.正所谓艺多不压身,今天开始学习Node.js,学而时习之,不亦乐乎,希望可以借鉴经验,学以致用,如有不
-
COM组件中调用JavaScript函数详解及实例
COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional
-
在Node.js中使用Javascript Generators详解
Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio
-
JavaScript cookie详解及简单实例应用
JavaScript cookie详解 一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客户端脚本化. cookie数据可以自动地在Web浏览器好Web服务器之间传递. 在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活. 二.cookie的基本属性 每个cookie都有四个可
-
javascript 实例详解循环用法
闲来无聊,整理了几道有关循环的简单练习题,希望对初学JS的小伙伴有所帮助. 1.打印1-100之间所有7的倍数的个数及总和 var sum=0; var n=0; for(var i=1;i<=100;i++){ if(i%7==0){ sum+=i; ++n; } } console.log("个数为:"+n+",总和为:"+sum); 运行结果: 2.假设投资的年利率为5%,从1000增到5000需要多少年? var money=1000; var i=0
-
JavaScript 继承详解（四）
Classical Inheritance in JavaScript. Crockford是JavaScript开发社区最知名的权威,是JSON.JSLint.JSMin和ADSafe之父,是<JavaScript: The Good Parts>的作者. 现在是Yahoo的资深JavaScript架构师,参与YUI的设计开发. 这里有一篇文章详细介绍了Crockford的生平和著作. 当然Crockford也是我等小辈崇拜的对象. 调用方式 首先让我们看下使用Crockford式继承的调用
-
JavaScript 继承详解（五）
在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance. John Resig作为jQuery的创始人而声名在外.是<Pro JavaScript Techniques>的作者,而且Resig将会在今年秋天推出一本书<JavaScript Secrets>,非常期待. 调用方式 调用方式非常优雅: 注意:代码中的Class.extend._super都是自定义的对象,我们会在后面的代码分析中详
-
JavaScript 继承详解（六）
在本章中,我们将分析Prototypejs中关于JavaScript继承的实现. Prototypejs是最早的JavaScript类库,可以说是JavaScript类库的鼻祖. 我在几年前接触的第一个JavaScript类库就是这位,因此Prototypejs有着广泛的群众基础. 不过当年Prototypejs中的关于继承的实现相当的简单,源代码就寥寥几行,我们来看下. 早期Prototypejs中继承的实现 源码: var Class = { // Class.create仅仅返回另外一个函
-
IOS ObjectC与javascript交互详解及实现代码
IOS OC与js交互详解 JS注入 : 把JS代码有OC注入到网页 JS注入又叫做OC和JS的交互 OC和JS的交互需要一个桥梁(中介),这个桥梁就是UIWebView的代理方法 网页加载初始内容 #import "ViewController.h" @interface ViewController ()<UIWebViewDelegate> @property (weak, nonatomic) IBOutlet UIWebView *webView; @end -