lighthouse

小巧的js模板引擎:Mustache简明教程

Mustache*是一款简单的由js编写的模板框架,如果你以前用过smarty或者简单知道它的使用方法就会很好理解它的使用方式。理论上可以将它使用在前端中或者node中,是一款很易于理解和使用的前端框架

下载源码

Mustache的代码可以在github中找到并下载(在这里),,,好吧我并没有研究明白怎么用npm自己compose,我选择了直接下载目录下的mustache.min.js,或者你也可以使用由bootcdn提供的CDN镜像来引用这个库,这里选了一个2.21的

<script src="//cdn.bootcss.com/mustache.js/2.2.1/mustache.min.js"></script>

其实大家也注意到一些诸如jquery之类的库,都会有两个文件给出来,一个是jquery.js,另一个是jquery.min.js,我看了一下这两个文件的区别,其实带.min.js的是经过压缩混淆的版本,体积也会比不带min的小一些,但是代码由于经过压缩混淆完全没有可读性,所以大家可以自己舍取

使用方法

下面这个例子演示了如何通过Mustache和jquery向页面中输出数据

<html>
    <head>
        <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="mustache.min.js"></script>
    </head>
    <body>
        <div id="main">
            <script>
                //页面加载完执行 这部分详见jq手册
                $(function(){
                    //待填充的数据
                    var data = {
                        'user_name' : 'techmoe'
                    };

                    //使用Mustache.render方法填充模板并追加进div#main
                    $('#main').append(Mustache.render('<div style="font-size:20px">Hello, {{user_name}}</div>', data));
                });
            </script>
        </div>
    </body>
</html>

输出

1518585002972

但是这么写有时看起来似乎不太规整,因为我们并不能把大量的html代码塞进js文件,所以我们可以用一种流行的方法把模板数据放到html中

<html>
    <head>
        <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="mustache.min.js"></script>
    </head>
    <body>
        <div id="main">

            <!-- 在html内创建模板 -->
            <script type="text/x-mustance" id="template-1">
                <div style="font-size:20px">
                    Hello, {{user_name}}
                </div>
            </script>


            <script>
                //页面加载完执行 这部分详见jq手册
                $(function(){
                    //待填充的数据
                    var data = {
                        'user_name' : 'techmoe'
                    };

                    //使用Mustache.render方法填充模板并追加进div#main
                    //这里通过jquery的html方法取得了模板的数据
                    $('#main').append(Mustache.render($('#template-1').html(), data));
                });
            </script>

        </div>
    </body>
</html>