首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

Pure JS (5.3):pure.render 的兑现(构造window对象,实现服务器端 JQuery Template)

2012-09-22 
Pure JS (5.3):pure.render 的实现(构造window对象,实现服务器端 JQuery Template)Pure JS (5.3):pure.ren

Pure JS (5.3):pure.render 的实现(构造window对象,实现服务器端 JQuery Template)
Pure JS (5.3):pure.render 的实现(构造window对象,实现服务器端 JQuery Template)
  pure.render() 的实现思路大致如下:
  1. 解析 HTML
  2. 构造 window 对象
  3. 在 window 对象上附加 jQuery 对象
  4. 调用传入的 func,修改 window.document
  5. 返回修改后的 document 中的 HTML

  解析 HTML 的部分是基于 Java 开源项目 NekoHTML 的。NekoHTML 可以解析 HTML 并尝试修复其中不符合 XML 标准的地方,解析的结果可以使用 XML 接口进行进一步操作和序列化。
var pure = pure || {};pure.jquery = function( window, undefined ) {// jQuery 实现代码,略// 在 window 对象上附加 jQuery 对象window.jQuery = jQuery;};
  这里实际上在函数中构造了 jQuery 对象,并附加到 window 对象上。

  jQuery 实现代码的部分,由于所操作的实际上是 XML DOM Element,与浏览器中的 HTMLElement 有所不同,并且 Java 对象与JavaScript对象也不完全兼容,因此需要进行一些必要替换,比如用 pure.html(elem) 替换 elem.innerHTML,用 pure.childNodes(elem) 替换 elem.childNodes 等。

pure.tmpl()
  类似地,pure.tmpl.js 是在 jQuery Template 的基础上修改而成的,定义了 pure.tmpl() 对象:

var pure = pure || {};pure.tmpl = function( window, undefined ) {// 其他代码,略// 扩展 jQuery 对象(实例方法)jQuery.fn.extend({tmpl: function( data, options, parentItem ) { ... },template: function( name ) { ... },domManip: function( args, table, callback, options ) { ... });});// 扩展 jQuery 对象(静态方法)jQuery.extend({tmpl: function( tmpl, data, options, parentItem ) { ... },template: function( name, tmpl ) { ... },encode: function( text ) { ... }});// 其他代码,略};

  这里实际上对 window.jQuery 进行了扩展,在 jQuery 上附加了 tmpl 等函数。

pure.render()
  需要注意的是 pure.jquery() 和 pure.tmpl() 都需要一个 window 对象作为参数,因此构造 window 对象的方式很关键。我们是在 pure.render() 函数中借助 NekoHTML 解析 HTML 文件,从而构造出 window 对象的:

pure.render = function(partial, file, func) {// 一些模拟函数重载的代码,略// 创建用于解析 HTML 文件的 DOMParservar parser = new DOMParser();// 解析 HTML 文件parser.parse(file);// 构造 window 对象var window = {// 从 parser 中获取 documentdocument : parser.getDocument(),// 由于不能直接在 Elemnt 上附加数据(因为实际上 Element 是 Java 对象)// 因此我们用一个 HashMap 存放这些数据//(Element作为 key,JavaScript 对象作为值)cache : new HashMap()};// 依次调用 pure.jquery 和 pure.tmpl,// 从而在 window 对象上附加 jQuery 对象pure.jquery(window);pure.tmpl(window);// 调用传进的函数,以 window.jQuery 作为参数// 这个函数实际上将修改 window.documentfunc(window.jQuery);// 返回结果:代码片段或完整的 HTMLvar doc = window.document.documentElement;return partial ?pure.html(doc.lastChild) :pure.outerHtml(doc, true);}


  这就是 pure.render() 的实现过程了。事实上现在的版本中 pure.jquery() 和 pure.templ() 还有许多冗余和不合理的代码,功能也比较有限(不能附加数据和事件),这些方面(或其他方面)的修改还是希望听听大家的意见。
  谢谢。

热点排行