# js模块化
**JavaScript本身是不支持模块化的,只不过后来一些社区的大佬制定了一个模块规范,主要分为两种,一个是用于服务器的CommonJs,另一种用于客户端的AMD(比如requireJs)、CMD(比如seaJs)。后来ES6提供了通用的模块化方案**
## 1.AMD(requireJs)
在ES6出现之前,JS不像其他语言同样拥有“模块”这一概念,于是为了支持JS模块化,出现了各种各样的语言工具,如ReuqireJS。
```
<!--require.html-->
<!DOCTYPE html>
<html>
<head>
<title>requirejs学习</title>
</head>
<body>
<script src='./js/require.js'></script>
<script src="./js/config.js"></script>
<script>
require(['people'], function (people) {
people.say('Neol');
})
require(['cat'], function (people) {
people.say();
})
</script>
</body>
</html>
```
```
// ./js/config.js
require.config({
//默认情况下从这个文件开始拉去取资源
baseUrl:'./js/',
path: {
'jquery': './js/jquery.js'
}
});
```
```
// ./js/people.js
define(['jquery'], function() {
return {
say: function say(name){
console.log('I am ' + name, $);
}
}
});
```
```
// ./js/cat.js
define([], function() {
return {
say: function say(){
console.log('喵喵喵~');
}
}
});
```
特点:
* js、jquery可以直接使用
## 2.CMD(seaJs)
SeaJS 是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS,可以更好地组织 JavaScript 代码。
```
<!--seajs.html-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>seajs入门实例</title>
</head>
<body>
<div id="hello">132456798</div>
</body>
<script src="./js/sea.js"></script>
<script src="./js/config.js"></script>
<script>
// 加载入口文件
seajs.use(['./js/hello'], function(hello) {
$('#hello').click(function(){
hello()
})
});
</script>
</html>
```
```
// config.js
seajs.config({
base: './js/',
path: {
'jquery': './js/jquery.js'
}
});
```
```
// hello.js
define(function(require, exports, module) {
require('jquery');
module.exports = function () {
$('#hello').toggle('slow');
}
});
```
特点:
* js、jquery可以直接使用
## 3.es6模块化
```
// 1.js
export const a = 1;
export const b = 2;
// 2.js
import {a, b} from './1.js';
```
```
// 1.js
const a = 1;
const b = 2
export {a, b}
// 2.js
import {a, b} from './1.js';
// 3.js
import * as obj from './1.js';
```
```
// 1.js
const a = 1;
export default a;
// 2.js
import obj from './1.js';
```
```
// 1.js
import('./2.js').then(res =>{
console.log(res);
});
```
特点:
* 每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象;
* 每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
* 模块内部的变量或者函数可以通过export导出;
* 一个模块可以导入别的模块
* export能有多个,但是export default只能有一个。
缺点:需要支持es6,或者使用babel.js转换。
结论:用在有webpack可以配置babel的项目,不用在jquery项目。
## 4.浏览器中的 ES6 module 实现
```
<script type="module">
import { alert_msg } from './utils.js'
alert_msg('123456789')
</script>
// 使用 `nomodule` 属性向后兼容
<script nomodule src="fallback.js"></script>
```
```
// utils.js
export function alert_msg (text) {
alert(text)
}
```
特点:
* 浏览器加载 ES6 模块,也使用`<script>`标签,但是要加入`type="module"`属性;type="module" 等同于打开了`<script>`标签的`defer`属性
* 代码是在模块作用域之中运行,而不是在全局作用域运行。模块内部的顶层变量,外部不可见
* 模块脚本自动采用严格模式,不管有没有声明`use strict`
* 模块之中,可以使用`import`命令加载其他模块(`.js`后缀不可省略,需要提供绝对 URL 或相对 URL),也可以使用`export`命令输出对外接口
* 模块之中,顶层的`this`关键字返回`undefined`,而不是指向`window`。也就是说,在模块顶层使用`this`关键字,是无意义的
* 同一个模块如果加载多次,将只执行一次
* 利用顶层的`this`等于`undefined`这个语法点,可以侦测当前代码是否在 ES6 模块之中
缺点:兼容性不足
![image.png](./upload/201912/11/1576045913604281624.png)
结论:不要用
## 5.CommonJS
根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。所以,定义一个模块就是写一个新的js文件,但是最后要将文件的内容exports出来。接下来我们看一下如何定义模块和加载模块。
```
//定义一个module.js文件
var A = function() {
console.log('我是定义的模块');
}
//导出这个模块
//1.第一种返回方式 module.exports = A;
//2.第二种返回方式 module.exports.test = A
//3.第三种返回方式 exports.test = A;
exports.test = A;
//再写一个test.js文件,去调用刚才定义好的模块,这两个文件在同一个目录下
var module = require("./module"); //加载这个模块
//调用这个模块,不同的返回方式用不同的方式调用
//1.第一种调用方式 module();
//2.第二种调用方式 module.test();
//3.第三种调用方式 module.test();
module.test();
//接下来我们去执行这个文件,前提是你本地要安装node.js,不多说了,自己百度安装。
//首先打开cmd, cd到这两个文件所在的目录下,执行: node test.js
node test.js
//输出结果:我是定义的模块
```
特点:
* 模块化:模块化就是将不同功能的函数封装起来,并提供使用接口,他们彼此之间互不影响。
* 不会阻塞页面:RequireJS,会在相关的js加载后执行回调函数,这个过程是异步的,所以它不会阻塞页面。
* 按需加载:平时我们写html文件的时候,在底部可能会引用一堆js文件。在页面加载的时候,这些js也会全部加载。使用require.js就能避免此问题。举个例子,比如说我写了一个点击事件,放到了一个js文件里,并在html引用,在不使用require.js的情况下,页面加载它跟着加载,使用后则是什么时候触发点击事件,什么时候才会加载js。
缺点:
* 只能用在node服务端。
[.zip](./upload/201912/11/15760622351371730206.zip)
网友评论