JavaScript DO 框架 学习

昨天在github找东西的时候，发现上了克军的DO框架，感觉不错，今天看了一上午，作者的思路很清晰，学了不少到东西。

同时发现DO的还有一个分支，应该算是DO的第二个版本吧，不过是压缩过后的，没有压缩的暂时没有找到，等找到了在学习

 

地址：https://github.com/kejun/Do

 

以下算是把源码给汉化。版权归作者克军，呵呵呵。

 

不废话没直接上代码：

 

/**
 * Do 是一个轻量级javascript开发框架。它的核心库可以自由更换。
 * 设计原则：
 * 1. 不提供任何业务相关功能
 * 2. 公共功能功能都出自核心库，核心库可灵活添加或更换。
 * 3. 内置依赖关系管理系统
 * @author Kejun ([e-mail])
 * @version 0.1(draft)
 */

(function(){

var _Doc = document, 
_loaded = {},
_isArray = function (e) { return e.constructor === Array; },

_log = function (e) {
    if (window.console && window.console.log){
        window.console.log(e);
    }
},


//内部配置文件
_config = {
    //核心库，可以任意换
    core_lib: ['http://code.jquery.com/jquery-1.4.2.js'],
    
    //模块依赖
    mods: {}
},

//加载队列
_loading_queue = {},

// load external js or css.  
// 加载外部的js  css ， cb = callback
_load = function (url, type, charset, cb) {
    // url为空 返回
	if (!url) {
        return;
    }
//	加载 url
    if (_loaded[url]) {
        _loading_queue[url] = false;//已加载
        if (cb) {
            cb(url);//加载 url
        }
        return;
    }
    
    if (_loading_queue[url]) {
        setTimeout(function(){
            _load(url, type, charset, cb);
        }, 10);
        return;
    }
    _loading_queue[url] = true;
    
    // n = node
    var n, t = type || url.toLowerCase().substring(url.lastIndexOf('.') + 1);

    if (t === 'js') {
        n = _Doc.createElement('script');
        n.setAttribute('type', 'text/javascript');
        n.setAttribute('src', url);
    } else if (t === 'css') {
        n = _Doc.createElement('link');
        n.setAttribute('type', 'text/css');
        n.setAttribute('rel', 'stylesheet');
        n.setAttribute('href', url);
        _loaded[url] = true;
    }
    
    if (charset) {
        n.charset = charset;
    }
    
    if (t === 'css') {
      _Doc.getElementsByTagName('head')[0].appendChild(n);
      if (cb) {
        cb(url);
      }
      return;
    }
    
    n.onload = n.onreadystatechange = function () {
        if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
            //loaded success.
            _loaded[this.getAttribute('src')] = true;
            
            if (cb) {
                cb(this.getAttribute('src'));
            }
            
            n.onload = n.onreadystatechange = null;
        }
    };
    
    _Doc.getElementsByTagName('head')[0].appendChild(n);
},

//计算 参数e是个队列
_calculate = function(e) {
    if (!e || !_isArray(e) ) {
        return;
    }
    
    var i = 0, item, result = [], 
    mods = _config.mods,
    _depeList = [],//需要加载的List
    _hasAdded = {},//已经加载的List
    getDepeList = function (e) {

        var i = 0, m, reqs;
        
        // break loop require.如果已经加载
        if (_hasAdded[e]) {
            return _depeList;
        }   
        _hasAdded[e] = true;
        if (mods[e].requires) {
            reqs = mods[e].requires;
            for (; m = reqs[i++];) {
              // is a module.
              if (mods[m]) {
                getDepeList(m);
                _depeList.push(m);
               } else {
                // is a file.
                _depeList.push(m);
               }
            }
            return _depeList;
        }
        return _depeList;
    };
    
    for (; item = e[i++]; ) {
        if (mods[item] && mods[item].requires && mods[item].requires[0]) {
            _depeList = [];
            _hasAdded = {};
            result = result.concat(getDepeList(item));
        }
        result.push(item);
    }
    
    return result;
},

// a asynchronous queue
_queue = function (e) {
    if (!e || !_isArray(e) ) {
        return;
    }
    
    this.queue = e;
    //timeout file collection.
    this._skip = {};
};

_queue.prototype = {
//	超时
    _Timeout: 6000,
    
//  间隔
    _interval: 10, 
    
    start: function () {
        var o = this;
        this.current = this.next(); 
        
        if (!this.current) {
            this.end = true;
            return;
        }
        
//        延迟 _Timeout后执行  ，打印  o.current  加载超时
        this._outTimer = setTimeout(function () {
          _log('[DoubanJS] "' + o.current + '" timeout.');
          o._skip[o.current] = true; 
          o.start(); 
        }, this._Timeout);
        
        this.run();
    },
    
    run: function () {
        
        var o = this, mod;
        
        if (typeof this.current === 'function') {
            this.clearTimer();
            this.current();//?
            this.start();//加载下一个
        } else if (typeof this.current === 'string') {
            if (_config.mods[this.current]) {
              // todo:load a module.
              mod = _config.mods[this.current];
              _load(mod.path, mod.type, mod.charset, function (e) {
                 // if timeout file fire callback don't disturb queue.
            	 // 如果还没有超时，继续
                 if (!o._skip[e]) {
                   o.clearTimer();
                   o.start();
                 }
              });
            } else if (/\.js|\.css/i.test(this.current)) {
              // load a file.
              _load(this.current, '', '', function (e) {
                 // if timeout file fire callback don't disturb queue.
                 if (!o._skip[e]) {
                   o.clearTimer();
                   o.start();
                 }
              }); 
            } else {
              // no found module. skip to next
              this.clearTimer();
              this.start();
           }
        }
    },
    
    clearTimer: function () {
    	//取消指定的setTimeout函数将要执行的代码 
        clearTimeout(this._outTimer);
    },
    
    next: function () { return this.queue.shift(); } // 删除 queue 的第一个元素 ，并返回第一个元素
};


// preload core lib.
_load(_config.core_lib[0], 'js');


this.Do = function(){
    var args = Array.prototype.slice.call(arguments, 0), 
    thread = new _queue(_calculate(_config.core_lib.concat(args)));
    thread.start();
};

this.Do.add = function(sName, oConfig) {
    if (!sName || !oConfig || !oConfig.path) {
        return;
    }
    
    _config.mods[sName] = oConfig;
};

})();