使用 Yeoman 生成 backbone，requirejs 項目

SylvesterZa 8年前發布 | 10K 次閱讀 RequireJS 前端技術 Backbone.js

背景

現在搞前端開發，不用個什么框架都不好意思說自己是前端，什么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里的英文文本里得到幫助

    • </ul>

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

    這個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();
});</pre> 
 
    目前的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;
});</pre> 
 
    再來看一下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;
});</pre> 
 
    小結
    

    當然，目前的項目也很簡陋，很多backbone里模塊之間的關聯事件，都需要手動完成。但是對于前期一些重復性工作，用yeoman可以做到高效開發，而且對底層框架的原理和實現全都可以不用關心，把重點放在業務抽象上面。
       
  
    •  
      我覺得yoeman非常適合一些玩票性質的項目。
      
 
      • 

    •  
      如果想學習相應框架的實踐應用，可以先看看yoeman 里generator是怎么做的。
      
 
    •  
      看yoeman自動生成的模版，有利于學習國外一些新的技術，對理解框架有幫助。
      
 
      • </ul>
 </div>
      

      來自： http://segmentfault.com/a/1190000004345626
 本文由用戶 SylvesterZa 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

相關經驗

相關資訊

相關文檔