我的模塊加載系統 v24


針對網友提出的直接加載jQuery等不按照AMD的規范編寫的JS文件的需求,緊急發布一個版本。其實思路很簡單,就是如果存在依賴時,讓依賴先加載,然后再用普通方式加載jQuery,然后從window中取得jQuery這個對象,放到用戶回調里。

    function loadJSCSS(url, parent, ret, shim) {
        //1. 特別處理ready標識符
        if (/^(mass|ready)$/.test(url)) {
            return url;
        }
        //2. 轉化為完整路徑
        if ($.config.alias[url]) {
            ret = $.config.alias[url];
            if (typeof ret === "object") {
                shim = ret;
                ret = ret.src;
            }
        } else {
           //略
        }
        var src = ret.replace(/[?#].*/, ""),
            ext;
        if (/\.(css|js)$/.test(src)) { // 處理"http://113.93.55.202/mass.draggable"的情況
            ext = RegExp.$1;
        }
        if (!ext) { //如果沒有后綴名,加上后綴名
            src += ".js";
            ext = "js";
        }
        //3. 開始加載JS或CSS
        if (ext === "js") {
            if (!modules[src]) { //如果之前沒有加載過
                modules[src] = {
                    id: src,
                    parent: parent,
                    exports: {}
                };
                if (shim) {//這里用於直接加載jQuery等庫
                    require(shim.deps || "", function() {
                        loadJS(src, function() {
                            modules[src].state = 2;
                            modules[src].exports = window[shim.exports];
                            checkDeps();
                        });
                    });
                } else {
                    loadJS(src);//這里是加載按照AMD規范編寫的模塊的
                }
            }
            return src;
        } else {
            loadCSS(src);//這里是加載CSS文件
        }
    }

用法:


            +function() {
                var path = "http://files.cnblogs.com/shuicaituya/"
                require.config({
                    alias: {
                        "jquery": {
                            src: path + "jquery.js",
                            deps: [],//沒有依賴可以不寫
                            exports: "jQuery" //要從全局作用域抽取的數據
                        }
                    }
                });
                require("jquery,ready", function($) {
                    alert($)
                    alert("回調調起成功");
                    alert($("body").length) //這里不用domReady了
                })
            }()

不過,需要留意的是,如果按照AMD的寫法,無論你是加載多少個庫或插件,始終在全局暴露兩個函數,define與require兩個函數。如果想偷懶,就慘了,需要它是幫你搞定了依賴的問題,但無法阻止命名沖突的隱患。

加載庫下載地址


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM