骨幹集/模型的最佳實踐

在我的應用中，我們使用RequireJs和Backbone 骨幹集/模型的最佳實踐

因此，一個典型的模型可能看起來像一個單獨的文件下面，所以我們可以嘗試更好的模塊化這個應用程序：

define([ 
'Require statements here if needed' 
], 
function() { 
var toDo = Backbone.Model.extend({ 

    // Model Service Url 
    url: function() { 
     var base = 'apps/dashboard/todo'; 
     return (this.isNew()) ? base : base + "/" + this.id; 
    }, 
    // Other functions here 

}); 

    return toDo; 
});

現在我們將每個模型和集合保存在它自己的文件中，並返回上面的模型/集合。應用程序越大越難保持文件和命名約定。我想將類似的集合/模型合併到一個文件中並保持模塊化。

什麼是實現這一目標的好方法？還是應該將它們放在單獨的文件中並獲得更好的命名約定？如果是這樣，你在相似的集合/模型之間的命名約定是什麼？

來源

2012-03-27 Mike Fielden

這是構建我的應用程序的方式：

我有一個JavaScript路徑，這我由服務器涅槃點播時客戶端訪問「/ JavaScript的」，所以我只在一個腳本行我index.html的：

<script src='/javascript'></script>

我的/ JavaScript的目錄結構如下：

application.js 
router.js 
lib/ 
lib/jquery.js 
lib/underscore.js 
lib/backbone.js 
lib/require.js 
lib/other_libraries.js 
views/ 
views/navigation.js 
views/overlay.js 
views/content.js 
views/page 
views/page/constructor.js 
views/page/elements 
views/page/elements/constructor.js 
views/page/elements/table.js 
views/page/elements/form.js 
views/page/elements/actions.js 
collections/ 
collections/paginated.js

所有這些文件都微細化以及在第一個請求從客戶端加載。通過這樣做，我的很多代碼已經在我的瀏覽器中加載，然後應用程序使用RequireJS發出任何請求。

在我的服務器上，我有一個目錄，它也是公開的，但是用於動態JavaScript加載和模板（它可以在任何給定時間由應用程序訪問）。目錄如下：

dynamic/ 
dynamic/javascript 
dynamic/javascript/pages 
dynamic/javascript/pages/articles.js 

dynamic/templates 
dynamic/templates/pages 
dynamic/templates/pages/articles.hb 
dynamic/templates/pages/items.hb

當我的服務器請求「/templates/pages/articles.hb」服務器返回JSON對象，它看起來是這樣的：

{ html : "<div class='page' id='articles'>blah blah blah</div>", javascript : "javascript/pages/articles.js" }

，當我的客戶端應用程序接收和在返回的JSON對象「的JavaScript」屬性就會觸發RequireJS要求

if (typeof json.javascript === string) { 
    require([ json.javascript ], function(constructor) { 
     window.app.page = new constructor(); 
    }); 
}

在動態/ JavaScript的/網頁/ articles.js我有類似：

define(function() { 
    var Model = Backbone.Model.extend({}); 

    // Collections.Paginated is in fact the Collection defined by /javascript/collection/paginated.js 
    // it is already loaded via the initial javascript loading 
    var Collection = Collections.Paginated.extend({ 
     url : '/api/articles' 
    }); 

    // Views.Page is in fact the View defined by /javascript/views/page/constructor.js 
    // it is also already loaded via the initial javascript loading 
    var articles = Views.Page.extend({ 

     collection : Collection, 

     initialize: function(options) { 
      this.collection = new Collection(); 
     }); 

    }); 

    return articles; 

});

幾乎就是這樣。我有RequireJS的最低要求，因爲每次點擊require（'something.js'）它都向服務器發出請求，這對您的應用程序速度不利。因此，你的問題的確切答案（在我看來）是：你應該儘可能地分開初始加載的文件，但後來使用requireJS加載的文件應儘可能小以節省流量。

來源

2012-03-27 17:04:29 drinchev

骨幹集/模型的最佳實踐

回答

相關問題