构建多页的前后分离web项目（alpaca-spa的视图用法）-白红宇

本文用来介绍使用alpaca-spa构建多页的前后分离项目的js实现。

关于alpaca-spa的其他功能，请参考官方文档

Alpaca-spa.js是一款轻量的前端JS框架，提供前端路由功能，前端视图渲染功能，前端页面嵌套功能。目的是用来提高web项目的开发效率，前后端分离开发，同时使前端代码结构更加整洁。 Alpaca-spa.js 区别于其他框架的主要特点是轻巧灵活，移动端、PC端都适用，大小项目都适用，而且学习成本低，框架没有复杂的概念与特性，不依赖开发环境（如node.js等），都是最基本的JavaScript语法，也就是说读者只要有JavaScript语言基础，就可以很快学会使用 Alpaca-spa.js框架用来构建前端页面。

官方文档：

本文示例代码（oschina）：

示例代码（github）：

完整的前后分离项目示例：

1 简介

视图功能是Alpaca-Spa.js的核心功能，主要解决前端JavaScript实现页面嵌套，页面数据渲染，页面局部渲染等功能。使用alpaca-spa的View功能，可以轻松构建多页面前后分离结构，尤其是在开发后台功能时，非常实用。当然，使用alpaca-spa开发移动端h5网站,单页面结构网站也是非常不错的选择。使用视图功能需要配置web服务器，例如apache, nginx，node等。这里使用apache举例，假设你的网站根目录位于：

C:\www\

当然你可以配置apache的虚拟主机，将网站的根目录放在任意你喜欢的地方。

如果你们项目的前后端在同一个域名下面，也就是网站根目录前后端用的是同一个，那前端的代码一般不会直接放在根木目下面，在根目录下面建立一个叫 alpaca-spa或者叫其他名字的目录（只要不与后端路由冲突既可），例如将前端代码放到 alpaca-spa目录下面

一个简单的目录结构如下：

--C:\www\alpaca-spa\　 --main\　　  --controller\　　     index.js　　  --view\　　     --index\            index.html            index-2.html            index-3.html　　     --layout\            --part\               leftMenu.html            layout.html　　  main.js   index.html

1. 示例中的www是项目的根目录，应该将web服务器的根目录设置为此目录。2. alpaca-spa是前端项目的目录，目录下面有1个子目录，1个html文件。   main         main目录用来存放当前项目中所有main模块的文件。可以创建多个模块。   index.html   index.html用来做当前项目的入口文件3.index目录里面有两个目录controller，view，一个js文件   controller   用来存放main模块的控制器的js代码。里面有一个控制器js文件，index.js   view         用来存放main模块的视图部分的js代码。                示例中view目录里面有一个子目录index，用于存放index控制器中相关的模板，                本示例中，有三个模板：index.html，index2.html，index3.html                还有一个子目录layout，用于存放公共的布局信息，                layout目录中的layout.html是默认的布局模板文件                layout目录中的还有一个子目录part，用来存放页面中其他公共区域，例如菜单等   main.js      main.js是main模块的模块级别的js代码。                推荐在这个文件里面做模块的定义，例如：Alpaca.MainModule = {};

示例访问地址:

2 使用View

了解完上面的目录结构之后，我们来学习使用Alpaca.View()方法，参看下面的示例。

alpaca-spa/index.html 文件中的内容:

    
         alpaca-spa.2.1

alpaca-spa/main/main.js 文件中的内容:

/* 1 定义Index模块 */Alpaca.MainModule = {};

alpaca-spa/main/controller/index.js 文件中的内容:

/* 1 定义Main模块中的Index控制器 */Alpaca.MainModule.IndexController = {    //index动作，创建一个视图index    indexAction: function () {        //视图默认渲染到#content位置，可以通过参数中传递to字段改变渲染位置        //视图模板默认位于index/view/index/index.html,可以通过参数中传递template字段改变模块路径        //即：默认模板位置为：[模块名]/view/[控制器名]/[动作名].html        var view = new Alpaca.View({
    data:{
    desc:'我是一条数据，在controller中传递到view视图模版里面！'}});        //layout 布局视图        var layout = new Alpaca.Layout();        //part 部件视图，默认路由位于view/layout/part中，文件名默认与name属性相同        //part 的默认渲染位置与其name属性相同，当然也可以通过to属性指定        var part = new Alpaca.Part({
    name: 'leftMenu'});        //将part添加到layout中，part的默认渲染位置与其name属性相同，也可以通过to属性指定        layout.addChild(part);        //设置视图的layout        view.setLayout(layout);        //在view中，向layout中传递数据        view.setLayoutData({
    'layoutData': 666});        //在view中，向part中传递数据        view.setPartData({
    leftMenu: {
    'partData': 888}});        return view;    },    //index2动作，创建视图index2    index2Action: function () {        var view   = new Alpaca.View();        var layout = new Alpaca.Layout();        var part   = new Alpaca.Part({
    name: 'leftMenu'});        layout.addChild(part);        view.setLayout(layout);        view.setLayoutData({
    'layoutData': '666 - 2'});        view.setPartData({
    leftMenu: {
    'partData': '888 - 2'}});        return view;    },    //index3动作，创建视图index3    index3Action: function () {        var view   = new Alpaca.View();        var layout = new Alpaca.Layout();        var part   = new Alpaca.Part({
    name: 'leftMenu'});        layout.addChild(part);        view.setLayout(layout);        view.setLayoutData({
    'layoutData': '666 -- 3'});        view.setPartData({
    leftMenu: {
    'partData': '888 -- 3'}});        return view;    },};

alpaca-spa/main/index/view/index.html 文件中的内容:


     
       我是内容区域：当前显示的是index.html里面的内容 
     
我有一条数据:
{
    {= it.desc }}

alpaca-spa/main/index/view/index2.html 文件中的内容:


     
       我是内容区域：当前显示的是index2.html里面的内容

alpaca-spa/main/index/view/index3.html 文件中的内容:


     
       我是内容区域：当前显示的是index3.html里面的内容

在浏览器中访问:

点击按钮，可以看到内容区域切换到对应的页面了，整体布局layout、菜单leftMenu除了数据其他的都没有变化，

上面的示例中，我们创建了Main模块，index控制器，index动作，并且在indexAction中通过Alpaca.View()方法创建了一个视图，运行结果是视图模板中的内容被渲染到了页面的#content位置中。这就是Alpaca.View()的用途。

Alpaca.View()方法

Alpaca.View(option) 是一个用来创建视图页面的方法，接受一个对象参数option，参数option中可以包含以下字段：

option.data

数据对象，为渲染模板提供数据

例如：Alpaca.View({data:{name:'Alpaca-spa'}})

option.to

设置被渲染位置，默认位置是#content

例如：Alpaca.View({data:{name:'Alpaca-spa'},to:'#divId'})

option.template

指定渲染的模板文件。默认是所属模块view目录下所属controller同名目录下action同名的.html文件，即：默认模板位置为：[模块名]/view/[控制器名]/[动作名].html

如果需要改变视图模板，只需要这样写即可：template:'index2'，这样就会使用同名controller下的index2.html作为模板。

这是因为函数内部自动格式化了该参数，如果不想使用自动格式化功能，请使用notFormat参数，设置notFormat:true 即可。

例如：Alpaca.View({data:{name:'Alpaca-spa'},to:'body',template:'index2'})

option.notFormat (一般不用，不推荐使用，可以跳过不看)

默认为false，表示系统会自动格式化template参数，如果设置为true，如下例，视图将使用根目录下的index-test.html文件作为视图模板。 Alpaca.View(template:'/index-test.html',notFormat:true})

3 使用Layout和Part

实际的web项目开发中，大部分页面都是有结构的，比如总体的布局，公用的菜单、页头、页尾等。Alpaca-sap.js使用layout，part来解决这类问题。

继续上面介绍View的示例：

观察alpaca-spa/main/controller/index.js 文件中的内容：

indexAction: function () {        //视图默认渲染到#content位置，可以通过参数中传递to字段改变渲染位置        //视图模板默认位于index/view/index/index.html,可以通过参数中传递template字段改变模块路径        //即：默认模板位置为：[模块名]/view/[控制器名]/[动作名].html        var view = new Alpaca.View({
    data:{
    desc:'我是一条数据，在controller中传递到view视图模版里面！'}});        //layout 布局视图        var layout = new Alpaca.Layout();        //part 部件视图，默认路由位于view/layout/part中，文件名默认与name属性相同        //part 的默认渲染位置与其name属性相同，当然也可以通过to属性指定        var part = new Alpaca.Part({
    name: 'leftMenu'});        //将part添加到layout中，part的默认渲染位置与其name属性相同，也可以通过to属性指定        layout.addChild(part);        //设置视图的layout        view.setLayout(layout);        //在view中，向layout中传递数据        view.setLayoutData({
    'layoutData': 666});        //在view中，向part中传递数据        view.setPartData({
    leftMenu: {
    'partData': 888}});        return view;    },

以及：alpaca-spa/main/view/layout/layout.html 文件中的内容为：


         
       我是layout! 数据【{
    {=it.layoutData}}】是在控制器中传递给我的。
    
      左边菜单：
    
      
    
      页面内容区域：

alpaca-spa/main/view/layout/part/leftMenu.html 文件中的内容为：


         
      我是左边的菜单，请把我放到左面! 数据【{
    {=it.partData}}】是在控制器中传递给我的。
    
      点下面的连接可以切换其他页面

上面的示例演示了如何使用 layout、part来渲染复杂页面。

Alpaca.Layout()方法

Alpaca.Layout(option) 是用来创建一个layout布局的视图对象的方法，接受一个对象参数option，参数option中可以包含以下字段：

option.data

数据对象，为渲染模板提供数据

例如：Alpaca.Layout({data:{name:'Alpaca-spa'}})

option.to

设置被渲染位置，默认位置是body

例如：Alpaca.Layout({data:{name:'Alpaca-spa'},to:'#divId'})

option.name

指定layout的名字。默认为layout

layout默认的模板路径是所属模块view目录下layout目录下的layout.html文件

通过name字段可以修改模板的路径为：所属模块view目录下layout目录下与name同名的html文件

例如：Alpaca.Layout({data:{name:'Alpaca-spa'},to:'body',name:'layout2'})

Alpaca.Part()方法

Alpaca.Part(option) 是用来创建一个part布局的视图对象的方法，接受一个对象参数option，参数option中可以包含以下字段：

option.data

数据对象，为渲染模板提供数据

例如：Alpaca.Part({data:{name:'Alpaca-spa'}})

option.name

指定Part的名字。

Part默认的模板路径是所属模块view\layout\part目录下与其name同名的html文件

Part默认的渲染位置是id与其name同名的元素

通过name字段可以达到指定他的视图模板路径，以及渲染位置的效果，例如，

例如：Alpaca.Part({data:{name:'Alpaca-spa'},name:'top'})

option.to

设置被渲染位置，默认位置是id与其name同名的元素

例如：Alpaca.Part({data:{name:'Alpaca-spa'},to:'#divId'})

4. 如何改变layout、view的默认渲染位置

1、layout默认渲染位置是 <body></body>位置,

通过设置Alpaca.ViewModel.DefaultLayoutCaptureTo = "body"; 可以全局改变layout的默认渲染位置

如果只修改当前视图的渲染位置，有两种方法：

var layout = new Alpaca.Layout({
    to:'body'}});

或者

var layout = new Alpaca.Layout();layout.setCaptureTo('.layout-area');

2、view默认渲染位置是 <div id="content"> </div>位置，

通过设置Alpaca.ViewModel.DefaultViewCaptureTo = "body";可以全局改变view的默认渲染位置

如果只修改当前视图的渲染位置，有两种方法：

var view = new Alpaca.View({
    to:'#content'}});

或者

var view = new Alpaca.View();view.setCaptureTo('.content-area');

layout、view的默认渲染位置非常重要，一个路由执行后，url中的hash是否改变，就依据layout、view的默认位置决定。而hash是否改变，会影响刷新点击按钮的结果。

1、如果当前view没有使用layout，则view的CaptureTo等于DefaultLayoutCaptureTo时，hash会改变

2、如果使用了layout，则layout的CaptureTo等于DefaultLayoutCaptureTo时，hash会改变

5 ready()方法

视图渲染完毕后会执行view.ready()方法，例如

var view = new Alpaca.View()//视图渲染完成后执行ready方法。view.ready(function () {	console.log('视图渲染完成了...');})return view;

6 自定义显示效果

通过设置view.show方法可以自定义视图显示效果，例如：

var view = new Alpaca.View();//自定义视图渲染效果为闪入效果。//注意：在自定义视图显示效果时，需要调用onLoad事件，来触发执行ready函数。view.show = function (to, html) {    var that = this;    $(to).fadeOut("fast", function () {        $(to).html(html);        $(to).fadeIn("fast", function () {            that.onLoad();        });    });};return view;

上面面示例代码，实现了视图渲染时的闪入效果。

7 init()与release()方法

如果在控制器中定义了init()方法，那么在执行当前控制器的所有action方法前都会执行init()方法。如果在控制器中定义了release()方法，那么在执行完成当前控制器的所有action方法之后，都会执行release()方法，

模块中也可以定义init()、release()方法。

参考示例：

/* 定义Index模块中的TestController */Alpaca.IndexModule.TestController = {	//init方法,当前控制下的所有动作在执行前，都会执行init方法	init:function(){		console.log('执行action之前，执行init()方法');	},	//release方法,当前控制下的所有动作在执行前，都会执行release方法	release:function(){		console.log('执行action之后，执行release)方法');	},};

8. 关于hash何时被改变

1：如果未使用layout，则view的CaptureTo等于DefaultLayoutCaptureTo2：如果使用了layout，则layout的CaptureTo等于DefaultLayoutCaptureTo

原文发布时间：05/29

原文作者：大弹簧

本文来源如需转载请紧急联系作者

1 简介

2 使用View

我有一条数据:

3 使用Layout和Part

我是layout! 数据【{ {=it.layoutData}}】是在控制器中传递给我的。

左边菜单：

页面内容区域：

我是左边的菜单，请把我放到左面! 数据【{ {=it.partData}}】是在控制器中传递给我的。

点下面的连接可以切换其他页面

4. 如何改变layout、view的默认渲染位置

5 ready()方法

6 自定义显示效果

8. 关于hash何时被改变

我是layout! 数据【{
{=it.layoutData}}】是在控制器中传递给我的。

我是左边的菜单，请把我放到左面! 数据【{
{=it.partData}}】是在控制器中传递给我的。