bingo轻量级javascript框架，使用</script>标签同步加载js模块，别具一格
查看( 206 ) /
评论( 14 )
特点：
（1）模块动态加载：利用</script>标签载入js文件，javascript:;" onClick="javascript:tagshow(event, 'javascript');" target="_self">javascript:;" onClick="javascript:tagshow(event, '%E4%AF%C0%C0%C6%F7');" target="_self">浏览器不会出现白屏、假死等现象，用户体验好。同时可以保证载入的Javascript代码先于当前代码执行，即执行上确保同步。
（2）命名空间管理，当然有不可或缺的命名冲突管理，比如"a.class"和"b.class"冲突了，那么在用户程序里可以使用"a.class"来引用位于a包下的"class"类，同理b.class亦然。
（3）采用类似java包的形式来管理Javascript模块，即一个包就是一个文件夹，文件名必须和类名相同。
（4）框架代码很小，压缩后（仅仅代码混淆）只有3KByte！
（5）支持IE6、IE7、Firefox、Netscape、Mozilla、Safari，不支持opera
使用bingo的js代码有两点要求：
（1）使用匿名函数包含整个用户js代码，这个也是编写高质量javascript代码的做法之一。
（2）js文件名必须和js类名相同
（3）调用$import载入依赖的js类文件，比如$import("a.class")，意味着载入bingo所在目录下的a目录下的class.js文件。
遵守以上三点，你将无须关注各js文件之间的依赖，把重点放在编写js代码上。更多信息请查看代码里的注释，或者我后来写的测试例子。
BTW，本人10几天前就有写js框架的打算，在winter发布他的xnamespace之后，我有了写bingo的灵感和实现原理。因此bingo的原理和xnamespace是一样的，但是里面的实现却完全的不一样了，而且bingo解决了xnamespace存在的问题（当时winter是写着玩的^_^）。同时在编码的过程中得到了winter和月影的帮助，在此一一表示感谢。
因时间不充分，没有做多少测试，有兴趣的朋友可以测试下。测试代码比较简陋，最近会抽时间写更详尽的测试例子，敬请关注，谢谢！
（1）模块动态加载：利用</script>标签载入js文件，javascript:;" onClick="javascript:tagshow(event, 'javascript');" target="_self">javascript:;" onClick="javascript:tagshow(event, '%E4%AF%C0%C0%C6%F7');" target="_self">浏览器不会出现白屏、假死等现象，用户体验好。同时可以保证载入的Javascript代码先于当前代码执行，即执行上确保同步。
（2）命名空间管理，当然有不可或缺的命名冲突管理，比如"a.class"和"b.class"冲突了，那么在用户程序里可以使用"a.class"来引用位于a包下的"class"类，同理b.class亦然。
（3）采用类似java包的形式来管理Javascript模块，即一个包就是一个文件夹，文件名必须和类名相同。
（4）框架代码很小，压缩后（仅仅代码混淆）只有3KByte！
（5）支持IE6、IE7、Firefox、Netscape、Mozilla、Safari，不支持opera
使用bingo的js代码有两点要求：
（1）使用匿名函数包含整个用户js代码，这个也是编写高质量javascript代码的做法之一。
（2）js文件名必须和js类名相同
（3）调用$import载入依赖的js类文件，比如$import("a.class")，意味着载入bingo所在目录下的a目录下的class.js文件。
遵守以上三点，你将无须关注各js文件之间的依赖，把重点放在编写js代码上。更多信息请查看代码里的注释，或者我后来写的测试例子。
BTW，本人10几天前就有写js框架的打算，在winter发布他的xnamespace之后，我有了写bingo的灵感和实现原理。因此bingo的原理和xnamespace是一样的，但是里面的实现却完全的不一样了，而且bingo解决了xnamespace存在的问题（当时winter是写着玩的^_^）。同时在编码的过程中得到了winter和月影的帮助，在此一一表示感谢。
因时间不充分，没有做多少测试，有兴趣的朋友可以测试下。测试代码比较简陋，最近会抽时间写更详尽的测试例子，敬请关注，谢谢！
CODE:
/*---------------------------------------------------------------------------*\
| JavaScript. Framework
| Author : brull
| Date: 2007-12-5
| Version: 0.1
| Copyright (c) 2007 builded by brull(QQ:275476100)
\*---------------------------------------------------------------------------*/
/**
* @fileoverview
* bingo，一个超轻量级的Javascript框架，主要用于js模块的载入和管理。特点：
* <pre>
* （1）采用类似java包的形式来管理Javascript模块；
* （2）模块动态加载：利用</script>标签载入js文件，同时可以保证载入的Javascript代码先于当前代码执行，即执行上确保同步。
* （3）命名空间管理；
* 使用bingo的js代码有两点要求：
* （1）使用匿名函数包含整个js代码
* （2）js文件名必须和js类名相同，否则在命名冲突时无法处理
* </pre>
*/
/**
* @param {boolean} debug true 意味着当前模式为调试模式，如果程序捕捉到错误，将会alert错误，反之，不会。默认为true
*/
(function(debug){
if(typeof window.bingo != "undefined") return;//防止多次加载
//全局变量
var libQueue = [];//待加载外部库队列
var namespaceList = [];//命名空间列表，结构{name : "namespace",state : "loading|loaded"}
var fileList = [];//待加载文件列表
var isAllLoaded = false;//是否所有文件都已加载完成
var error = [
new Error("<bingo: js file is not loaded>"),
new Error("<bingo: waiting for all js files to be loaded>"),
new Error("bingo: $import's caller is not a function"),
new Error("bingo: bingo can not work on your browser,please change another one"),
new Error("bingo: the giving namespace is empty")
];
var agent = window.navigator.userAgent.toLowerCase();
var script. = document.getElementsByTagName("SCRIPT");
var curFilePath = script[script.length-1].src;//bingo当前路径
var bingo = {
version : "0.1",
browser : {
version : (agent.match(/.+(?:pe6?|or|ox|it|ra|ie|rv)[\/: ]([\d.]+)/) || [])[1],
name : /(netscape|firefox|opera|msie|safari|konqueror)/.test(agent) ? RegExp.$1 :
(/webkit/.test(agent) ? "safari" : (/mozilla/.test(agent) ? "mozilla" : "unknown")),
mode : document.compatMode == "CSS1Compat" ? "standard" : "quirk"
}
};
window.bingo = bingo;
//window.$import = $import;在IE下有不可思议的bug，详见[url]http://bbs.51js.com/thread-74614-1-3.html[/url]
$import = _import;
window.include = include;
window.onerror = function(err){
var msg = err.toString();
if(/^<bingo:/.test(msg)) return true;
else if(/^bingo:/.test(msg) && debug){
alert(msg);
return true;
}
};
/**
* 按顺序执行队列里的函数,同时引入命名空间
*/
libQueue.run = function(){
var i = this.length;
while(i-- > 0){
if(isAllLoaded){
var spaces = namespaceList[i].name.split(/\./);
var len = spaces.length;
if(len > 1){
var bj = window[spaces[0]];
if(typeof bj == "undefined") bj = window[spaces[0]] = {};
for(var j = 1; j < len -1; j++){
obj[spaces[j]] = obj[spaces[j]] || {};
bj = obj[spaces[j]];
}
obj[spaces[j]] = window[spaces[j]];
}
}
(this[i])();
}
};
/**
* 将待执行函数推入队列
* @param {function} f 待执行函数
*/
libQueue.push = function(f){
var len = this.length;
for(var i = 0; i < len; i++){
if(this[i] == f) return false;
}
this[i] = f;
return true;
};
/**
* 检查命名空间是否冲突
* @param {string} namespace 命名空间
* @throws Error 如果命名空间有冲突
*/
function checkConflict(namespace){
var className = /\.?([^.]*)$/.test(namespace) ? RegExp.$1 : namespace;
var len = namespaceList.length;
for(var i = 0; i < len; i++){
if(new RegExp(className + "$").test(namespaceList[i].name))
throw new Error("<bingo: '" + namespace + "' conflicts with '" + namespaceList[i].name + "'>");
}
}
/**
* 检查命名空间是否已经存在
* @param {string} namespace 命名空间
* @return true - 命名空间已经存在，-false 命名空间不存在
*/
function isNamespaceExist(namespace){
var len = namespaceList.length;
for(var i = 0; i < len; i++){
if(namespaceList[i].name == namespace) return true;
}
return false;
}
/**
* 检查js文件是否已经加载
* @param {string} filePath js文件路径
* @return true - js文件已经加载，-false js文件没有加载
*/
function isFileHasLoaded(filePath){
var len = fileList.length;
for(var i = 0; i < len; i++){
if(fileList[i] == filePath) return true;
}
return false;
}
/**
* 根据命名空间计算js文件路径
* @param {string} namespace 命名空间
* @return 对应该命名空间的js文件路径
*/
function getFilePath(namespace){
var separator = /\//.test(curFilePath) ? "/" : "\\";//路径分隔符
var lastIndex = curFilePath.lastIndexOf(separator);
var curDir = lastIndex > 0 ? curFilePath.slice(0,lastIndex + 1) : curFilePath;//bingo当前所处目录
return (curDir + namespace.replace(/\./g,separator) + ".js");
}
/**
* 加载js文件
* @param {string} filePath js文件路径
* @return scriptElement
*/
function loadFile(filePath){
var scriptEle = document.createElement("script");
scriptEle.src = filePath;
document.getElementsByTagName("head")[0].appendChild(scriptEle);
return scriptEle;
}
/**
* 加载js文件完成后执行该函数
* @param {string} className 加载的文件
*/
function loaded(namespace){
var allLoaded = true;
var len = namespaceList.length;
for(var i = 0; i < len; i++){
var n = namespaceList[i];
if(n.name == namespace) n.state = "loaded";
else if(allLoaded && n.state == "loading") allLoaded = false;
}
if(allLoaded) isAllLoaded = true;
libQueue.run();
if(isAllLoaded) dispose();
}
/**
* 载入外部模块，同时bingo负责维护给定的命名空间，保证代码执行同步。
* bingo将根据指定命名空间，在bingo当前所在目录下查找并加载js文件。
* 比如:"util.text.Format"，bingo当前所在目录为js\，那么程序将加载的js文件为js\util\text\Format.js。
* <strong>注意：</strong>大小写敏感
* 如果待加载js文件不在bingo当前所在目录或其子目录之下，那么可以指定path，path就是完整的待加载js文件路径
* @param {string} namespace 命名空间，类似java的包的形式。形如："util.text.Format"
* @param {string} path 完整的待加载js文件路径
*/
function _import(namespace,path){
if(!namespace) throw error[4];
else if(isNamespaceExist(namespace)){
var len = namespaceList.length;
for(var i = 0; i < len; i++){
var n = namespaceList[i];
if(n.name == namespace){
if(n.state == "loaded") return;
else throw error[0];
}
}
if(!isAllLoaded) throw error[1];
else return;
}
else if(debug){
try{
checkConflict(namespace);
}catch(e){alert(e.message);}
}
var filePath = path ? path : getFilePath(namespace);
var f = arguments.callee.caller;
if(!f) throw error[3];//bingo can not work on your browser
if(typeof f == "function"){
namespaceList.push({name : namespace,state : "loading"});
if(!isFileHasLoaded(filePath)){
fileList.push(filePath);
libQueue.push(f);
var scriptEle = loadFile(filePath);
if(bingo.browser.name == "msie"){
scriptEle.onreadystatechange = function() {
if(/loaded|complete/.test(this.readyState)) loaded(namespace);
};
}
else scriptEle.onload = function(){loaded(namespace);};
}
}
else throw error[2];
throw error[0];
}
/**
* 载入外部模块，但bingo不维护命名空间，不保证代码执行同步。
* @param {string} path 完整的待加载js文件路径
*/
function include(path){
if(!path && isFileHasLoaded(path)) return;
loadFile(path);
}
function dispose(){
libQueue.run = null,libQueue.push = null;
libQueue = null;
namespaceList = null;
fileList = null;
checkConflict = null;
isNamespaceExist = null;
// isFileHasLoaded = null;
getFilePath = null;
// loadFile = null;
loaded = null;
_import = null;
window.$import = null;
if(bingo.browser.name == "msie") CollectGarbage();
}
})(true);
bingo.rar
(2007-12-12 04:24:39, Size: 6.15 KB, Downloads: 18)
相关阅读:
- 轻量级漂亮日历控件 JCalendar，兼容IE&FireFox (brull, 2007-4-19)
- 最新作品 JValidator 漂亮的通用表单验证程序 (brull, 2007-4-25)
- 如何使onunload()刷新时不被执行？ (一叶飘红, 2007-4-28)
- 显示汉字编码 (sees, 2007-5-03)
- Menu (咖啡刀, 2007-5-09)
- 函数式JavaScript编程指南 (忘记密码, 2007-5-18)
- Mozilla CaptureEvents (光辉死神, 2007-5-24)
- 正则表达式30分钟入门教程 (忘记密码, 2007-5-29)
- ASP上传类 (zmm, 2007-6-07)
- prototype1.6.0_rc1源码解读 (shiwei2006, 2007-10-27)
TAG: framework JavaScript javascript 框架 bingo
-
wangchaojay发布于2007-12-12 11:41:26
-
这个跟jsi的思路差不多,建议楼主跟老金共同开发出一个稳定的js管理器
-
brull
发布于2007-12-12 11:48:47
-
QUOTE:
原帖由 wangchaojay 于 2007-12-12 11:41 发表
这个跟jsi的思路差不多,建议楼主跟老金共同开发出一个稳定的js管理器
jsi大概看过，但是他那个是用xmlhttp同步请求的吧？
-
wangchaojay发布于2007-12-12 13:04:54
-
楼主要支持opera主要困难在什么地方?
-
brull
发布于2007-12-12 13:05:38
-
QUOTE:
原帖由 wangchaojay 于 2007-12-12 13:04 发表
楼主要支持opera主要困难在什么地方?
caller，这个是bingo的基础，没有别的解决或兼容办法了
-
satans17
发布于2007-12-12 15:52:58
-
支持一下～～
-
dron
发布于2007-12-12 16:24:39
-
似乎很不错的样子..
-
winter
发布于2007-12-12 19:24:58
-
op下面的问题暂时可以通过手动维护caller来处理
在每次调用之前加上$import.caller=arguments.callee;
caller已经是事实上的标准了，opera和ECMA也坚持不了多久，暂时可以先凑合一下。
看到你这个我也想整理整理了 原来以为ie没法解决onload的问题呢。
-
brull
发布于2007-12-12 19:56:13
-
QUOTE:
原帖由 winter 于 2007-12-12 19:24 发表
事实正如winter所说，如果要兼容op的话，只能在代码里加上$import.caller=arguments.callee;加上前判断一下浏览器类型就ok了
op下面的问题暂时可以通过手动维护caller来处理
在每次调用之前加上$import.caller=arguments.callee;
caller已经是事实上的标准了，opera和ECMA也坚持不了多久，暂时可以先凑合一下。
看到你这个我也想整 ...
-
suiqirui1987
发布于2007-12-12 20:12:02
-
唉，，做个标记。。
慢慢来看看吧。。
功底不够哦。。
脑子不好使。。 未明白哙回事。。
[ 本帖最后由 suiqirui1987 于 2007-12-12 21:24 编辑 ]
-
necrocoder发布于2007-12-13 11:13:16
-
原来是代码管理的
-
brull
发布于2007-12-13 13:42:39
-
QUOTE:
原帖由 necrocoder 于 2007-12-13 11:13 发表
框架的大部分功能就是代码管理阿，像jquery、prototype这些不能算是框架，只能说是函数库。
原来是代码管理的
如果自己手动去写</script>的话，有两个不好：
1、必须知道文件的加载顺序
2、要知道文件的依赖关系
而用框架之后，这两个问题程序员就不用再关心它，而把更多的精力用在别的地方
-
lastgame发布于2007-12-14 16:17:05
-
不错的说。
-
longlong890发布于2007-12-18 14:21:17
-
我也没明白是做什么的
我也没明白是做什么的
-
solidluck
发布于2007-12-18 15:19:00
-
up