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

JSI API之BrowserInfo、EventUtil讨论

    博客分类:
  • JSI
阅读更多
引用
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中移除。
分享到:
评论
16 楼 afcn0 2007-10-25  
hax 写道
legend 写道
我估计楼主是要在IE里模拟 capture,以楼主的 js 功力,模拟 capture 是轻而易举的!


模拟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,也没有在$函数里面修正过.
15 楼 jindw 2007-06-06  
我起初并没有想过提供这个API库,但是后来引导脚本写大了,发现很多东西完全可以抽出来共用。所以才有了js命名空间下的这些类库,这些类库依然只是提供非常基础的东西,太具体的功能,还是留给类库开发人员去用吧。
14 楼 jindw 2007-06-06  
hax 写道
个人建议EventUtil和StyleUtil这样的,不应该作为“正式API”(其实我不太了解你这个“正式”的含义,我把它理解成具有一个特殊package,默认导入的脚本)。因为可能别的类库有更好的解决方案,例如base2。


说它正式,是说,只要用jsi,那么这个东西你最好带上,不一定非要默认导入,但是最好可以导入。
现在占用的时js.*.*包。

不过,我上面提到的正式,只是强调风格的正式(也不知道自己用词是否确切,呵呵),能让大多数人接受,不求高度的灵活。
比如说,jQuery的风格就是灵活,不是正式。
13 楼 jindw 2007-06-06  
hax 写道
EventUtil的目标是什么?抹平事件模型的差异?还是仅提供一个语法表层的一致性?

如果是前者的话,意味着很多内容,例如在IE上如何模拟capture阶段。否则的话,你要么去掉capture参数,要么在IE里如果capture的话扔异常出来。


对,尽量抹平事件模型的差异,但是也考虑一下代价,比如 capture我就不想去模拟了。主要是担心运行时的代价。
capture扔异常的问题,也可以考虑一下。

后者当能也是。

此外,还提供一些诸如清理内存泄漏之类的行为。
12 楼 jindw 2007-06-06  
hax 写道

DOMLoad这个名字不好,可以仍使用DOMContentLoaded,或者用IE的DocumentReady或ContentReady(htc 事件名)。我个人比较喜欢ContentReady这个名字,而且这个名字的事件,其实可以作用于所有元素上,表示该元素已经闭合,可以安全的用dom方法来访问了。

名字的问题确实是众口难调啊。呵呵
DOMReady 如何?ContentReady这个,主要是,一提到Content 就让我想到里面的资源如图片等。
所以,我个人比较忌讳Content
11 楼 jindw 2007-06-06  
hax 写道
BrowserInfo建议如下:

浏览器检测
isIE      仅对windows下IE 4+起作用(从使用习惯来说,不宜包括Mac IE)
isWinIE   isIE的别名
isMacIE   Mac IE 5
isFF      isFirefox的别名,给Firefox以特别优待,呵呵

我看还是先isIE 吧,操作系统以后用其他函数去判断。
hax 写道

基于IE内核的浏览器检测
isMSIE    标准IE(实现疑问:技术上是否能排除利用IE内核的?)
isMaxthon
isTT      腾讯
isEZPLAY  盛大EZPLAY平台
...       很多其它的,慢慢加吧

确实,这个估计很难实现,先放一边

hax 写道

引擎检测
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或者以前的版本

hax 写道

应该去掉isQuirks,因为quirk是页面特征,而不仅仅是浏览器信息。例如,我的页面是标准模式,但内部包含的一个iframe可能是怪癖模式。

这个是有点不合理,打算去掉。

hax 写道

复制到navigator上,我认为挺好的,但是无声无息的加上去可能不好,可以规定必须import jsi.browser.BrowserInfo才会自动加上,然后默认是import的,不喜欢的人可以去掉默认import,呵呵。

因为Browser在启动脚本中用到,所以,没有办法避免。只要用了,一定自动加上了。技术上比较难处理

hax 写道

另,也可增加脚本引擎对象。

这个还是缓一步吧,要不能启动脚本文件大小又要往上蹦了。

10 楼 jindw 2007-06-06  
sp42 写道
引用
以后是否可以提供一个purgeElement函数,用于清理指定元素及其子元素的事件呢?

不能不要呀,实际CASE中正因为lib有这个函数,帮我解决了一个问题。


这个问题先排上。
9 楼 legend 2007-06-06  
这么复杂啊,看得我头都晕了呢。越来越佩服 hax 的功力了!
8 楼 hax 2007-06-06  
legend 写道
我估计楼主是要在IE里模拟 capture,以楼主的 js 功力,模拟 capture 是轻而易举的!


模拟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的事件顺序……
7 楼 legend 2007-06-06  
嗯,可以作为一个 JSI 的工具包,用户可以按需加载的。
6 楼 hax 2007-06-06  
个人建议EventUtil和StyleUtil这样的,不应该作为“正式API”(其实我不太了解你这个“正式”的含义,我把它理解成具有一个特殊package,默认导入的脚本)。因为可能别的类库有更好的解决方案,例如base2。
5 楼 legend 2007-06-06  
我估计楼主是要在IE里模拟 capture,以楼主的 js 功力,模拟 capture 是轻而易举的!
4 楼 hax 2007-06-06  
EventUtil的目标是什么?抹平事件模型的差异?还是仅提供一个语法表层的一致性?

如果是前者的话,意味着很多内容,例如在IE上如何模拟capture阶段。否则的话,你要么去掉capture参数,要么在IE里如果capture的话扔异常出来。
3 楼 hax 2007-06-06  
DOMLoad这个名字不好,可以仍使用DOMContentLoaded,或者用IE的DocumentReady或ContentReady(htc事件名)。我个人比较喜欢ContentReady这个名字,而且这个名字的事件,其实可以作用于所有元素上,表示该元素已经闭合,可以安全的用dom方法来访问了。
2 楼 hax 2007-06-06  
BrowserInfo建议如下:

浏览器检测
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
}
1 楼 sp42 2007-06-06  
引用
以后是否可以提供一个purgeElement函数,用于清理指定元素及其子元素的事件呢?

不能不要呀,实际CASE中正因为lib有这个函数,帮我解决了一个问题。
Global site tag (gtag.js) - Google Analytics