云眼 Web 实验网站设计最佳实践

云眼About 3 min

云眼 Web 实验网站设计最佳实践

本主题介绍如何：

  • 构建或重新设计网站，与云眼 Web 实验配合使用
  • 创建唯一且具有描述性的元素 ID 和 CSS 类名
  • 了解 HTML 表格和 iFrame 的权衡取舍
  • 使用 <p> 和 <div> 标记
  • 在页面上设置云眼 Web 实验跟踪调用

虽然云眼 Web 实验旨在在任何使用 HTML、CSS 和 JavaScript 构建的网站上无缝工作，但在设计网站时，可以做一些事情，以确保云眼 Web 实验始终运行稳定的、跨浏览器兼容的实验。本文将详细介绍其中一些准则。此列表针对的是那些设计网站的人，因此假定对 HTML 和 CSS 有基本的熟悉。

基本

讨论的前几个准则是公认的构建网站的最佳实践。讨论在网站上使用云眼 Web 实验时，这些准则如何提供帮助。

  1. 尽可能对元素使用唯一 ID。 云眼 Web 实验的工作原理是在页面加载期间执行 JavaScript，以便向访问者显示您的版本。在页面上提供具有唯一 ID 的元素为云眼 Web 实验提供了一种可靠的方法，可以在执行此 JavaScript 时识别它们。

    云眼 Web 实验不需要唯一的 ID 来处理元素，但是，使用它们可以生成干净的版本代码，并减少版本在旧浏览器中看起来不同的几率。

  2. 使用描述性 CSS 类名。

    如果云眼 Web 实验无法使用唯一 ID 来标识页面上的元素，它将尝试使用 CSS 类和页面结构隔离该元素。如果始终使用描述性类来划分页面的结构，云眼 Web 实验将为在给定实验中修改的页面元素生成简短、可读的选择器。除了美学吸引力之外，这些选择器还具有更广泛的浏览器兼容性，尤其是在其他 JavaScript 也用于修改此页面上的 DOM 的情况下。

  3. 避免使用 HTML 表格进行页面布局。

    基于表格的布局很难通过云眼 Web 实验（以及一般的 JavaScript ）进行调整，并且在 Internet Explorer 浏览器系列中通常以不同的方式呈现。通常，如果可以使用 CSS 执行此操作，请避免使用表。

  4. 避免大量使用 iFrame。

    仅当云眼 Web 实验代码段位 iFrame 页面上时，云眼 Web 实验才可用于修改 iFrame 的内容。由于这些大量使用 iFrame 的页面，除了难以维护和重新调整大小外，有时还难以使用云眼 Web 实验进行测试。

    注意：如果只想测试 iframe 的内容，而不是它周围的内容，云眼 Web 实验应该可以正常工作！

  5. 使用标签分隔大文本块中的不同段落。 <p>

  6. 如果计划对整个<body>属性进行更改，请先将它们包装在<div>标记中 - Internet Explorer 在修改网页的整个正文时会遇到问题。

高级

如果页面是动态的，请使用云眼 Web 实验激活和事件跟踪 API 调用预先填充它们。这样，可以快速设置实验，以便将来利用它们，并且将来利用它们的实验，并且如果云眼 Web 实验代码段出于任何原因不在页面上，也不会产生任何影响。

Last update:
Contributors: zhangweixue