前言:
或者说是根深蒂固的影响, 一直视MVC模式为web开发的圣经. 页面的渲染工作, 也是服务端的View这一层进行渲染工作的. 虽然后续的restful思潮, 稍微改变了我之前固执的思维, 但毕竟只是页面的局部更新, 不影响大局.
但在最近一次, 研究微信公众号图文页面的时候, 发现其语音/QQ语音的组件的渲染, 其实采用javascript渲染模板方案, 让我大吃一惊. 我想我实现是太落后了, 另一方面, 有人提出的,前端抢了后端开发的饭碗, 这句话, 并非妄言.
因此这几天空的时候, 对javascript端的渲染模板技术, 做下学习记录.
微信页面:
对于微信的语音(voice), 大致分析了下其流程.
1. 页面中抽取mpvoice的自定义标签
<mpvoice frameborder="0" class="res_iframe js_editor_audio audio_iframe" src="" name="" play_length="994000" voice_encode_fileid="MjM5MDMyMzg2MF8yNjU1NDY3ODY1"></mpvoice>
2. 提取pmvoice的属性信息, 渲染js模板
3. 生成audio标签, 并渲染播放组件
这样处理的方式, 使得服务端的页面模板以及处理, 更加地简化, 很多零碎的工作被移植到了前端.
artTemplate方案:
据说很多腾讯的产品线, 都使用该方案, 其性能非常的优越, 远超其他同类竞品, 因此我们也来简单讲下它.
先来看一个简单的sample例子:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
用来标识模板代码(view)的区域:
<script id="test" type="text/html"> </script>
轻松链接模板(view)和数据(model), 并输出内容
var html = template('test', data);
document.getElementById('content').innerHTML = html;
如果不使用渲染模板, 或许你就要使用javascript的字符串去拼接. 这样的话, javascript的逻辑代码和dom树的元素操作互相交互在一起, 导致js代码膨胀, 且难以维护和阅读.
总结:
完全的前后端分离, 可能在具体的实践过程中, 有些弯路和坎坷. 也不知道阿里在推行它的nodejs做中间层, 彻底分离它的服务和页面前端的尝试, 起到了什么样的效果. 至少在网上能看到很多关于这方面的技术思路和文章.
前端做页面的渲染, 其实是很好的一种思路, 可以大大减少服务端的业务编写开发量, 分离了展示和数据. 将来这个技术和思想, 会越来越被人们所接受吧.
本文暂时没有评论，来添加一个吧(●'◡'●)