设计继承和重用视觉元素

Question

我知道使用C ++ / C＃，你可以创建可以通过继承等方式使用的可重用代码段的控件。但是，我不确定是否可以在使用CSS的Windows 8商店应用程序构建中使用相同的原则， JavaScript和HTML5。如果有可能，请指出每种技术（CSS，JavaScript / WinJS，HTML5）的关键元素，这些元素可以帮助您设计Windows 8应用程序，以便继承和重用视觉元素。

TIA

Answer 1

因此，对于HTML和JavaScript Windows 8应用程序，肯定有方法可以实现相同数量的代码可重用性，事实上大多数模式使用相同的命名法，所以如果你谷歌为“winjs”加上你想要的任何东西，你会在大多数时候找到很好的例子。

根据您的具体问题：

• 在navigation application的default.html页面中引用的CSS类可以在整个应用程序中使用。 （实际上，任何加载的样式都会保留在内存中，因此如果您访问详细信息页面并且它具有不是特定于实际页面的标题样式，则它可能会在首次加载后应用于其他页面的详细信息页面。）< / LI>
• 可以在页面控件和iframe中引用HTML页面，这样您就可以像在普通网站一样在多个位置重复使用这些布局。
• JavaScript，因为它适用于Windows 8应用程序，实际上已经很好地充实了。针对namespacing，defining and deriving classes的环境内置的代码组织有很多实用程序，所有这些实用程序都允许轻松creation of controls等。

这当然更不用说其他人对于可在平台上使用的预先存在的HTML / CSS / JavaScript技术的评论。有一个最喜欢的JQuery插件？它仍有可能在Windows 8中运行。

Answer 2

在基于javascript的Windows应用商店应用程序中，我遇到的代码重用很少。

1. 自定义控件 - 有时我们需要构建一个可以跨页面重复使用的自定义控件，有时也可以在多个项目中重复使用。 This link概述了使用WinJS lib构建自定义控件。例如 - 我已经为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 libs - 您将构建一组utils辅助函数。我将它们保存在js / utils.js中并在项目中共享。例如 - Utils.handleError（错误）：在用户出错时显示消息; Utils.UI.initializeWithProgressRing使用promise加载页面并在中心显示进度环，直到页面加载为止;你的WinJS.xhr Wrappers。在构建辅助函数之前，最好检查WinJS.Utilities命名空间。我在这里找到了所需的功能。

总结 - 代码重用发生在我的情况下，重用js实用程序库，页面模板，default.js，default.css，自定义控件。继承是可用的，但我还没有使用过多。 HTH。

Answer 3

SASS提供了用于包含和重用CSS样式的出色工具：http://sass-lang.com/

对于HTML和JS，您可以使用PHP在变量和数组中存储代码片段。同样，相同的逻辑适用于在JS中重新生成HTML元素...只需在变量中存储标记或片段：http://www.w3schools.com/js/js_variables.asp

这有帮助吗？