SS - DIY一个前端模板引擎.(一)
前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码。
个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.
为了理解模板引擎原理(zhaungbi),所以我折腾了一个简化版的模板引擎.可以实现数据绑定,三元表达式, for 循环和 if 判断.
如何实现三元表达式, for 循环和 if 判断,将在下一篇介绍.
HTML 模板
下面是我定义好的html 模板字符串。
var template = `
<div>
<span>
{{number}}
</span>
</div>
`;
这是我的数据
var scope ={
number:10
}
好了,现在怎么把数据渲染到模板上面呢?
很自然的想到 正则表达式
正则替换
第一步 ,可以使用字符串的replace 函数。
这是正则
var regex = /\{\{([A-Za-z_\$]+[A-Za-z0-9_\$]*)\}\}/g;
好了,现在编写一个函数,我把我的模板引擎就叫 SS。
var SS = (function() {
var regex = /\{\{([A-Za-z_\$]+[A-Za-z0-9_\$]*)\}\}/g;
var result = "";
var ss = {};
ss.Render = function(template, scope) {
result = template.replace(regex, function(a, b) {
b = b.trim();
return scope[b];
})
return result;
}
return ss;
})()
测试一下
SS.Render(template,scope);
这是结果
但是,仅仅渲染一级属性的模板引擎有什么用呢?
渲染多级属性
在这里,渲染多级属性还是分为两种。
- 变量属性 (不知道这么称是否准确,就是类似于 person.name)
- 数组属性 (数组元素,key 必须是数字类型)
这里,先解决变量属性
变量属性
首先,需要一个新的正则表达式
var regex = /\{\{([A-Za-z_\$]+(\.[A-Za-z_\$]+|[A-Za-z0-9_\$])*)\}\}/g;
正则写的很烂,如果发现错误希望不吝赐教
html 模板
var template =
`
<div>
{{title}}
<ul>
<li>{{item.name}}</li>
<li>{{item.age}}</li>
<ul/>
<div>
`
按照上面模板匹配的数据
var scope = {
title:"hello",
item:{
name:'pawn',age:15
}
}
渲染函数
ss.Render = function(template, scope) {
result = template.replace(regex, function($, $1) {
$1 = $1.trim();
var innerdata = scope;
var items = $1.split('.');
for (var i = 0; i < items.length; i++) {
innerdata = innerdata[items[i]];
}
return innerdata;
});
return result;
}
在这里考虑到元素的属性,所以将{{}} 中包含字符'.' 也匹配出来,再使用'.'分割,然后依次向下寻找
测试代码
var res = ss.Render(template, scope);
console.log(res);
这是结果:
貌似这个模板引擎已经具有雏形了
数组属性
在这里,要是正则能够匹配上[] ,而且里面必须是数字
var regex = /\{\{([A-Za-z_\$]+(\[\d+\]+|\.[A-Za-z_\$]+|[A-Za-z0-9_$])*)\}\}/g;
这个正则主要是匹配形如 items[0].name 类型.
变量名必须是字母下划线或者$ 符号打头,后面必须是 [],.[A-Za-z_$] 或者
[A-Za-z0-9_$]
如果正则有错,还忘各位不吝赐教.
形如,items[0].name.a.b 中,可以使用'.' 来分割字符串,然后进行迭代找到最终数据.
在每一次迭代中,可以使用 /[\d+]/.test(items[i]) 来判断是否包含'[]',如果包含,那么使用/[\d+]/循环匹配取出其中每一项.
总体代码就是这样
ss.Render = function (template, scope) {
result = template.replace(regex, function ($, $1) {
$1 = $1.trim();
var innerdata = scope;
var items = $1.split('.');
for (var i = 0; i < items.length; i++) {
var m;
if (/\[\d+\]/.test(items[i])) {
innerdata = innerdata[items[i].split('[')[0]];
var reNumber = /\[(\d+)\]/g;
while (m = reNumber.exec(items[i])) {
innerdata = innerdata[m[1]];
}
}
else {
innerdata = innerdata[items[i]];
}
}
return innerdata;
});
html 模板
var template =
`<div>
{{title}}
<ul>
<li>
name:{{items[0].name}}
<br />
age:{{items[0].age}}
<br />
sex:{{items[0].sex}}
</li>
<li>
name:{{items[1].name}}
<br />
age:{{items[1].age}}
<br />
sex:{{items[1].sex}}
</li>
<ul/>
<div>
`;
模板数据
var scope = {
title: "person list",
items: [{
name: 'pawn',
age: 21,
sex: 1
}, {
name: 'jk',
age: 30,
sex: 0
},]
}
测试
console.log(SS.Render(template, scope));
结果
结束
SS 模板中简单的数据绑定就已经实现.
在 SS 前端模板引擎.(二) 中会插入 三元表达式,for循环和if条件判断
SS - DIY一个前端模板引擎.(一)的更多相关文章
- DIY一个前端模板引擎.(一)
前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...
- Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
- JST(JavaScript Trimpath)前端模板引擎简介
JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...
- artTemplate-优秀的前端模板引擎
artTemplate-优秀的前端模板引擎 1.html中引入artTemplate的js文件: <script type="text/javascript" src=&qu ...
- 前端模板引擎doT.js的用法
简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js">< ...
- 前端模板引擎artTemplate.js
. 关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析,本文只探讨如何使用.初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串,此为ha ...
- jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
- 前端模板引擎doT.js的使用
前言 我们在做前端开发时,经常需要根据后台返回的json数据动态生成html并插入到页面中显示.最简单的方法就是通过jQuery去遍历数据拼接html,如以下: <script> var ...
- Java 前端模板引擎学习:thymeleaf 模板引擎
模板引擎接口 ITemplateEngine 一.后台数据与外部数据 1.处理后台数据 $表达式是个变量表达式,用于处理在 request parameters and the request, s ...
随机推荐
- 新入门node.js必须要知道的概念
一.对于一个刚入门node.js的朋友来说,一定要了解一些基础概念: 今年我正式进入社会后,发现自己所知道的IT方面的知识,真的只是牛毛,原来人外有人,山外有山,还需要继续努力.下面是一些我的自学习心 ...
- django 在字符串[str(list)]中精确查找
1.问题描述 1.1表结构 1.2问题 ref_list为id列表的字符串,需要从ref_list中找出包含指定id的数据(eg id=8).如果实用models.objects.filter(ref ...
- Unity之CharacterController 碰撞问题总结
CharacterController 不会受到scene的重力影响,自带物理碰撞检测,在脱离导航网格的应用场景下(比如飞行),是很有优势的Unity原生工具组件.如果在复杂的应用场景里,会有多种CC ...
- apache配置反向代理
http.conf 去掉前面的#号 LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/ ...
- FAT32 FAT区__FAT表解析
一. FAT 表概述 位置: 紧跟在文件系统的“保留区”之后 : 有两个数据结构完全相同的FAT(FAT,File Allocation Tbale 文件分配表)组成. 作用: FAT表项,描述文件系 ...
- 【腾讯Bugly干货分享】WebP原理和Android支持现状介绍
本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/582939577ef9c5b708556b0d 1.背景 目前网络中图片仍然是占 ...
- S1293和S2220KTV项目结束
1.界面原型(前台的界面搭建一下) 2.数据库 3.架构设计 4.约定的文件抽取 2015年7月20日下午 歌星点歌三界面的联动,数据动态加载 01.点击第一个LIstView,弹出第二个ListVi ...
- Ubuntu系统字体安装
用惯了Windows,刚转到Ubuntu时总感觉字体显示没那么亲切,尤其是中文字体,在网页上显示特别怪.有些软件对中文字体的支持也不好,WebStorm中的Git logs中文也显示乱码.把系统语言设 ...
- Module Zero之权限管理
返回<Module Zero学习目录> 概览介绍 角色权限 用户权限 概览介绍 Module-Zero实现了ABP授权系统的IPermissionChecker接口.这篇文章中,我们将会看 ...
- Ubuntu 14 安装 .Net Core
.Net Core的安装包的分发地址如下: https://apt-mo.trafficmanager.net/repos/dotnet-release/pool/main/d/ 方法一: 可以分别手 ...