0

状況はこちら

一部の Web サイトには、ヘッダー、フッターなどの基本コンポーネント/コントロールがあり、カスタム入力、カスタム ボタン、アコーディオン パネルなど、いくつかの共通コンポーネントも共有していると考えてください。

コンポーネントは、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>

ただ、今の実力では到底無理です。

4

1 に答える 1

0

ただし、javascript には、jquery noconflict や 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 では、単純なインポートの @ 規則で複数のデバイスを処理できます。

@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ステートメントのように機能します。

フォールスルーも自動です:

@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>

参考文献

于 2014-09-19T23:36:33.070 に答える