前端模板选择

http://nuysoft.com/bak/templating.html

define(function(require,exports,module){
	
	var box = require("../../weixin/box.js");

        var html_cn_text  =   ["<div>.....</div>"];
        var html_en_text  =   ["<div>.....</div>"];
        var html_en_text  =   ["<div>.....</div>"];


        var checkDomExist = function(){


            var lang = box.getLang();
    
            switch(lang){
              case 'zh_cn' : 
                  html_text = html_cn_text;
                  break;
              case 'zh_tw' :
                  html_text = html_cn_text;
                  break;
              case 'zh_hk' : 
                  html_text = html_cn_text;
                  break;
              default :
                  html_text = html_en_text;
                  break; 
            }

        }

 checkDomExist();

 module.exports = $.extend({"checkDomExist" : checkDomExist},box);

})
define(function(require, exports, module) {
  var source = [ '<div class="container" id="js-index">',
     '<!--餘額頁[[-->',
     '<div class="main">',
         '<div class="ico-wrap">',
             '<span class="ico-money"><!--图标--></span>',
         '</div>',
         '<p class="tips-txt">_{indexTitle}</p>',
         '<p class="tips-cnt" id="balance"></p>',
         '<div class="form-line-btn">',
             '<a class="btn-opt btn-green js-draw-index" >_{withdraw}</a>',
         '</div>',
         '<p class="tips-redpacket">',
             '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAqCAYAAADbCvnoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAqFJREFUeNrslz1oFEEUx2eHVQNBgkokhIsSFAKS2NpYiATRKhBIYyEEDVeICBZi4weCaGGtIH40pogSE1JcQhAbMSTYJWUURCM5jAqHoEHMrf/JPW5nNzNze7uzdyv44HcsM7cz/3nvzbxZ5+tw/jBj7A7Yy5prX8AVFz/PQA/LhnW5VTGc+82eVyFNcxx/Lt96eUCE/+cVCNwmnqzDuaAPc6xvinKcsqyIa/TnQH7Ta5zb8Yg/VhsYAy20eEctqOKhj1LfbdAXGCyOuOB728ELcEj6xz2Th0aENHreCQrgoHKCqPi2AzwFx6W2V+CiSdAsuBUK3Rw4mTBge8BLMCS1LYFBsFErh66F3NgOpsE42BdDzABYBEdDYk6AEiuXmV5QpVOE7Dy4KoWP0Wregeegn3aNySOnwRswCTqlvgVwDBSVpwFOanlSJxT3U+Ax6FC8+wP8UbSLxG3VCH0ILoB1yQFMXvjWkAVdKELVSyEMTy6SfpcClZgPFLqRqhjdplS2BkV9oxAKYU/Ar4i5I1b9FpyjajBlmMMQMnl7q2036I4gSJxpa9reoKCqBtf4glrUdyK+abxjKh1NMx53JWl4x6aHboIjScVEE1R7kOt0iBaqxTi1kNW2S+CGtPtmtxRj64L02z8P7obaOqiI5uocK7GHzoD7mnq2n0S12/eQekUHwKMaxbWHcqsh2/49lRJTts+Dy41M6gcUtg1F3yJd6H6mI0i/7UfpBvhbalumu1IpvXPIbBN0rRDe+ET35bUkA7qRj3v9lp2hEK2ClaRlyGV27HVjiqutQlvHu26sgaN+MMZYhJtoxTphCbyZLIfCwizcn+wktcWL3D92hf0vKIOCXMXXZtM9tJohBxU5fXsXMyDmMzjreJ6XqRz6K8AAbDunKoioWMMAAAAASUVORK5CYII=" class="ico-img">',
             '<a href="#" id="go-luckymoney">_{go-luckymoney}</a>',
         '</p>',
     '</div>',
     '<!--餘額頁]]-->',
     '<div class="tips-link">_{tips-link}',
     '</div>',
 '</div>',
 '<!--弹窗：参考公共模块\inc\html\mod_pop_tips.shtml-->',
 '<div class="pop-tips balance-pop-tips" id="balance_tips_container">',
     '<div class="pop-tips-main">',
         '<a class="pop-btn-close" id="balance_tips_close"><!--关闭按钮--></a>',
         '<div class="pop-tips-cnt">',
             '<p>_{pop-tips-cnt}</p>',
         '</div>',
     '</div>',
 '</div>'].join("");
  return source;
})
//app.js
//引入
$.myspeed = require("../../../../g/js/mobile/global/hkwallet/myspeed.js");
//配置
$.myspeed.init({demainId_1 : "21370",demainId_2 : "1"},{basePerfId:"3"});


//其它页面
 var Detail = {
        title: '零錢详情',
    	body : tpl,
    	bodyClass:'rec-record-detail',
    	pageId : 4,//测速 
        init : function(){//增加测速点
            $.myspeed.addSpeed(this);
        },
        afterinit:function(){//上报
            $.SPA.emit("sendSpeed",this);
        }

};

//初始化&发送

$.mystat.init('hkwallet.balance.view.');

//发送
$.mystat.send('hkwallet.balance.init.charge');

Title Text

{
    "retcode": "0",
    "retmsg": "OK",
    "current_page": "1",
    "transactions": [
        {
            "amount_in_cent": "10",
            "bank_name": "0",
            "create_time": "1471348514",
            "currency_code": "HK\x24",
            "datetime": "0",
            "description": "",
            "instrument": "BALANCE",
            "merchant": "lowinwu2",
            "merchant_id": "o5PXlshcsO",
            "pay_state": "2",
            "payrecord_id": "1010013000000501201608160020585494",
            "product_desc": "",
            "transfer_type": "pay",
            "type": "transfer"
        },
        {
            "amount_in_cent": "1",
            "bank_name": "",
            "create_time": "1470815513",
            "currency_code": "HK\x24",
            "datetime": "1470815513",
            "description": "",
            "instrument": "CREDITCARD",
            "merchant": "\x25E6\x2588\x2591\x25E4\x25BB\x25AC\x25E9\x2583\x25BD\x25E6\x2598\x25AF\x25E8\x2587\x25AA\x25E5\x25B7\x25B1\x25E6\x2583\x25B3\x25E6\x25B3\x2595\x25E7\x259A\x2584\x25E5\x25A3\x25AB\x25E5\x258A\x259B\x25E9\x2587\x258F\x25E5\x2592\x258C\x25E8\x25B0\x2590\x25E7\x25A4\x25BE\x25E4\x25BC\x259A",
            "merchant_id": "3000000101",
            "pay_state": "0",
            "payrecord_id": "3000000101201608101038824047",
            "product_desc": "",
            "transfer_type": "",
            "type": "luckymoney"
        },
        {
            "amount_in_cent": "10",
            "bank_name": "0",
            "create_time": "1470297633",
            "currency_code": "HK\x24",
            "datetime": "1470387002",
            "description": "luckymoney",
            "instrument": "BALANCE",
            "merchant": "WeChat\x25E5\x2588\x25A9\x25E6\x2598\x25AF",
            "merchant_id": "3000000101",
            "pay_state": "7",
            "payrecord_id": "1010013000000101201608040020511762",
            "product_desc": "luckymoney",
            "transfer_type": "",
            "type": "Payment"
        },
        {
            "amount_in_cent": "17",
            "bank_name": "",
            "create_time": "1469763685",
            "currency_code": "HK\x24",
            "datetime": "1469763685",
            "description": "",
            "instrument": "CREDITCARD",
            "merchant": "\x25E5\x25A7\x259A\x25E5\x2585\x25B5",
            "merchant_id": "3000000101",
            "pay_state": "0",
            "payrecord_id": "3000000101201607291038291214",
            "product_desc": "",
            "transfer_type": "",
            "type": "luckymoney"
        },
        {
            "amount_in_cent": "5",
            "bank_name": "",
            "create_time": "1469618248",
            "currency_code": "HK\x24",
            "datetime": "1469618248",
            "description": "",
            "instrument": "CREDITCARD",
            "merchant": "\x25E6\x259D\x258E\x25E5\x25B8\x2585",
            "merchant_id": "3000000101",
            "pay_state": "0",
            "payrecord_id": "3000000101201607271038221415",
            "product_desc": "",
            "transfer_type": "",
            "type": "luckymoney"
        },
        {
            "amount_in_cent": "1",
            "bank_name": "",
            "create_time": "1469616578",
            "currency_code": "HK\x24",
            "datetime": "1469616578",
            "description": "",
            "instrument": "CREDITCARD",
            "merchant": "\x25E5\x25A7\x259A\x25E5\x2585\x25B5",
            "merchant_id": "3000000101",
            "pay_state": "0",
            "payrecord_id": "3000000101201607271038217535",
            "product_desc": "",
            "transfer_type": "",
            "type": "luckymoney"
        },
        {
            "amount_in_cent": "10",
            "bank_name": "",
            "create_time": "1469611166",
            "currency_code": "HK\x24",
            "datetime": "1469611166",
            "description": "",
            "instrument": "CREDITCARD",
            "merchant": "lowinwu2",
            "merchant_id": "3000000101",
            "pay_state": "0",
            "payrecord_id": "3000000101201607271038214353",
            "product_desc": "",
            "transfer_type": "",
            "type": "luckymoney"
        },
        {
            "amount_in_cent": "600",
            "bank_name": "0",
            "create_time": "1469609207",
            "currency_code": "HK\x24",
            "datetime": "0",
            "description": "",
            "instrument": "BALANCE",
            "merchant": "lowinwu2",
            "merchant_id": "o5PXlshcsO",
            "pay_state": "5",
            "payrecord_id": "1010013000000501201607270020471404",
            "product_desc": "",
            "transfer_type": "pay",
            "type": "transfer"
        },
        {
            "amount_in_cent": "8",
            "bank_name": "",
            "create_time": "1469418838",
            "currency_code": "HK\x24",
            "datetime": "1469418838",
            "description": "",
            "instrument": "CREDITCARD",
            "merchant": "Jing\x25E9\x259D\x2593",
            "merchant_id": "3000000101",
            "pay_state": "0",
            "payrecord_id": "3000000101201607251038102362",
            "product_desc": "",
            "transfer_type": "",
            "type": "luckymoney"
        },
        {
            "amount_in_cent": "10",
            "bank_name": "0",
            "create_time": "1469152352",
            "currency_code": "HK\x24",
            "datetime": "1469242202",
            "description": "luckymoney",
            "instrument": "BALANCE",
            "merchant": "WeChat\x25E5\x2588\x25A9\x25E6\x2598\x25AF",
            "merchant_id": "3000000101",
            "pay_state": "7",
            "payrecord_id": "1010013000000101201607220020450530",
            "product_desc": "luckymoney",
            "transfer_type": "",
            "type": "Payment"
        }
    ]
}

前端模板选择

1、Embedded JavaScript Templates (micro template)

      基于原生 JS 语法，解析简单、渲         染性       能接近极限；书写略烦，容易导         致模板中出现过多的业务代码而失控。---开发接入方便

 

2、Logic-less Templates (mustache)

     基于自定义语法，解析复杂、渲染性能不一---开发接入不利

语法，定义模板书写方式

前端模板选择

Mustache

独有语法结构：{{}}

{{#keyName}} {{/keyName}}

以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染，例如改写下 Demo 中的 tpl：


var tpl = '{{#address}} <p>{{street}},{{city}},{{state}}</p> {{/address}}';
var html = Mustache.render(tpl, data);

//输出：
<p>1 Infinite Loop Cupertino</br>,California,CA</p>

前端模板选择

Micro-Templating

实现方式

new Function()  执行数组中存放的每个变量
with()
--低性能		 Introduce the data as local variables using with(){}
reg new RegExp(s + "=(.+?)" + e , "g"), // /<%=(.+?)%>/g
str.replace .replace(reg, "',$1,'")
p p.push("","","") 
(function(obj
/**/) {
var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('     
            <li class="amt">                     <!--交互说明：当金额为收入时，绿色标识，在.text后加入income-->                     <span class="tit">',sincoming,'</span><span class="text ',paynumClass,'">',cur_type,' ',paynum,'</span>                 </li>                 <li>                     <span class="tit">',stype,'</span><span class="text">',type,'</span>                 </li>                 <li>                     <span class="tit">',stime,'</span><span class="text">',trade_time,'</span>                 </li>                 <li>                     <span class="tit">',stransaction,'</span><span class="text">',listid,'</span>                 </li>                 <li>                     <span class="tit">',snote,'</span><span class="text">',memo,'</span>                 </li>             ');}return p.join('');
})

? print有什么用-todo

前端模板选择

Underscore Templating

源自 Micro-Templating

实    现 ：new Function() + with()

不同点 ：加入自己循环函数

前端模板选择

EJS

方式一：

new EJS({ text: "Hello, <%= name %>" }).render({ name: "Jack" });  


方式二：

// in template.ejs  
  Hello, <%= name %>  
  
// in JS file  
  new EJS({ url: "template.ejs" }).render({ name: "Jack" });  
// 返回： Hello, Jack

源自 Micro-Templating

new Function() + with()

前端模板选择

artTemplate

方式一：

new EJS({ text: "Hello, <%= name %>" }).render({ name: "Jack" });  


方式二：

// in template.ejs  
  Hello, <%= name %>  
  
// in JS file  
  new EJS({ url: "template.ejs" }).render({ name: "Jack" });  
// 返回： Hello, Jack

源自 Micro-Templating

new Function() + with()

前端模板选择

aceTemplate

方式一：

new EJS({ text: "Hello, <%= name %>" }).render({ name: "Jack" });  


方式二：

// in template.ejs  
  Hello, <%= name %>  
  
// in JS file  
  new EJS({ url: "template.ejs" }).render({ name: "Jack" });  
// 返回： Hello, Jack

源自 Micro-Templating

new Function() + with()

前端模板选择

By lowinwu

Made with Slides.com

前端模板选择

前端模板选择

  • 1,431

More from lowinwu