JS模板引擎
2015-10-28 15:02
465 查看
JS模板引擎 :ArtTemplate (2)
上一篇初略的介绍了一下javascript中的模板引擎,有兴趣的可以戳 这里 。这一篇将带着大家一起做一个简易的模板引擎,
上一篇介绍到:模板引擎其实做的就是两件事。
根据一定的规则,解析我们所定义的模板
根据数据以及模板生成html(其实背后也是用的字符串拼接)
那么,首先,我们要有一个模板,一份数据,以及想生成的结果。
例如:模板:
View Code
数据:
View Code
结果:
View Code
然后,获取我们缓存的template 的render方法
// 静态分析模板变量 var KEYWORDS = // 关键字 'break,case,catch,continue,debugger,default,delete,do,else,false' + ',finally,for,function,if,in,instanceof,new,null,return,switch,this' + ',throw,true,try,typeof,var,void,while,with' // 保留字 + ',abstract,boolean,byte,char,class,const,double,enum,export,extends' + ',final,float,goto,implements,import,int,interface,long,native' + ',package,private,protected,public,short,static,super,synchronized' + ',throws,transient,volatile' // ECMA 5 - use strict + ',arguments,let,yield' + ',undefined'; var REMOVE_RE = /\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g; var SPLIT_RE = /[^\w$]+/g; //非数字字母下滑线和$符以外的其他字符 //生成这样的正则,用于匹配关键字 /\bbreak\b|\bcase\b|\bcatch\b|\bcontinue\b|\bdebugger\b|\bdefault\b|\bdelete\b|\bdo\b|\belse\b|\bfalse\b|\bfinally\b|\bfor\b|\bfunction\b|\bif\b|\bin\b|\binstanceof\b|\bnew\b|\bnull\b|\breturn\b|\bswitch\b|\bthis\b|\bthrow\b|\btrue\b|\btry\b|\btypeof\b|\bvar\b|\bvoid\b|\bwhile\b|\bwith\b|\babstract\b|\bboolean\b|\bbyte\b|\bchar\b|\bclass\b|\bconst\b|\bdouble\b|\benum\b|\bexport\b|\bextends\b|\bfinal\b|\bfloat\b|\bgoto\b|\bimplements\b|\bimport\b|\bint\b|\binterface\b|\blong\b|\bnative\b|\bpackage\b|\bprivate\b|\bprotected\b|\bpublic\b|\bshort\b|\bstatic\b|\bsuper\b|\bsynchronized\b|\bthrows\b|\btransient\b|\bvolatile\b|\barguments\b|\blet\b|\byield\b|\bundefined\b/g var KEYWORDS_RE = new RegExp(["\\b" + KEYWORDS.replace(/,/g, '\\b|\\b') + "\\b"].join('|'), 'g'); var NUMBER_RE = /^\d[^,]*|,\d[^,]*/g; //匹配数字开头或者逗号后紧跟着数字的, var BOUNDARY_RE = /^,+|,+$/g; //匹配开头的一个或多个逗号以及结尾的 用于去除首尾的逗号 var SPLIT2_RE = /^$|,+/; //匹配多个逗号,用于分割 类似 param1,param2,,param3=> ["param1","param2","param3"] ,/^$/是为了匹配防止空字符串被切割 // 获取变量 function getVariable(code) { return code .replace(REMOVE_RE, '') .replace(SPLIT_RE, ',') //匹配单词字符 .replace(KEYWORDS_RE, '') // .replace(NUMBER_RE, '') .replace(BOUNDARY_RE, '') .split(SPLIT2_RE); }
这里,主要各个正则的用处都写了注释了。
主要做了:
过滤掉系统关键字,
过滤掉数字开头的变量(不合法变量)
由于1,2部,此时可能首尾有逗号,故,去除首尾的逗号
根据一个或多个逗号,分隔成参数数组 如:param1,param2,,param3=> ["param1","param2","param3"]
就这样,渲染方法就拼接完了。
最后,这里只是实现了js模板中简易的功能。后期诸如helper,include,还会在继续讲。
完整源码地址 : https://github.com/chen4342024/andyTemplate
如果有哪一方面讲的有问题。望不吝指教~
最后问个问题,电脑是win10系统,用什么博客编辑器比较好?官方推荐的window live writer 安装不了!!!
相关文章推荐
- 慕课网javascript基础学习笔记
- 拼json对象批量向后台添加数据
- JavaScript权威指南科03章 种类、值和变量(1)
- js 小数点 取整数
- js引用另一个js文件的方法
- Js实现对中文进行排序
- ExtJS初探:在项目中使用ExtJS
- 有关js中的跨域问题
- JSP标签<meta>的作用
- 注意:json字符串与json对象的区别
- js的insertRow(-1)和insertCell(-1)
- Javascript进阶篇——(流程控制语句)笔记整理
- extjs经典的增删改查
- javascript中toString和valueOf方法的区别
- js 跳转整理
- JS实现货币格式化、货币繁体汉字化
- extjs经典form的submit()和ajax()
- anjular js 涉及的数据循环
- angular js 传递集合参数
- JS自执行函数的几种写法