随笔JS

一个无聊的下午 随心的写了点东西 。

扩展包管理，依赖等。

(function(window, undefined){

        var toString = {}.toString,

            slice = [].slice,
            
            // save the rely info for loader
            relyInfo = {},

            // wait for write 
            waitScript = [],

            //has writed didn't write again
            writedScript = {},

            // has required will never require
            required = {},

            //get head taget
            HEAD = document.getElementsByTagName('HEAD')[0],

            // get root url
            ROOT = location.href.replace(/\/.*?$/,"");

        /**
         * @name mPackage
         * @author Alfred Li
         * @param nameSpace the package with class name
         * @param pkg the pkg none with window
         * @param content the Class's content default has an main for it if none give it an empty Object;
         * @return mixed new Object 
         */
        function mPackage(nameSpace, pkg, content){
            var name = nameSpace.shift();
            if(nameSpace.length){
                pkg[name] = pkg[name] || {};
                return mPackage(nameSpace, pkg[name], content);
            }

            pkg[name] = content.main || {};
            delete content.main;
            
            return deepMix(pkg[name], content);
        };

        /**
         * @name log send the console msg
         * @author Alfred Li
         */
        function log(){
            console.log.apply(console,slice.call(arguments));
        };

        /**
         * @name importMap
         * @author Alfred Li
         * @param cls the class path 
         * @param rely the class rely on
         * @return null
         */
        function importMap(cls, rely){
            relyInfo[cls] = (relyInfo[cls] || []).concat(rely || []);
        };

        /**
         * @name inject define class
         * @author Alfred Li
         * @param cls the class path 
         * @param content the methods in class
         * @param rely the class rely on
         * @return null
         */
        function inject(cls, content, rely){
            require(rely, function(){
                return mPackage(cls.split('.'), window, content);
            });
            importMap(cls,rely);
        };

        /**
         * @name require get script
         * @author Alfred li
         * @param cls your package end with class name
         * @param callback the func for while all loaded 
         * @return null
         */
        function require(cls, callback){
            if(is(cls,"String")){
                cls = [cls];
            }
            if(cls){
                each(cls, function(item, i){
                    if(!required[item] && relyInfo[item]){
                        
                        if(relyInfo[item].length){
                            // get the rely on 
                            require(relyInfo[item]);                            
                        }

                        // must after the rely insert the item
                        waitScript.push(item);

                        // has required on time we will never require it again;
                        required[item] = true;

                        // but it does not be writted;
                        writedScript[item] = false;
                    }
                });
            }

            writeScripts(callback);
        };

        /**
         * @name writeScripts list the scripts and write it one by one make sure the script has loaded what it rely on 
         * @author Alfred Li
         * @param callback finish load  run it
         * @return null
         */
        function writeScripts(callback){
            var item; 
            if(waitScript.length){
                item = waitScript.shift();
                write(item, callback);
            }
            else{
                if(is(callback,"Function")){
                    callback();
                }
            }
        };

        /**
         * @name write append script to head
         * @author Alfred Li
         * @param item the item in require class path
         * @param callback our callback catch it and wait load finished
         * @return null
         */
        function write(item, callback){
            var script;

            if(!writedScript[item]){
                script = document.createElement("SCRIPT");
                script.src = ROOT+item.replace(/\./g,"/")+".js";
                script.onload = function(){
                    writedScript[item] = true;
                    writeScripts(callback);

                    console.log((new Date).toLocaleString() + ": " + script.src + " loaded!");
                };
                HEAD.appendChild(script);
                return ;
            }
            writeScripts(callback);
        };

        /**
         * @name is
         * @author Alfred Li
         * @param obj the object u wanna checked
         * @param Type the type u think of
         * @return boolean
         */
        function is(obj, Type){
            return type(obj) === Type;
        };

        /**
         * @name type get object type
         * @author Alfred Li
         * @param obj object u wanna get type
         * @return null
         */
        function type(obj){
            return /\[object (\w+)]/.exec(toString.call(obj))[1];
        };

        /**
         * @name each
         * @author Alfred Li
         * @param obj the obj or arr u wanna loop
         * @param callback the method be used with loop
         * @param args send an arg to callback
         * @return null
         */
        function each(obj, callback, args){
            for(var i in obj){
                callback.call(obj[i], obj[i], i, args);
            }
        };

        /**
         * @name mix
         * @author Alfred Li
         * @param dft default obj
         * @param set what u set
         * @return new mixed dft
         */
        function mix(dft, set){
            each(set, function(item, i){
                dft[i] = item;
            });
            return dft;
        };

        /**
         * @name deepMix set with deep
         * @author Alfred Li
         * @param dft default obj
         * @param set what u set
         * @return new mixed dft
         */
        function deepMix(dft, set){
            each(set, function(item, i){
                switch(type(item)){
                    case "Object":
                        dft[i] = deepMix({}, item);
                        break;
                    case "Array":
                        dft[i] = deepMix([], item);
                        break;
                    default:
                        dft[i] = item;
                        break;
                }
            });
            return dft;
        };

        /**
         * @name mameArray list an object or arr to new arr can set what key to get and ignore the key with some key
         * @author Alfred Li
         * @param obj the wait to list object
         * @param key the key wanna get
         * @param ignore ignore while the ignore key is not valid
         * @return new mixed dft
         */
        function makeArray(obj, key, ignore){
            var arr = [];
            if((ignore && obj.ignore) || !ignore){
                if(key){
                    each(obj, function(item, i){
                        arr.push(item[key]);
                    });
                }
                else{
                    each(obj, function(item, i){
                        arr.push(item);
                    });
                }
            }
            return arr;
        };

        inject("jl",{
            main: function(cls, callback){
                require(cls, callback);
            },
            mix: function(dft, set, deep){
                if(!dft || !set){
                    return null;
                }
                if(!set){
                    set = dft;
                    dft = this;
                }
                if(deep){
                    return deepMix(dft, set);
                }
                else{
                    return mix(dft, set);
                }
            },
            inject: function(cls, content, rely){
                inject(cls, content, rely);
            },
            include: function(){
                require(cls, callback);
            },
            relyInfo: function(cls, rely){
                if(!cls && !rely){
                    return relyInfo;
                }
                if(cls && rely){
                    return importMap(cls, rely);
                }
                return relyInfo[cls];
            },
            log: log

        });

})(window)

jl.relyInfo('jl.me', []);
jl("jl.me",function(){
    jl.me();
});

 

 

实现了基本的操作，BUG估计不少。后期会再增加。为MVC努力。

使用的时候

1. 定义

jl.inject("jl.ui.core",{

　　"main": function(){},

　　"animate": function(){}

},

["jl.event","jl.dom","jl.css"]);

2. 获取

jl.include(["jl.ui.core","jl.event.core"],function(){

// code here

});

jl("js.ui.core",function(){

//code here

});

一点一点写 一点一点来学 MVC的路依旧遥远。