最近由于需求改变，我又改写了Template模板方法，此次的改动增加了XXX：{XXX}的标签替换和独立的{XXX}替换，执行顺序为XXX={XXX} -> XXX:{XXX} -> {XXX}，代码如下：
/**
* @Author Dike.Li
* @Date 2015/8/14
* @class Template
* @public
* @Description Template Label Replace
*/
define(function (require) {
/**
* 提取模板中 XXX=‘{XXX}‘ || XXX="{XXX}"
* @type {RegExp}
*/
var regExp = new RegExp(‘[a-zA-Z]+[\\s]*=[\\s]*[\"\‘]\\{[^\\{\\}]+\\}[\"\‘]‘, ‘\g‘);
/**
* 提取标签正则表达式 {XXX}
* @type {RegExp}
*/
var regExpLable = new RegExp(‘\\{[^\\{\\}]+\\}‘, ‘\g‘);
/**
* 提取标签中的名称 {XXX} -> XXX
* @type {RegExp}
*/
var regExpLabelName = new RegExp(‘[^\\{\\}]+‘, ‘\g‘);
/**
* 提取模板中的XXX:{XXX}内容
* @type {RegExp}
*/
var regExpColon = new RegExp(‘[a-zA-Z]+[\\s]*:[\\s]*\\{[^\\{\\}]+\\}‘, ‘\g‘);
/**
* 将数组转换为字符串
* @param str
* @returns {*}
*/
var convertString = function (obj) {
var str = obj;
if (obj instanceof Array) {
str = obj.join(‘‘);
}
return str;
};
/**
* 要求模板中的{id}标签与option中的属性{id:123}一致
* @param temp 模板
* @param option 属性设置
* @returns {*}
* @constructor
*/
var getTemp = (function (temp, option) {
/**
* 进行类型处理
* @type {*}
*/
temp = convertString(temp);
/**
* 提取 XXX=‘{XXX}‘ || XXX="{XXX}" 格式的数组
* @type {Array|{index: number, input: string}|*}
*/
var alArr = temp.match(regExp);
/**
* 根据option中的属性配置项翻译模板内容，并将不存在的标签删除 限定格式(XXX={XXX})
*/
for (var al in alArr) {
/**
* 获取标签
*/
var label = alArr[al].match(regExpLable)[0];
/**
* 获取标签名称
*/
var labelName = label.match(regExpLabelName)[0];
if (typeof(option[labelName]) === ‘undefined‘ ||
option[labelName] === null ||
option[labelName] === ‘null‘ ||
option[labelName] === ‘‘) {
temp = temp.replace(alArr[al], ‘‘);
continue;
}
temp = temp.replace(label, option[labelName]);
}
/**
* 继续过滤内容为XXX:{XXX}
*/
var colonArrs = temp.match(regExpColon);
for (var ca in colonArrs) {
/**
* 获取标签
*/
var cLabel = colonArrs[ca].match(regExpLable)[0];
/**
* 获取标签名
*/
var cLabelName = cLabel.match(regExpLabelName)[0];
if (typeof(option[cLabelName]) === ‘undefined‘ ||
option[cLabelName] === null ||
option[cLabelName] === ‘null‘ ||
option[cLabelName] === ‘‘) {
temp = temp.replace(colonArrs[ca], ‘‘);
continue;
}
temp = temp.replace(cLabel, option[cLabelName]);
}
/**
* 最后替换内容为{XXX}
*/
var tempArrs = temp.match(regExpLable);
for (var ta in tempArrs) {
/**
* 获取名字
* @type {Array|{index: number, input: string}}
*/
var taLabelName = tempArrs[ta].match(regExpLabelName)[0];
if (typeof(option[taLabelName]) === ‘undefined‘ ||
option[taLabelName] === null ||
option[taLabelName] === ‘null‘ ||
option[taLabelName] === ‘‘) {
temp = temp.replace(tempArrs[ta], ‘‘);
continue;
}
temp = temp.replace(tempArrs[ta], option[taLabelName]);
}
return temp;
});
return {
getTemp: getTemp
}
});
应用模板：
<div id="container_viewport_layout_main" class="container_viewport_layout_main">
<div class="container_viewport_layout_top" style="display: {top_hide}">
<h2>
<div id="{top_id}" class="container_viewport_layout_toptitle">{top_name}</div>
<div class="container_viewport_layout_topsj"><img src="Component/view/container/Viewport/images/top-sj.png" width="29" height="23"/></div>
</h2>
</div>
<div class="container_viewport_layout_left">
<div class="container_viewport_layout_tabox">
<h2>
<div class="container_viewport_layout_lefttitle">标题</div>
<div class="container_viewport_layout_leftsj"><img src="Component/view/container/Viewport/images/left-sj.png" width="29" height="23"/>
</div>
</h2>
</div>
</div>
<div class="container_viewport_layout_middle"></div>
<div class="container_viewport_layout_right">
<h2>
<div class="container_viewport_layout_righttitle">标题</div>
<div class="container_viewport_layout_rightsj"><img src="Component/view/container/Viewport/images/right-sj.png" width="29" height="23"/></div>
</h2>
</div>
<div class="container_viewport_layout_bottom">
<h2>
<div class="container_viewport_layout_bottomtitle">标题</div>
<div class="container_viewport_layout_bottomsj"><img src="Component/view/container/Viewport/images/bottom-sj.png" width="29" height="23"/>
</div>
</h2>
</div>
</div>
实际应用例子：
new (require(‘Viewport‘))({
top_name:‘top name‘,
top_hide:‘block‘,
top_id:‘asdasd‘,
render:$(‘body‘)
});
效果图：
[DikeJS]关于js模板技术，使用requireJS定义模块（七）
原文：http://my.oschina.net/u/2349331/blog/492528