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 接口进行进一步操作和序列化。
引用
接下来,我们就一起来看看在服务器端使用 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() 还有许多冗余和不合理的代码,功能也比较有限(不能附加数据和事件),这些方面(或其他方面)的修改还是希望听听大家的意见。
谢谢。
分享到:
相关推荐
table.render({ id : 'table', type:'post', elem : '#table', url : url, where : {'Id' : $data.Id}, page:false, cols : [ [ //表头 ]] }) 最简单直接用ajax请求,确保url路径正确 $.ajax({ dataType:'...
JsRender.zip(jsrender.js和jsrender.min.js合集)
jquery 插件 高性能的js模板引擎
无less.render() browserify 变换例子对于 main.js: var less = require ( 'less' ) ;less . render ( '.some { .class { color: black; }}' , function ( err , output ) { console . log ( output ) ;} ) ; 首先...
您还可以通过查询传递可选的props对象。 用法: component : 显式传递你想要渲染的组件的名称props : props 传递组件replace : true或false如果找到React.render ,它将默认替换 { test: /\.jsx
pixi-action,一个类似 cocos2d-x 使用方法的 Pixi.js 动画插件。 var renderer = new PIXI.autoDetectRenderer(800,600); document.body.appendChild(renderer.view); var stage = new PIXI.Container();...
【JavaScript】 form.render(null, 'test1'); //更新 lay-filter=test1 所在容器内的全部表单状态 form.render('select', 'test2'); //更新 lay-filter=test2 所在容器内的全部 select 状态 //…… 重点: <div ...
jquery.qrcode.js生成二维码插件&转成图片格式 ;"> ;"><img id='imgOne'/></div> var qrcode =$('#code').qrcode({ render : "canvas", //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较...
今天小编就为大家分享一篇layui数据表格 table.render 报错的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
jquery 插件 高性能的js模板引擎,jquery-jsrender.js
用于Koa.js的Express.js响应处理程序接口(相同)。 :unicorn: 灵感来自 。 :fire: 和mi可亲的轻巧处理器。 :nail_polish_light_skin_tone:快递式处理器( .send() .json() .render() .jsonp() .statusCode()等...
stre-ami-ng :使用AMI.js流式体积渲染 配置 由于浏览器限制和CORS Policies ,在设置three.js提供的示例时遇到了最初的麻烦。 这是您需要做的(使用python 3 ) $ cd $ python -m http.server [port number ...
easyUI是jquery的一个插件,是民间的插件。easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码、html代码和Css样式。我们在导入easyUI库后,可以直接复制粘贴里面的代码,从而简单轻便地初步...
主要介绍了解决koa2 ctx.render is not a function报错问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下载文件 https://www.google.com/recaptcha/api.js 和这个文件中包含的另外一个文件 https://www.gstatic.com/recaptcha/api2/r20160531110558/recaptcha__zh_cn.js
Build the world with sand.js, a UI framework like reactjs :star: 特性 支持组件,支持生命周期函数 支持函数式组件,支持hook函数 支持fragment,支持render返回数组 支持JSX diff过程可中断,不阻塞 兼容IE8 ...
* jQuery.print, version 1.3.2 * (c) Sathvik Ponangi, Doers' Guild * Licence: CC-By (http://creativecommons.org/licenses/by/3.0/) *------------------------------------------------------------------...
博客 《Meteor.render 用法》 涉及到的代码
用法将fuji添加到应用程序的Gemfile中: gem 'fuji' 并通过调用render并将其传递给Rack::Request对象以及任何必需的选项来渲染部分。Heroku页眉 Heroku标头呈现默认的Heroku导航,包括检查用户是否已登录。 <%...