backbone-mobile

工程化构建高性能移动 webAPP 项目骨架。使用 backbone 、 requirejs 、 amazeui 等项目构建

本项目解决的问题：

足够好的性能
多人协同开发和统一的开发方式
包管理和打包发布
可维护性
集成 UI 套件以及页面过渡动画
资源按需加载和预加载

demo 预览

http://linksgo2011.github.io/backbone-mobile/

为什么需要 backbone-mobile

自己从事纯前端工作一年多而已，但是却遇到了很多的 webapp 项目需求。尝试过使用很多框架以及现成的解决方案，这些方案非常不错，但是对于自己项目来说
借鉴意义大于拿来自己用。我把学习过的相关项目罗列出来细说 12

1 、 https://github.com/zhangxinxu/mobilebone 张鑫旭大牛的过渡动画骨架。这个是最先吸引我的一个东西，理念很好但是并没有用于项目。
原因是这个项目重点在于过场动画以及切换方式，需要配合其他框架使用，需要添加路由、包管理、模型、控制器等等。还有一个项目官网
http://www.mobilebone.org/

2 、 https://github.com/yexiaochai/blade 叶小钗的 blade 框架。也有过渡动画效果，加入了 requirejs ，比较有特色的地方是使用了 web 组件。
对于小型小项目还是够用，带有简单的 UI ，同样需要路由、包管理、模型、控制器等特性。

3 、 https://github.com/driftyco/ionic ionic 框架。非常强大的框架。使用 angularjs 作为路由、控制器、模型的实现。带有一套全面的 UI 框架，
同时可以打包成 APP ，非常方便。不好的地方就是需要学习 angularjs ，这个问题不是太大， angular 在移动端有个致命的问题，就是双向绑定造成的性能
低下。同时也需要抛弃 jquery 生态系统。

4 、 https://github.com/shixy/Jingle 和 blade 类似，也是比较完善的框架，同样存在无法工程化的问题。

backbone-mobile 工程化思路

使用 backbone + require 做项目骨架，拓展出 controller 划分 controller 、 model 、 view 、 templetes 目录来进行协作开发。

如何使用

首先我们说下目录项目的目录结构及其功能
<pre>
├─css
├─fonts
├─img
└─js
├─controller 控制相关代码
├─lib 依赖的第三方库
│ ├─backbone
│ │ └─plugins
│ ├─jquery
│ │ └─plugins
│ ├─modernizr
│ ├─require
│ │ └─plugins
│ ├─underscore
│ └─vsf
│ ├─log
│ └─store
├─template 模板文件，默认使用的 html
│ ├─Layzload 每个控制器推荐对应一个目录
│ ├─Pages
│ └─Preload
└─view 视图目录
</pre>

可以看出我们依赖 backbone 、 requirejs 因此需要学习相关文档

下载本项目

git clone https://github.com/linksgo2011/backbone-mobile.git

需要将项目放到 web 服务器目录下，这里约定使用 web 根目录,在编辑器中打开后，我们来说明如何开始开发。我们想增加一个 http://localhost/#/Users/update/9
页面。我们需要怎么做呢？

在我们的项目中拓展 backbone 增加了路由中的 controller 以及，因此约定路由按照

<pre>
#/controller/action/params
</pre>

格式来书写。

在 template 目录下创建 Users 目录，添加一个 update.html 模板文件

</pre>

为了展示页面过场效果，最外层 div 标签必须按照这个格式书写，并且每个 html 页面的 ID 全局唯一，避免页面切换时冲突

接下来，我们在 controller 目录下创建
UsersController.js
<pre>
/**
*/
define(
[
'jquery',
'underscore',
'backbone',
'controller/MobileController',
'view/BaseMobileView',
'ui',
'text!../template/Users/update.html'
],
function($, _, Backbone, MobileController, BaseMobileView, ui, update) {
return MobileController.extend({
// 批量初始化
initialize: function() {
var views = {
updateView: update
};
$.each(views, $.proxy(function(key,tpl){
this[key] = new BaseMobileView({
$container: $('body'),
appendable: true,
controller: this,
textTemplate: tpl
});
},this));
},
update: function() {
// TODO

this.updateView.render({});

            // 给页面绑定自己的事件，因为每次 render 都会重新渲染页面，不必担心事件重复
            this.updateView.$el.on("click", function(event) {
                $.alert("你点击了页面!");
            });

        },
    });
}

);
</pre>

这样路由中的 controller 对应这文件，而第二段对应了文件中的 update 方法，当 url 第一次被请求时，控制器的 initialize 方法会被执行。
然后每次请求都会执行 update 方法。

我们可以在 init 方法中初始化 view ，然后在 update 方法中编写我们的业务逻辑

这样你就可以根据路由划分功能和业务逻辑，更好的协作开发了。如果做过后端开发例如 PHP 、 JAVA MVC 相关的应该会很快理解这样编写代码的好处。

项目打包

使用 requirejs 开发的项目可以直接被打包成一个文件，提高加载效率，使用非常方便，项目根目录下放置了一个 gruntfile 文件，可以阅读该文件，使用 nodejs 相关模块打包即可。

配合后端 API

移步 nodecms 项目 https://github.com/linksgo2011/nodecms

最后说几句

这个项目不算自己完成，只能算是整合网络上一些代码然后修改整理了并在实际项目中使用过。
下面我罗列出项目中使用的代码来源

backbone http://backbone.org.au/
controller https://github.com/hoatle/mobile-webapp-template
jquery http://jquery.com/
unnderscode http://underscorejs.org/
requeire http://www.requirejs.org/
amazeui http://amazeui.org

疏漏之处请指正，谢谢！

贡献代码或者问题意见联系 120377843@qq.com