`
kongxiantao
  • 浏览: 112908 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript DO 框架 学习

阅读更多

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

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

 

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

 

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

 

不废话没直接上代码:

 

/**
 * Do 是一个轻量级javascript开发框架。它的核心库可以自由更换。
 * 设计原则:
 * 1. 不提供任何业务相关功能
 * 2. 公共功能功能都出自核心库,核心库可灵活添加或更换。
 * 3. 内置依赖关系管理系统
 * @author Kejun (listenpro@gmail.com)
 * @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;
};

})();
 

 

 

 

分享到:
评论

相关推荐

    jQuery,JavaScript框架

    jQuery课件,jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”。

    JavaScript学习指南

    除此之外,学习JavaScript还包括熟悉常用的库和框架,如React、Vue、Angular等,它们提供了组件化开发模式,简化了前端应用的构建。了解AJAX和Fetch API用于异步数据请求,以及Promise和async/await用于更优雅的异步...

    JavaScript的框架jquery文件

    jquery文件,属于JavaScript的一种框架。jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More...

    21个强大的javascript框架.doc

    ### 21个强大的JavaScript框架概览 #### Dojo:面向对象的强大框架 Dojo是一个高度模块化的JavaScript框架,以其强大的功能和灵活性著称。它由三个主要部分组成:Core、Dijit和DojoX。Core部分提供了对AJAX、事件...

    javascript框架.zip

    Vue.js(简称Vue)是一个轻量级的前端框架,由尤雨溪开发,它以数据绑定和组件化为核心,易于学习且功能强大。Vue的特点在于它的响应式系统,能够自动追踪依赖关系,当数据发生变化时,视图会自动更新。此外,Vue还...

    JavaScript学习指南 源代码

    JavaScript的基础语法包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔值、null、undefined、对象、数组、符号)、运算符(算术、比较、逻辑、赋值、三元运算符)、流程控制(条件语句if...else、...

    什么是javascript,学习javascript

    学习JavaScript,首先应该理解这些基本概念,然后逐步深入到更高级的主题,如异步编程(回调函数、Promise、async/await)、闭包、模块系统、正则表达式、错误处理、类型转换等。此外,JavaScript还支持面向对象编程...

    JavaScript学习资料全面整理

    12. **框架与库**:React、Vue、Angular是流行的前端框架,jQuery是一个广泛使用的JavaScript库,它们简化了DOM操作,提供了组件化开发和数据绑定等功能。 13. **JavaScript调试**:开发者工具(如Chrome DevTools...

    前端javascript框架源码适合前端开发者学习

    学习jQuery源码可以帮助前端开发者理解其底层实现,提升JavaScript技能,同时也为学习其他框架如React、Vue等打下坚实基础。通过对jQuery.min.js的分析,可以深入了解其代码优化技巧,如函数缓存、事件委托等,这...

    javascript框架jQuery下载

    这个标题“javascript框架jQuery下载”表明我们将讨论jQuery的基本概念、重要性以及如何获取和使用它。 **一、jQuery简介** jQuery是由John Resig开发的,它的核心理念是“Write Less, Do More”。jQuery通过抽象...

    javascript学习ppt文档

    JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的...通过学习这个教程,你将能够理解和编写基本的JavaScript代码,并逐步进阶到更高级的主题,如面向对象编程、Promise和异步编程、React等前端框架的应用。

    do 框架(3.5k)

    Do是豆瓣网kejun开发的一个很轻量的Javascript开发框架。目前do.min.js。它的核心功能是对模块进行组织和加载。加载采取并行异步队列的策略,并且可以控制执行时机。Do可以任意置换核心类库,默认是jQuery。 项目...

    jQuery 1.6版本至1.9版本 一个兼容多浏览器的javascript框架

    jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave ...

    JavaScript学习

    JavaScript学习 JavaScript是一种轻量级、解释型的编程语言,主要应用于网页和网络应用开发,是Web开发中的重要组成部分。它的语法受到了C++和Java的影响,但设计时更注重便捷性和可读性。JavaScript主要用于客户端...

    jQuery API 一个兼容多浏览器的javascript框架

    jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave ...

    javascript_js学习教程

    通过这个“javascript_js学习教程”,初学者可以从基础语法开始,逐步掌握JavaScript在前端和后端的应用,以及与现代Web开发相关的技术,如DOM操作、AJAX、ES6新特性,甚至是框架和服务器端编程。中兴通讯的培训材料...

    javascript学习文档

    通过深入学习这些知识点,你将能够熟练运用JavaScript进行网页开发、前端应用构建、后端Node.js开发以及各种JavaScript框架的使用。这份文档将是你进阶JavaScript开发的重要参考资料。不断实践,理论结合实际,你...

    JavaScript学习笔记

    本学习笔记旨在帮助初学者快速掌握JavaScript的核心概念和技术,实现从入门到精通的过渡。 1. **基础语法** - 变量声明:JavaScript支持var、let和const关键字声明变量,理解它们的作用域和提升特性至关重要。 - ...

    jQuery、Mootools、Prototype三大JavaScript框架中文手册

    JavaScript是Web开发中不可或缺的一部分,它为网页添加了动态交互性。然而,原生JavaScript的API庞大且不统一,为了简化开发,社区创造...学习和理解这些框架,可以提升开发效率,让JavaScript编程变得更加高效和愉快。

Global site tag (gtag.js) - Google Analytics