Requirejs原理分析-70行实现简Requirejs

 

 

模块化介绍

模块化：对功能点的封装和集成

分类：

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的依赖加载，并未加工处理路径/名称/缓存等

　　仅供学习使用。。！