不用一句js程式碼初始化元件_javascript技巧

最近使用bootstrap元件的時候發現一個易用性問題，很多簡單的元件初始化都需要在JS裡面寫很多的初始化程式碼，例如一個簡單的select標籤，因為只是需要從後台取得資料填入option裡面，可是從後台取資料就需要js的初始化，所以導致頁面初始化的時候js的初始化程式碼裡面出現很多重複的程式碼，看著很鬧心。於是想起bootstrap table裡面的data屬性來，如果能夠直接在html裡面使用data-*這種方式來初始化簡單的元件，那該有多爽。我們先來看看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」和「-」即可。

有了這個作為基礎，我們就知道如何在標籤裡面設定屬性，然後在js裡面取對應的屬性了。下面就結合上次封裝combobox的範例來說明下。

二、jquery data()實作data-*初始化元件
還記得之前JS組件系列－封裝自己的JS元件，你也可以這篇裡面封裝了一個簡單的combobox，可以透過url去後台取資料。那麼下面我們仍然在這個元件的基礎上做手腳，實作直接在select標籤裡面加入data-*屬性來初始化下拉框元件。

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

很明顯，就是在頁面初始化完成之後透過樣式選擇器去初始化元件。使用了each，如果有多個.combobox樣式，依序去初始化每一個。透過 $.fn.combobox.call($combobox, $combobox.data()); 呼叫call方法去呼叫combobox的初始化，call方法裡面兩個參數分別對應：

• 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-*來初始化元件了。

上面簡單示範了下jquery data()方法結合html5 data-*屬性的使用。基本上能達到需求：不用多寫一行js程式碼直接初始化標籤。使用的時候直接引用jquery.js和jquery.extension.js檔案即可。但我們知道既然是html5裡面的特性，那麼對瀏覽器就得有一定的要求了。當然，此用法功能比較初級，但是對於一些簡單組件的初始化就夠用了。

以上就是本文的全部內容，希望對大家的學習有所幫助。