模块化介绍
模块化：对功能点的封装和集成
分类：
AMD：
主要是前置依赖，在调用之前把所有的依赖加载完成
主要是是requirejs
在window上面添加了全局方法 define/require
CMD
主要是就近依赖，调用的时候可以加载
主要seajs
window主要定义了 define 方法，在函数内部传入了 exports/require 来实现依赖
Commanjs
同步加载，执行阶段完成，主要用于 node
在 global 上面定了 exports/requrie/module 对象
ES6
主要在编译阶段执行
全局有 export/import
实现一个简易的 requirejs
const loadScript = (url, ck) => {
const node = document.createElement(‘script‘);
node.type = ‘text/javascript‘;
node.charset = ‘utf-8‘;
node.async = true;
document.querySelector(‘head‘).appendChild(node)
node.src = url;
node.onload = () => {}
}
let moduleName = ‘entry‘
let depName = ‘entry‘
window.define = function (depends, func) {
new Module(depName, depends, func)
}
const modules = {}
class Module {
constructor(name, depends, func) {
this.func = func
this.name = name
this.depends = depends
this.deps = []
this.parent = moduleName
modules[depName] = this
if (depends.length < 1) {
const res = func()
const module = modules[moduleName]
module.resolve(this.name, res)
} else {
let item = depends.shift()
depName = item
moduleName = this.name
loadScript(item, () => {
})
}
}
resolve(name, module) {
this.deps.push(module)
if (this.depends.length > 0) {
let item = this.depends.shift()
depName = item
moduleName = this.name
loadScript(item, () => {
})
} else {
const res = this.func.apply(null, this.deps)
if (this.name === this.parent) return
const module = modules[this.parent]
module.resolve(this.name, res)
}
}
}
window.require = function (depends = [], func) {
const module = new Module(moduleName, depends, func)
}
require([‘./test.js‘, ‘./test4.js‘], (t1, t2) => {
console.log(‘end‘ + t1 + t2)
})
代码主要实现了各个js的依赖加载，并未加工处理路径/名称/缓存等
仅供学习使用。。！