多頁js應用程序的集中代碼

Question

我正在清理包含65多個html頁面和中央javascript庫的多頁面應用程序。 我的html頁面有很多冗余，中央js庫已變成意大利面條。 我在合並頁面時會遇到限制，因為我正在使用一個具有一定結構的更大框架。 我想減少冗余並清理代碼。

我發現了主干，MVC模式，微型模板和requirejs，但它們似乎最適合單頁應用程序。 我需要以某種方式讓主模塊知道正在加載哪個頁面，以便它將正確的元素放在頁面上。 我正在考慮傳遞html的標題，該標題將變成獲取頁面元素的正確集合並將它們作為對象傳遞到App.initialize中。

1）誰能驗證這種方法？ 如果沒有，建議使用替代方法嗎？ 像木偶這樣的骨干網擴展怎么樣？

2）誰能推薦一種將頁面詳細信息引入主干框架的方法？

在主干教程之后，我使用main.js調用了App.initialize方法並調用了view.render方法，構建了成功的測試頁面。 我的第一個念頭是閱讀html頁面標題，並使用它為要加載的特定頁面選擇模型。 我必須為每個頁面布局傳遞一個帶有詳細信息的對象。 這是視圖的render方法，因此您可以看到我要執行的操作：

            render: function () {  // pass parameter to render function here?
            var data = new InputModel,
                pageTitle = data.pageTitle || data.defaults.pageTitle,
                compiled,
                template;

            var pageElements = [
                { container: '#page_title_container', template: '#input_title_template' },
                { container: '#behavior_controls_container', template: '#behavior_controls_template' },
                { container: '#occurred_date_time_container', template: '#date_time_template' }]

            for (var i = 0; i < pageElements.length; i++) {
                this.el = pageElements[i].container;
                compiled = _.template($(InputPageTemplates).filter(pageElements[i].template).html());
                template = compiled({ pageTitle: pageTitle });  
                //pass in object with values for the template and plug in here?
                $(this.el).html(template);
            }
        }

對你的幫助表示感謝。 更新大約1999年的JavaScript技能給我帶來了很多樂趣。 語言發生了很多有趣的事情。

Answer 1

使用文檔標題來選擇加載的腳本聽起來有點不高興。 如果可行，那就去做。

另一個值得探討的想法可能是利用Backbone.Router和pushState:true來設置正確的頁面。 當您在啟動時調用Backbone.history.start()時，路由器會找到與您當前的URL（即您所在的頁面）相匹配的路由。

在路由回調中，您可以執行所有特定於頁面的初始化。

您可以將模板和容器選擇從視圖中移出到路由器中，然后在initialize()函數（視圖的構造函數）中設置視圖。 說，類似：

//view
var PageView = Backbone.View.extend({
    initialize: function(options) {
        this.model = options.model;
        this.el = options.el;
        this.title = options.title;
        this.template = _.template($(options.containerSelector));
    },

    render: function() { 
        window.document.title = title;
        var html = this.template(this.model.toJSON());
        this.$el.html(html);
    }
});

在路由器級別處理視圖選擇：

//router
var PageRouter = Backbone.Router.extend({
    routes: {
        "some/url/:id": "somePage",
        "other/url":    "otherPage"
    },

    _createView: function(model, title, container, template) { 
        var view = new PageView({
            model:model,
            title:title
            el:container,
            templateSelector:template,
        });
        view.render();
    },

    somePage: function(id) { 

        var model = new SomeModel({id:id});
        this._createView(model, "Some page", "#somecontainer", "#sometemplate");
    },

    otherPage: function() {
        var model = new OtherModel();
        this._createView(model, "Other page", "#othercontainer", "#othertemplate");
    }
});

並使用Backbone.history.start()啟動應用程序

//start app
$(function() {
    var router = new PageRouter();
    Backbone.history.start({pushState:true});
}

在這種解決方案中，視圖代碼不需要了解其他視圖的特定代碼，並且如果您需要為某些頁面創建更專業的視圖類，則無需修改原始代碼。

乍一看，這似乎是一個干凈的解決方案。 當路由器想要開始捕獲路由，並且您希望瀏覽器正常瀏覽頁面時，當然可能會有一些問題。 如果這引起了嚴重的問題，或者導致比基於標題的解決方案更大的麻煩，那么原始解決方案可能仍然是更可取的。

（代碼示例未經測試）