html - 如何设计一个解耦的 HTML

Question

这是情况

考虑一些网站具有基础组件/控件，例如页眉、页脚等，并说它们也共享一些通用组件，例如自定义输入、自定义按钮、手风琴面板等。

组件可以通过多种方式共享，例如 javascript 库，甚至服务器端库，例如 dot net dll。该组件使用常见的 javascript 库如jquery，amberjs以及 css 框架如bootstrap.

问题

为了增加灵活性，组件中使用的 css 和 javascript 库可能与站点中使用的版本不同。假设该组件使用 jquery 1.8 而站点使用 2.0，因为该站点通常会经常更新，而该组件不是因为与其他站点向后兼容。冲突可能发生在 javascript 或 css 中（未加载或具有不同的版本和定义）。

然而，在 javascript 中，有几种解决方法，例如jquerynoconflict 和/或require js，但在其他库中可能没有。在 css 中，我不知道任何可用的方法。

您如何设计组件或站点以使它们彼此分离？

边注：

我喜欢 wpf 风格的语义（尽管很难构建），我们可以在其中封装结构，并且可能在元素中包含另一个元素。

<textbox_autocomplete text="First">
    <textbox_autocomplete.autocomplete_item>
        <item>First</item>
        <item>Second</item>
    </textbox_autocomplete.autocomplete_item>
</textbox_autocomplete>

<script>
     component.render(); //construct the textbox_autocomplete tag to html semantics
</script>

然而，以目前的能力是不可能实现的。

Answer 1

然而，在 javascript 中，有几种解决方法，例如 jquery noconflict 和/或需要 js，但在其他库中可能没有。在 css 中，我不知道任何可用的方法。

LessCSS支持可用于实现此功能的环境变量：

@import

<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/example.com/"
  };
</script>
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="less.js"></script>

在 CSS 中，简单的 import at-rules 可以处理多个设备：

@import url("bootstrap-1.0.css") screen;
@import url("bootstrap-2.0.css") handheld;
@import url("bootstrap-3.0.css") tv;
@import url("bootstrap-4.0.css") projection;
@import url("print.css") print;

它会像一个switch/case声明一样工作。

Fallthrough 也是自动的：

@import url("bootstrap-dev.css")
@import url("bootstrap-qa.css")
@import url("bootstrap-prod.css")

我喜欢 wpf 风格的语义（尽管很难构建），我们可以在其中封装结构，并且可能在元素中包含另一个元素。

WAI-ARIA 可以模拟这种类型的封装：

<div role="application" tabindex="-1">

<form autocomplete="off">
<div id="cb1" class="cb" role="combobox" aria-activedescendant="cb1-opt16">
  <div class="cb_label"><label id="cb1-label" for="cb1-edit">State</label>:</div>
  <input id="cb1-edit" class="cb_edit" type="text"
    tabindex="0"
    aria-labelledby="cb1-label"
    aria-autocomplete="list"
    aria-owns="cb1-list"
    aria-readonly="true"/>
  <div id="cb1-button-label" class="hidden">Open list of states</div>
  <button id="cb1-button" class="cb_button" aria-labelledby="cb1-button-label" aria-controls="cb1-list" tabindex="-1">
    <img src="http://www.oaa-accessibility.org/media/examples/images/button-arrow-down.png" alt="Open or close the list box" />
  </button>

  <ul id="cb1-list" class="cb_list" tabindex="-1" role="listbox" aria-expanded="true">
    <li id="cb1-opt1" role="option" class="cb_option" role="listitem" tabindex="-1">Alabama</li>
    <li id="cb1-opt2" role="option" class="cb_option" role="listitem" tabindex="-1">Alaska</li>
    <li id="cb1-opt3" role="option" class="cb_option" role="listitem" tabindex="-1">American Samoa</li>
    <li id="cb1-opt4" role="option" class="cb_option" role="listitem" tabindex="-1">Arizona</li>
    <li id="cb1-opt5" role="option" class="cb_option" role="listitem" tabindex="-1">Arkansas</li>
    <li id="cb1-opt6" role="option" class="cb_option" role="listitem" tabindex="-1">California</li>
    <li id="cb1-opt7" role="option" class="cb_option" role="listitem" tabindex="-1">Colorado</li>
    <li id="cb1-opt8" role="option" class="cb_option" role="listitem" tabindex="-1">Connecticut</li>
    <li id="cb1-opt9" role="option" class="cb_option" role="listitem" tabindex="-1">Delaware</li>
    <li id="cb1-opt10" role="option" class="cb_option" role="listitem" tabindex="-1">District of Columbia</li>
    <li id="cb1-opt11" role="option" class="cb_option" role="listitem" tabindex="-1">Florida</li>
    <li id="cb1-opt12" role="option" class="cb_option" role="listitem" tabindex="-1">Georgia</li>
    <li id="cb1-opt13" role="option" class="cb_option" role="listitem" tabindex="-1">Guam</li>
    <li id="cb1-opt14" role="option" class="cb_option" role="listitem" tabindex="-1">Hawaii</li>
    <li id="cb1-opt15" role="option" class="cb_option" role="listitem" tabindex="-1">Idaho</li>
    <li id="cb1-opt16" role="option" class="cb_option selected" role="listitem" tabindex="-1">Illinois</li>
    <li id="cb1-opt17" role="option" class="cb_option" role="listitem" tabindex="-1">Indiana</li>
    <li id="cb1-opt18" role="option" class="cb_option" role="listitem" tabindex="-1">Iowa</li>
    <li id="cb1-opt19" role="option" class="cb_option" role="listitem" tabindex="-1">Kansas</li>
    <li id="cb1-opt20" role="option" class="cb_option" role="listitem" tabindex="-1">Kentucky</li>
    <li id="cb1-opt21" role="option" class="cb_option" role="listitem" tabindex="-1">Louisiana</li>
    <li id="cb1-opt22" role="option" class="cb_option" role="listitem" tabindex="-1">Maine</li>
    <li id="cb1-opt23" role="option" class="cb_option" role="listitem" tabindex="-1">Maryland</li>
    <li id="cb1-opt24" role="option" class="cb_option" role="listitem" tabindex="-1">Massachusetts</li>
    <li id="cb1-opt25" role="option" class="cb_option" role="listitem" tabindex="-1">Michigan</li>
    <li id="cb1-opt26" role="option" class="cb_option" role="listitem" tabindex="-1">Minnesota</li>
    <li id="cb1-opt27" role="option" class="cb_option" role="listitem" tabindex="-1">Mississippi</li>
    <li id="cb1-opt28" role="option" class="cb_option" role="listitem" tabindex="-1">Missouri</li>
    <li id="cb1-opt29" role="option" class="cb_option" role="listitem" tabindex="-1">Montana</li>
    <li id="cb1-opt30" role="option" class="cb_option" role="listitem" tabindex="-1">Nebraska</li>
    <li id="cb1-opt31" role="option" class="cb_option" role="listitem" tabindex="-1">Nevada</li>
    <li id="cb1-opt32" role="option" class="cb_option" role="listitem" tabindex="-1">New Hampshire</li>
    <li id="cb1-opt33" role="option" class="cb_option" role="listitem" tabindex="-1">New Jersey</li>
    <li id="cb1-opt34" role="option" class="cb_option" role="listitem" tabindex="-1">New Mexico</li>
    <li id="cb1-opt35" role="option" class="cb_option" role="listitem" tabindex="-1">New York</li>
    <li id="cb1-opt36" role="option" class="cb_option" role="listitem" tabindex="-1">North Carolina</li>
    <li id="cb1-opt37" role="option" class="cb_option" role="listitem" tabindex="-1">North Dakota</li>
    <li id="cb1-opt38" role="option" class="cb_option" role="listitem" tabindex="-1">Northern Marianas Islands</li>
    <li id="cb1-opt39" role="option" class="cb_option" role="listitem" tabindex="-1">Ohio</li>
    <li id="cb1-opt40" role="option" class="cb_option" role="listitem" tabindex="-1">Oklahoma</li>
    <li id="cb1-opt41" role="option" class="cb_option" role="listitem" tabindex="-1">Oregon</li>
    <li id="cb1-opt42" role="option" class="cb_option" role="listitem" tabindex="-1">Pennsylvania</li>
    <li id="cb1-opt43" role="option" class="cb_option" role="listitem" tabindex="-1">Puerto Rico</li>
    <li id="cb1-opt44" role="option" class="cb_option" role="listitem" tabindex="-1">Rhode Island</li>
    <li id="cb1-opt45" role="option" class="cb_option" role="listitem" tabindex="-1">South Carolina</li>
    <li id="cb1-opt47" role="option" class="cb_option" role="listitem" tabindex="-1">South Dakota</li>
    <li id="cb1-opt48" role="option" class="cb_option" role="listitem" tabindex="-1">Tennessee</li>
    <li id="cb1-opt49" role="option" class="cb_option" role="listitem" tabindex="-1">Texas</li>
    <li id="cb1-opt50" role="option" class="cb_option" role="listitem" tabindex="-1">Utah</li>
    <li id="cb1-opt51" role="option" class="cb_option" role="listitem" tabindex="-1">Vermont</li>
    <li id="cb1-opt52" role="option" class="cb_option" role="listitem" tabindex="-1">Virginia</li>
    <li id="cb1-opt53" role="option" class="cb_option" role="listitem" tabindex="-1">Virgin Islands</li>
    <li id="cb1-opt54" role="option" class="cb_option" role="listitem" tabindex="-1">Washington</li>
    <li id="cb1-opt55" role="option" class="cb_option" role="listitem" tabindex="-1">West Virginia</li>
    <li id="cb1-opt56" role="option" class="cb_option" role="listitem" tabindex="-1">Wisconsin</li>
    <li id="cb1-opt57" role="option" class="cb_option" role="listitem" tabindex="-1">Wyoming</li>
  </ul>
</div>
</form>
</div>

参考

• 导入样式表：@import 规则
• aria-autocomplete 属性 | ariaAutocomplete 属性
• WAI ARIA 示例和资源列表
• Project Silk：现代浏览器的客户端 Web 开发，第 4 章：设计和布局
• Lua：技术说明 11 - 需要重新访问：导入