如何设计解耦的HTML

Question

情况如下

考虑一些网站有基本组件/控件，如页眉，页脚等，并说它们共享一些常见组件，如自定义输入，自定义按钮，手风琴面板等。

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

问题

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

然而，在javascript中，有几种解决方法，例如jquery noconflict和/或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 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>

<强>参考

• Importing Style Sheets: the @import rule
• aria-autocomplete attribute | ariaAutocomplete property
• List of WAI ARIA Examples and resources
• Project Silk: Client-Side Web Development for Modern Browsers, Chapter 4: Design and Layout
• Lua: technical note 11 - Require revisited: Import