原生JS不到30行,实现类似javascript MVC的功能-minTemplate
严格来讲不能说是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">¥<%=(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的更多相关文章
- 30行代码实现Javascript中的MVC
从09年左右开始,MVC逐渐在前端领域大放异彩,并终于在刚刚过去的2015年随着React Native的推出而迎来大爆发:AngularJS.EmberJS.Backbone.ReactJS.Rio ...
- js 小工具-- 原生 js 去除空格
// 原生js 去除字符串空格 <script type="text/javascript"> String.prototype.trim = function (){ ...
- 原生JS实现下拉列表
1 <div class="list"> 2 <ul> 3 <li> 4 <a href="#">Web部< ...
- 不到30行JS代码实现的Excel表格
不到30行JS代码实现的Excel表格,jQuery并非不可替代 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...
- 类似jQuery的原生JS封装的ajax方法
一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...
- 利用原生JS实现类似浏览器查找高亮功能(转载)
利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...
- 用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
随机推荐
- 转--看完让你彻底搞懂Websocket原理
偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有.所以转到我博客里,分享一下.比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗 ...
- Jenkins报表 代码 指标分析
Jenkins报表 这表现在前面的章节中,也有可用最简单的一种是适用于 JUnit 测试报告的许多报表插件. 在生成后动作进行任何工作,你可以定义要创建的报告. 该构建已经完成,测试结果选项将可进一步 ...
- fabric-sdk-container v1.0-beta 新增支持多服务节点
HyperLedger/Fabric SDK Docker Image 该项目在github上的地址是:https://github.com/aberic/fabric-sdk-container ( ...
- ElasticSearch读写原理
es 写入数据的工作原理是什么啊?es 查询数据的工作原理是什么啊?底层的 lucene 介绍一下呗?倒排索引了解吗? es 写数据过程 客户端选择一个 node 发送请求过去,这个 node 就是 ...
- Mac OS系统四种修改Hosts文件的方法列举
转自:https://blog.csdn.net/u012460084/article/details/40186973 使用Mac OS X系统的用户,在某些时候可能遇到了需要修改系统Hosts文件 ...
- 从C简单程序的汇编代码入手,以理解计算机工作原理。
贺邦 原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-1000029000#/info 知识准备 ...
- Windows 7 上面安装 dotnet core 之后 使用 应用报错的处理:api-ms-win-crt-runtime-l1-1-0.dll 丢失
Windows2016 使用 dotnet core的使用 安装了就可以了 但是发现 windows 7 不太行 报错如图示 没办法简单百度了下 https://www.microsoft.com/z ...
- 一本通1635【例 5】Strange Way to Express Integers
1635:[例 5]Strange Way to Express Integers sol:貌似就是曹冲养猪的加强版,初看感觉非常没有思路,经过一番艰辛的***,得到以下的结果 随便解释下给以后的自己 ...
- LOJ#6118 鬼牌
\(\rm upd\):是我假了...这题没有爆精...大家要记得这道题是相对误差\(10^{-6}\)...感谢@foreverlasting的指正. 题是好题,可是标算爆精是怎么回事...要写的和 ...
- 【bzoj4771】七彩树 树链的并+STL-set+DFS序+可持久化线段树
题目描述 给定一棵n个点的有根树,编号依次为1到n,其中1号点是根节点.每个节点都被染上了某一种颜色,其中第i个节点的颜色为c[i].如果c[i]=c[j],那么我们认为点i和点j拥有相同的颜色.定义 ...