[置顶] QUI继续之 -- 添加JS模板引擎功能, 征集LOGO

<?xml version="1.0" encoding="UTF-8"?><data><widget id='QUI.Widget.Alert'><![CDATA[<table cellspacing="0" cellpadding="0" width="286" height="88" border="0"><tr><td height="47" align="center" valign="middle">@{string}</td></tr><tr><td height="47" align="center" valign="middle"><div style="width: 50px; height: 22px;"></div></td></tr></table>]]></widget></data>

 qui/Widget/Template.xml 文件

 

/** * 页面模板对象 -- 支持样板代码替换 * 每个样板代码均写到一个XML文件中 * 这样也方便更改 *  * 依赖 {QUI.appPath}/Common.js文件 */$qui.Class('QUI.Page.Template');/** * 具体的模板操作类 -- 仅仅支持字符串值替换 * @param {} s */function _Tpl(s){var s = s || '' ;/** * 模板变量 * @type {} */var vars = {};/** * 设置模板变量 *  * 模板样式类似于 @{string} 其中'string'可以自定义 * 注册的变量要遵循JS变量命名规范 *  * @param {} name * @param {} value */this.assign = function(name,value){if (isString(name)){value = value || '' ;vars[name] = value ;}};this._compile = function(){var k ; for(k in vars){s = s.replace(new RegExp("@{" + k + "}", "g"),vars[k]);}};/** * 命名为 val 是为了和jquery一致 * @return {} */this.val = function(){return s ;};this.display = function(){this._compile();return s ;}}QUI.Page.Template.prototype = {datasource: ( $qui.appPath + 'Widget.Template'.replace(/\./g,'/') + ".xml") ,/** * xmlobj的对象,解析数据源的 * @type {} */list: {} ,/** * 解析数据源成XML对象 * @param String datasource */init: function(datasource){datasource = datasource || ( this.datasource) ;var tpls = this.list ;$.ajax({async:false ,type: 'POST' ,url: datasource ,dataType : 'xml',timeout:200, success: function(data){var k = '',v ;$('data widget',data).each(function(){//这里将.改为-k = $(this).attr('id').replace(/\./g,'-');v = $(this).text().trim() ; //这个trim在Common.js中定义tpls[k] = v ;});} ,error: function(){$qui.alert('Cannot load xml: ' + this.url);}});} , /** * 根据tpl的id来查找指定的样板字符串 * @param {} id */get: function(id){id = (id || 'sese.no').replace(/\./g,'-');if (this.list.hasOwnProperty(id)){return new _Tpl(this.list[id]) ;}return null ;} };

 

qui/Page/Template.js

 

在QUI.js中添加如下行:

//代码样板对象 -- 加载系统内部的Widget/Template.xml文件$qui.include('Page.Template');$qui.tpl = new QUI.Page.Template();$qui.tpl.init();

 

 

在 qui/Widget/Dialog.js 中用到这个模板的代码如下:

/** * 定义对话框对象 */$qui.Class('QUI.Widget.Dialog');var tpla = $qui.tpl.get('QUI.Widget.Alert');tpla.assign('string','小妖');$qui.alert(tpla.display());

 

刷新index.html文件可以看到结果