MVVM前后分离轻量级框架应用juicer和doT.js

前言

前后端开发分的越来越细化，为了方便前端工程师更好的调试后端工程师嵌套的代码，前后分离技术就出现了，简单理解其实就是Ajax异步将数据提供给JavaScript，由JavaScript进行迭代展现渲染成想要的效果，这样做还可以使页面数据异步化，页面展现时只需要加载页面结构及js、css、image等，而这些静态文件还可以通过CDN进行优化，缩短了打开页面白屏的时间，进一步加快了用户看到页面的速度，优点还是非常多的。

前端MVVM框架有很多Vue.js、Angular2.js、React.js、juicer.js(ali)、artTemplate.js(tencent)、doT.js等等有很多，各有优势，前三个属于重量级功能大而全，而我的需求只需要简单迭代即可，所以选择后三个轻量级的，推荐使用juicer.js是阿里的而且支持Node.js，语法不太抽象很容易理解。

无论那种框架实际应用时主要的功能就是循环、判断、输出这三个，下面我们根据日常需要撰写一下应用实例。

一、juicer的应用

官网地址：http://juicer.name/

1、基本语法

//变量输出${变量}
${var flag = "test"}//变量避免转义输出$${变量}//循环{@each}...{@/each}
{@each list as item}//do something...
     ${item.prop}
{@/each}
{@each list as item, index}//do something...
     ${index}//此处的index代表当前索引
{@/each}//判断{@if}...{@/if}
{@if ${item.prop == 'a'}}//do something...
{@else if}//do something...
{@else}//do something...
{@/if}//注释{# 内容}//辅助循环{@each i in range(m, n)}
{@each i in range(5, 10)}${i} //输出5 6 7 8 9
{@/each}//嵌套模板{@include tpl, data}

2、引入js文件

<script type="text/javascript" src="~/static/js/jquery/jquery-min.js"></script><!--可以不用jquery，使用默认js语法即可-->
<script type="text/javascript" src="~/static/js/juicer/juicer-min.js"></script>

3、设置自定义标签

不同开发语言可能导致对不同的模板符号编译错误，我们可以自定义模板符号规则

//页面加载后设置自定义标签
$(function () {juicer.set({'tag::operationOpen': '{*',     //操作标签-开'tag::operationClose': '}',     //操作标签-关'tag::interpolateOpen': '${',   //变量标签-开'tag::interpolateClose': '}',   //变量标签-关'tag::noneencodeOpen': '$${',   //禁止转义标签-开'tag::noneencodeClose': '}',    //禁止转义标签-关'tag::commentOpen': '{#',       //注释标签-开'tag::commentClose': '}',       //注释标签-关'cache': true,          //[默认开启]是否缓存模板编译结果，开启后会避免同一模板多次数据渲染时重复编译模板，减少编译模板所耗的时间'script': true,         //[默认开启]是否清除空白，清除模板中的空白，包括换行、回车等'error handling': true, //[默认开启]是否处理错误'detection': true       //[默认开启]是否检测变量是否定义，开启后如果变量未定义，将用空白字符串代替
    });
})

4、编写展示模版

<script id="tplAccountAll" type="text/template"><thead><tr class="bg-warning"><th class="text-center">账号</th><th class="text-center">现金余额</th><th class="text-center">冻结资金</th><th class="text-center">账号描述</th><th class="text-center">绑定手机</th><th class="text-center">绑定邮箱</th><th class="text-center">独立核算</th><th class="text-center">状态</th><th class="text-center">创建时间</th><th class="text-center">操作</th></tr></thead>
    {*each list as item}<tr><td class="text-primary">${item.AccountNo}</td><td class="text-right text-success">${item.Balance.toFixed(2)}</td><td class="text-right text-success">${item.FreezeBalance.toFixed(2)}</td><td class="text-center">${item.AccountDescription}</td><td class="text-center">${item.Mobile}</td><td class="text-center">${item.Email}</td><td class="text-center">${item.IsSelfFinanced}</td><td class='${item.Status == 1 ? "text-success" : "text-danger"} text-center'>${item.StatusName}</td><td class="text-center">${item.CreateTime}</td><td class="text-center">{*if item.AccountNo != item.CustomerNo}<a href="javascript:void(0)" onclick="updateStatus('${item.AccountNo}',${item.Status}, this)">[${item.StatusOperation}]</a>
            {*/if}<a href="~/AccountManage/GrantRuleToAccount?AccountNo=${item.AccountNo}" target="_blank">[分配权限]</a><a href="~/AccountManage/SetCreditLineLimit?AccountNo=${item.AccountNo}" target="_blank">[授信限额设定]</a><a href="javascript:void(0)" onclick="showPayBusInfo('${item.AccountNo}')">[查看授信余额]</a></td></tr>
    {*/each}
</script>

5、渲染模版展示内容

<script type="text/javascript">$(function () {$.post("/AccountManage/AjaxGetAccountListData", function (data) {data = { list: JSON.parse(data) };console.log(data);//获取模版var tplAccountAll = $("#tplAccountAll").html();//渲染数据var htmlContent = juicer(tplAccountAll, data);//显示内容$("#showAccountAll").html(htmlContent);});})
</script>

二、doT的应用

官网地址：http://olado.github.io/doT/

1、基本语法

{{= }} for interpolation 输出
{{ }} for evaluation 代码块
{{~ }} for array iteration 迭代
{{? }} for conditionals 条件
{{! }} for interpolation with encoding 编码输出
{{# }} for compile-time evaluation/includes and partials
{{## #}} for compile-time defines

2、引入js文件

<script src="jquery.min.js"></script>
<script src="doT.min.js"></script>

3、编写展示模板

<script id="tmpBuyAndBuy" type="text/x-dot-template">{{ if(it && it.length > 0){ }}<div class="guessTit"><div class="guessLine abs"></div><span class="abs w200">根据购物车的商品，为您推荐</span></div><div class="guseeBig"><p class="t2">90%的妈妈还买了以下商品</p></div><div class="guessLoveCon"><ul class="guessCon clearfix">{{ for(var i = 0; i < it.length; i++){ }}{{ var item = it[i]; }}<li><a href="{{=item.GoodsShowUrl}}"><div class="hotProImg rel"><img src="{{=item.GoodsImgUrl}}" alt="">{{?item.NationPic}}<div class="hotProflag abs"><img src="{{=item.NationPic}}" alt=""></div>
                            {{?}}</div><div class="gupt">{{=item.SellingPoint}}</div><div class="guessProTit gray">{{=item.GoodsName}}</div><div class="guessMoney clearfix"><span class="s1">￥<i>{{=item.GoodsPriceInteger}}</i>.{{=item.GoodsPriceDecimal}}</span><span class="s2">￥{{=item.MarketPrice.toFixed(2)}}</span></div></a></li>
                {{ } }}</ul></div>
    {{ } }}
</script>

4、渲染模版展示内容

<script type="text/javascript">var jsBuyAndBuy = jsBuyAndBuy || {};jsBuyAndBuy.GetData = function (goodsids) {if (goodsids) {$.post("/Cart/AjaxBuyAndBuy", { goodsIds: goodsids }, function (data) {//注入模板var evalText = doT.template($("#tmpBuyAndBuy").text());//填充内容$("#cntBuyAndBuy").html(evalText($.parseJSON(data)));//隐藏Loading$("#loadBuyAndBuy").hide();});}}
</script>

我这里只简单介绍一下使用方法，这些基本够我日常应用了，如果有更高难度的需求，还请查阅官方文档，此类模板使用方法都大同小异，学会一个其他的也就都会了，区别只有各自的语法标记不同而已。

转载于:https://www.cnblogs.com/taiyonghai/p/6635132.html

MVVM前后分离轻量级框架应用juicer和doT.js相关推荐

JEECG前后端分离UI框架实战抢先体验（ng2-admin+Angular4+AdminLTE+WebStorm）
JEECG前后端分离UI框架 (ng2-admin+Angular4+AdminLTE) 关键词: ng2-admin.Angular4.AdminLTE.Nodejs.Jeecg JEECG紧跟技术 ...
javaee互联网轻量级框架整合开发_企业开发：Spring框架的简易、高效切入篇
原文:http://blog.csdn.net/qq_15096707/article/details/72819930作者:梦小白介绍 Spring框架是个轻量级的Java EE框架.所谓轻量级, ...
8月31日下午3点半夏昕、林信良做客CSDN畅谈轻量级框架——Spring
活动预告: 8月31日下午3点半夏昕.林信良做客CSDN畅谈轻量级框架--Spring 活动链接地址:[url]http://news.csdn.net/n/20060824/93992.html[/ ...
php consult用法,YanPHP: YanPHP——一个为API开发而设计的高性能轻量级框架
YanPHP V0.2 Guide Documentation 这是一个为API开发而设计的高性能轻量级框架. 框架为你集成了一些常用的类库,让你开发更加便捷. 另外引入了Composer,可以让你更 ...
轻量级框架和重量级框架的区别
轻量级框架和重量级框架的区分并没有一个明确的定义,它是个相对概念,通常我们会依据启动资源多少.开发程度难易等进行区分. 一.从启动程序耗费资源来看,EJB(java bean),因为默认提供了EJB规 ...
盘点Python网页开发轻量级框架Flask知识（下篇）
点击上方"Python爬虫与数据挖掘",进行关注回复"书籍"即可获赠Python从入门到进阶共10本电子书今日鸡汤一曲新词酒一杯,去年天气旧亭台. ...
前后端分离的框架简记
前后端分离的框架前端 -> 后端视图 -> 数据视图 -> 控制器 -> 数据库人机交互&数据展示 -> c ->db 小程序框架视图 -api& ...
什么是轻量级框架，什么是重量级框架？
在项目初期定框架方案或者是寻思敏捷开发的时候,经常会看到轻量级.重量级等字眼,那么问题来了, 什么样的框架被叫做轻量级框架,什么样的是重量级框架呢? 1.我觉得最主要的衡量指标是以消耗的资源来决定.比 ...
实现 MVVM 类 Vue 迷你框架（五）
如何实现 MVVM 类 Vue 迷你框架(五) 上面几节课我们已经把数据代理,响应式处理搞完了,接下来需要做什么呢?当然是最难的一部分了,就是我们的编译模板. 使用到的dom编程方法 element. ...
前端轻量级框架amis入门(新手向)
amis入门最近有前端快速开发的需求,所以使用上了amis框架(百度的哦) mis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率. json文件如下: ...

MVVM前后分离轻量级框架应用juicer和doT.js

MVVM前后分离轻量级框架应用juicer和doT.js相关推荐

最新文章

热门文章