template7入门教程及对它的一些看法
template7是framework7的内置模板引擎,在此之前使用过jquery-tmpl,不过刚刚打开github看了下,已经停止更新,并且将要被JsRender所替代。妹的,JsRender又是什么鬼啊?扯远了,之前听过别人关于jquery-tmpl模板引擎的技术分享,它的源码加上一堆注释才100多行。在此之前模板给我的概念是jsp那种,要与java后端一起配合使用的,后端用数据模型把值传到前台,前台再通过${}获取值。如果需要进行一些条件判断,则使用jstl。如果前台要异步局部刷新页面,则用ajax来实现,返回的数据以拼字符串的方式把DOM嵌入到原来的页面,但是拼字符串这种方式实在坑爹,不仅写来痛苦,维护起来也痛苦。后来就使用js动态添加HTML,然后再用js把数据填充进去。写法有以下两种:
![超级产品经理](https://segmentfault.com/a/close.gif) var template = document.getElementById("theTemplate").innerHTML ;
或:
![超级产品经理](https://segmentfault.com/a/close.gif) var template = document.getElementById("theTemplate").value ;
这种写法优点是:
缺点:
可能是基于以上的缺点,引入了jquery-tmpl模板引擎,但我觉得前端模板的真正意义在于前后端分离,即无法通过controller把数据发送到view,只能以接口请求的形式得到数据,但是HTML本身又没有jstl或freemarker那样获取变量或者进行if判断、each循环的功能,所以,需要有一种工具来进行功能的替代,这时前端模板引擎纷纷出现,五花八门,像我们项目中有用到的underscore.js内置的模板引擎,但是那个功能比较单一,毕竟模板引擎只是他的一部分,功能够用就好。
而我们今天要说的template7,则是一个功能更为强大,更为全面的模板引擎,官方说它执行速度也很快,但是到底快不快,比哪些快,我没去研究,有兴趣的可以自己拿几种模板引擎对比下。
Template7还嵌入了handlebars的表达式
其实个人不喜欢一个模板搞几种表达式,不过猜测作者应该是考虑到在多种情况下都可以使用,即可能在当前的上下文中有了其他的用法或者含义,如果我模板也请也使用这个就会产生冲突,至于能有什么用法,不要问我,我不知道,但我知道jquery-tmpl模板中有两种取变量值的写法,和,的写法是和freemarker、jsp等模板的取值方法是一样的,所以会产生混淆,所以一般用。
模板中我们经常能见到的方法,这里就简单的一笔带过,相信看的介绍会更加明了。我们就主要说一下不常用的或者其他模板引擎里没有的一些功能。
Template7有以下表达式语法:
以上比较少见的是,,,这几种写法,那我们就举个栗子(非糖炒)说一下:
var context = { firstName: 'John', lastName: 'Doe', arr: [ { sex: 'boy', birthday:'1991-1-1' }, { sex: 'girl', birthday:'1991-2-2' } ] };输出如下: Hello, my name is John Doeboy=======1991-1-1=======Johngirl=======1991-2-2=======John----------------girl=======1991-2-2boy=======1991-1-1
到这里想必大家都已经看明白了吧,如果写成下面这样,
{{# each arr}}{{/each}}
是无法取到值得,因为当前一级是arr里面,往上一级才能或取到值。
第二个:
var context = { people: ['John Doe', {test:'test'}], person: { name: '虚空假面' } };//输出结果:Here are the list of people i know:0======== John Doe1======== test [object Object]虚空假面
下面说一说内置的一些辅助方法:
这个也是很少见到,有什么用,怎么用?
官方是这么说的:This plain helper will join Array items to single string with passed delimiter
Genres: {{join genres delimiter=", "}}{ genres: ['comedy', 'drama']}输出:Genres: comedy, drama
这个方法有木有很像js中的join()方法,
输出:George,John,Thomas
其实两者的作用也是一样的,都是把数组对象转成字符串,并用指定符号隔开。
之前用过,但是见到感觉一脸懵逼
看栗子吧:
Car properties:obj:exp:var context = { props: { power: '150 hp', speed: '200 km/h', }, obj: {}, exp:false };输出:Car properties:power: 150 hpspeed: 200 km/hobj:No propertiesexp:No properties
这下明白了吧,其实他就下面这种形式的缩写。
这个跟if else相反,没什么好说的,感觉有些鸡肋,有了if else还造这玩意干啥?不懂
这个跟差不多,也是个鸡肋,对比栗子如下:
with {{# with props}} Car has {{power}} power and {{speed}} maximum speed {{/with}} each {{# each props}} Car has {{this}} {{@key}} {{/each}} var context = { props: { power: '150 hp', speed: '200 km/h', } }; 输出:withCar has 150 hp power and 200 km/h maximum speedeachCar has 150 hp powerCar has 200 km/h speed
以上是官方的解释,也就是根据传入数据的类型是对象还是数组自动的去执行。
数组: 对象: {{# props}} Car has {{power}} power and {{speed}} maximum speed {{/props}} 其他 {{# title}} {{this}} {{/title}}people: [ { name: 'John Doe', age: 18 }, { name: 'Mark Johnson', age: 21 }],props: { power: '150 hp', speed: '200 km/h'},title: 'Friends'输出:数组:John Doe - 18 years oldMark Johnson - 21 years old对象:Car has 150 hp power and 200 km/h maximum speed其他Friends
这个方法看起来挺好用,但是我觉得会导致程序读起来不明确,出了错也不容易排查,还是觉得鸡肋。
This plain helper returns escaped HTML string. It escapes only the following characters:
这个方法用来把几个特定的字符转码成HTML字符串,目前我还没想到在什么场景下需要转码。
{{escape body}}{ title: 'Paragraphs', body: 'We need to use tags to add paragraphs in HTML',}js表达式,我觉得这个方法还是比较有用的,之前曾遇到一个问题,通过API后台传过来一堆内容,然后我把它全部填到模板里,但是,这些数据里有些内容,比如文件大小,传过来是字节的,我需要根据大小转成KB,MB,GB等单位,这一步还好,但是计算出来往往小数点后好多位,比如3.222222MB,模板当时用的jquery的,当时就懵逼了,只能去找后端。但是如果模板能够用js表达式的话,这个问题就能解决了。
Price: ${{js "this.price * 1.2"}}
{{js "this.inStock ? 'In Stock' : 'Not in stock'"}}
{{js "this.number.toFixed(2)"}}
title: 'iPhone 6 Plus',
price: 1000,
inStock: true,
number:2.22222
输出:
iPhone 6 Plus
Price: $1200
In Stock
2.22
在我看来还不如if else用的顺手,鸡肋
Price: ${{price}} {{# js_compare "this.color === 'white' && this.memory > 16"}}Not in stock{{else}}In stock{{/js_compare}} {{# if "this.color === 'white' && this.memory > 16"}} Not in stock {{else}} In stock {{/if}}
title: 'iPhone 6 Plus',
price: 1000,
color: 'white',
memory: 32
iPhone 6 Plus
Price: $1000
Not in stock
Not in stock
此外,template7还支持添加、删除自定义helpers,即根据需要扩展自己需要的方法,感觉也没啥卵用
Template7.registerHelper(name, helper)
Template7.unregisterHelper(name)
- string - helper name - function - helper function to handle passed context还有几个不常用的方法,就不在说了,有兴趣自己去官网看一下。总的来说,感觉template7里面重复的东西太多,之前有看过jquery-tmpl的源码才不到100行,underscore.js内置的模板好像70行以内。而它500行左右,搞了一堆七七八八的内容,但真正平常用到的只是少部分,如果让我用的话,我可能会去掉里面的一些内容再用,或者直接选用更加精简的模板引擎。暂时先写到这里,有时间,再补充一点对源码的认识。#JavaScript、html#
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!