Initialisieren Sie Komponenten ohne ein einziges JS-Code-Javascript-Kenntnis

Ich habe kürzlich ein Usability-Problem bei der Verwendung von Bootstrap-Komponenten entdeckt. Bei vielen einfachen Komponenteninitialisierungen muss viel Initialisierungscode in JS geschrieben werden, z. B. ein einfaches Select-Tag, da nur Daten aus dem Hintergrund abgerufen werden müssen, um die Optionen auszufüllen Das Abrufen von Daten aus dem Hintergrund erfordert eine JS-Initialisierung. Wenn die Seite initialisiert wird, enthält der JS-Initialisierungscode viele wiederholte Codes, was sehr ärgerlich aussieht. Dann dachte ich an das Datenattribut in der Bootstrap-Tabelle. Es wäre großartig, wenn ich data-* direkt in HTML verwenden könnte, um einfache Komponenten zu initialisieren. Werfen wir zunächst einen Blick auf die Dokumentation der Bootstrap-Tabelle:

Sie können sehen, dass fast alle Attribute und Ereignisse in der Bootstrap-Tabelle mit data-* erledigt werden können, was sich ziemlich gut anfühlt. Dann beginnt der Blogger mit der Recherche. Woher kommt data-*?

1. Eine vorläufige Studie zu jquery data()
Nachdem ich mich im Internet umgesehen hatte, fand ich endlich die Datenquelle. Es stellte sich heraus, dass es sich um JQuery und HTML5 handelte. Werfen wir zunächst einen Blick auf die API von jquery

Die ursprüngliche Verwendung ist wie folgt:

Die Funktion ist eigentlich sehr offensichtlich: Sie besteht darin, dem Element bestimmte Attribute und Daten hinzuzufügen oder einen Wert anzunehmen.

Werfen wir einen Blick auf die kombinierte Verwendung der data()-Methode und der HTML5-Data-*-Attribute

Haha, das Ding ist gut. Der durch data-* von HTML5 festgelegte Wert kann mit der data()-Methode von jquery abgerufen werden. Hier gelten folgende Regeln:

• 1) Alle Datenattribute müssen mit „data-“ beginnen,
• 2) Attribute werden durch „-“ getrennt,
• 3) Entfernen Sie einfach „Daten“ und „-“, wenn Sie Attribute in JQuery abrufen.

Auf dieser Grundlage werden wir wissen, wie man Attribute in Tags festlegt und dann die entsprechenden Attribute in js erhält. Das Folgende wird am Beispiel der letztmaligen Kapselung einer Combobox erläutert.

2. jquery data() implementiert die data-*-Initialisierungskomponente
Erinnern Sie sich an die vorherige JS-Komponentenserie – Kapseln Ihrer eigenen JS-Komponenten. Sie können in diesem Artikel auch eine einfache Combobox kapseln, die Daten aus dem Hintergrund über die URL abrufen kann. Im Folgenden führen wir also immer noch Tricks auf Basis dieser Komponente aus, um das data-*-Attribut direkt zum Select-Tag hinzuzufügen, um die Dropdown-Box-Komponente zu initialisieren.

1. js-Komponentenverpackungscode

(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());
    })
  });

Natürlich wird die Komponente über die Stilauswahl initialisiert, nachdem die Seiteninitialisierung abgeschlossen ist. Wenn es mehrere .combobox-Stile gibt, initialisieren Sie jeden nacheinander. Rufen Sie die Call-Methode über $.fn.combobox.call($combobox, $combobox.data()) auf, um die Combobox-Initialisierung aufzurufen. Die beiden Parameter in der Call-Methode entsprechen:

• 1) Derzeit initialisiertes JQuery-Objekt
• 2) Parameterliste. Was Sie hier über $combobox.data() erhalten, sind die data-*-Attribute in allen HTML-Dateien. Übergeben Sie alle data-*-Attribute als Parameter an die Initialisierungsmethode der Combobox.

2. Initialisierung über data-* in HTML

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

Daten-*-Attribute angeben. Aus dem Obigen wissen wir, dass die Initialisierung hier darin besteht, die Komponente über den Stil selector.combobox zu initialisieren. Wenn Sie also data-* zum Initialisieren der Komponente verwenden möchten, müssen Sie einen class="combobox"-Stil festlegen dass der Hintergrund Tags erhalten kann, die initialisiert werden müssen.

3. Backend-C#-Methode

 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; }
  }

Menguji kod, tidak banyak yang perlu diperkatakan.

4. Kesan nyahpepijat

Dapatkan hasil

Ini pada asasnya melengkapkan permulaan komponen melalui data-*.

Di atas secara ringkas menunjukkan penggunaan kaedah jquery data() digabungkan dengan atribut html5 data-*. Pada asasnya, ia boleh memenuhi keperluan: tidak perlu menulis baris tambahan kod js untuk memulakan terus teg. Anda boleh merujuk terus fail jquery.js dan jquery.extension.js apabila menggunakannya. Tetapi kita tahu bahawa kerana ia adalah ciri dalam HTML5, ia mesti mempunyai keperluan tertentu untuk penyemak imbas. Sudah tentu, fungsi penggunaan ini agak asas, tetapi ia cukup untuk permulaan beberapa komponen mudah.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.