严格来讲不能说是MVC，应为模版里不能写逻辑语句。
灵感来源于我的上篇文字：；
这里再封装一个简单方法，在保持原来的方便改变不大的前提下，简单地根据数据长度，循环地翻译模版，再插入指定节点里；
只是觉得我的开发过程中很多时候要拼接字符串，拼接起来的字符串又难维护；
这个方法主要是为了提高以后编码的效率，开发过程中减少手工拼接字符串的重复劳动。
不是为了MVC而MVC;
2013-10-16更新：
1.替换原来的递归方法（递归效率低）；
2.runjs.cn上，添加了自模版的例子；
3.模版中添加了{index} 属性；
4.配置中添加插入模式insertType;
5.filter函数，增加obj参数 。
来看看QQ网购首页的部分源码：
< script type ="text/html" id ="floorMidCommTpl" > <% for ( var i = 0 ,j = arr.length;i < j;i ++ ){ %> < li > < a href = " <%=arr[i].clickUrl%> " title = " <%=arr[i].itemFullName%> " class = " img_wrap " target = " _blank " >< img init_src = " <%=arr[i].uploadPicUrl1%> " width = " 120 " height = " 120 " alt = " <%=arr[i].itemFullName%> "/ >< / a > < div class = " img_detail " > < p class = " price_now " >& yen; <%= (arr[i].activePrice / 100).toFixed(2)%>< / p > < p class = " name " >< a href = " <%=arr[i].clickUrl%> " target = " _blank " ><%= arr[i].itemFullName %>< / a>< / p > < / div> < / li> <% } %> </ script >
提供了丰富的语法支持，惊叹不已！！！
官方说其模版引擎压缩版才2kb，
看了全篇文章，只能感叹作者的厉害，超出我的能力范围。
以后会继续反复看，不知道什么时候才能深入得理解！
看看我的方法吧：
1.模版例子，没有语法支持，也不打算以后支持。继续往下看，会对这个问题提供解决方法。
< ul id ="DemoTarget" ></ ul > < script type ="text/html" id ="DemoTpl" > < li > 姓名：{name} < / li> < li > 性别：{sex} < / li> </ script >
< ul id ="DemoTarget" ></ ul > 这里需要加个结果插入节点，之前考虑直接用script.appendBefore()方式插入，
但是考虑在同一个位置可以反复插入数据，同时清除之前的结构，就多加一个条件。
2.数据例子：
var DemoJSON = [{
name: '蜡笔小新',
sex: 0
}, {
name: '小丸子',
sex: 1
}, {
name: '凹凸曼',
sex: -1
}];
3.调用方式
minTemplate.pro({
temp: 'DemoTpl',
target: 'DemoTarget',
json: DemoJSON,
filter:
function (key, val) {
// 如果是{sex}对应的数值返回相应的文字 if (key == 'sex') {
return ['保密', '男', '女'][val + 1];
}
return val;
}
});
filter回调函数，使得数据显示更加灵活， 一定意义上弥补了模版不支持逻辑的语句的缺点。甚至可以做到子模版的功能！详细看文后的runjs.cn
4.就这么简单，返回的结果是：
<ul id="DemoTarget">
<li>姓名：蜡笔小新</li>
<li>性别：男</li>
<li>姓名：小丸子</li>
<li>性别：女</li>
<li>姓名：凹凸曼</li>
<li>性别：保密</li>
</ul>
5.minTempate源码：
var minTemplate = {
temp: {},
target: {},
index: 0,
base:
function (template, json, fn) {
var result = '';
if (Object.prototype.toString.call(json) === '[object Array]') {
for(
var i = 0, len = json.length; i < len; i++){
json[i].index = i;
result += template.replace(/\{([^{}]+)\}/g,
function (match, key) {
return fn === undefined ? json[i][key] : fn(key, json[i][key], json[i]);
});
}
return result;
}
else {
alert('只接收数组形式的JSON数据！');
}
},
getId:
function (elem) {
return document.getElementById(elem);
},
pro:
function (config) {
this.temp[config.temp] =
this.temp[config.temp] ||
this.getId(config.temp)
this.target[config.target] =
this.target[config.target] ||
this.getId(config.target);
this.target[config.target].innerHTML = (config.insertType ?
this.target[config.target].innerHTML : '') +
this.base(
this.temp[config.temp].innerHTML, config.json, config.filter);
}
};
----------------------------------------------------------------------------------------------------
runjs.cn在线演示：
runjs.cn结果：
转载请注明出处：
如有任何建议或疑问，欢迎留言讨论。