単一の js code_javascript スキルなしでコンポーネントを初期化する

私は最近、ブートストラップ コンポーネントを使用する際のユーザビリティの問題を発見しました。多くの単純なコンポーネントの初期化では、オプションを埋めるためにバックグラウンドからデータを取得するだけで済むため、単純な選択タグなどの多くの初期化コードを JS で記述する必要があります。内部では、バックグラウンドからデータを取得するために js の初期化が必要なので、ページが初期化されるときに、js の初期化コードに繰り返しコードが多数含まれており、非常に面倒に見えます。次に、ブートストラップ テーブルの data 属性を考えました。単純なコンポーネントを初期化するために HTML で直接 data-* を使用できれば素晴らしいでしょう。まずブートストラップ テーブルのドキュメントを見てみましょう:

ブートストラップ テーブル内のほとんどすべての属性とイベントが data-* を使用して実行できることがわかります。これはかなり良いと思います。それからブロガーは調査を開始します。 data-* はどこから来たのでしょうか?

1. jquery data() についての予備調査
インターネットで検索した結果、データのソースが Jquery と html5 にあることがわかりました。本当に良いものでした。まずは jquery の API を見てみましょう

本来の使い方は以下の通りです:

この関数は実際には非常に明白で、特定の属性とデータを要素に追加するか、値を取得します。

data() メソッドと html5 data-* 属性の組み合わせを見てみましょう

はは、これはいいですね。html5のdata-*で設定した値はjqueryのdata()メソッドで取得できます。ここでのルールは次のとおりです:

• 1) すべてのデータ属性は「data-」、
で始まる必要があります。
• 2) 属性は「-」、
で区切られます。
• 3) jquery で属性を取得するときに「data」と「-」を削除するだけです。

これを基礎として、タグに属性を設定し、js で対応する属性を取得する方法を理解します。前回のコンボボックスのカプセル化例に基づいて説明します。

2. jquery data() は data-* 初期化コンポーネントを実装します
前の JS コンポーネント シリーズを思い出してください - 独自の JS コンポーネントのカプセル化 この記事では、URL を通じてバックグラウンドからデータをフェッチできる単純なコンボボックスをカプセル化することもできます。したがって、以下では、このコンポーネントに基づいて、 data-* 属性を select タグに直接追加して、ドロップダウン ボックス コンポーネントを初期化するトリックをまだ行っています。

1. js コンポーネントのパッケージ化コード

(function ($) {
  //1.定义jquery的扩展方法combobox
  $.fn.combobox = function (options, param) {
    if (typeof options == 'string') {
      return $.fn.combobox.methods[options](this, param);
    }
    //2.将调用时候传过来的参数和default参数合并
    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从后台取，否则否送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());
    })
  });

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

• 1) 現在初期化されている jquery オブジェクト
• 2) パラメータリスト。 $combobox.data() を通じてここで取得できるのは、すべての HTML の data-* 属性です。すべての data-* 属性をパラメータとしてコンボボックスの初期化メソッドに渡します。

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-* 属性を指定します。上記のことから、ここでの初期化は、スタイル selector.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; }
  }

Testing the code, nothing much to say.

4. Debugging effect

Get results

This basically completes the initialization of components through data-*.

The above briefly demonstrates the use of jquery data() method combined with html5 data-* attributes. Basically, it can meet the requirements: there is no need to write an extra line of js code to directly initialize the tag. You can directly reference the jquery.js and jquery.extension.js files when using them. But we know that since it is a feature in HTML5, there must be certain requirements for the browser. Of course, this usage function is relatively rudimentary, but it is enough for the initialization of some simple components.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.