2014-09-21 133 views
0

我正在創建一個從頭開始的管理面板,我想知道爲了最大限度地減少重複代碼(特別是HTML)的需求,我需要使用哪些技術。HTML佈局技術(管理面板)

回頭我剛剛在每個文件中重寫了所有的HTML。雖然這給了單個頁面的最終可修改性,但工作量和維護量使其成爲最糟糕的方式。

很多年前,我就開始做PHP引入到HTML通過功能,如:

PrintMenu(); 
PrintHeader(); 
PrintLeftBox(); 

雖然這縮短了代碼,它使頁面的未來變化過於複雜的需求。如果我想更改整個佈局並從HTML中刪除左側框,該怎麼辦?現在我有數百頁的PrintLeftBox();

這兩個簡單的方法幾乎是我創造過網站佈局的唯一途徑。

現在我正在尋找一種更加動態和高效的方式來生成可以在每個頁面上進行修改並輕鬆重做的佈局。

我的大部分頁面看起來都是一樣的;頂部的菜單,中間的巨大內容和底部的頁腳。雖然有些網站需要不同的設置,頂部的菜單,左側的某種導航,中間的項目列表以及右側的「編輯視圖」。

我該如何創建一個可以與看起來不同的頁面一起工作的「佈局系統」?

我不需要任何代碼,我需要有人指向正確的方向。

回答

0

好吧,在我看來,使用PrintMenu()有一百頁是一件好事,因爲您只需更改該函數的內容即可更新數百頁的外觀,至少與你確定所有頁面都使用菜單。現在也許如果你傳遞了一個參數,讓我們來說一個數組(這樣你可以在後面更新它的屬性),例如包含頁面特徵,那麼這將會創建一個更加靈活的模型。 或者如果你願意,你也可以傳遞一個對象。

pageConfig = new oPageConfig 

PrintMenu (pageConfig); 
PrintHeader (pageConfig); 
PrintLeftBox (pageConfig); 

又路過一個變量,你的職責,你可以選擇不(與例如沒有菜單的特殊頁)顯示菜單。

0

使用模板引擎可以在這種情況下相當有益。 只要您喜歡,請選擇以下兩種解決方案之一。

  1. 在後臺,嘗試玉(Node.js的),理解(PHP)...

    你可以找到更多在這裏:http://en.wikipedia.org/wiki/Comparison_of_web_template_engines;

    MenuHeaderFooter將在不同的文件進行分隔,並且可以在將由模板引擎在服務器部分呈現其他HTML文件包括

  2. 在前端,試試Angular。JS或其他Web MVC框架,

    該解決方案的缺點是,你可能需要花更多的時間在提供穩定的RESTful API,因此,因爲所有的渲染工作由Angular.js在客戶部分完成。