引用
JSI 自身提供一些常用API,数量极少,尽量以一种正式的风格提供,尽量回避争议。
有些是启动文件用到的,如任务队列支持,还有如装饰引擎直接用到的,如BrowserInfo、EventUtil、StyleUtil等。
对于启动文件中未直接用到的,如果风格的争议太大,都将剔除出去。
BrowserInfo对象:
/**
* BrowserInfo 对象,用于判断浏览器的相关信息,如浏览器类型、quirks模式、客户端语言(简体中文?英语..未实现)、操作系统(未实现)等等。
* @public
*/
var BrowserInfo = {
isIE : falseChecker,
isOpera : falseChecker,
isGecko : falseChecker,
isNetscape : falseChecker,
isMozilla : falseChecker,
isFirefox : falseChecker,
isKhtml : falseChecker,
isSafari : falseChecker,
isKonqueror : falseChecker,
isQuirks : function(){…}
};
其中最常用的要数 is<浏览器类别>(最小版本号码,最大版本号)。
此外,我还将BrowserInfo的函数拷贝到navigator对象上,这个有无必要呢?
//@Deprecated ???
for(var n in BrowserInfo){
window.navigator[n] = BrowserInfo[n];
}
不同之处:
现在在浏览器判断上面,一般是用常量表示,比如isIE之类的,JSI的BrowserInfo使用函数,以便提供更强大更灵活的功能。
EventUtil
EventType 对象的成员函数有:
addListener(el, type, fn, cap)
removeListener(el, type, fn, cap)
add<Eventtype>Listener(element, listener, captrue)
如addLoadListener,addMousedownListener,addMouseoutListener
remove<Eventtype>Listener(element, listener, captrue)
createEvent(type, canBubble, cancelable)
dispatchEvent(el, even)
其中:
<Eventtype>代表一种事件类型。
W3C事件类型有:
var events = ['click','mousedown','mouseup','mouseover','mousemove','mouseout','load','unload','abort','error','select','change','submit','reset','focus','blur','resize','scroll'].
concat(['DOMFocusIn','DOMFocusOut','DOMActivate']);
此外,还添加了一种事件类型:DOMLoad。就是mozilla的DOMContentLoaded事件,在Dom树构造完成但图片资源等可能未完成时触发。
对于这种事件类型, element, captrue参数都将忽略。暂时只有添加函数,没有删除函数(有删除的必要吗?)。
不同之处:
这个事件处理函数集与其他常见方式的却别有:
1. this支持。IE的attach方法添加的函数,运行时this指向window对象,JSI吧这点给纠正过来,与w3c的addEventListener行为一致。
2. 事件类型直接体现在函数名中,这样有利于书写上的错误及早发现。
3. 事件格式化,将事件的访问方式格式化为W3C的方式。
4. 自动清理,这也不算不同吧,现在大多数JS库都提供这个功能,就是在离开页面时清理全部注册事件。但是这对一些单页程序是无效的(OPOA,本人也比较讨厌这种模式,呵呵),以后是否可以提供一个purgeElement函数,用于清理指定元素及其子元素的事件呢?
程序下载
这个API也可以脱离JSI使用,只是,在编写的时候,因为有了JSI的保护,我使用了不少内部变量,为避免可能的冲突,做了如下处理。
var BrowserInfo = function(){
//#include(browser-info.js)....
return BrowserInfo;
}
var EventUtil = function(){
//#include(event-util.js)....
return EventUtil;
}
非常希望大家积极发表自己的看法,该修改就修改,如果争议太大,那么我将吧这些从系统API中移除。
分享到:
评论
模拟capture并非不可能,但是非常的麻烦。不是有js功力就一定可以搞定的。
比如,capture必须保持与bubble一个合理的触发顺序,你必须保证一个事件在dom树上完成所有注册的capture事件,然后再bubble。这点就非常头大了。例如我在div上capture一个click事件,我可以实际上先attach一个,但是我要保证在这个div上bubble的事件函数必须在capture的事件函数完成后再执行,这意味着普通的bubble事件函数也不能直接attach进去(否则无法保证执行顺序)。
进一步,如果我又在div的一个子元素span上capture一个click事件,那么同样的处理,但是我要保证先去触发外层div上的capture事件函数,然后是span上的capture事件函数,然后再是span上的bubble事件函数。问题是你还必须处理当click事件被bubble到div上后,不能把已经执行过的div上的capture事件再执行一遍!
好了,这只是基本的,再考虑一下cancel bubble,考虑一下stop propagation,考虑一下mousedown,click,mouseup,dblclick的事件顺序……
首先ie是不支持capture,不支持就是不支持,就好象scheme里面if不能用cond模拟一样,其次capture不是那么有用,可以统计下所有的js脚本,addEventListener第三参数为true估计不到1%,那1%当中应该还有一半是教学使用,并且Dustin Diaz曾在其blog称capture为"near evil",所以模拟这个基本没什么用,Prototype也从来不模拟,也不给true的observe在ie上面抛异常.所以最好还是简单点,不支持就是不支持,就好象ie的gEBI函数,总把name当id,也没有在$函数里面修正过.
说它正式,是说,只要用jsi,那么这个东西你最好带上,不一定非要默认导入,但是最好可以导入。
现在占用的时js.*.*包。
不过,我上面提到的正式,只是强调风格的正式(也不知道自己用词是否确切,呵呵),能让大多数人接受,不求高度的灵活。
比如说,jQuery的风格就是灵活,不是正式。
如果是前者的话,意味着很多内容,例如在IE上如何模拟capture阶段。否则的话,你要么去掉capture参数,要么在IE里如果capture的话扔异常出来。
对,尽量抹平事件模型的差异,但是也考虑一下代价,比如 capture我就不想去模拟了。主要是担心运行时的代价。
capture扔异常的问题,也可以考虑一下。
后者当能也是。
此外,还提供一些诸如清理内存泄漏之类的行为。
DOMLoad这个名字不好,可以仍使用DOMContentLoaded,或者用IE的DocumentReady或ContentReady(htc 事件名)。我个人比较喜欢ContentReady这个名字,而且这个名字的事件,其实可以作用于所有元素上,表示该元素已经闭合,可以安全的用dom方法来访问了。
名字的问题确实是众口难调啊。呵呵
DOMReady 如何?ContentReady这个,主要是,一提到Content 就让我想到里面的资源如图片等。
所以,我个人比较忌讳Content
浏览器检测
isIE 仅对windows下IE 4+起作用(从使用习惯来说,不宜包括Mac IE)
isWinIE isIE的别名
isMacIE Mac IE 5
isFF isFirefox的别名,给Firefox以特别优待,呵呵
我看还是先isIE 吧,操作系统以后用其他函数去判断。
基于IE内核的浏览器检测
isMSIE 标准IE(实现疑问:技术上是否能排除利用IE内核的?)
isMaxthon
isTT 腾讯
isEZPLAY 盛大EZPLAY平台
... 很多其它的,慢慢加吧
确实,这个估计很难实现,先放一边
引擎检测
isGecko 参数是Gecko的版本
isTrident 类似isIE,但是参数含义可能不一样
isTasman 类似isMacIE,但是参数含义可能不一样
isPresto 类似isOpera,但是参数含义可能不一样
isWebCore 类似isSafari,但是参数含义可能不一样
isKHTML 建议改为大写,既然IE全大写,那应该也给KHTML同等待遇吧,呵呵
这个参数,我还是觉得统一的方式比较好
现在都是
isXX(minVersion,maxVersion)//两个参数都是可选的
isIE()//只要是ie就行
isIE(5.5)//5.5及后续版本
isIE(null,6)//ie 6或者以前的版本
isIE(5,5.6)//ie 5 到IE5.5或者以前的版本
应该去掉isQuirks,因为quirk是页面特征,而不仅仅是浏览器信息。例如,我的页面是标准模式,但内部包含的一个iframe可能是怪癖模式。
这个是有点不合理,打算去掉。
复制到navigator上,我认为挺好的,但是无声无息的加上去可能不好,可以规定必须import jsi.browser.BrowserInfo才会自动加上,然后默认是import的,不喜欢的人可以去掉默认import,呵呵。
因为Browser在启动脚本中用到,所以,没有办法避免。只要用了,一定自动加上了。技术上比较难处理
另,也可增加脚本引擎对象。
这个还是缓一步吧,要不能启动脚本文件大小又要往上蹦了。
不能不要呀,实际CASE中正因为lib有这个函数,帮我解决了一个问题。
这个问题先排上。
模拟capture并非不可能,但是非常的麻烦。不是有js功力就一定可以搞定的。
比如,capture必须保持与bubble一个合理的触发顺序,你必须保证一个事件在dom树上完成所有注册的capture事件,然后再bubble。这点就非常头大了。例如我在div上capture一个click事件,我可以实际上先attach一个,但是我要保证在这个div上bubble的事件函数必须在capture的事件函数完成后再执行,这意味着普通的bubble事件函数也不能直接attach进去(否则无法保证执行顺序)。
进一步,如果我又在div的一个子元素span上capture一个click事件,那么同样的处理,但是我要保证先去触发外层div上的capture事件函数,然后是span上的capture事件函数,然后再是span上的bubble事件函数。问题是你还必须处理当click事件被bubble到div上后,不能把已经执行过的div上的capture事件再执行一遍!
好了,这只是基本的,再考虑一下cancel bubble,考虑一下stop propagation,考虑一下mousedown,click,mouseup,dblclick的事件顺序……
如果是前者的话,意味着很多内容,例如在IE上如何模拟capture阶段。否则的话,你要么去掉capture参数,要么在IE里如果capture的话扔异常出来。
浏览器检测
isIE 仅对windows下IE 4+起作用(从使用习惯来说,不宜包括Mac IE)
isWinIE isIE的别名
isMacIE Mac IE 5
isFF isFirefox的别名,给Firefox以特别优待,呵呵
基于IE内核的浏览器检测
isMSIE 标准IE(实现疑问:技术上是否能排除利用IE内核的?)
isMaxthon
isTT 腾讯
isEZPLAY 盛大EZPLAY平台
... 很多其它的,慢慢加吧
也可以不用函数,提供 name,version和vendor属性(参考navigator对象)
引擎检测
isGecko 参数是Gecko的版本
isTrident 类似isIE,但是参数含义可能不一样
isTasman 类似isMacIE,但是参数含义可能不一样
isPresto 类似isOpera,但是参数含义可能不一样
isWebCore 类似isSafari,但是参数含义可能不一样
isKHTML 建议改为大写,既然IE全大写,那应该也给KHTML同等待遇吧,呵呵
engine检测较少用,所以也可以去掉这些函数,而提供engineName, engineVersion属性。
应该去掉isQuirks,因为quirk是页面特征,而不仅仅是浏览器信息。例如,我的页面是标准模式,但内部包含的一个iframe可能是怪癖模式。
复制到navigator上,我认为挺好的,但是无声无息的加上去可能不好,可以规定必须import jsi.browser.BrowserInfo才会自动加上,然后默认是import的,不喜欢的人可以去掉默认import,呵呵。
另,也可增加脚本引擎对象。
形如:
ScriptEngine {
name // 字符串,返回如 SpiderMonkey
version //
vendor // 返回如 Mozilla
isJavaScriptCompatible(ver)
isJScriptCompatible(ver)
isSpiderMonkey(minVer, maxVer) // Firefox
isRhino // 多数Java编写的浏览器
isJScript // IE
isKJS // Konqueror, Safari
isJavaScriptCore // Safari
isLinear_b // Opera
// 以下是比较少见的引擎,没有也罢
isInScript // iCab浏览器
isDMDScript // 可替换JScript用于IE
isNJS // Python
}
不能不要呀,实际CASE中正因为lib有这个函数,帮我解决了一个问题。