基于Node、Mustache和Pjax的前端开发框架

目的

SOA化以及用户体验的提升

实现原理

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使用说明

需掌握一些基本表达式，详细功能根据需要去学习：

• {{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阻止链接的默认行为，将链接的url跳转转化为ajax请求，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或者中文

后续完善方向

目前页面渲染仍然是采用服务扔过来的完整的HTML片段的方式，后续可能会演进成后端将模板打包压缩统一返回前端保存，在页面渲染时，API只返回json数据，然后我们在前端使用这些json和模板去渲染HTML。这样可以避免不需要的带宽和数据传输损耗。