vipspa

一个微型的SPA框架，只有2kB！依赖zepto或者jquery。

目标

市面上有大量的SPA框架，有大而全的Angularjs、自定义很强的Backbonejs等。对于追求极致小得移动端来说，都比较大，重！

鉴于此，开发了一个微型的SPA框架。框架只提供路由控制和几个简单的传参API，具体的代码组织完全自主化。

你可以用requirejs做模块化开发，然后rjs或者webpacket打包。当然seajs也可以的！选择你熟悉的。

你可以用knockoutjs、vuejs等mvvm库做双向绑定。对于复杂的项目来说这是有必要的，代码量会下降很多，代码可维护性更强。你熟悉那个就用选择哪个。

至于UI，你想怎么写都可以。

项目有两个例子，在example/下，分别是pure、giant。两个例子都基于gulp，下载下来后，3步可以看效果：

1 cd pure 

2 npm install

3 gulp

ps：如果对gulp不熟悉，请把项目文件放入任何静态服务器，如Apache、nginx等。

pure

是个不引入其他库（require或者mvvm库），它是一个纯vipspajs 构建的单页面应用。

giant

是一个配合requirejs和knockoutjs做的一个例子。

关于requirejs打包的例子，可以参照这篇文章

快速开始

html代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8" >
    <title>vipspa demo</title>
</head>
<body>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#content">公司简介</a></li>
        <li><a href="#contact">联系我们</a></li>
    </ul>
    <div id="ui-view"></div><!--view区域，必须，id可以随意起，但是需要和js配置代码一致-->
    <script type="text/html" id="error">
        <!--可以自定义错误信息,可选，定义一些404页面等-->
        <div>
            {{errStatus}}
        </div>
        <div>
            {{errContent}}
        </div>
    </script>
    
    <script type="text/javascript" src="lib/zepto-1.1.4.min.js"></script>
    <script type="text/javascript" src="lib/vipspa.min.js"></script>
    <script type="text/javascript">
    $(function(){
        vipspa.start({
            view: '#ui-view',
            errorTemplateId: '#error', // 可选
            router: {
                'home': {
                    templateUrl: 'views/home.html',
                    controller: 'js/app/home.js',
                },
                'content': {
                    templateUrl: 'views/content.html',
                    controller: 'js/app/content.js'
                },
                'contact': {
                    templateUrl: 'views/contact.html',
                    controller: 'js/app/contact.js'
                },
                'user': {
                    templateUrl: 'views/user.html',
                    controller: 'js/app/user.js',
                    subView: '#ui-sub-view',
                    children: [
                        {
                            name: 'login',
                            templateUrl: 'views/login.html',
                            controller: 'js/app/login.js',
                        },
                        {
                            name: 'regist',
                            templateUrl: 'views/regist.html',
                            controller: 'js/app/regist.js',
                        }
                    ]
                },
                'defaults': 'home' //默认路由
            }
        });

    });
    </script>
</body>
</html>

接下来只要关注写 'views/home.html' 'js/app/home.js' 的业务代码就好了。

API

//入口函数
start(config)

//路由相关
//url 传参
|-- stringify(hash,param)
|-- parse(hashStr)

//内存 传参
|-- setMessage(param)
|-- getMessage(messageId)
|-- delMessage(messageId)
|-- clearMessage()

1 start(config)

作用：配置SPA路由信息

参数： config

	{
        view: '#ui-view',
        router: {
            'home': {
                templateUrl: 'views/home.html',
                controller: 'js/app/home.js'
            },
            'content': {
                templateUrl: 'views/content.html',
                controller: 'js/app/content.js'
            },
            'contact': {
                templateUrl: 'views/contact.html',
                controller: 'js/app/contact.js'
            },
            'defaults': 'home' //默认路由
        },
        errorTemplateId: '#error'
    }

参数解释

view

config.view = '#ui-view'

index.html中展示view视图的div（jquery DOM）。

router

config.router = {
	'home': {
        templateUrl: 'views/home.html',
        controller: 'js/app/home.js'
    },
    'defaults': 'home' //默认路由
}

router里面配置所有的路由信息，'defaults' 用来设置默认路由，即不在路由规则里面的路由将展示 'defaults' 的view。针对其中的某个路由，比如 'home' ，需要两个值，分别是 templateUrl 、controller 。templateUrl 指向对应的view页面路径，是一个html片段；controller指向视图的js逻辑代码路径。

通过以上信息，vipspa就可以知道每个视图对应的html片段和js代码，以及如果对于不在路由规则内的路由按照defults方式的处理。

errorTemplateId

config.errorTemplateId

可选的错误模板，用来处理加载html模块异常时展示错误内容,注意：错误模板需要包含 {{errStatus}} {{errContent}} 这两个关键字，分别展示错误状态码和错误信息。至于模板样式，你可以自己定义css样式进行美化。

2 stringify(hash,param)

作用：根据 hash 和 param 生成完整的hash串，为view间跳转传参准备。

参数：

hash —— 某个view的路由配置信息，比如 'home'；

param —— 需要传递的参数，一个对象类型的值，比如 {name:'Jack'}

使用场景：浏览器url传参是使用。

用法：

	//跳转到 home 页面，同时像 home传递参数 {name:'Jack'}
	location.hash = stringify('home',{name:'Jack'});

3 parse(hashStr)

作用：根据完整的hash串，解析出来 hash 和 param ，是stringify 的逆操作，为view间跳转解析参数准备。

参数：hashStr —— 完整的hash串，比如 home?name=Jack&age=18 .如果参数为空，默认取当前浏览器的hash.

使用场景：浏览器url解析参数使用。

用法：

	//假如当前浏览器url地址是 localhost:8080/#home?name=Jack&age=18
	var obj = vipspa.parse();
	console.log(obj);
	/**
	{
		param: {
			name: "Jack",
			age:"18"
		},
		url: "home"
	}
	**/

4 setMessage(param)

作用：向消息队列中加入一条消息。

参数：消息体的格式

 {
    'id': 'home_msg',
    'content': {
    	name: "Jack",
		age:"18"
    }
 }

id 消息的唯一id

content 消息的具体内容，存放参数的地方

使用场景：在不允许暴漏参数的地方，可以用这种方式进行内存传参。

用法：

//隐式向 home 页面传递参数
var msg = {
    'id': 'home_msg',
    'content': {
    	name: "Jack",
		age:"18"
    }
};
vipspa.setMessage(msg);
location.hash = 'home';

5 getMessage(messageId)

作用：解析 setMessage 接口传递的消息。

参数：消息id

使用场景：在不允许暴漏参数的地方，可以用这种方式进行解析内存参数。

用法

//隐式向 home 页面传递参数
var msg = {
    'id': 'home_msg',
    'content': {
    	name: "Jack",
		age:"18"
    }
};
var param = vipspa.getMessage('home_msg');
console.log(param);

/**
{
    'id': 'home_msg',
    'content': {
    	name: "Jack",
		age:"18"
    }
}
**/

6 delMessage(messageId)

作用：删除指定消息

7 clearMessage()

作用：清除消息队列

raymondZhong/vipspa