JavaScript フレームワーク (xmlplus) コンポーネントの紹介 (4) リスト

xmlplus は、フロントエンドおよびバックエンド プロジェクトを迅速に開発するための JavaScriptフレームワーク です。この記事では主に、特定の参考値を持つ xmlplus コンポーネント設計シリーズのリストを紹介します。興味のある友人はそれを参照してください

リスト グループウェアは、非常に一般的に使用されるタイプのコンポーネントであり、多くの ビュー のコンポーネント システムです。を含める必要があります。リストは非常にシンプルに作成でき、簡潔な内容のみを表示できます。リストを非常に複雑にして、非常に豊富なコンテンツを表示するために使用することもできます。

構成要素

リストを、リスト項目およびリスト項目を含むコンテナから分離することはできません。以下は最も単純なリスト コンポーネントであり、リスト項目コンポーネント Item とリスト項目コンテナー コンポーネント List が含まれています。

Item: {
 xml: "<li id=&#39;item&#39;/>"
},
List: {
 xml: "<ul id=&#39;list&#39;/>"
}

シンプルではありますが、このリスト コンポーネントは、継続的な拡張の基礎を築くフレームワークを構築します。

動的操作

上記で定義されたリストコンポーネントの最も基本的な使用法は次のとおりです。この使用法は、ネイティブ リスト タグの使用法と何ら変わりません。さらなる改善を行ってまいります。

Example: {
 xml: "<List id=&#39;example&#39;>\
  <Item>Item 1</Item>\
  <Item>Item 2</Item>\
  </List>"
}

List コンポーネントには通常、追加、削除、変更の 3 つの操作が含まれます。簡単にするために、最初にこれらの操作を実装しましょう。定義したリスト項目は非常に単純なので、ここでは新しい操作インターフェイスを定義せず、システム インターフェイスを直接使用します。

Example: {
 xml: "<p id=&#39;example&#39;>\
  <List id=&#39;list&#39;/>\
  <button id=&#39;append&#39;>append</button>\
  <button id=&#39;remove&#39;>remove</button>\
  <button id=&#39;modify&#39;>modify</button>\
  </p>",
 fun: function (sys, items, opts) {
 sys.append.on("click", function() {
  sys.list.append("Item").text("Item 1");
 });
 sys.remove.on("click", function() {
  sys.list.first() && sys.list.first().remove();
 });
 sys.modify.on("click", function() {
  sys.list.first() && sys.list.first().text("Item 2");
 });
 }
}

この例では、リストのシステム 関数 append を使用してリスト項目を追加し、リスト項目のシステム関数 delete を使用してリスト項目を削除し、またリスト項目のシステム関数テキストを使用してリスト項目のデータを変更します。

上記のリスト項目には単純なテキストデータが含まれているため、上記の例では text 関数を使用してデータを操作することが適切です。ここで、より複雑なデータを含むリスト項目を指定すると、そのリスト項目はデータ操作インターフェイスを追加で定義します。

Item: {
 xml: "<li id=&#39;item&#39;>\
  <span id=&#39;color&#39;>red</span>
  <span id=&#39;shape&#39;>square</span>
  </li>",
 fun: function (sys, items, opts) {
 function getValue() {
  return {color: sys.color.text(), shape: sys.shape.text()};
 }
 function setValue(obj) {
  sys.color.text(obj.color);
  sys.shape.text(obj.shape);
 }
 return Object.defineProperty({}, "data", { get: getValue, set: setValue});
 }
}

これは、新しいリスト項目を含むリスト操作の例です。コンポーネントの追加や削除については、システムが提供する機能も利用できますが、データの取得や変更については、新たに定義したインターフェースのみ利用できます。

Example: {
 xml: "<p id=&#39;example&#39;>\
  <List id=&#39;list&#39;/>\
  <button id=&#39;append&#39;>append</button>\
  <button id=&#39;remove&#39;>remove</button>\
  <button id=&#39;modify&#39;>modify</button>\
  </List>",
 fun: function (sys, items, opts) {
 sys.append.on("click", function() {
  sys.list.append("Item");
 });
 sys.remove.on("click", function() {
  sys.list.first() && sys.list.first().remove();
 });
 sys.modify.on("click", function() {
  sys.list.first() && items.list.first().data = {color: "blue", shape: "rectangle"};
 });
 }
}

たとえば、setValue と getValue を使用する必要があるなど、リスト項目インターフェイスの定義に特別な要件はありません。これは特定のシナリオによって異なり、必要に応じて柔軟に選択できます。

サードパーティのリストコンポーネントの使用

現在、豊富な機能を備えたさまざまなリストコンポーネントが市場に出回っており、二次カプセル化によってそれらを使用することができます。ここでは、JQuery list コンポーネントと並べ替え関数を組み合わせて、操作方法を説明します。

このリスト項目は長すぎるため、最初にリスト項目をカプセル化します。データ操作インターフェースの導入に注目してください。

Item: {
 xml: "<li class=&#39;ui-state-default&#39;><span class=&#39;ui-icon ui-icon-arrowthick-2-n-s&#39;/><span id=&#39;data&#39;/></li>",
 map: { appendTo: "data" },
 fun: function (sys, items, opts) {
 return { data: sys.data.text };
 }
}

次に、次のリスト項目のコンテナ コンポーネントを定義します。このコンテナ コンポーネントは主に JQuery のリスト初期化コードをカプセル化します。ここでは、リストは並べ替え可能ですが、選択不可能であると定義されています。

List: {
 css: "#list{ list-style-type: none; margin: 0; padding: 0; width: 60%; }\
  #list li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }\
  #list li span { position: absolute; margin-left: -1.3em; }",
 xml: "<ul id=&#39;list&#39;/>",
 fun: function (sys, items, opts) {
 var elem = this.elem();
 $(elem).sortable();
 $(elem).disableSelection();
 }
}

最後にリストコンポーネントの使い方を見てみましょう。この例の使用方法は前の例と変わりませんが、機能とパフォーマンスは大きく異なります。

Example: {
 xml: "<List id=&#39;example&#39;>\
  <Item>Item 1</Item>\
  <Item>Item 2</Item>\
  <Item>Item 3</Item>\
  </List>"
}

最適化

リストに頻繁なデータ更新要件がある場合、必然的にリスト項目の頻繁な追加と削除が発生し、アプリケーションのエクスペリエンスが低下する可能性があります。実現可能な最適化計画を以下に示します。これは公式ドキュメントの最適化の章に記載されています。

List: {
 xml: "<ul id=&#39;list&#39;/>",
 fun: function (sys, items, opts) {
 function setValue(array) {
  var list = sys.list.children();
  for ( var i = 0; i < array.length; i++ )
  (list[i] || sys.list.append("Item")).show().text(array[i]);
  for ( var k = i; k < list.length; k++ )
  list[k].hide();
 }
 return Object.defineProperty({}, "value", { set: setValue });
 }
}

複雑なリスト項目の場合、再作成のコストは膨大です。したがって、この最適化計画では、既存のリスト アイテムを可能な限り再利用し、新しいリスト アイテムを削除して再構築するのではなく、必要な場合にのみデータを更新し、既存のリスト アイテムが十分でない場合にのみ新しいリスト アイテムを作成します。

この一連の記事は、xmlplus フレームワークに基づいています。 xmlplus についてあまり詳しくない場合は、www.xmlplus.cn にアクセスしてください。詳細な入門ドキュメントはここから入手できます。

【関連おすすめ】

1. 無料のjsオンラインビデオチュートリアル

3. php.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル

以上がJavaScript フレームワーク (xmlplus) コンポーネントの紹介 (4) リストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。