javascript - 视觉元素的继承和重用设计

Question

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

TIA

Answer 1

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

根据您的具体问题：

• 导航应用程序的 default.html 页面中引用的 CSS 类可以在整个应用程序中使用。（实际上，任何加载的样式都会保留在内存中，因此如果您访问详细信息页面并且它的标题样式不是特定于实际页面的，它可能会在首次加载后应用于另一个页面的详细信息页面。）
• HTML 页面可以在页面控件和 iframe 中引用，因此您可以在多个位置重复使用这些布局，就像使用普通网站一样。
• JavaScript，因为它适用于 Windows 8 应用程序，实际上非常充实。环境中内置了大量用于代码组织的实用程序，用于命名空间、定义和派生类，所有这些都允许轻松创建控件等。

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

Answer 2

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

1. 自定义控件 - 有时我们需要构建一个可以跨页面重用的自定义控件，有时也可以在多个项目中重用。此链接概述了使用 WinJS lib 构建自定义控件。例如 - 我为 ImageSelectControl 构建了一个自定义控件。很多时候，我们需要一个控件来显示所选图像，允许用户更改/删除所选图像，在控件中显示所选图像的缩略图等。我在应用程序的多个页面中使用此控件。
2. default.css - 这包含项目的默认样式。在构建几个应用程序时，我遇到了一组默认 css 类，这些样式是在 vs 模板生成的默认值之上添加的。我跨项目复制此文件。例如 - 每个应用程序都有一个“品牌”配色方案。基于此，您需要设置锚点悬停颜色，输入选择控件背景等。这些规则可以跨项目重复使用，只有品牌颜色会发生变化。在你的 default.css 中识别和组织这些规则并在项目中重用它是很好的。
3. default.js - 此文件还针对应用程序生命周期事件处理进行了一些更新。如果您保留项目的数据模型分离，则可以跨项目重复使用此文件。
4. WinJS.Class.derive函数可用于定义继承。但到目前为止，我还没有在我的项目中遇到过大量使用它的情况。
5. 您会遇到不同类型页面的个人模板（一组 .html/css/js 文件）。重复使用它们很好。我已经创建了其中的几个（不是所有这样的模板），但我计划创建它们。当您跨多个应用程序工作时，最好留意此类模板并从您的模板之一开始您的页面开发。模板可以简单地维护为一个文件夹，比如模板\，带有一组 .html/.js/.css 文件，并将这些文件复制粘贴到您的新页面文件夹中。
6. 实用程序库 - 您将构建一组实用程序帮助函数。我将它们保存在 js/utils.js 并跨项目共享。例如 - Utils.handleError(error)：向用户显示错误信息；Utils.UI.initializeWithProgressRing 加载带有承诺的页面并在中心显示进度环，直到页面加载；你的 WinJS.xhr 包装器。在构建帮助函数之前检查 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

这有帮助吗？