• 利用grunt+browserify预编译js模板文件,支持commonJS加载


      在使用undersocre.js的模板时,有个显著问题,就是要把html代码写到js文件里面,非常痛苦,一不留神写错了,导致各方面问题。

    而且,如果要修改模板,就会非常麻烦而且容易出错。

      有没有一种方法可以实现把模板文件放在单独文件里,用的时候直接加载过来呢?

      最初,我采用了seajs的text插件,或者requireJS的text插件来动态加载模板,感觉棒棒哒!

      但是,动态加载text,导致于每个模板都要发一次请求去加载(seajs优化过后可以合并),而且加载过来的是字符串,还要模板引擎

    执行后才能渲染数据,比较耗费性能。

      随着项目的迁移,我们开始放弃cmd和amd,觉得commonJS会更顺手,我们的模块化工具换成了browerify,静态打包编译的方式

    更快更好用,我们通过使用grunt去自动打包编译,然后,那个模板加载的问题也顺带得到了很好的解决,只用在配置任务的时候

    browserify:{
                coffee:{
                    files:[{
                        expand: true,
                        cwd: 'coffee/src',
                        src: '**/*.coffee',
                        dest: 'bin',
                        ext: '.js'
                    }],
                    options:{
                        transform:['coffeeify','node-underscorify']
                    }
                }
    }
    

      

    使用:
    tpl.html
    
    <div><%=name%></div>
    <div><%=action%></div>
    
    main.js
    
    tpl=require('./tpl.html');
    tpl({name:'li sa',action:'eat'});
    

      模板的规则和undercore.js的template方法一样

  • 相关阅读:
    【NodeJs】Nodejs系列安装
    【webstrom+stylus】stylus在webstrom中的识别
    python基础:数据类型一
    python基础:流程控制案例:
    python基础:if判断与流程控制案例
    计算机基础与python入门
    Robot Framework-断言函数
    RF设置全局变量
    RF自定义系统关键字
    RF第二讲--Selenium2Library库的简单实用
  • 原文地址:https://www.cnblogs.com/lingtong/p/4742234.html
Copyright © 2020-2023  润新知