资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/template7入门教程及对它的一些看法

template7入门教程及对它的一些看法

kaka / 1730人阅读

摘要：是的内置模板引擎，在此之前使用过，不过刚刚打开看了下，已经停止更新，并且将要被所替代。如果需要进行一些条件判断，则使用。我们就主要说一下不常用的或者其他模板引擎里没有的一些功能。

template7是framework7的内置模板引擎，在此之前使用过jquery-tmpl，不过刚刚打开github看了下，已经停止更新，并且将要被JsRender所替代。妹的，JsRender又是什么鬼啊？扯远了，之前听过别人关于jquery-tmpl模板引擎的技术分享，它的源码加上一堆注释才100多行。在此之前模板给我的概念是jsp那种，要与java后端一起配合使用的，后端用数据模型把值传到前台，前台再通过${}获取值。如果需要进行一些条件判断，则使用jstl。如果前台要异步局部刷新页面，则用ajax来实现，返回的数据以拼字符串的方式把DOM嵌入到原来的页面，但是拼字符串这种方式实在坑爹，不仅写来痛苦，维护起来也痛苦。后来就使用js动态添加HTML，然后再用js把数据填充进去。写法有以下两种：

  
    
  var template = document.getElementById("theTemplate").innerHTML ;

或：



var template = document.getElementById("theTemplate").value ;

这种写法优点是：

比拼字符串优雅很多

浏览器不会读取到就渲染，所以里面的img的src也不会自动获取

缺点：

script标签里面不能直接写变量，又需要频繁的操作修改DOM。

可能是基于以上的缺点，引入了jquery-tmpl模板引擎，但我觉得前端模板的真正意义在于前后端分离，即无法通过controller把数据发送到view，只能以接口请求的形式得到数据，但是HTML本身又没有jstl或freemarker那样获取变量或者进行if判断、each循环的功能，所以，需要有一种工具来进行功能的替代，这时前端模板引擎纷纷出现，五花八门，像我们项目中有用到的underscore.js内置的模板引擎，但是那个功能比较单一，毕竟模板引擎只是他的一部分，功能够用就好。
而我们今天要说的template7，则是一个功能更为强大，更为全面的模板引擎，官方说它执行速度也很快，但是到底快不快，比哪些快，我没去研究，有兴趣的可以自己拿几种模板引擎对比下。

Template7还嵌入了handlebars的表达式{{#}}


  
    
    {{#each items}}
    
  • 
      
    
        
    {{title}}
    
      
    
    
    • 
    {{/each}}

其实个人不喜欢一个模板搞几种表达式，不过猜测作者应该是考虑到在多种情况下都可以使用，即{{}}可能在当前的上下文中有了其他的用法或者含义，如果我模板也请也使用这个就会产生冲突，至于能有什么用法，不要问我，我不知道，但我知道jquery-tmpl模板中有两种取变量值的写法，${}和{{=}}，${}的写法是和freemarker、jsp等模板的取值方法是一样的，所以会产生混淆，所以一般用{{=}}。

模板中我们经常能见到的方法，这里就简单的一笔带过，相信看官网的介绍会更加明了。我们就主要说一下不常用的或者其他模板引擎里没有的一些功能。

Template7有以下表达式语法:

Variables



{{title}} - plain variable. Outputs "title" variable in current context


{{../title}} - plain variable. Outputs "title" variable in parent context


{{../../title}} - plain variable. Outputs "title" variable in parent context of parent context


{{this}} - plain variable. Outputs variable equals to current context


{{person.name}} - plain variable. Outputs variable equals to "name" property of "person" variable in current context


{{../person.name}} - plain variable. The same but for parent context


{{@index}} - access to additional data variable. Such data variables could be used in helpers



Block expressions



{{#each}} - begin of block expression


{{else}} - begin of block inverse expression (where supported)


{{/each}} - end of block expression


{{#each reverse="true"}} - begin of block expression with passed reverse:true hash arguments



Helpers 
Helpers could be plain expressions and block expressions:


{{join myArray delimiter=", "}} - execute "join" helper and pass there "myArray" variable of current context and delimiter:", "hash    argument

以上比较少见的是{{../title}},{{this}},{{person.name}}，{{@index}}这几种写法，那我们就举个栗子（非糖炒）说一下：



 var context = {
                firstName: "John",
                lastName: "Doe",
                arr:  [
                    {
                    sex: "boy",
                    birthday:"1991-1-1"
                    },
                    {
                        sex: "girl",
                        birthday:"1991-2-2"
                    }
                ]
            };
    
输出如下：        
Hello, my name is John Doe
boy=======1991-1-1=======John
girl=======1991-2-2=======John
----------------
girl=======1991-2-2
boy=======1991-1-1

到这里想必大家都已经看明白了吧，如果写成下面这样，

{{#each arr}}
    
  • {{sex}}======={{birthday}}======={{firstName}}
    • 
{{/each}}

    {{firstName}}是无法取到值得，因为当前一级是arr里面，往上一级才能或取到值。

    第二个：

    

var context = {
                people: ["John Doe", {test:"test"}],
                person: {
                    name: "虚空假面"
                }
            };
//输出结果：
Here are the list of people i know:
0======== ********John Doe
1======== test ********[object Object]
虚空假面

    下面说一说内置的一些辅助方法：

    {{join myArray delimiter=", "}}

    这个也是很少见到，有什么用，怎么用？
    官方是这么说的：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

    其实两者的作用也是一样的，都是把数组对象转成字符串，并用指定符号隔开。

    {{#each}}...{{else}}...{{/each}}

    之前用过{{#if}}...{{else}}...{{/each}},但是见到{{#each}}...{{else}}...{{/each}}感觉一脸懵逼
    看栗子吧：

    Car properties:
    

      
    {{#each props}}
    
    • {{@key}}: {{this}}
      • 
    {{else}}
    
    • No properties
      • 
    {{/each}}

    

    obj:
    

      
    {{#each obj}}
    
    • {{@key}}: {{this}}
      • 
    {{else}}
    
    • No properties
      • 
    {{/each}}

    

    exp:
    

      
    {{#each exp}}
    
    • {{@key}}: {{this}}
      • 
    {{else}}
    
    • No properties
      • 
    {{/each}}

    
var context = {
                props: {
                    power: "150 hp",
                    speed: "200 km/h",
                },
                obj: {},
                exp:false
            };

输出：
Car properties:
power: 150 hp
speed: 200 km/h

obj:
No properties

exp:
No properties

    这下明白了吧，其实他就下面这种形式的缩写。

      
    {{#if obj}}
        {{#each obj}}
        
    • {{@key}}: {{this}}
      • 
        {{/each}}
    {{else}}
        
    • No properties
      • 
    {{/if}}

           
    {{#unless}}...{{else}}...{{/unless}}

    这个跟if else相反，没什么好说的，感觉有些鸡肋，有了if else还造这玩意干啥？不懂

    {{#with}}...{{/with}}

    这个跟{{#each}}...{{/each}}差不多，也是个鸡肋，对比栗子如下：

        
    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",
                    }
                };
    输出：
with
Car has 150 hp power and 200 km/h maximum speed

each
Car has 150 hp power
Car has 200 km/h speed  
    {{#variableName}}...{{/variableName}}
    If you pass a block expression with helper name that is in the
    expression context, then it will work like {{#each}} helper for this
    context if it is an Array, and will work like {{#with}} helper if it
    is an Object:

    以上是官方的解释，也就是根据传入数据的类型是对象还是数组自动的去执行。

    数组：
    
    
      
        {{#people}}
        
    • {{name}} - {{age}} years old
      • 
        {{/people}}
    
    
    
    对象：
    
    {{#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 old
Mark Johnson - 21 years old

对象：
Car has 150 hp power and 200 km/h maximum speed

其他
Friends

    这个方法看起来挺好用，但是我觉得会导致程序读起来不明确，出了错也不容易排查，还是觉得鸡肋。

    {{escape}}

    This plain helper returns escaped HTML string. It escapes only the following characters: < > " &

    这个方法用来把几个特定的字符< > " &转码成HTML字符串，目前我还没想到在什么场景下需要转码。

    {{title}}
    

    {{escape body}}
    

{
  title: "Paragraphs",
  body: "We need to use 
     tags to add paragraphs in HTML",
}


    Paragraphs
    

    We need to use 
     tags to add paragraphs in HTML
    {{js "expression"}}

    js表达式，我觉得这个方法还是比较有用的，之前曾遇到一个问题，通过API后台传过来一堆内容，然后我把它全部填到模板里，但是，这些数据里有些内容，比如文件大小，传过来是字节的，我需要根据大小转成KB,MB,GB等单位，这一步还好，但是计算出来往往小数点后好多位，比如3.222222MB,模板当时用的jquery的，当时就懵逼了，只能去找后端。但是如果模板能够用js表达式的话，这个问题就能解决了。

    {{title}}
    

    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
    {{#js_compare "expression"}}...{{/js_compare}}

    在我看来还不如if else用的顺手，鸡肋

    {{title}}
    
    
    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)

    name - string - helper name
    helper - function - helper function to handle passed context

    还有几个不常用的方法，就不在说了，有兴趣自己去官网看一下。
    总的来说，感觉template7里面重复的东西太多，之前有看过jquery-tmpl的源码才不到100行，underscore.js内置的模板好像70行以内。而它500行左右，搞了一堆七七八八的内容，但真正平常用到的只是少部分，如果让我用的话，我可能会去掉里面的一些内容再用，或者直接选用更加精简的模板引擎。
    暂时先写到这里，有时间，再补充一点对源码的认识。

    GPU云服务器 云服务器 它的访问地址为 看法 阿里云怎么布置它的服务器的 你的看法

    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

    转载请注明本文地址：https://www.ucloud.cn/yun/49876.html

    相关文章

    • template7入门教程及对它的一些看法

      摘要：是的内置模板引擎，在此之前使用过，不过刚刚打开看了下，已经停止更新，并且将要被所替代。如果需要进行一些条件判断，则使用。我们就主要说一下不常用的或者其他模板引擎里没有的一些功能。 template7是framework7的内置模板引擎，在此之前使用过jquery-tmpl，不过刚刚打开github看了下，已经停止更新，并且将要被JsRender所替代。妹的，JsRender又是什么鬼啊...

      Developer 评论0 收藏0

    • 前端常用插件、工具类库汇总

      摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。 本人微信公众号：前端修炼之路，欢迎关注 本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。 另外，感谢白小明，文中很多的工具来源于此。 弹出框 layer：http://layer....

      GitCafe 评论0 收藏0

    • Java内存模型中volatile的内存语义及对同步的作用

      摘要：一接触内存模型中的实例静态变量以及数组都存储在堆内存中，可在线程之间共享。所以，在编码上实现锁的内存语义，可以通过对一个变量的读写，来实现线程之间相互通知，保证临界区域代码的互斥执行。 原文发表于我的博客 volatile关键字:　使用volatile关键字修饰的的变量，总能看到任意线程对它最后的写入，即总能保证任意线程在读写volatile修饰的变量时，总是从内存中读取最新的值。以下...

      QLQ 评论0 收藏0

    • 软件开发入门学习的个人看法。

      摘要：兴趣最后该说说的就是兴趣问题如果你能对它真正感兴趣如果要从事软件开发又没兴趣的话赶紧先培养兴趣去对看技术资料就想别人看武侠小说看球赛一样的话再配合上面提到的几点踏实先专后广基础扎实相信在这一行多少是可以做点东西出来的 　　踏实 　　偶然在网上看到《由C#风潮想起的－给初学编程者的忠告》一文. 其中一个角度：避免浮躁，倡导踏实的学习方法，我是很认同的，但总觉该文作者标题-给初学编程者的忠...

      wh469012917 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    kaka

    男|高级讲师
    我要私信

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <