编写自己的工具箱 （一）

仔细想了一下 决定先解决一下调用的问题， 这样无比要解决异步获取

 

!function(){
     
    var requireOption = window.requireOption || {
        path : '',
    };
    
    var windowIsLoad = false;
    
    var key = setInterval(function(){
    	if( document.body || windowIsLoad ){
    		windowIsLoad = true;
    		clearInterval(key);
    		this.onlad = null;
    		key = null;
    		requireFunctionRun();
    	}
    },500)
    
    /*window.onload = function(){
    	if( windowIsLoad ) return;
    	windowIsLoad = true;
    	requireFunctionRun();
    	this.onload = null;
    	clearInterval(key);
    }*/
    
    //保存所有的已经加载完成的require方法 等待页面网页加载完成执行
    var requireFunction = [];
    
    var requireFunctionRun = function(){
    	for(;requireFunction.length > 0;){
    		requireFunction.shift()();	
    	}
    }
     
    var defineName = '';
    
    var responseText = '';
     
    var require = function(name,callback){
    	
    	callback || (callback = function(){ return arguments.length == 1 ? arguments[0] : Array.prototype.slice.apply(arguments); });
    	
        var path = requireOption.path,
            argu = [],
            key = false,
            length = name.length;
         
        name.forEach(function(e,i,ar){
            if(e.indexOf(".js") < 0){
                ar[i] += ".js";
            }
        })
         
        if( name.length > 0 ){
             
            for( var i = 0 ; i < name.length ; i++ ){
                 
                if( typeof defineData.get(name[i]) === 'undefined' ){
                	if( !defineData.time[name[i]] )
                		defineData.time[name[i]] = {};
                	defineData.time[name[i]].start = new Date();
                    require.ajax({
                        type: 'get',
                        url : requireOption.path + name[i],
                        success: function(name,e){
                        	try{
                        		defineName = name.toString();
                        		responseText = e.currentTarget.responseText; 
	                           	if( responseText ){
	                           			
	                           		if( responseText.indexOf("/*lwz-define-js*/") > -1
	                           		|| responseText.indexOf('define') < 0 ){
										eval( "Lwz.define([],'文件不符合AMD格式，作为js独立运行中')");
										responseText = "/*" + defineName + "*/\n" + responseText;
										eval( responseText);
									}else{
										responseText = responseText.replace("define",'Lwz.define')
										responseText = "/*" + defineName + "*/\n" + responseText;
										eval( responseText );
									}
									responseText = null;
	                           	}
	                            else 
	                        		eval( "Lwz.define([],null)");    	
                        	}catch(e){
                        		console.log(name+"文件执行错误")
                        		console.log("错误原因:"+e.stack)
                        		responseText = null;
                        	}
                            
                        }.bind(this,name[i]),
                        error: function(name,e){
                        	defineName = name.toString() //.split('/').pop()
                        	eval( "Lwz.define([],'加载失败')");
                        	console.log(name+"文件加载失败")
                        	debugger;
                    		console.log("失败原因:"+e.currentTarget.responseText);
                        }.bind(this,name[i]),
                    });
                    defineData.setLoading(name[i]);
                }
                
                defineData.get(name[i],function(data,n){
                    argu[name.indexOf(n)] = data;
                    if( --length == 0 ){
                    	windowIsLoad ? callback.apply(window,argu) : 
                    	requireFunction.push(callback.bind(window,argu))
                    }
                })
                 
            }
             
        } else{
            callback.apply(this,argu)
        } ;
 
    }
    var getXML = function(){
        if( XMLHttpRequest )
            return new XMLHttpRequest();
        else
            return new ActiveXObject("Microsoft.XMLHTTP");
    }
    require.XMLHttp = getXML();
    require.option = requireOption;
    require.ajax = function(option = {}){
        var url = option.url;
        if( !url ) return;
        var mothed = option.type || "get";
        var data = "";
        for( var i in option.data )
            data += i + "=" + option.data[i] + "&";
        var success = option.success;
        var error = option.error;
        var complete = option.complete;
        var ajax = getXML();
 
        //判断是否是post请求
        if( mothed === "post" ){
            //如果是则添加头部文件
            ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        }else{
            url += "?" + data; 
            data = undefined;
        }
         
        //建立请求连接
        ajax.open(mothed,url);
         
        //发送请求
        ajax.send(data);
         
        //请求回调
        ajax.onreadystatechange = function(e){
            if( this.readyState == 4 ){
                if( this.readyState == 4 && this.status == 200 )
                    success.apply(this,arguments);
                else if( this.readyState == 4 && this.status.toString()[0] != "2" )
                    error.apply(this,arguments);
                complete && complete.apply(this,arguments);
            }
        }
         
    }
     
     
    var define = function(){
        var argLen = arguments.length,
            name = arguments[0],
            depend = arguments[1],
            object1 = arguments[2],
            notArgu = [],
            argu = [];
        try{
             
            //判断是否给模块命名
            if( typeof name !== 'string' ){
                object1 = depend;
                depend = name;
                name = defineName;
            }
         
            //如果存在依赖模块的话
            if( typeof depend === 'object'
             && typeof depend.length == 'number'
             && depend.constructor === Array) {
                 
                depend.forEach(function(e,i,ar){
                    if(e.indexOf(".js") < 0){
                        ar[i] += ".js";
                    }
                })
                 
                //先判断依赖模块是否已经被加载了
                for( var i = 0; i < depend.length ; i ++ ){
                    if(typeof defineData.get(depend[i]) === 'undefined'
                    	|| defineData.get(depend[i]) === null
                    ){
                        //如果存在没有被加载的模块
                        notArgu.push(depend[i]);
                    }else{
                        argu[i] || ( argu[i] = defineData.get(depend[i]) );
                    }
                }
                 
                if( notArgu.length > 0 ){
                    //进入加载模块
                    //并在加载成功后重新运行函数
                    require(notArgu,define.bind(this,name,depend||[],object1));
                    return ;
                }
            }else {
                object1 = depend;
                depend = undefined;
            }
 
        }catch(e){
            console.error(name+"文件加载错误；")
            console.error(e);
        }
         
        //不存在未被加载的依赖模块
        if( typeof object1 === 'function' ){
            defineData.set(name,object1.apply(this,argu));             
        }else{
            defineData.set(name,object1);
        }
         
    }
     
    var defineData = {
    	time : {},
        data : {},
        get : function( name , callback ){
            name.indexOf(".js") < 0 && ( name+='.js' );
            var data = this.data[name];
            if( !callback ) return data;
            if( data ){
                callback.call(this,data,name);
                return data;               
            }else{
                this.waitLoad[name] || (this.waitLoad[name] = []);
                this.waitLoad[name].push(callback);
            }
        },
        set : function( name , data ){
            this.data[name] = data;
            console.log(name+'注册成功。')
       		this.time[name].end = new Date();
       		this.time[name].time = this.time[name].start - this.time[name].end;
            var waitFunction = this.waitLoad[name];
            for( ;; ){
                if( waitFunction.length < 1 ) break;
                waitFunction.shift()(data,name);
            }
        },
        setLoading : function(name){
        	this.data[name] = null;
        },
        waitLoad : {}
    };
     
    window.Lwz = {
        data : defineData,
        require : require,
        define : define
    };
 
}()

　　

 

先自定义一个异步获取的结构， 这样确定了以后我的工具箱加载的方式

采用传统的  require加载 define注册的方式  有利于第三方直接拿过去使用。。 考虑到以后可能会被直接才分使用

我不太会说话  所以我的博客一般都是直接上代码的， 注释什么的还是有的， 认真看的话 应该还是没什么问题的， 代码秉承着怎么简单怎么写的原则 ，可读性 应该还行吧------大佬别打我。

 

转载于:https://www.cnblogs.com/liao1992/articles/9337143.html