繼承和重用視覺元素的設計

Question

我知道C++/C＃，你可以創建控件，這些控件是可以通過繼承等使用的可重用的代碼片段。但是，我不確定是否可以使用相同的原則Windows 8存儲使用CSS，JavaScript和HTML5構建的應用程序。如果可能的話，能否請您指出每種技術（CSS，JavaScript/WinJS，HTML5）的關鍵元素，以幫助設計您的Windows 8應用程序，以繼承和重用視覺元素。

TIA

Answer 1

有幾件事情我已經遇到代碼重用，在基於JavaScript的Windows應用商店。

1. 自定義控件 - 有時候我們需要構建一個自定義控件，可以跨頁面重用，有時還可以在多個項目中使用。 This link給出了使用WinJS庫構建自定義控件的概述。例如 - 我已經建立了一個自定義控件ImageSelectControl。很多時候，我們需要一個控件來顯示選定的圖像，允許用戶更改/刪除選定的圖像，在控件等中顯示所選圖像的縮略圖。我在應用程序的多個頁面中使用此控件。
2. default.css - 這包含項目的默認樣式。在構建幾個應用程序時，我遇到了一組默認的css類，它們是在由vs模板生成的默認值之上添加的。我跨項目複製這個文件。例如 - 每個應用都有一個「品牌」配色方案。基於此，您需要設置錨點懸停顏色，輸入選擇控制背景等。這樣的規則在整個項目中是可重用的，只有品牌顏色纔會改變。在default.css中識別和組織這些規則並在整個項目中重用它是很好的。
3. default.js - 此文件還會經歷一些應用程序生命週期事件處理的更新。如果保持項目的數據模型分離，則可以在整個項目中重新使用此文件。
4. WinJS.Class.derive func可用於定義繼承。但到目前爲止，我還沒有在我的項目中遇到過這種重要的用法。
5. 你會遇到不同類型的頁面的個人模板（.html/css/js文件集）。重用它們是很好的。我創建了其中的幾個（不是所有這樣的模板），但我打算創建它們。當你在多個應用程序中工作時，很好地尋找這樣的模板並從你的一個模板開始你的頁面開發。模板可以簡單地作爲一個文件夾來維護，使用一組.html/.js/.css文件將模板\複製並粘貼到新的頁面文件夾中。
6. Utilility庫 - 您將構建一套utils輔助函數。我將它們保存在js/utils.js中並在各個項目中共享。例如 - Utils.handleError（錯誤）：在用戶出錯時顯示消息; Utils.UI.initializeWithProgressRing，用頁面加載頁面，並在頁面加載前顯示進度環;你的WinJS.xhr包裝器。在構建你的幫助函數之前檢查WinJS.Utilities命名空間是很好的。我在這裏發現了一些所需的功能。

總結 - 代碼重用發生在我的情況，重用js實用程序庫，頁面模板，default.js，default.css，自定義控件。繼承是可用的，但我沒有使用過多。 HTH。

Answer 2

SASS提供了極好的工具，包括和重新使用CSS樣式：http://sass-lang.com/

對於HTML和JS，你可以使用PHP來存儲代碼片段的變量和數組。同樣的邏輯也適用於在JS中重新生成HTML元素......只是在變量中存儲標記或代碼片段：http://www.w3schools.com/js/js_variables.asp

這有幫助嗎？

Answer 3

因此，對於HTML和JavaScript的Windows 8應用程序，確實可以實現相同數量的代碼重用性，事實上大多數模式使用相同的命名法，所以如果您是谷歌的「winjs」以及任何您要查找的內容因爲，大多數時候你會發現很好的例子。

根據您的具體問題：

• 在navigation application的default.html和頁面引用CSS類可以在整個應用程序中使用。 （實際上，加載的任何樣式都會保留在內存中，所以如果您訪問了詳細信息頁面，並且其頭部樣式不是特定於實際頁面的樣式，則可能會在首次加載後應用到其他頁面的詳細信息頁面。）
• HTML頁面可以在頁面控件和iframe中引用，因此您可以在多個地方重複使用這些佈局，就像您在普通網站上一樣。
• JavaScript，因爲它適用於Windows 8應用程序，實際上非常充實。有一個偉大的一套內置爲namespacing，defining and deriving classes，所有允許簡單creation of controls環境代碼組織水電費等

這當然更不用說其他人的約預存評論HTML/CSS/JavaScript技術可用於平臺。有一個最喜歡的JQuery插件？機會是它仍然在Windows 8中工作。