高性能移動 webapp 框架：backbone-mobile

backbone-mobile 是工程化構建高性能移動 webAPP 項目骨架。使用backbone、requirejs、amazeui等項目構建

本項目解決的問題：

1. 足夠好的性能

2. 多人協同開發和統一的開發方式

3. 包管理和打包發布

4. 可維護性

5. 集成UI套件以及頁面過渡動畫

6. 資源按需加載和預加載

demo 預覽

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

為什么需要 backbone-mobile

自己從事純前端工作一年多而已，但是卻遇到了很多的webapp項目需求。嘗試過使用很多框架以及現成的解決方案，這些方案非常不錯，但是對于自己項目來說借鑒意義大于拿來自己用。我把學習過的相關項目羅列出來細說12

1、https://github.com/zhangxinxu/mobilebone 張鑫旭大牛的過渡動畫骨架。這個是最先吸引我的一個東西，理念很好但是并沒有用于項目。原因是這個項目重點在于過場動畫以及切換方式，需要配合其他框架使用，需要添加路由、包管理、模型、控制器等等。還有一個項目官網http://www.mobilebone.org/

2、blade 葉小釵的blade框架。也有過渡動畫效果，加入了requirejs，比較有特色的地方是使用了web組件。對于小型小項目還是夠用，帶有簡單的UI，同樣需要路由、包管理、模型、控制器等特性。

3、ionic 框架。非常強大的框架。使用angularjs作為路由、控制器、模型的實現。帶有一套全面的UI框架，同時可以打包成APP，非常方便。不好的地方就是需要學習angularjs，這個問題不是太大，angular在移動端有個致命的問題，就是雙向綁定造成的性能低下。同時也需要拋棄jquery生態系統。

4、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相關的應該會很快理解這樣編寫代碼的好處。

# 項目打包

使用requirejs開發的項目可以直接被打包成一個文件，提高加載效率，使用非常方便，項目根目錄下放置了一個gruntfile文件，可以閱讀該文件，使用nodejs相關模塊打包即可。

# 配合后端API

移步 nodecms 項目

#最后說幾句

這個項目不算自己完成，只能算是整合網絡上一些代碼然后修改整理了并在實際項目中使用過。 下面我羅列出項目中使用的代碼來源

1. backbone 

2. controller 

3. jquery

4. unnderscore 

5. require

6. amazeui

疏漏之處請指正，謝謝！

項目主頁：http://www.baiduhome.net/lib/view/home/1449892713894