• javascript 模板


      今天想记录下对arttemplate模板的使用,哎,其实这玩意的兴起主要还是得从浏览器操作dom说起。如果修改浏览器的某一个dom节点就会引起文档流的重绘,然后这个重绘的耗时相当的大,是昂贵的开销。所以我们一般不愿意直接进行DOM操作,因为这个性能太差了,我们一般会采用字符拼接的方法来做,最后把整个字符串用innerHTML的方式插入,例如如下代码:

    1   var html='',data=["name:1","name:2"] ;
    2     html+='<ul>';
    3     for(var i=0,len=data.length;i<len;i++){
    4           html+='<li>'+data[i]+'</li>;
    5     }
    6     html+='</ul>';
    7    $(el).html(html);
     

     当页面越来越复杂了,你拼接的html的程序就越来越复杂了,而且有些朋友使用replace去替换,这玩意用不好的是相对慢一点的,所以有了各种模板,用的比较多的就是arttemplate,这玩意的源码不是很长,我看了一下主要就是解析语法生成一个render函数,并且这个是可以被缓存的,你可以做个试验,使用arttemplate加载一个id位id1的模板,然后你删除这个模板对应的<script type="text/html" id="id1"></script>然后你会发现你还可以正常的使用这个模板,哈哈。

      然后就是还支持开始结束标签的改写,其他的功能倒是没怎么使用,具体的语法类似JSP,PHP之类的,我也不喜欢重复,直接上github看就可以了。

      附上地址:http://aui.github.io/artTemplate/

      不过值得一提的是arttemplate的模板使用不止是可以写在html页面中用<script type="text/html" id="xxx" ></script>的方式使用,还可以直接传入一个字符串编译,如下:

    template.compile(source, options)
    
    //将返回一个渲染函数。演示
    
    template.render(source, options)
    
    //将返回渲染结果

      这种用法让我们可以把模板做成一个str变量,同时也可以放在tmpl里面通过ajax加载模板片段使用,同时有这样一个工具TmodJS,强大的工具啊,不仅自动化处理了模板的,并且可以包装成AMD模块化代码,这样可以减少模块化的时候分别请求js跟模板,一个请求就好了,而且有利于封装。

      好了,不扯了,该睡觉了。

  • 相关阅读:
    ecmall挂件开发实例二(转)
    ecmall 挂件开发实例一
    ecmall公告挂件分析(转)--此挂件写法已有更新的写法。
    centos下svn的主要常用命令(解决商城系统添加的文件无法自动更新至svn服务器)
    lbypmall虚拟主机的设置
    解决EditPlus的默认编码方式有关问题(转)
    php mysql 字符集(三) (转)
    php mysql apache字符集(二) (转)
    php mysql apache 的字符集
    Android学习笔记——文件路径(/mnt/sdcard/...)、Uri(content://media/external/...)学习
  • 原文地址:https://www.cnblogs.com/onedayof2010/p/4452092.html
Copyright © 2020-2023  润新知