使用 Yeoman 生成 backbone，requirejs 項目

背景

如今搞前端開發，不用個什麼框架都很差意思說本身是前端，什麼React，angular，backbone，只用jquery都很差意思跟別人打招呼。好比說如今想搞一個小項目，選了一個框架，看完文檔雲裏霧裏，看別人的實踐，更加迷惑，徹底不知道他要幹什麼。

技術是爲人服務的，不能爲了用框架而用框架，學了半天感受越學越不明白，到底是我用框架仍是框架用我？
假若有一種工具，一鍵生成相應框架的最佳實踐，模塊化等只要一件生成，就像軟件開發的IDE，是否是很爽呢？

老外早就想到這個問題了，這個工具就叫作Yeoman。

準備

1. 忘掉框架自己，專一於模塊化，和項目自己

2. 一臺裝好node，git的lunix或者windows

搭建一個backbone + requirejs 的項目

第一步 安裝yoeman

npm install -g yo

-g 是global，意思是裝到你電腦裏了，而不是當前目錄，而且爲系統狀態裏添加了yo命令

第二步 安裝你想使用的項目模板

這裏以backbone爲例 https://github.com/yeoman/generator-backbone

npm install -g generator-backbone

第三步 建立backbone項目

進入你預先準備好的項目目錄下，輸入

yo backbone

• 若是你的generator-backbone 沒裝好，yo會提示你沒有相應的generator

• yo的提示很友好，大多數問題均可以在shell裏的英文文本里獲得幫助

安裝過程當中會讓你輸入一些選項，好比

這個generator，能夠自動生成sass寫的bootstrap， coffeescript， requirejs，modernizr，很神奇有沒有，省去了不少細節的關注，科技就是服務於生產的。

選擇完成之後：

**翻譯：除了選擇的之外，咱們還包含了html5模板，jquery 和 backbone.js，額外選擇列出來 bootstrap，coffeescript，requirejs modernizr
建立的文件包括如上圖所示,也就是yoeman給咱們生成的項目的結構：**

• package.json - npm 依賴配置

• bower.json - bower 依賴配置

• gruntfile.js - grunt打包配置

• app/ - 項目根目錄

• test/ - 測試文件

完成之後，系統會自動跑npm install && bower install。

npm多數是node寫的開發部署類工具庫，包括bower，bower自己是在npm install裏面安裝的。而bower是前端項目用到的庫安裝工具，好比jquery，好比backbone，bower裝出來的東西跟node不要緊。

啓動測試

grunt是一個打包和部署工具，在項目裏一般用來啓動測試服務器，動態處理sass，coffeescript，livereload（動態將更新反映在瀏覽器上），等等等等。

yoeman裏的grunt一般給你提供一個serve方法，同時你也能夠用grunt build來打包，打包好的文件會生成在dist目錄下。

使用

grunt serve

啓動測試服務器，如圖

目前空板項目文件是這樣的：

index.html是入口，經過require調用了main.js （不熟悉coffee仍是用了js，若是採用coffee，這裏是main.coffee）

main.js

/*global require*/
'use strict';

require.config({
  shim: {
    bootstrap: {
      deps: ['jquery'],
      exports: 'jquery'
    },
  },
  paths: {
    jquery: '../bower_components/jquery/dist/jquery',
    backbone: '../bower_components/backbone/backbone',
    underscore: '../bower_components/lodash/dist/lodash',
    bootstrap: '../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap'
  }
});

require([
  'backbone'
], function (Backbone) {
  Backbone.history.start();
});

目前的main.js，作了簡單的require配置，而後進行了一個require調用，載入了backbone，調用了backbone.history.start()。

增添血肉

如今這個項目能夠說骨架已經有了，並且壓根就沒費什麼腦細胞，很好，接下來的工做稍微要有費點腦細胞，就是添加模塊，以及相應組件提供的一些東西。backbone裏：

• model：數據模塊

• view：頁面組件

• collection：模塊組

• route：路由模塊，提供路由功能

用yoeman來生成這些模塊和組件。我說要費點腦細泡，是由於這個時候你要根據你的項目，來作一些抽象，想好都須要哪些模塊，哪些部分。

生成方法就是在命令行裏輸入

yo backbone:model foo

若是使用 yo backbone:all foo 就是生成一套從model到route。一般來講，backbone項目的model和collection都是成對出現的，view一般也對應到一個model。

生成了一些東西之後，咱們的項目大概是這個樣子：

相應的模塊，都被自動生成到script裏了，同時，views模塊會自動生成配對的templates文件，默認的系統採用的是ejs html模板引擎，對應的views下面的js會調用本身的*.ejs，具體實踐看代碼就明白了。

本身要作的東西

各類模塊抽象好了，生成好了，而後怎麼把它們放在頁面裏，怎麼進行路由？

其實這也是我開始苦惱的問題，後來通過一些研究，發現是這麼調用的。

首先，backbone項目一般有一個最頂層的appView 的 view， 動態的頁面主體。（靜態的頁面主體就寫在index.html好了）。還有一個根據hash來頁面定位的路由。因此，咱們只要把這兩個東西寫在main.js裏就行了，剩下的東西由require來處理。

代碼以下：

require([
  'backbone',
  'views/appView',
  'routes/foo'
], function (Backbone, appView, routes) {
  new routes();
  Backbone.history.start();
  new appView();
});

國外比較流行這種AMD依賴前置的方法，將咱們生成的appView和routes，直接放到入口調用裏，這些返回的都是類方法，直接new 他們就行了。

new 一個 backbone view的時候，會調用它的intialize方法。

appView.js

/*global define*/

define([
  'jquery',
  'underscore',
  'backbone',
  'templates'
], function ($, _, Backbone, JST) {
  'use strict';

  var AppViewView = Backbone.View.extend({
    template: JST['app/scripts/templates/appView.ejs'],

    tagName: 'div',

    id: 'appView',
    el: '#appView',
    className: '',

    events: {},

    initialize: function () {
       // 初始化的時候，把template渲染到$el裏
      this.$el.html(this.template());
    }
  });

  return AppViewView;
});

再來看一下router

/*global define*/

define([
  'jquery',
  'backbone',
  'views/appView'
], function ($, Backbone, app) {
  'use strict';

  var FooRouter = Backbone.Router.extend({
    routes: {
    // 這裏的意思是#info 指向到info方法，info方法裏，咱們調用了appView的render方法，也能夠trigger其餘模塊的事件，理論上應該都是經過trigger來完成頁面切換的。
        'info': 'info'
    },
    info: function () {
        app.render();
    }

  });

  return FooRouter;
});

小結

固然，目前的項目也很簡陋，不少backbone裏模塊之間的關聯事件，都須要手動完成。可是對於前期一些重複性工做，用yeoman能夠作到高效開發，並且對底層框架的原理和實現全均可以不用關心，把重點放在業務抽象上面。

• 我以爲yoeman很是適合一些玩票性質的項目。

• 若是想學習相應框架的實踐應用，能夠先看看yoeman 裏generator是怎麼作的。

• 看yoeman自動生成的模版，有利於學習國外一些新的技術，對理解框架有幫助。