JSI API之BrowserInfo、EventUtil讨论

引用

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有这个函数，帮我解决了一个问题。