几种模块化方式
CommonJS 基于js,适用于后端的模块化系统 基于文件系统的模块加载器
前端浏览器是无法操作文件系统的
适用于前端(浏览器环境)的模块化系统
AMD异步模块定义
CMD通用模块定义
UMD统一模块定义(对AMD和UMD的统一)
再包装了一层,支持AMD|CMD|CommonJS或window
ES6 Module
AMD 前置依赖
CMD 后置依赖/就近依赖
古老的加载方式 script标签 要考虑依赖顺序加载问题 如果多了 就要爆炸了
AMD
引入RequireJS文件
script标签的data-main属性 入口文件 加载完src后 会自动加载data-main对应文件
使用define定义模块
define(function(){})或define({key:value,key2:value2})
如入口模块定义setup方法函数
某些功能模块定义可能要用到的对象(键值对)
define([文件路径1,文件路径2],function(param1,param2){})
文件路径中的函数return一个返回值x(要显式地写出return)，param就代表这个返回值x
路径1return值对应param1，路径2return值对应param2
defind(function(require,export,module){})
这种方式require和export的用法基本等同于nodejs中的用法
就不在参数中写路径了 而是let xx = require(yy)
require引入 export导出
UMD
本质 带参数的IIFE立即执行函数
(function(a,b){console.log(‘我立即执行’)
//多种判断 支持amd cmd commonjs等
}(this,function(){
//具体代码，例如jQ的实现 dosomething
//function \$(){};return \$;
}))
1 | (function(){console.log('我立即执行')})() |
es6原生模块化
引入的script标签 加上type属性 type = ‘module’ 浏览器才支持 模块化
看到import和export中的{} 想到对象解构 就好理解很多了
export导出
无值导出 (例如给window弄了个全局对象或只是操作不产生值) 即不出现export
默认导出(default) ==一个模块只能导出一个默认值== export default 10;
default也是module对象的一个属性
这时default相当于变量名字
export default obj; ✅
export obj; ❌
基于名字的导出 exports var x = 1;exports var y = 2;
导出列表
导出多个值的方式
导出一个对象|使用命名导出|使用列表导出
import导入
- 无值导入 import ‘./tools.js’ 导入整个文件 而不是从整个文件中取某个值
- 默认导入 import a from ‘./tools.js’
- 基于名字的导入(使用对象解构) import {x,y} from ‘./tools.js’
import a,{x,y} from ‘./tools.js’ | import b,{* as tool} from ‘./tools.js’
此处的a和b就相当于default
当b模块中出现了和a模块中相同的变量名，c中想同时引入a和b的变量，变量名又冲突怎么办？
js语法是不允许量词都import同名变量的
方法: 借助as生成别名 | 借助*+as生成整个对象 然后对象.变量名使用
import a as fna from ‘./tools.js’ 以fna的名义使用tools.js中的a
==main.js==
import a from ‘./tools.js’
concols.log(a)
==tools.js==
export default 10;
注意事项
最好不要前后端都引用同一个js
export和module.export不要一起出现在同一文件
后端只能用module.export和require
前端能用export|import 也能用module.export require
如果有通用模块，最好前后端区分开两个文件，然后前端部分引前端的，后端部分引后端的