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的依賴加載，并未加工處理路徑/名稱/緩存等

　　僅供學習使用。。！

感覺可以就推薦下吧！！

感覺可以就推薦下吧！！