|
|
# 基于Node、Mustache和Pjax的前端开发框架
|
|
|
|
|
|
## 目的
|
|
|
SOA化以及用户体验的提升
|
|
|
|
|
|
## 实现原理
|
|
|
![框架示意图](https://dn-xuqi.qbox.me/framework-show.png)
|
|
|
|
|
|
1. Nodejs
|
|
|
基于Nodejs,前端开发可不再依赖于PHP的服务端执行环境。
|
|
|
|
|
|
2. Mustache
|
|
|
可运行在客户端和服务端的模板引擎。客户端向PHP服务端提供模板(views)文件,PHP服务端根据客户端提供的模板在服务端加数据渲染成HTML片段后传回客户端渲染页面。
|
|
|
|
|
|
3. pjax
|
|
|
**p**ushState + a**jax**
|
|
|
使用PushState和Ajax技术可以使原来点击链接后页面跳转的方式变成页面的无跳转局部刷新,极大的提升了用户体验。
|
|
|
|
|
|
## 目录结构及功能解释
|
|
|
目录结构:
|
|
|
├─layouts
|
|
|
├─public
|
|
|
· ├─css
|
|
|
· ├─img
|
|
|
· ├─js
|
|
|
· ├─lib
|
|
|
└─views
|
|
|
· ├─error
|
|
|
· ├─controller
|
|
|
· └─partials
|
|
|
· └─...
|
|
|
|
|
|
* layouts存放布局模板文件;
|
|
|
|
|
|
* public下存放一些公共资源css、img、js、lib;
|
|
|
|
|
|
* views存放页面的模板相关文件。*一般的页面模板*直接放在views目录下;*控制器*放在controller下;error存放404之类的*错误处理页面*;partials存放*页面小部件*,可以直接通过Handlebars的功能插入到页面中。
|
|
|
|
|
|
## Mustache简单使用指南
|
|
|
需掌握一些[基本表达式](http://www.iinterest.net/2012/09/12/web-template-engine-mustache/),详细功能根据需要去[学习](https://github.com/janl/mustache.js):
|
|
|
|
|
|
* {{key}}
|
|
|
|
|
|
* {{{key}}}
|
|
|
|
|
|
* {{#key-section}}{{/key-section}}
|
|
|
|
|
|
* {{^key-section}}{{/key-section}}
|
|
|
|
|
|
* {{.}}
|
|
|
|
|
|
* {{> partial}}
|
|
|
|
|
|
* {{! comments}}
|
|
|
|
|
|
|
|
|
使用方法:
|
|
|
|
|
|
//
|
|
|
<script id="tpl" type="x-tmpl-mustache">
|
|
|
<p>{{key}}</p>
|
|
|
</script>
|
|
|
|
|
|
//js
|
|
|
var tpl = $('#tpl').html(); //or var tpl='<p>{{key}}</p>';
|
|
|
Mustache.render(tpl, {
|
|
|
key: val
|
|
|
});
|
|
|
|
|
|
Ps:Node服务端通过`app.set('view engine', 'hbs');`设定视图引擎为handlebars(handlebars为Mustache的超集,使用上使用上述Mustache的基础语法即可),然后在controller中通过response.render('hbs-name', {//some key-val pairs})即可达到动态页面渲染的效果。
|
|
|
|
|
|
## Pjax简单使用指南
|
|
|
pajx通过ajax从服务器端抓取html并把html填充到需要变更内容的容器中,然后通过PushState更新页面URL。
|
|
|
|
|
|
原理很简单,基本使用方法也很简单,指定target和selector进行初始化即可`$(document).pjax(selector, container);`;
|
|
|
|
|
|
另外pjax提供了一些事件供我们使用,常用的有pjax:send和pjax:complete,这两个事件分别在pjax请求发送以及pjax完成时触发,能帮助我们加载或者隐藏loading图标。用法:
|
|
|
|
|
|
$(document).on('event-name', function(){
|
|
|
//Your function
|
|
|
});
|
|
|
|
|
|
jquery.pjax的包已经发布到spm,可以`spm install jquery-pjax --save`安装。
|
|
|
|
|
|
其余用法参见[Github](https://github.com/defunkt/jquery-pjax)或者[中文](http://i0011.com/2015/03/16/new-to-pjax/)
|
|
|
|
|
|
## 后续完善方向
|
|
|
目前页面渲染仍然是采用服务扔过来的完整的HTML片段的方式,后续可能会演进成后端将模板打包压缩统一返回前端保存,在页面渲染时,API只返回json数据,然后我们在前端使用这些json和模板去渲染HTML。这样可以避免不需要的带宽和数据传输损耗。 |
|
|
\ No newline at end of file |
...
|
...
|
|