JSコンポーネントシリーズ：HTMLタグのdata属性を使用してJSコンポーネントを初期化する

前言：最近使用bootstrapコンポーネントの際に使いやすさの問題を見つけました。多くのシンプルなコンポーネントの初期化には、JS内で多くの初期化コードを書かなければなりません。例えば、シンプルなselectタグですが、オプションにデータをバックエンドから取得する必要があるだけなのに、バックエンドからのデータ取得にはJSの初期化が必要で、そのためページの初期化時にJSの初期化コードに多くの重複コードが含まれてしまい、見るのも気持ち悪いです。そこで、bootstrap tableのdata属性を思い出しました。HTML内で直接dataを使用できると良いのにと思いました。-*这种方式来初始化简单的组件，那该多爽。我们先来看看bootstrap table的文档：

可以看到bootstrap table里面几乎所有的属性、事件都可以用data-*の方法で初期化できます。これがどんなに快適かを感じてみましょう。まずはbootstrap tableのドキュメントを見てみましょう：-*を確認できます。bootstrap tableのほとんどの属性やイベントはdata

この方法でやると、わりと良い感じです。それでは、研究を始めましょう。

どこから来たのか？-*一、jQuery data()の初探5の検索を了一圈、ついにdata

の出处を見てみましょう。それはJQueryとhtml

の中の、いいものですね。本当にいいものです！まずはjQueryのAPI

の原始用法は以下の通りです：5 data-*の作用は明らかで、要素に属性やデータを追加したり、値を取得するものです。

以下ではdata()メソッドとhtml5 属性の組み合わせ使用-*ハハ、このものはいいですね。HTML属性の組み合わせを使用して、

1のdata-設定した値は、jQueryのdata()メソッドで取得できます。以下のルールに従います：

2すべてのdata属性は「data」で始まる必要があります。-属性は「」で始まる必要があります。

3jQueryで属性を取得する際には「data」を取り除き、「」で区切ります。-「」で指定します。

この基礎があるので、タグに属性を設定する方法と、jsで対応する属性を取得する方法が分かります。以下では、先ほどのcomboboxのエンブレス例を結び付けながら説明します。

二、jQuery data()の実装-*コンポーネントの初期化

以前のJSコンポーネントシリーズに記載されているように、自分でJSコンポーネントをエンブレスできます。この記事では、urlからデータを取得する簡単なcomboboxをエンブレスしました。それでは、以下ではこのコンポーネントの上に手を加えて、selectタグにdataを直接追加する方法を実現します。-*属性を使用してドロップダウンコンポーネントを初期化します。

1JSコンポーネントのエンブレスコード

(function ($) {
 //1jQueryの拡張メソッドcomboboxを定義します。
 $.fn.combobox = function (options, param) {
 if (typeof options == 'string') {
  return $.fn.combobox.methods[options](this, param);
 }
 //2呼び出し時に渡されたパラメータとデフォルトパラメータを合併します。
 options = $.extend({}, $.fn.combobox.defaults, options || {});
 //3デフォルト値を追加します。
 var target = $(this);
 target.attr('valuefield', options.valueField);
 target.attr('textfield', options.textField);
 target.empty();
 var option = $('<option></option>');
 option.attr('value', '');
 option.text(options.placeholder);
 target.append(option);
 //4ユーザーが渡したパラメータリストにデータセットdataが含まれているかどうかを判断します。含まれている場合は、バックエンドからAJAXでデータを取得しない、そうでない場合は取得します。
 if (options.data) {
  init(target, options.data);
 }
 else {
  //var param = {};
  options.onBeforeLoad.call(target, options.param);
  if (!options.url) return;
  if (typeof options.param == "string"){
  options.param = JSON.parse(options.param);
  }
  $.getJSON(options.url, options.param, function (data) {
  init(target, data);
  });
 }
 function init(target, data) {
  $.each(data, function (i, item) {
  var option = $('<option></option>');
  option.attr('value', item[options.valueField]);
  option.text(item[options.textField]);
  target.append(option);
  });
  options.onLoadSuccess.call(target);
 }
 target.unbind("change");
 target.on("change", function (e) {
  if (options.onChange)
  return options.onChange(target.val());
 });
 }
 //5もし渡されたのが文字列であれば、メソッドの呼び出しを代表します。
 $.fn.combobox.methods = {
 getValue: function (jq) {
  return jq.val();
 },
 setValue: function (jq, param) {}}
  jq.val(param);
 },
 load: function (jq, url) {
  $.getJSON(url, function (data) {
  jq.empty();
  var option = $('<option></option>');
  option.attr('value', '');
  option.text('请选择');
  jq.append(option);
  $.each(data, function (i, item) {
   var option = $('<option></option>');
   option.attr('value', item[jq.attr('valuefield')]);
   option.text(item[jq.attr('textfield')]);
   jq.append(option);
  });
  });
 }
 };
 //6.デフォルトパラメータリスト
 $.fn.combobox.defaults = {
 url: null,
 param: null,
 data: null,
 valueField: 'value',
 textField: 'text',
 placeholder: '请选择',
 onBeforeLoad: function (param) { },
 onLoadSuccess: function () { },
 onChange: function (value) { }
 };
 //この段落は新しいもので、ページの初期化が完了した後に初期化メソッドを呼び出します
 $(document).ready(function () {
 $('.combobox').each(function () {
  var $combobox = $(this);
  $.fn.combobox.call($combobox, $combobox.data());
 });
 });
})(jQuery);

大部分のコードは前回と変わっていません。ここでは最下部の段落に注目してください

//この段落は新しいもので、ページの初期化が完了した後に初期化メソッドを呼び出します
 $(document).ready(function () {
 $('.combobox').each(function () {
  var $combobox = $(this);
  $.fn.combobox.call($combobox, $combobox.data());
 });
 });

明らかに、ページの初期化が完了した後にスタイルセレクタを使用してコンポーネントを初期化します。eachを使用して、複数の.comboboxスタイルがある場合、それぞれを順次初期化します。$.fn.combobox.call($combobox, $combobox.data());を呼び出し、callメソッドを呼び出してcomboboxの初期化を行い、callメソッド内の2つのパラメータはそれぞれ対応しています：

1）現在の初期化しているjQueryオブジェクト

2）パラメータリスト。ここで$combobox.data()を通じて取得されるのは、すべてのHTML内のdata-*属性。すべてのdata-*属性をパラメータとしてcomboboxの初期化メソッドに渡します。

2、HTML内でdata-*初期化

<select id="Search_"
  name="Search_province"
  class="form-control combobox
  data-url="/Home/GetProvince
  data-param='{"type":"0"}'
  data-text-field="Name"
  data-value-field="Id">
 </select>

指定data-*属性。先ほどの説明から、ここでの初期化は.comboboxのスタイルセレクタを通じて行われているため、data-*コンポーネントの初期化を行う際には、class="combobox"のスタイルを設定する必要があります。そうすることで、後台が初期化する必要があるタグを取得できます。

3、後台C#メソッド

public class HomeController : Controller
 {
 public List<string> lstProvince = new List<string>() { "北京市", "天津市", "重庆市", "上海市", "河北省", "山西省", "辽宁省", "吉林省", "黑龙江省", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "海南省", "四川省", "贵州省", "云南省", "陕西省", "甘肃省", "青海省", "台湾省", "内蒙古自治区", "广西壮族自治区", "西藏自治区", "宁夏回族自治区", "新疆维吾尔自治区", "香港特别行政区", "澳门特别行政区" };
 public JsonResult GetProvince(string type)
 {
  var lstRes = new List<Province>();
  for (var i = 0; i < 10; i}}++)
  {
  var oModel = new Province();
  oModel.Id = i;
  oModel.Name = lstProvince[i];
  lstRes.Add(oModel);
  }
  return Json(lstRes, JsonRequestBehavior.AllowGet);
 }
 }
 public class Province
 {
 public int Id { get; set; }
 public string Name { get; set; }
 }

テストコードについて、特に言うことはありません。

4、デバッグ効果

を得る基本が完了しました。

を通じて、効果-*これで、data

第3章　まとめ

上で簡単にjquery data()メソッドとhtmlを結合してのデモンストレーションを行いました。5 data-*属性の使用方法。基本的に、ブログ主の要求を満たすことができます：jsコードを追加せずにタグを直接初期化します。使用時は、jquery.jsとjquery.extension.jsファイルを直接参照してください。しかし、html5その特性がある場合、ブラウザに対する要件が一定です。もちろん、この用法の機能は基本的ですが、簡単なコンポーネントの初期化には十分です。

文中で誤解がある場合は、お知らせください。ブログ主は感謝します。

これで本文のすべてが終わりました。皆様の学習に役立てば幸いです。また、呐喊教程を多くのサポートをお願いします。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされたものであり、本サイトは所有権を有しません。また、人工的な編集は行われていません。著作権に関する問題がある場合は、メールを送信してください：notice#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。）