zoukankan      html  css  js  c++  java
  • 利用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方法一样

  • 相关阅读:
    初学Cocos2dx
    炸弹人NABCD分析
    求二维整数数组中最大联通子数组的和
    大道之简读书笔记1
    求首位相连二维数组最大子矩阵的和
    求首位相连一维数组最大子数组的和
    求二维数组最大子数组的和
    程序员修炼之道读后感3
    电梯调度需求分析
    课堂作业第四周课上作业二
  • 原文地址:https://www.cnblogs.com/lingtong/p/4742234.html
Copyright © 2011-2022 走看看