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 接口进行进一步操作和序列化。

引用

　　NekoHTML 项目主页：http://nekohtml.sourceforge.net/
　　另外，NekoHTML 依赖于 Xerces：http://xerces.apache.org/mirrors.cgi

　　接下来，我们就一起来看看在服务器端使用 JQuery DOM 和 JQuery Template ，以及 pure.render() 函数的实现。

pure.jquery()

　　scripts/lib/pure.jquery.js 是在 jQuery 1.6 的基础上修改而成的，仅保留了 DOM 查询、DOM 操作和一些基本函数（each，map等）。
　　pure.jquery.js 中定义了 pure.jquery() 函数：

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 文件的 DOMParser
	var parser = new DOMParser();

	// 解析 HTML 文件
	parser.parse(file);

	// 构造 window 对象
	var window = {
		// 从 parser 中获取 document
		document : 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.document
	func(window.jQuery);

	// 返回结果：代码片段或完整的 HTML
	var doc = window.document.documentElement;
	return partial ?
		pure.html(doc.lastChild) :
		pure.outerHtml(doc, true);
}

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

评论

1 楼 sp42 2014-08-10  

其实在我的架构中，我更倾向于 JSP 作为前端模板系统~还是写 JAVA