开源软件名称（OpenSource Name）：

linksgo2011/backbone-mobile

开源软件地址(OpenSource Url)：

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

开源编程语言(OpenSource Language)：

JavaScript 82.5%

开源软件介绍(OpenSource Introduction)：

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目录来进行协作开发。

如何使用

├─css
├─fonts
├─img
└─js
    ├─controller       控制相关代码
    ├─lib              依赖的第三方库
    │  ├─backbone
    │  │  └─plugins
    │  ├─jquery
    │  │  └─plugins
    │  ├─modernizr
    │  ├─require
    │  │  └─plugins
    │  ├─underscore
    │  └─vsf
    │      ├─log
    │      └─store
    ├─template      模板文件，默认使用的html
    │  ├─Layzload   每个控制器推荐对应一个目录
    │  ├─Pages
    │  └─Preload
    └─view          视图目录

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

下载本项目

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

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

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

    #/controller/action/params

格式来书写。

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

 <div class="page" id="users-update-page" >
    这是更新user的模板
 </div>

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

接下来，我们在controller 目录下创建 UsersController.js

/**
 */
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("你点击了页面!");
                });
                
            },
        });
    }
);

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

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

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