我正在清理65 + html頁面和中央JavaScript庫的多頁面應用程序。我的html頁面有很多冗餘,中央js庫已經成爲意大利麪。我在合併頁面方面遇到了一些限制,因爲我在一個執行特定結構的較大框架內工作。我想減少冗餘並清理代碼。多頁面js應用程序的集中代碼
我發現了主幹,MVC模式,microtemplating和requirejs,但它們看起來最適合單頁應用。不知何故,我需要讓主模塊知道正在加載什麼頁面,以便將正確的元素放在頁面上。我正在考慮傳入html的標題,它將轉而獲取正確的頁面元素集合,並將它們作爲對象傳遞給App.initialize。
1)任何人都可以驗證這種方法嗎?如果沒有,建議採用其他方法嗎?如牽線木偶延伸到骨幹?
2)任何人都可以推薦一種方法來獲取頁面細節到骨幹框架?
以下骨幹教程我使用main.js構建了一個成功的測試頁面,該頁面調用調用view.render方法的App.initialize方法。我的第一個想法是讀取html頁面標題並使用它爲正在加載的特定頁面選擇一個模型。我不得不傳入一個具有每個頁面佈局細節的對象。這裏是視圖的渲染方法,所以你可以看到我想要做什麼:
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技能,我有很多樂趣。語言有很多很酷的事情發生。
感謝fencliff!我喜歡使用url(路由)來識別頁面的想法。這更符合骨幹(和要求)範式。我會試一試。 –