結合Require.js，Backbone.js和服務器端MVC框架

Question

我們實際上正在計划一個非常復雜的Web應用程序。 至少對我自己的標准來說。 在過去，我們一直使用服務器端MVC框架（Codeigniter）和客戶端功能（jQuery和插件）的組合。 我們在視圖中簡單地編寫了內聯JavaScript代碼。 這按預期工作，但當然有幾個缺點：

• 沒有緩存
• 重復的js代碼
• 可維護性問題
• ...

我現在的主要目標是以高效且易於維護的方式組織客戶端代碼。 但是我想繼續使用服務器端MVC，因為現有的知識和一些現有的接口。 此外，我想用jQuery和“spaghetti代碼”減少復雜的DOM操作。

現在我想到了Backbone.js和Require.js的組合，但我真的找不到關於如何將它們與服務器端MVC結合起來的教程或任何可靠的描述。 甚至推薦嗎？

在我的舊應用程序中，我得到了這樣的文件結構：

• 應用程序（CodeIgniter）
• 資產
  • JS
  • CSS
  • IMGS

有什么想法或最佳實踐嗎？

謝謝！

Answer 1

要添加mexique1的建議，可能值得查看骨干 - 樣板項目 。 它應該為您正在考慮的許多問題提供最佳實踐解決方案，例如需求和主干的組合，項目客戶端的組織以及復雜DOM操作的減少（請參閱模板） 。

正如您所預料的那樣，挑戰很可能是將樣板方法與您習慣的方法相結合。 但是，它幾乎肯定值得付出努力，因為它應該為這個和未來的項目提供堅實的基礎。

Answer 2

我認為Backbone是一個不錯的選擇，並且Require在這里不是強制性的。

要求只會幫助您組織源代碼並可能提高性能。 我認為你可以立即開始使用Backbone，這將是你最常用的東西，並在稍后添加Require。

關於Backbone，是的，如果它返回JSON，它很容易使用它與現有的MVC應用程序一起使用它。 要加載現有數據，您需要使用結合到網址的fetch方法來適應現有代碼或您自己的方法。

通常，請考慮在哪些視圖中顯示哪些模型。 Backbone可以幫助您這樣思考： 我在Views中顯示由JIS數據表示的模型。

此外，對於視圖層，重用現有HTML非常容易，因為視圖不依賴於任何內容，沒有任何JavaScript模板或任何內容。

簡單的例子：

<div id="user">
    <span class="name">John</span>
</div>

var UserView = Backbone.View.extend({
    render: function() {
        this.$el('.name').html(this.model.get('name'));
    }
});
var userView = new UserView({el: $('#user')[0], model: ...});

在此示例中， #user div反映了User模型的狀態及其名稱。

另請查看Backbone中的Todo App示例。