元旦快乐,谈论下丐网二期工程:
(总的文章在此)
○ 以google 论坛为支撑( 内核) ,发布相关资源(e.g. 脚本,图片等)
可以通过向google 发邮件来发布资源,并且邮件可以带附件,但是附件的大小不能超过1M (当前)
论坛支持制作论坛的网页(相当于广告的介绍性质的),以及支持100MB 的上传文件空间
以论坛为核心,可以简单更换前台的博客,只要在新的博客中链接到论坛的资源(e.g. 脚本,图片等)
论坛是开发协作系统,也是发布系统。
○ 脚本框架
Util( 自我侦测,图片缓冲)、 VirtualBrowser、Widgets (基本和动态的控件)、Inform(信息通知,错误通知,日志记录,状态等待通知 )、 Prefs(配置构架, cookie会话管理) 、Resources( 基本和动态资源的引用映射,方便扩展和提高其他模块对资源的独立性,e.g.翻译串,引用的图片等 )。
[*] 所谓动态的代码,就是按需把代码的文本传输再用eval 方法来解释
○VirtualBrowser 框架:
Ok,这里是虚拟浏览器框架。当前的浏览器互不兼容(主要是 IE6、7 和标准W3C标准),使得本应是跨平台的 JavaScript变得实际上有很讨厌的兼容性问题(这种似是而非的跨平台性往往很迷惑人,比如Java 就是这么回事,我已经不止一次的鄙夷之了,正式发行的JRE 和xcb的冲突至今仍未解决 ...)。
如果要编写跨平台的浏览器,现在一般的做法是在计划支持的浏览器的 JavaScript绑定之上再加一层,此层对上接口统一,后端根据判别代码来映射到不同浏览器的JavaScript 绑定。这样做的好处,当然么,是兼容性会很好。坏处呢,实现可能会很复杂,在某些特别sh*t 的浏览器上,相当于要实现浏览器的部分功能了;代码中处处根据判别代码编写难于维护;W3C API 不被推广,而成为了一个底层,而"顶层"的 API有没有标准化,导致代码对顶层库依赖太大。此外,还可以推论出的坏处是无论支持W3C 标准良好还是支持糟糕的浏览器的运行脚本的效率一齐下降,另外由于代码复杂,其从网络上下载的时间也会相对很长。
VirtualBrowser框架不是这样一层,而是把计划支持的非 W3C良浏览器(只有 IE)JavaScript 绑定向W3C标准的浏览器( W3C没有涉及的以火狐为准)的JavaScript 绑定作简单映射(*部分 *地模拟标准接口)。由于与W3C 风格相对的只有IE,所有 VirtualBrowser框架就是针对IE 的(虽然没有直接显现)。与一般的跨浏览器框架相比,VirtualBrowser 框架的兼容性是不够的,需要小心使用。也就是说,如果移除了VirtualBrowser框架,火狐浏览器完全可以运行认真基于此框架代码( W3C标准的浏览器应该可以支持 99.99%),而当前的IE 基本不能跑代码。
一句话,有了VirtualBrowser ,忘了IE糟糕的 Debug环境和各种各样怪异的API ,专心的编写标准的W3C代码吧。另外,随着应用的需要, VirtualBrowser不断扩充的。
进入正题:我做的vb_init.Js 初号版,GPLv2 协议,是VirtualBrowser框架的一个实现。
○推荐开发工具:Geany ,如果没有安装GTK+,选择下载带 GTK运行时刻的版本。进入后选择编码UTF-8 ,以及换行Unix LF。
· 其他的工具,均为Firefox插件:
· 调试JavaScript的有用插件:
1. JavaScript Debugger
2. 火狐的错误控制台(清空了再观察)
·AJAX的有用插件
1. Live HTTP Headers
2. Modify Headers
· 透视网页的有用插件
1. DOM Inspector(默认安装 )
2. Web Developer
○ 代码风格
1、 if/for/while {
}
2、函数赋值: a = function () {
};
3、函数定义(正式,不是小函数)
function funcName ()
{//和第二点的区别在于花括号对齐方式和分号
}
4 、函数调用func (param)//注意参数括号和函数名之间的空格
5、数组访问a_array [i]// 数组和[]之间的空格(似乎不怎么好看,暂定)
6 、逗号隔开的元素:a, b, c 注意逗号后的空格。
7、类型aB ,而变量写法a_b。
8 、//注释相当于路标的而 /* ... */的注释一般是代码灵魂的有机体,常用于说明代码的运作原理以及可能的扩展。另外——
/*#############
* 段分隔注释,很醒目吧,从ASL中唯一的收获(目前 ...)
* ##############*/
○浏览器 JavaScript使用指南:
1. 函数的定义可以在函数调用之后( !!!而函数定义以后赋值就不支持这个了)。这就是说函数的定义是静态的,脚本被载入时先是解析 ->处理语法(包括定义) ->没有错误?-> 逐行执行。
2. 在 A函数里定义B 函数,A函数就是 B函数的一个闭包。注意B 函数中引用的A函数的变量(非参数)必须是只读的,否则这个变量将会取 A函数执行到底时的值。
3. 在数组循环遍历时对数组做添加删除操作要谨慎,避免引起无限循环和错误,解决的办法是遍历前首先要对数组做快照。
4. IE调试 tip:点击左下角的图标看看有没有错误,同时 IE不能正确的跟踪文件名,且显示n 行出错,则错误在n-1行。(如果不能判断是哪个文件有错的话,就在怀疑的文件的第 n-1行前敲几个回车,再看错误提示的行数变否)
5. 变量前不加var,就是全局变量。
○ 相关说明:
☆MYGVirtualBrowser (构造函数),使用时在浏览器的 window.onload中勾如new MYGVirtualBrowser () 。
☆先期依赖:定义supportInfo 的类。supportInfo恒有 support属性,赋值为常数(supportInfo.Good, supportInfo.Partial, supportInfo.Fatal, 支持越糟糕数值越大) ,对总体这一块的支持做出评价,动态属性支持对某一特性(属性名)的支持状况(字符串说明,一般为not support, not support natively )。
☆扩展MYGVirtualBrowser :
1. 把要扩展的特性组名,相应修正函数加入到chk_features_and_fix 数组
2. 根据特性组的重要程度加入critical_features 或者important_features数组或不加入
3. 在相应段中加入修正函数(返回supportInfo 对象),需要的帮助函数加入帮助函数段(服务于本构架内部函数的函数)
4. supportInfo对象应该在何处赋值?一般考虑尽量提前(作为本分支的模板),因为异常处理时可能改变其值。 supportInfo对象有点丑陋。
☆ MYGVirtualBrowser对浏览器的评价:
1. supportInfo属性—— >对象,该对象每个属性名为每个特性组名,值为相应的supportInfo 对象。
2. browser_eval对由critical_features 和important_features中记录每个特性组进行考察,由此对浏览器支持的状况做出评价 (Good, Not Good, Bad, Fatal),当评价为 Fatal时,则引发一个名为Fatal 的异常,指示当前浏览器即使通过Virtual Browser层也不能运行 W3C风格的代码。
☆ 函数patches_js1_4,部分升级 JavaScript1.4版到1.5 版,主要是增加了undefined和 Error对象。注意IE6 支持undefined和 Error构造器。
☆函数 chk_geo_fix,对W3C 的标准几何接口的模拟,其中outerWidth和 outerHeight无法模拟(在IE 上没有等同的API)
☆ 函数chk_event_fix,对 W3C的DOM2 的事件处理接口的模拟。在这里,遇到了麻烦:IE的 Html元素不支持prototype 扩展,且异常处理的信息不够。故采用对document的 getElement*系列函数(还有 createElement)链加操作来对每个元素添加addEventListener/removeEventListener 方法和传播本操作的代码。这样在使用getElement* 函数获得的元素已经被自动扩展了(添加了 .__access对象)。注意document 和document.documentElement以及 document.body作为常用的访问元素默认被扩展了(如果还有常用的元素要预先扩展,向相应数组添加吧)。
!!! 注意只有document支持 getElementById、getElementsByTagName 、和createElement,而其他元素仅支持 getElementsByTagName
☆函数chk_xmldom ,IE中不支持 document.implementation.createDocument(不能对document.Implementation 对象添加属性),建议用DOMParser 来解析XML(空)字符串来创建 XML对象。
·在对 XPath的封装时,注意IE 中context节点不能是文档本身。对于 XML文档,文档的根节点就是documentElement 。
☆helper_fail_func,引发虚拟浏览器运行时刻异常。 (ex.name = 'Runtimerr')
☆helper_removeEventListener/helper_addEventListener ,是用来给IE添加缺失的 removeEventListener/addEventListener。
·DOM2 的事件处理模型是"巡回演出",事件发生在某父元素的子元素上,则由父元素向下传播(捕获阶段)——> 子元素 ——>再回到父元素(冒泡阶段)。这个行程中允许经过的各个元素设置句柄"抢劫"事件来处理。
·IE不支持捕获阶段,而捕获阶段主要用于DnD(Drag and Drop) 操作,大体的流程是某元素处理"mousedown"事件:向其父元素(通常是 document)注册捕获阶段的 "mousemove"和"mouseup" 句柄。"mousemove"句柄负责移动子元素而 "mouseup"句柄负责结束移动:包括移除 "mousemove"和"mouseup" 句柄("消灭证据")。这个操作一定要在捕获阶段完成,若在冒泡阶段完成,事件会首先交由子元素处理(若有相应句柄),可能会产生干扰。helper_removeEventListener/helper_addEventListener 对这种情况进行了侦测,在注册处理事件为"mousemove" 或"mouseup"且为捕获阶段时,函数就添加句柄进入 .__access的capture* 句柄链,若事件为"mouseup",通过 setCapture/releaseCapture来确保事件全部导向父元素,同时设置 /移除"losecapture" 句柄(同"mouseup"句柄)。这种方式目前仅支持如下用例(此种情况下和支持 DOM2的浏览器等效):
----------------------------------------------------------------------
示例:DnD处理中元素的父元素 (本例中为document )中的"mousedown"句柄
----------------------------------------------------------------------
function drag(event) {
function moveHandler (e) {
/* 其他处理 */
e.stopPropagation ();// 阻止事件进一步传播,和IE下 setCapture重定向等效
}
function upHandler (e) {
/* 其他处理 */
e.stopPropagation ();
}
document.addEventListener("mouseup", upHandler, true);
document.addEventListener("mousemove", moveHandler, true);
/* 其他处理 */
}
☆ 测试日志
·(例子大部分改自:《JavaScript: The Definitive Guide, 5th Edition 》,作者David Flanagan )
·测试时请把<html> 后面的<script scr...改到脚本所在位置,注意地址分隔符是 '/'且 '..'表示网页所在目录的父目录。
·test.html主要是测试几何特性和事件处理
·test_xml.html 主要测试XML DOM相关
·2007/12/30 9
时3分
57秒,
终于搞定test_xml.Html中对
XML文件load
的异步行为(IE和火狐中的显示效果不同),感谢
JavaScript Debugger!
-------------
以下下载代码
vs_init.js虚拟浏览器层的主要实现
util_prototype.js和early_inform_obj.js是其他框架
其他是测试网页