文章出處

1.無依賴情況

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一步步走入AMD</title>
    <script>
    
    var req = {};
    /*無依賴*/
    req.config = {
        "a":{
            deps:[],
            fn:function(){
                console.log("a");
            }
        },
        "b":{
            deps:[],
            fn:function(){
                console.log("b");
            }
        },
        "c":{
            deps:[],
            fn:function(){
                console.log("c");
            }
        },
    }
    var require = function(deps,fn){
        var config = req.config,
        deps_arr = [];

        // 1.找依賴，生成依賴數組
        for(var i=0,l = deps.length; i<l; i++){
            var deps_item = deps[i];
            deps_arr.push(config[deps_item].fn);
        }

        // 2.依賴數組，是入口函數的參數
        fn.apply(window,deps_arr);
    };

    require(["a","b"],function(a,b){
        a();
        b();
    });
    </script>
</head>
<body>
    
</body>
</html>

2.有依賴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不要溫柔地走入AMD</title>
    <script>    
    var req = {};
    /*有依賴*/
    req.config = {
        "a":{
            deps:["b"],
            fn:function(b){
                return function(){
                    console.log("a");
                    b();
                }
                    
            }
        },
        "b":{
            deps:["c"],
            fn:function(c){
                return function(){
                    console.log("b");
                    c();
                }
                    
            }
        },
        "c":{
            deps:[],
            fn:function(){
                var private_c = "cc"
                return function(){
                    console.log("c");
                    console.log(private_c);
                }
                
            }
        }
    }
    var require = function(deps,fn){
        var config = req.config,
        deps_arr = [];

        var excute_obj = {},
        deps_chain = [];

        for(var i in config){
            deps_chain.push(i);
        }
            
        // 包裝各個依賴函數
        deps_chain.forEach(function(configName){
            var item = config[configName],
            item_deps = item["deps"],
            item_fn = function(){
                return item["fn"].apply(window,excute_obj[configName]["deps"])();
            };
            excute_obj[configName] = {};
            excute_obj[configName]["fn"] = item_fn;

        });

        // 依賴函數的執行參數生成
        deps_chain.forEach(function(configName){
            var item = config[configName],
            item_deps = item["deps"],
            param_arr = [];


            item_deps.forEach(function(i){
                param_arr.push(excute_obj[i]["fn"]);
            });

            excute_obj[configName]["deps"] = param_arr;

            
        });

        console.log(excute_obj);

        

        deps.forEach(function(configName){
            deps_arr.push(excute_obj[configName]["fn"]);
        });

        fn.apply(window,deps_arr);
    };

    // bug：依賴設置錯誤
    require(["a"],function(a){
        a();
        
    });
    </script>
</head>
<body>
    
</body>
</html>

3.循環依賴判斷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不要溫柔地走入AMD</title>
    <script>    
    var req = {};
    /*有循環依賴*/
    req.config = {
        "a":{
            deps:["b","c"],
            fn:function(b,c){
                return function(){
                    console.log("a");
                    b();
                    c();
                }
                    
            }
        },
        "b":{
            deps:["c"],
            fn:function(c){
                return function(){
                    console.log("b");
                    c();
                }
                    
            }
        },
        "c":{
            deps:["a"],
            fn:function(){
                return function(){
                    console.log("c");
                }
                
            }
        }
    }
    var require = function(deps,fn){
        var config = req.config,
        deps_arr = [];

        var excute_obj = {},
        deps_chain = [];

        for(var i in config){
            deps_chain.push(i);
        }
        console.log(deps_chain);

        function arrayClone(arr){
            var _array = [];
            for(var i=0,l=arr.length; i<l; i++){
                _array.push(arr[i]);
            }
            
            return _array;
        }
        function loopDepJudge(currentKey,currentDeps, circleArr){
            var check_arr = [];
            check_arr.unshift(arrayClone(currentDeps) );

            var keyChain = [currentKey];
            // 開始循環
            (function(){
                var currentDeps = check_arr[0];
                // console.log(currentDeps);
                if(currentDeps.length > 0){
                    var nextKey = currentDeps.shift(),
                    nextDeps = circleArr[nextKey];
                    if(keyChain.indexOf(nextKey) > -1){        
                        keyChain = [false,nextKey,keyChain.pop()];
                        return;
                    }
                    else{
                        keyChain.push(nextKey);
                    }

                    if(nextDeps.length > 0){
                        check_arr.unshift(arrayClone(nextDeps));
                    }
                    else{
                        check_arr.shift();
                        keyChain = [currentKey];
                        if(check_arr.length == 0){
                            return;
                        }
                    }
                }
                else{
                    return;
                }
                arguments.callee();
            })();
            return keyChain;
        }

        (function(){
            // 循環依賴檢測
            var circle_deps = {};
            deps_chain.forEach(function(configName){
                circle_deps[configName] = config[configName]["deps"];
            });

            deps_chain.forEach(function(configName){
                var key = configName,
                deps = arrayClone(circle_deps[key]);

                var keyChain = loopDepJudge(key,deps,circle_deps);
                if(keyChain[0] == false){
                    throw new Error("有循環依賴。他們是"+keyChain[1]+"和" +keyChain[2]);
                }
                else{
                    console.log(keyChain)
                }
            });
            // var keyChain = loopDepJudge()
            
            // 包裝各個依賴函數
            deps_chain.forEach(function(configName){
                var item = config[configName],
                item_deps = item["deps"],
                item_fn = function(){
                    return item["fn"].apply(window,excute_obj[configName]["deps"])();
                };

                excute_obj[configName] = {};
                excute_obj[configName]["fn"] = item_fn;

            });

            // 依賴函數的執行參數生成
            deps_chain.forEach(function(configName){
                var item = config[configName],
                item_deps = item["deps"],
                param_arr = [];


                item_deps.forEach(function(i){
                    param_arr.push(excute_obj[i]["fn"]);
                });

                excute_obj[configName]["deps"] = param_arr;

                
            });

            console.log(excute_obj);

        })();

        deps.forEach(function(configName){
            deps_arr.push(excute_obj[configName]["fn"]);
        });

        fn.apply(window,deps_arr);
    };

    require(["a"],function(a){
        a();
        
    });
    </script>
</head>
<body>
    
</body>
</html>

4.define函數定義

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不要溫柔地走入AMD</title>
    <script>    
    var req = {};
    /*define函數定義*/
    req.requireConfig = {};
    
    var define = function(deps,fn){
        var protocal = location.protocal,
        host = location.host,
        port = location.port,
        pathName = location.pathname,
        href = location.href,

        paths = req.userConfig.paths,
        baseUrl = req.userConfig.baseUrl || "";

        function baseUrlParse(baseUrl){
            var str_length = baseUrl.length,
            newBaseUrl = "";
            if(baseUrl.lastIndexOf("/") == str_length -1){

            }
            else{
                newBaseUrl = baseUrl + "/";
            }
            return newBaseUrl;
        }

        // 不支持IE
        // 1.獲取當前js文件地址
        var scriptSrc = document.currentScript.src;

        for (var i in paths) {
            var path = paths[i],
            complete_path = "";

            // 2. 生成complete_path

            var backslash_pos = href.lastIndexOf("/"),
            slash_href = href.substring(0,backslash_pos+1),
            complete_path = slash_href + baseUrlParse(baseUrl) + path;


            // 3. 根據文件地址進行匹配，從而生成req.requireConfig
            if(scriptSrc == complete_path){
                req.requireConfig[i] = {
                    "deps":deps,
                    "fn":fn
                };
            }
        };
    };
    var require = function(deps,fn){
        function arrayClone(arr){
            var _array = [];
            for(var i=0,l=arr.length; i<l; i++){
                _array.push(arr[i]);
            }
            
            return _array;
        }
        function loopDepJudge(currentKey,currentDeps, circleArr){
            var check_arr = [];
            check_arr.unshift(arrayClone(currentDeps) );

            var keyChain = [currentKey];
            // 開始循環
            (function(){
                var currentDeps = check_arr[0];
                // console.log(currentDeps);
                if(currentDeps.length > 0){
                    var nextKey = currentDeps.shift(),
                    nextDeps = circleArr[nextKey];
                    if(keyChain.indexOf(nextKey) > -1){        
                        keyChain = [false,nextKey,keyChain.pop()];
                        return;
                    }
                    else{
                        keyChain.push(nextKey);
                    }

                    if(nextDeps.length > 0){
                        check_arr.unshift(arrayClone(nextDeps));
                    }
                    else{
                        check_arr.shift();
                        keyChain = [currentKey];
                        if(check_arr.length == 0){
                            return;
                        }
                    }
                }
                else{
                    return;
                }
                arguments.callee();
            })();
            return keyChain;
        }

        var config = req.requireConfig,
        deps_arr = [],
        excute_obj = {},
        deps_chain = [];

        for(var i in config){
            deps_chain.push(i);
        }
        
        // 循環依賴檢測
        (function(){
            var circle_deps = {};
            deps_chain.forEach(function(configName){
                circle_deps[configName] = config[configName]["deps"];
            });

            deps_chain.forEach(function(configName){
                var key = configName,
                deps = arrayClone(circle_deps[key]);

                var keyChain = loopDepJudge(key,deps,circle_deps);
                if(keyChain[0] == false){
                    throw new Error("有循環依賴。他們是"+keyChain[1]+"和" +keyChain[2]);
                }
                else{
                    console.log(keyChain)
                }
            });
        })();// 包裝各個依賴函數
        deps_chain.forEach(function(configName){
            var item = config[configName],
            item_deps = item["deps"],
            item_fn = function(){
                return item["fn"].apply(window,excute_obj[configName]["deps"])();
            };
            excute_obj[configName] = {};
            excute_obj[configName]["fn"] = item_fn;

        });

        // 依賴函數的參數數組生成
        deps_chain.forEach(function(configName){
            var item = config[configName],
            item_deps = item["deps"],
            param_arr = [];


            item_deps.forEach(function(i){
                param_arr.push(excute_obj[i]["fn"]);
            });

            excute_obj[configName]["deps"] = param_arr;

            
        });

        // 主函數的參數數組生成
        deps.forEach(function(configName){
            deps_arr.push(excute_obj[configName]["fn"]);
        });

        fn.apply(window,deps_arr);
    };

    req.userConfig = {
        "baseUrl":"",
        "paths":{
            "a":"a.js",
            "b":"b.js",
            "c":"c.js"
        }
    };
    </script>
    <script type="text/javascript" src="b.js"></script>
    <script type="text/javascript" src="a.js"></script>
    <script type="text/javascript" src="c.js"></script>
    <script>
    require(["a"],function(a){
        a();
    });
    </script>
</head>
<body>
    
</body>
</html>

5.js加載器生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不要溫柔地走入AMD</title>
    <script>
    /*
    1.暫不支持shim
    */    
    var req = {};
    
    req.requireConfig = {};
    req.userConfig= {};
    // 用來記錄js加載的數目
    req.jsLoadCount = 0;

    function baseUrlParse(baseUrl){
        var str_length = baseUrl.length,
        newBaseUrl = "";
        if(baseUrl.lastIndexOf("/") == str_length -1){

        }
        else{
            newBaseUrl = baseUrl + "/";
        }
        return newBaseUrl;
    }

    function getObjSize(obj){
        var size = 0;
        for(var i in obj){
            var item = obj[i];
            if(item !== null && typeof(item) !== "undefined"){
                size++;
            }
        }

        return size;
    }
    
    var define = function(deps,fn){
        var protocal = location.protocal,
        host = location.host,
        port = location.port,
        pathName = location.pathname,
        href = location.href,

        paths = req.userConfig.paths,
        baseUrl = req.userConfig.baseUrl || "";

        

        // 不支持IE
        // 1.獲取當前js文件地址
        var scriptSrc = document.currentScript.src;

        for (var i in paths) {
            var path = paths[i],
            complete_path = "";

            // 2. 生成complete_path
            var backslash_pos = href.lastIndexOf("/"),
            slash_href = href.substring(0,backslash_pos+1),
            complete_path = slash_href + baseUrlParse(baseUrl) + path;


            // 3. 根據文件地址進行匹配，從而生成req.requireConfig
            if(scriptSrc == complete_path){
                req.requireConfig[i] = {
                    "deps":deps,
                    "fn":fn
                };
            }
        };
    };
    var require = function(deps,fn){
        // 檢測js加載完畢與否
        var timer_loader = setTimeout(function(){
            if(req.jsLoadCount == 0){
                clearTimeout(timer_loader);
                mainRequire();
            }
            else{
                timer_loader();
            }
        },200);

function mainRequire(){
        function arrayClone(arr){
            var _array = [];
            for(var i=0,l=arr.length; i<l; i++){
                _array.push(arr[i]);
            }
            
            return _array;
        }
        function loopDepJudge(currentKey,currentDeps, circleArr){
            var check_arr = [];
            check_arr.unshift(arrayClone(currentDeps) );

            var keyChain = [currentKey];
            // 開始循環
            (function(){
                var currentDeps = check_arr[0];
                // console.log(currentDeps);
                if(currentDeps.length > 0){
                    var nextKey = currentDeps.shift(),
                    nextDeps = circleArr[nextKey];
                    if(keyChain.indexOf(nextKey) > -1){
                        keyChain = [false,nextKey,keyChain];
                        return;
                    }
                    else{
                        keyChain.push(nextKey);
                    }

                    if(nextDeps.length > 0){
                        check_arr.unshift(arrayClone(nextDeps));
                    }
                    else{
                        check_arr.shift();
                        keyChain = [currentKey];
                        if(check_arr.length == 0){
                            return;
                        }
                    }
                }
                else{
                    return;
                }
                arguments.callee();
            })();
            return keyChain;
        }
        var config = req.requireConfig,
        deps_arr = [],
        excute_obj = {},
        deps_chain = [];

        for(var i in config){
            deps_chain.push(i);
        }
        console.log(config);
        
        // 循環依賴檢測
        (function(){
            var circle_deps = {};
            deps_chain.forEach(function(configName){
                circle_deps[configName] = config[configName]["deps"];
            });
            console.log(circle_deps);

            deps_chain.forEach(function(configName){
                var key = configName,
                deps = arrayClone(circle_deps[key]);

                var keyChain = loopDepJudge(key,deps,circle_deps);
                if(keyChain[0] == false){
                    throw new Error("前方高能，有循環依賴。他們是"+keyChain[1]+"和" +keyChain[2]);
                }
                else{
                    console.log(keyChain)
                }
            });
        })();
        
        // 包裝各個依賴函數
        deps_chain.forEach(function(configName){
            var item = config[configName],
            item_deps = item["deps"],
            item_fn = function(){
                return item["fn"].apply(window,excute_obj[configName]["deps"])();
            };
            excute_obj[configName] = {};
            excute_obj[configName]["fn"] = item_fn;

        });

        // 依賴函數的參數數組生成
        deps_chain.forEach(function(configName){
            var item = config[configName],
            item_deps = item["deps"],
            param_arr = [];


            item_deps.forEach(function(i){
                param_arr.push(excute_obj[i]["fn"]);
            });

            excute_obj[configName]["deps"] = param_arr;

            
        });

        // 主函數的參數數組生成
        deps.forEach(function(configName){
            deps_arr.push(excute_obj[configName]["fn"]);
        });

        fn.apply(window,deps_arr);
}
    };
    require.config = function(config_obj){
        req.userConfig = config_obj;
        req.jsLoadCount = getObjSize(config_obj.paths);

        function generateScript(url,loadCount){
            var _script = document.createElement('script');
            _script.type = 'text/javascript';
            _script.charset = 'utf-8';
            _script.async = true;
            _script.src = url;
            _script.onload = function(){
                req.jsLoadCount--;
            };
            _script.onerror = function(e){
                throw new Error(e);
            };

            var fs = document.getElementsByTagName('script')[0];
              fs.parentNode.insertBefore(_script, fs);
        }
        var href = location.href,
        baseUrl = req.userConfig.baseUrl || "";
        paths =  req.userConfig.paths;
        for(var i in paths){
            var path = paths[i],
            backslash_pos = href.lastIndexOf("/"),
            slash_href = href.substring(0,backslash_pos+1),
            complete_path = slash_href + baseUrlParse(baseUrl) + path;
            generateScript(complete_path);
        }
            

    }

    require.config({
        "baseUrl":"",
        "paths":{
            "c":"c.js?v=3",
            "a":"a.js",
            "b":"b.js"
        }
    });

    require(["a","b"],function(a,b){
        a();
        b();
    });
        
    </script>
    
</head>
<body>
    
</body>
</html>

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄