Serie di componenti JS: inizializzazione dei componenti JS utilizzando l'attributo data di HTML tag

Prefazione: Recentemente, utilizzando i componenti di Bootstrap, ho riscontrato un problema di facilità d'uso. Molti componenti semplici richiedono la scrittura di un gran numero di codice di inizializzazione in JS, come ad esempio un etichetta select semplice, che necessita solo di ottenere dati dal backend per riempire le opzioni. Tuttavia, per ottenere dati dal backend è necessario eseguire l'inizializzazione di JS, il che porta a un gran numero di codice duplicato nell'inizializzazione della pagina, il che è molto fastidioso. Così, mi sono ricordato dell'attributo data di bootstrap table. Se potessimo inizializzare direttamente i componenti semplici utilizzando il metodo data-* all'interno dell'HTML, sarebbe molto più piacevole. Vediamo prima la documentazione di bootstrap table:

可以看到，在bootstrap table中，几乎所有的属性、事件都可以使用data-*这种方式来处理，感觉还不错。那么博主就要开始研究了。data-*这个功能是从哪里来的呢？

一、初探jQuery data()

在网上搜索了一番，终于找到了data-*的来源，原来是jQuery和HTML5中的，好东西，真是好东西！我们先来看看jQuery的API。

原始用法如下：

作用其实很明显，就是为元素添加某些属性和数据，或者获取值。

下面看看data()方法和HTML5 data-*属性的组合使用

哈哈，这个功能不错，通过HTML5的data-*设置的值，可以用jQuery的data()方法获取。这里的规则如下：

1）所有的data属性必须以“data-”开头

2）属性使用“-”分隔

3）在jQuery中获取属性时，去掉“data”和“-”即可。

有了这个作为基础，我们就知道如何在标签中设置属性，然后在JavaScript中获取对应的属性了。下面结合上次封装combobox的例子进行说明。

二、使用jQuery data()实现data-*初始化组件

还记得之前JS组件系列——封装自己的JS组件，你也可以在这篇文章中封装了一个简单的combobox，可以通过URL从后台获取数据。那么下面我们仍然在这个组件的基础上进行操作，实现直接在select标签中添加data-*属性来初始化下拉框组件。

1、JavaScript组件封装代码

(function ($) {
 //1.定义jQuery的扩展方法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. Add default value
 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. Check if the parameter list passed by the user contains the data set 'data', if it does, do not send an AJAX request from the backend, otherwise send an AJAX request from the backend to get data
 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. If the passed value is a string, it represents a method call.
 $.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('Si prega di selezionare');
  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);
  });
  });
 }
 };
 // Lista dei parametri predefiniti 6.
 $.fn.combobox.defaults = {
 url: null,
 param: null,
 data: null,
 valueField: 'value',
 textField: 'text',
 placeholder: 'Si prega di selezionare',
 onBeforeLoad: function (param) { },
 onLoadSuccess: function () { },
 onChange: function (value) { }
 };
 // Questo paragrafo è stato aggiunto, si chiama il metodo di inizializzazione dopo aver completato l'inizializzazione della pagina
 $(document).ready(function () {
 $('.combobox').each(function () {
  var $combobox = $(this);
  $.fn.combobox.call($combobox, $combobox.data());
 });
 });
})(jQuery);

La maggior parte del codice non ha differenze rispetto alla volta precedente, diamo un'occhiata in particolare a questo paragrafo in fondo

// Questo paragrafo è stato aggiunto, si chiama il metodo di inizializzazione dopo aver completato l'inizializzazione della pagina
 $(document).ready(function () {
 $('.combobox').each(function () {
  var $combobox = $(this);
  $.fn.combobox.call($combobox, $combobox.data());
 });
 });

Chiaramente, dopo aver completato l'inizializzazione della pagina, si inizializza il componente tramite il selettore di stile. Utilizza each, se ci sono più stili .combobox, si inizializza ciascuno di essi in sequenza. Si chiama il metodo call con $.fn.combobox.call($combobox, $combobox.data()); e i due parametri corrispondono a:

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

Codice di test, niente da dire.

4. Debugging del risultato

Risultato ottenuto

In questo modo, di base, è possibile inizializzare i componenti tramite data-*.

Terza parte: Sommario

Di seguito è riportato un esempio semplice dell'uso della combinazione del metodo data() di jquery con l'attributo data-* di html5. Sulla base di questo, possiamo raggiungere il bisogno del blogger: non è necessario scrivere una riga di codice js in più per inizializzare l'etichetta. Durante l'uso, è sufficiente citare i file jquery.js e jquery.extension.js. Tuttavia, sappiamo che, poiché è una caratteristica di html5, ci sono determinati requisiti per i browser. Naturalmente, questo uso ha una funzionalità di base, ma è sufficiente per l'inizializzazione di componenti semplici.

Se c'è qualcosa di sbagliato nell'articolo, ti preghiamo di segnalarlo, il blogger sarà grato.

Questo è tutto il contenuto dell'articolo. Spero che sia utile per la tua apprendimento e ti prego di sostenere fortemente il tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, di proprietà del rispettivo autore. Il contenuto è stato contribuito volontariamente dagli utenti di Internet e caricato autonomamente; questo sito non detiene il diritto di proprietà e non ha effettuato una revisione editoriale, né assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a: notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata la veridicità, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Manuale di base