严格来讲不能说是MVC,应为模版里不能写逻辑语句。

灵感来源于我的上篇文字:《封装JSON数据转自定义HTML方法parseHTML》

这里再封装一个简单方法,在保持原来的方便改变不大的前提下,简单地根据数据长度,循环地翻译模版,再插入指定节点里;

只是觉得我的开发过程中很多时候要拼接字符串,拼接起来的字符串又难维护;

这个方法主要是为了提高以后编码的效率,开发过程中减少手工拼接字符串的重复劳动。

不是为了MVC而MVC;

来看看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,《高性能JavaScript模板引擎原理解析》

看了全篇文章,只能感叹作者的厉害,超出我的能力范围。

以后会继续反复看,不知道什么时候才能深入得理解!

看看我的方法吧:

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回调函数,使得数据显示更加灵活, 一定意义上弥补了模版不支持逻辑的语句的缺点。

4.就这么简单,返回的结果是:

<ul id="DemoTarget">
<li>姓名:蜡笔小新</li>
<li>性别:男</li> <li>姓名:小丸子</li>
<li>性别:女</li> <li>姓名:凹凸曼</li>
<li>性别:保密</li>
</ul>

5.minTempate源码:

var minTemplate = {
temp:{},
target: {},
flag: false,
/**
* JSON数据转自定义HTML.
* @param {String} template 模版参数模版的变量名要与JSON的key值对应,
* 且模版的变量名要用"{}"包住。
* @param {Object} json JSON数据,只接收类似[{},{}...]格式的JOSN。
* @param {String} result 开头默认的字符串,也被内部递归利用。
* @param {Function} fn 回调函数前面两个参数分别对应json的,key 和 value
* @return {String} 返回转义的HTML。
*/
base: function (template, json, fn, result) {
result = result || '';
json = !this.flag ? json.slice(0) : json;//第一次递归前,克隆一个json
this.flag = true;
if (Object.prototype.toString.call(json) === '[object Array]') {
var first = json.shift();
result += template.replace(/\{([^{}]+)\}/g, function (match, key) {
return fn === undefined ? first[key] : fn(key, first[key]);
});
if(json.length !== 0){
return this.base(template, json, fn, result); //递归
}
this.flag = false;
return result;
} else {
alert('只接收数组形式的JSON数据!');
}
},
/**
* JSON数据转自定义HTML.
* @param {Object} config 配置具体参数如下:
* @config {String} temp 模版节点ID
* @config {String} traget 插入结果的节点ID
* @config {Object} json 需要转换的JSON数据,只接收类似[{},{}...]格式的JOSN。
* @config {Function} filter 结果筛选,函数前面两个参数分别对应json的,key 和 value
*/
pro: function (config) {
this.temp[config.temp] = this.temp[config.temp] || document.getElementById(config.temp)
this.target[config.target] = this.target[config.target] || document.getElementById(config.target);
this.target[config.target].innerHTML = this.base(this.temp[config.temp].innerHTML, config.json, config.filter);
}
};

原生JS不到30行,实现类似javascript MVC的功能-minTemplate的更多相关文章

  1. 30行代码实现Javascript中的MVC

    从09年左右开始,MVC逐渐在前端领域大放异彩,并终于在刚刚过去的2015年随着React Native的推出而迎来大爆发:AngularJS.EmberJS.Backbone.ReactJS.Rio ...

  2. js 小工具-- 原生 js 去除空格

    // 原生js 去除字符串空格 <script type="text/javascript"> String.prototype.trim = function (){ ...

  3. 原生JS实现下拉列表

    1 <div class="list"> 2 <ul> 3 <li> 4 <a href="#">Web部< ...

  4. 不到30行JS代码实现的Excel表格

    不到30行JS代码实现的Excel表格,jQuery并非不可替代 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...

  5. 类似jQuery的原生JS封装的ajax方法

    一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...

  6. 利用原生JS实现类似浏览器查找高亮功能(转载)

    利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...

  7. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  8. 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  9. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

随机推荐

  1. 转--看完让你彻底搞懂Websocket原理

    偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有.所以转到我博客里,分享一下.比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗 ...

  2. Jenkins报表 代码 指标分析

    Jenkins报表 这表现在前面的章节中,也有可用最简单的一种是适用于 JUnit 测试报告的许多报表插件. 在生成后动作进行任何工作,你可以定义要创建的报告. 该构建已经完成,测试结果选项将可进一步 ...

  3. fabric-sdk-container v1.0-beta 新增支持多服务节点

    HyperLedger/Fabric SDK Docker Image 该项目在github上的地址是:https://github.com/aberic/fabric-sdk-container ( ...

  4. ElasticSearch读写原理

    es 写入数据的工作原理是什么啊?es 查询数据的工作原理是什么啊?底层的 lucene 介绍一下呗?倒排索引了解吗? es 写数据过程 客户端选择一个 node 发送请求过去,这个 node 就是  ...

  5. Mac OS系统四种修改Hosts文件的方法列举

    转自:https://blog.csdn.net/u012460084/article/details/40186973 使用Mac OS X系统的用户,在某些时候可能遇到了需要修改系统Hosts文件 ...

  6. 从C简单程序的汇编代码入手,以理解计算机工作原理。

    贺邦  原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-1000029000#/info 知识准备 ...

  7. Windows 7 上面安装 dotnet core 之后 使用 应用报错的处理:api-ms-win-crt-runtime-l1-1-0.dll 丢失

    Windows2016 使用 dotnet core的使用 安装了就可以了 但是发现 windows 7 不太行 报错如图示 没办法简单百度了下 https://www.microsoft.com/z ...

  8. 一本通1635【例 5】Strange Way to Express Integers

    1635:[例 5]Strange Way to Express Integers sol:貌似就是曹冲养猪的加强版,初看感觉非常没有思路,经过一番艰辛的***,得到以下的结果 随便解释下给以后的自己 ...

  9. LOJ#6118 鬼牌

    \(\rm upd\):是我假了...这题没有爆精...大家要记得这道题是相对误差\(10^{-6}\)...感谢@foreverlasting的指正. 题是好题,可是标算爆精是怎么回事...要写的和 ...

  10. 【bzoj4771】七彩树 树链的并+STL-set+DFS序+可持久化线段树

    题目描述 给定一棵n个点的有根树,编号依次为1到n,其中1号点是根节点.每个节点都被染上了某一种颜色,其中第i个节点的颜色为c[i].如果c[i]=c[j],那么我们认为点i和点j拥有相同的颜色.定义 ...