一种轻便且灵活的js模板的思路

项目地址:https://github.com/j20041426/template

思路背景

在Vue、React、Angular等大前端框架异军突起的今天,写前端时已经很难用得上普通模板引擎了。因为这些框架都自带DOM渲染的功能,甚至由于虚拟DOM技术的存在,使得DOM渲染的效率比普通模板引擎更高。

但是在某些场景,仍然有用模板引擎的需求,比如写插件之类的(我就是在写插件的时候想到这个问题的-_-)。如果直接拼接HTML代码,会让整体代码的可读性变低;但是我又不想用现成的模板引擎,感觉有点太重了,本来写插件就想要轻便效率。

于是,我就有了一个处于直接拼接HTML代码和使用模板引擎之间的一个思路。(很可能我并不是第一个想到的,在这里只是探讨一下)

先贴代码

var template = function(temp, params, repeat){
var ret = "";
var repeat = repeat || 1; for(var i = 0; i < repeat; i++){
ret += temp.replace(/{{[\w]+}}/g,function(a,b){
var value = params[a.replace(/[{}]/g,"")];
if(typeof value === "function"){
return value.call(this, i);
}else{
return value;
}
})
} return ret;
}

因为一般用模板来生成HTML代码,最常用的功能就是遍历和条件判断,这个思路就是基于这一点出发的。

参数temp是模板字符串,例如'<div class="{{clas}}">{{prefix}}:{{num}}</div>',因为我用Vue比较多,所以这里用的也是{{}}

参数repeat表示当前模板字符串需要重复的次数,比如传10的话,就会生成10个div

参数params用来定义模板里的变量,例如:

{
"clas": function(index){
return index % 2 ? 'even' : 'odd';
},
"num": function(index){
return index + 1;
},
"prefix": "No"
}

变量名称一定要一一对应。

参数里可以定义常量,比如"prefix": "No",表示模板中的prefix变量会被替换为字符串No

还可以定义成一个function,这个function接收当前遍历的index作为参数:

"num": function(index){
return index + 1;
}

返回值则会被替换到对应的模板变量中,比如这个num就会被替换成1到10。

function里也可以再放入一个template,比如:

var temp = '<ul>{{lists}}</ul>';
var lists = '<li>{{content}}</li>';
var t = template(temp, {
"lists": function(){
return template(lists, {
"content": function(index){
return index % 2 ? '偶数' : '奇数';
}
}, 10);
}
});

一种轻便且灵活的js模板的思路的更多相关文章

  1. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  2. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  3. JS模板引擎:tppl

    全球最快的JS模板引擎:tppl 废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发 ...

  4. 浅析js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  5. 为什么要使用JS模板引擎

    我之前在写一个输入联想控件的时候,改过好几个版本,每个版本不是因为性能不好就是因为代码凌乱而被推翻,最后用了understore模板引擎,效果有明显改善.整好这两天在研究互联网技术架构,发现很多的开发 ...

  6. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  7. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  8. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

  9. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. UWP的Converter妙用

    MVVM模式的使用,简化了UWP应用的开发,使层次更加分明.在写xaml的时候,有些小技术还是很实用的:比如Converter,字面上理解是转换器,那它到底是转换什么的?接触过的可能知道它起的是类型转 ...

  2. angularJS插入html及更换iframe的src

    html: ng-bind-html <div class="tabs_content" ng-bind-html="specialHtml">&l ...

  3. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  4. gdb常用命令及使用gdb调试多进程多线程程序

    一.常用普通调试命令 1.简单介绍GDB 介绍: gdb是Linux环境下的代码调试⼯具.使⽤:需要在源代码⽣成的时候加上 -g 选项.开始使⽤: gdb binFile退出: ctrl + d 或 ...

  5. Java软件系统功能设计实战训练视频教程

    Java软件系统功能设计实战训练视频教程 第01节课:整体课程介绍和杂项介绍第02节课:软件功能设计常见理念和方法第03节课:关于软件设计的一些思考第04节课:第一周作业的业务和相应模式:综合应用简单 ...

  6. 15套java互联网架构师、高并发、集群、负载均衡、高可用、数据库设计、缓存、性能优化、大型分布式 项目实战视频教程

    * { font-family: "Microsoft YaHei" !important } h1 { color: #FF0 } 15套java架构师.集群.高可用.高可扩 展 ...

  7. Sqlserver 2005 跨数据库 导入数据

    --Sqlserver 2005 跨数据库 导入数据:--SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/O ...

  8. 【Android Developers Training】 44. 控制你应用的音量和播放

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  9. Example010实现浏览器兼容改内容的函数,自写

    <!-- 实例010实现浏览器兼容改内容的函数 --> <!DOCTYPE html> <html lang="en"> <head> ...

  10. 原生封装ajax

    01.声明一个全局变量 02.开始封装,判断参数 03.属性的var自定义 04.请求 01.请求行 02.请求头 03.请求发送 05.响应 01.事件监听onreadystatechange 02 ...