`
裴小星
  • 浏览: 265830 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
8ccf5db2-0d60-335f-a337-3c30d2feabdb
Java NIO翻译
浏览量:27853
F3e939f0-dc16-3d6e-8c0b-3315c810fb91
PureJS开发过程详解
浏览量:74380
07a6d496-dc19-3c71-92cf-92edb5203cef
MongoDB Java ...
浏览量:63081
社区版块
存档分类
最新评论

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() 还有许多冗余和不合理的代码,功能也比较有限(不能附加数据和事件),这些方面(或其他方面)的修改还是希望听听大家的意见。
  谢谢。
8
6
分享到:
评论
1 楼 sp42 2014-08-10  
其实在我的架构中,我更倾向于 JSP 作为前端模板系统~还是写 JAVA

相关推荐

    layui将table转化表单显示的方法(即table.render转为表单展示)

    table.render({ id : 'table', type:'post', elem : '#table', url : url, where : {'Id' : $data.Id}, page:false, cols : [ [ //表头 ]] }) 最简单直接用ajax请求,确保url路径正确 $.ajax({ dataType:'...

    jquery-jsrender.js

    **jQuery-jsrender.js** 是一个基于 jQuery 的高性能 JavaScript 模板引擎,它的设计目标是提供一种灵活、高效的方式来渲染和管理HTML视图。这个插件主要用于处理数据绑定和动态渲染,使得开发者能够在不刷新整个...

    JsRender.zip(jsrender.js和jsrender.min.js合集)

    JsRender 包含了两个核心文件:`jsrender.js` 和 `jsrender.min.js`,它们提供了相同的功能,但`jsrender.min.js`是经过压缩和优化的版本,更适合在生产环境中使用,因为它加载更快,占用的带宽更小。 **主要特点**...

    博客Meteor.render源码

    `Meteor.render` 还接受一个可选的选项参数,例如 `{autobind: true}`,这可以确保在事件处理函数中,`this` 关键字指向当前组件实例,而不是 `window` 对象。这对于 React 组件尤其有用,因为它简化了事件处理。 ...

    dotted-map:使用fabric.js的虚线地图实现

    在这个案例中,我们讨论的是一个基于JavaScript库Fabric.js实现的动态世界地图。Fabric.js是一个强大的、跨浏览器的2D图形和对象操作库,它允许开发者轻松地在HTML5 canvas上创建和操作图形元素。 Fabric.js 提供了...

    jquery.dataTable.js 使用详解 一、基础配置

    《jQuery.dataTables.js 使用详解——一、基础配置》 在网页开发中,数据展示是一个重要的环节,而jQuery.dataTables.js插件为高效、美观的数据表格呈现提供了强大的解决方案。本篇将深入探讨该插件的基础配置,...

    jquery-jsrender.js 下载

    `jQuery JSRender` 是一款高效且功能强大的JavaScript模板引擎,它是jQuery插件家族的一员,专为构建动态数据驱动的Web界面而设计。该库允许开发者通过简洁易读的语法创建复杂的HTML模板,从而在不涉及大量DOM操作的...

    在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法

    在使用EasyUI进行Web开发时,我们可能会遇到与`jquery.easyui.min.js`函数库相关的各种问题。EasyUI是基于jQuery的一个强大且易用的前端框架,它提供了丰富的组件和功能,如表格、对话框、菜单、布局等,极大地简化...

    jquery.qrcode.js生成带logo的二维码

    ### 使用jquery.qrcode.js生成带logo的二维码 在本文中,我们将探讨如何使用`jquery.qrcode.js`插件来生成带有Logo的二维码,并将其转换为图片格式。此方法非常适合需要在网页上动态生成二维码的应用场景。 #### ...

    jquery实现PDF在线预览 jquery实现在线预览PDF文档

    以下是实现jQuery与PDF.js结合的步骤: 1. **引入库**:首先,你需要在HTML文件中引入jQuery库和PDF.js库。通常,jQuery可以从CDN获取,而PDF.js则需要从其官方GitHub仓库下载,或者使用CDN链接。 ```html ...

    brless:less.render() browserify 变换

    无less.render() browserify 变换例子对于 main.js: var less = require ( 'less' ) ;less . render ( '.some { .class { color: black; }}' , function ( err , output ) { console . log ( output ) ;} ) ; 首先...

    matter.js实现的浏览器崩溃元素掉落动画效果源码.zip

    《使用Matter.js实现浏览器元素掉落动画效果》 在当今的网页开发中,动态效果的运用使得用户体验得到了显著提升。Matter.js是一个轻量级且功能强大的2D物理引擎,它能够帮助开发者轻松创建出各种复杂的物理动画效果...

    解决render-notebook图片不显示.docx

    ### 解决Render-Notebook图片不显示的问题 在进行数据科学项目或开发过程中,经常会用到Jupyter Notebook来编写和运行代码。然而,在使用过程中可能会遇到一个常见的问题:即Notebook中的图片无法正常显示。本文将...

    layui数据表格 table.render 报错的解决方法

    Layui数据表格功能强大,通过简单的配置即可实现复杂的表格功能,而table.render是Layui中用于渲染表格的方法。在使用过程中可能会遇到各种报错问题,导致表格无法正确显示或功能异常,这篇文章将探讨遇到报错时的...

    render-placement-loader:自动将 React.render 添加到您的组件中(在 reactview 中使用)

    您还可以通过查询传递可选的props对象。 用法: component : 显式传递你想要渲染的组件的名称props : props 传递组件replace : true或false如果找到React.render ,它将默认替换 { test: /\.jsx

    解决koa2 ctx.render is not a function报错问题

    在使用Koa2进行Web应用开发时,可能会遇到一个常见的错误,即在执行ctx.render()方法时,控制台显示ctx.render is not a function。这一问题通常与Koa中间件的使用顺序有关。 首先,让我们先明确一下Koa的中间件...

    解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

    引入需要的css和js <link rel="stylesheet" href="${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" /> [removed][removed] layui.use('form',function){ var form=layui...

    pdf.js Demo 纯js实现PDF在线预览及打印

    PDF.js是Mozilla开发的一个开源项目,它允许开发者使用纯JavaScript在Web浏览器中渲染PDF文档,无需依赖任何插件。这个Demo展示了如何利用PDF.js库实现PDF在线预览和打印功能,同时还提供了页面缩放和打开本地PDF...

    three.js实现3D简易书店.rar

    Three.js是一个基于WebGL的JavaScript库,它使得在浏览器中创建复杂的3D图形变得简单易行。以下将详细介绍如何通过Three.js实现这个3D书店的构建过程。 首先,我们需要引入Three.js库。在HTML文件中,可以通过添加...

    03 你对 ReactDOM.render( ... ) 操作了解多少慕课专栏1

    在React v16.9版本中,ReactDOM对象还包含了hydrate()函数,用于服务器端渲染(SSR)。 ReactDOM.render()函数是React应用的核心,它接收三个参数: 1. **React元素**:这是React应用程序的第一个参数,例如 `...

Global site tag (gtag.js) - Google Analytics