如何设计解耦的HTML

Question

这里是的情况

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

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

问题

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

然而，在javascript中，有几种解决方法，比如jquery no冲突和/或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中，有几种解决方法，比如jQueryno冲突和/或require 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中，简单的导入at-规则可以处理多个设备：

@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可以模拟这种封装：

<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-自动完成属性\ ariaAutocomplete属性
• WAI ARIA示例和资源清单
• 项目丝绸:面向现代浏览器的客户端Web开发，第4章:设计和布局
• Lua:技术说明11 -需要重新审查:进口