JS是面向对象的语言 - 谈谈我的一个ajax项目

最近做了一个项目，要把一个DOS界面的程序移植到Web上。

这个DOS程序大概有几十个窗口/菜单，直接用HTML而不借助任何东西来定义窗口非常困难。因为需要支持Field shortcut key，每个Field都有Context Help等等。

这里再说明一点，之所以不用Modern的HTML风格是因为所有的操作人员重新训练使用新的界面对于用户成本太高。而且原来的DOS程序的快捷键模式对于操作人员来说是最快的方式

这个动态UI如果在Server上实现比如JFACE，实在太困难了，而且开销太大（我无法想象上千用户的UI动作同时在Server上）

所以我的第一直觉就是直接在客户端实现一个仿DOS窗口的动态窗口。以XML为核心, 用JS粘合CSS/XSL/HTML, 与Server只需要交互少量的数据(XMLHttpRequest)

虽然我之前对于JS的认识不够,但是做了这个项目后,发现JS的面向对象功能很强, 我用到了继承,重载,Static等大多数面向对象的功能.

首先谈谈UI的实现
1. 用JS class实现了某种html对象和多套CSS的关联, 并且可以从template html生成最后的html

   这里举一个DMenu类的例子(继承了DField, 看看JS的面向对象功能有多强! )

	DMenu.prototype = new DField();;
	DMenu.superclass = DField.prototype;
	DMenu.prototype.constructor = DMenu;
	DMenu.prototype.uiPresentations=new Array(
		createMenuUIPresentation("D_MENU", "D_MENU_SHORTCUT");,
		createMenuUIPresentation("D_INPUTLABEL", "D_INPUTLABEL_SHORTCUT");,
	);;
	function DMenu(htmlObj, parentDObj); {
	    if ( arguments.length > 0 );
        	this.init(htmlObj, parentDObj);;
	}
	DMenu.prototype.init=function(htmlObj, parentDObj); {
 		// 首先调用父类DField的init
		DMenu.superclass.init.call(this,htmlObj,parentDObj);;
		// 其次处理short cutkey 等等
		....
	}

   比如有这样一个Template:
   <SPAN class="D_INPUTLABELL">&Name</SPAN>
   JS发现这个span的class是在DMenu的uiPresentations数组里,所以就创建DMenu对象, 并且生成shortkey的binding等等...
   <SPAN class="D_INPUTLABEL"><span class="D_MENU_SHORTCUT">N</span>ame</SPAN>

   使用JS class的好处:
   - 写template的人非常简单,比如用&代替快捷键, 不用写任何JS代码, 因为这些代码都由DMenu类处理了
   - 修改颜色等只要修改CSS文件
   - 如果要增加一套CSS显示风格, 只要在uiPresentations中加一项
   - 如果要增加新的功能则用JS class继承方式实现

2. 用JS对象封装所有的INPUT/Menu等html对象, 形成树状结构. 这样的好处是封装了所有HTML细节, 表示层的JS代码和HTML细节无关


其次, 谈谈动态数据的问题
1. 每个需要动态数据的窗口对象都保留来自XMLHTTPRequest的XML Object, 用Client端XSLT转换成HTMLTemplate, 然后再生成JS Object. 为了减少流量,我还在客户端Cache了所有的XSLT对象
而且每次只需要render HTML一小部分(AJAX的最大好处不需要重新生成整个页面!)
DObject.rebind=function(xml, xslt, params) {
this.htmlObj.innerHTML = new XSLTProcessor().run(xml, xslt, params);
this.dispose(); //释放所有child, 释放Event Handler等
this.init();
}

2. 表格的动态排序,全部由Client端XSLT完成 (Click任何一个Table Head都可以排序, 把排序的Head参数传给XSLT Processor)
我也考虑过用JS来排序,但是既然因为数据全部都是XML, 用XSLT实现排序容易的多!

3. XML数据绑定到INputField: 我在每个InputField中都指定了BindingXPath, 利用IE/Mozilla的xpath Engine实现, 这些功能都封装在DInputField class中!
而BindingXpath则由xslt动态生成, 比如在xsl:for-each中:  <html:input><xsl:attribute name="bindingxpath"><xsl:value-of select="concat('root/flight[', position(), ']')"/></xsl:attribute></html:input>

4. 还有有一个很重要的功能就是在表格中增加新的一列. 我的做法是用JS增加新的xml Element, 然后重新用xslt生成HTML的这部分


总结:

我第一想要说的是: JS是面向对象的语言! JS比你想象的要强大得多

JS的调试比你想象的要容易得多, 我用的是Mozilla的JS Debug Plugin, 设断点等等一应俱全.

JS适合用来生成界面对象, 粘合CSS与HTML, 实现特定界面功能(比如shortcutkey的自动生成), 绑定xpath到html input field.  当我开发完第一个窗口后,后面的进展很快, 所有窗口只是简单的定义template和极少的JS 定义Button Action

业务逻辑都在Server上封装成XML, 所以客户端的JS只需要很少的XML操作, 大多数通过xpath自动绑定了

只要HTML一天不死, 传统的XML/XSLT还是有强大的生命力

是做了个这吗？
http://www.masswerk.at/jsuix/

不要太激动，先搞清楚。