美文网首页
javascript for jquery 简易模拟模板引擎

javascript for jquery 简易模拟模板引擎

作者: 丶梵天 | 来源:发表于2016-04-20 04:29 被阅读35次

    效果图:(随便找了张美女图片- -)


    Paste_Image.png
      <div id="app"></div>
    
      <script id="tpl" type="text/template">
        <h1>{{name}}</h1>
        <p>{{ age }}</p>
        <img src="{{img}}" alt="{{ alt }}" width="300">
      </script>
    
      <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
      <script>
        (function($) {
    
          var tmp = '';
          var template = $.trim($('#tpl').html());
          tmp = template.replace(/{{(|\s)name(|\s)}}/, 'zhangsan')
                        .replace(/{{(|\s)age(|\s)}}/, 23)
                        .replace(/{{(|\s)img(|\s)}}/, 'http://c.hiphotos.baidu.com/image/pic/item/79f0f736afc37931180c5620e9c4b74543a91156.jpg')
                        .replace(/{{(|\s)alt(|\s)}}/, '美女图片');
          $('#app').append(tmp);
          console.log(template);
    
        })(jQuery);
      </script>
    

    相关文章

      网友评论

          本文标题:javascript for jquery 简易模拟模板引擎

          本文链接:https://www.haomeiwen.com/subject/adyzlttx.html