Lite 是一个模板平台,而不仅仅是一个模板系统,我们可以在这个平台上自己设计模板语法。
在现有基础上,我们可以通过如下三种形式扩展模板语法。
扩展名称空间标签语法。
扩展名称空间属性语法。
扩展文本语法。
本文,我们将重点介绍标签语法的扩展方法。
API结构
Lite 一共有9中中间代码,一个通用的结束指令,一个批量条件接口,一个静态文本添加接口,共有12个中间指令操作接口。
他们分别是:
append(text)
用于添加静态文本。
//我需要一个插件,让所有a标签都加上一个中括弧([]),实现代码如下。
function parseA(node){
this.append('[');
//让下一个解析器实现最终解析
this.next(node);
this.append(']');
}
]]>
appendEL(el)
用于添加一段表达式输出(不编码)
/* 扩展content属性(为了简单,没有做IE兼容) */
function parseEL(node){
var value = node.textContent;
this.appendEL(value);
}
'一年有'+24*365 +'小时在'+actionresult
]]>
/* 扩展content属性(为了简单,没有做IE兼容) */
function parse2content(attr){
var value = attr.value;
var el = attr.ownerElement;
el.removeAttributeNode(attr);
el.textContent = value;
}
这里的内容会自动被x:content 中的定义代替
]]>
appendIf(el)
用于开始一个条件判断(结束用appendEnd())
function parseIf(node){
var el = node.getAttribute('test');
el = el.replace(/^\$\{([\s\S]+)\}$/,'$1');
this.appendIf(el);
this.parse(node.childNodes);
this.appendEnd();
}
1<2
1>2
]]>
appendElse(el)
用于开始一个条件判断(结束用appendEnd())
function parseIf(node){
var el = node.getAttribute('test');
el = el.replace(/^\$\{([\s\S]+)\}$/,'$1');
this.appendIf(el);
this.parse(node.childNodes);
this.appendEnd();
}
function parseElse(node){
var el = node.getAttribute('test');
el = el.replace(/^\$\{([\s\S]+)\}$/,'$1');
this.appendElse(el || null);
this.parse(node.childNodes);
this.appendEnd();
}
el值类型只能有 list(Array),number(循环次数),map(Object,循环key 相当于 JavaScript的 for in 语法)
function parseFor(node){
var varName = node.getAttribute('var');
var el = node.getAttribute('list');
var status = node.getAttribute('status');
el = el.replace(/^\$\{([\s\S]+)\}$/,'$1');
this.appendFor(varName,el,status);
this.parse(node.childNodes);
this.appendEnd();
}
${item}/${status.index}
]]>
appendXA(attrName, el)
添加一个XML 属性,当attrName 为空时,只做属性编码输出,不做属性语法输出(输出判断+属性名="..")。
/**
* 重新定义 input 解析规则。
* 让属性: readonly autofocus checked disabled required 不用带值,标签也可以省去关闭语法
*/
function parseInput(node){
var attributes = node.attributes;
this.append('<'+node.tagName);
for (var i=0; i')
}
]]>
appendXT(el)
添加一个XML文本输出
appendVar(varName, el)
申明一个模板变量
appendCapture(varName)
捕捉一段输出,将结果申明为指定变量名
appendPlugin(pluginClass, pluginConfig)
添加插件
appendAll(list)
将一组中间代码,批量添加进来。
示例1
有没有为javascript多行字符串申明苦恼过?我们可以写一个模板扩展,让这个事情顺利一点。
==测试==
var "
+varName+'='+JSON.stringify(text)
+";<\/script>");
}
]]>]]
随便写点什么
]]>]]