前言：最近使用bootstrap組件的時候發(fā)現(xiàn)一個易用性問題，很多簡單的組件初始化都需要在JS里面寫很多的初始化代碼，比如一個簡單的select標(biāo)簽，因?yàn)閮H僅只是需要從后臺獲取數(shù)據(jù)填充到option里面，可是從后臺取數(shù)據(jù)就需要js的初始化，所以導(dǎo)致頁面初始化的時候js的初始化代碼里面出現(xiàn)很多重復(fù)的代碼，看著很鬧心。于是想起bootstrap table里面的data屬性來，如果能夠直接在html里面使用data-*這種方式來初始化簡單的組件，那該多爽。我們先來看看bootstrap table的文檔：
可以看到bootstrap table里面幾乎所有的屬性、事件都可以用data-*這種方式來做，感覺還不錯。那博主就要開始研究了。data-*這東西是哪里來的呢？
一、jquery data()初探
網(wǎng)上查了一圈，終于找到data-*的出處了，原來是Jquery和html5里面的，好東西，真是好東西！我們先來看看jquery的API
原始用法如下：
作用其實(shí)很明顯，就是給元素加某些屬性和數(shù)據(jù)，或者取值。
下面看看data()方法和html5 data-*屬性的結(jié)合使用
哈哈，這個東西好，通過html5 的data-*設(shè)置的值，能夠用jquery 的data()方法取到。這里的規(guī)則如下：
1）所有的data屬性必須以“data-”開頭，
2）屬性用“-”隔開，
3）jquery里面取屬性的時候去掉“data”和“-”即可。
有了這個作為基礎(chǔ)，我們就知道如何在標(biāo)簽里面設(shè)置屬性，然后在js里面取對應(yīng)的屬性了。下面就結(jié)合上次封裝combobox的例子來說明下。
二、jquery data()實(shí)現(xiàn)data-*初始化組件
還記得之前JS組件系列――封裝自己的JS組件，你也可以這篇里面封裝了一個簡單的combobox，可以通過url去后臺取數(shù)據(jù)。那么下面我們?nèi)匀辉谶@個組件的基礎(chǔ)上做手腳，實(shí)現(xiàn)直接在select標(biāo)簽里面添加data-*屬性來初始化下拉框組件。
1、js組件封裝代碼
(function ($) { //1.定義jquery的擴(kuò)展方法combobox $.fn.combobox = function (options, param) { if (typeof options == 'string') { return $.fn.combobox.methods[options](this, param); } //2.將調(diào)用時候傳過來的參數(shù)和default參數(shù)合并 options = $.extend({}, $.fn.combobox.defaults, options || {}); //3.添加默認(rèn)值 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.判斷用戶傳過來的參數(shù)列表里面是否包含數(shù)據(jù)data數(shù)據(jù)集，如果包含，不用發(fā)ajax從后臺取，否則否送ajax從后臺取數(shù)據(jù) 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.如果傳過來的是字符串，代表調(diào)用方法。 $.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.默認(rèn)參數(shù)列表 $.fn.combobox.defaults = { url: null, param: null, data: null, valueField: 'value', textField: 'text', placeholder: '請選擇', onBeforeLoad: function (param) { }, onLoadSuccess: function () { }, onChange: function (value) { } }; //這一段是新加的，在頁面初始化完成之后調(diào)用初始化方法 $(document).ready(function () { $('.combobox').each(function () { var $combobox = $(this); $.fn.combobox.call($combobox, $combobox.data()); }) }); })(jQuery);大部分代碼和上次的沒啥區(qū)別，我們重點(diǎn)看看最下面這一段
//這一段是新加的，在頁面初始化完成之后調(diào)用初始化方法 $(document).ready(function () { $('.combobox').each(function () { var $combobox = $(this); $.fn.combobox.call($combobox, $combobox.data()); }) });很明顯，就是在頁面初始化完成之后通過樣式選擇器去初始化組件。使用了each，如果有多個.combobox樣式，依次去初始化每一個。通過$.fn.combobox.call($combobox, $combobox.data());調(diào)用call方法去調(diào)用combobox的初始化，call方法里面兩個參數(shù)分別對應(yīng)：
1）當(dāng)前初始化的jquery對象
2）參數(shù)列表。這里通過$combobox.data()得到的就是所有html里面的data-*屬性。將所有的data-*屬性作為參數(shù)傳入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-*做組件的初始化，必須要設(shè)置一個class="combobox"樣式，這樣后臺才取得到需要初始化的標(biāo)簽。
3、后臺C#方法
public class HomeController : Controller { public List<string> lstProvince = new List<string>() { "北京市", "天津市", "重慶市", "上海市", "河北省", "山西省", "遼寧省", "吉林省", "黑龍江省", "江蘇省", "浙江省", "安徽省", "福建省", "江西省", "山東省", "河南省", "湖北省", "湖南省", "廣東省", "海南省", "四川省", "貴州省", "云南省", "陜西省", "甘肅省", "青海省", "臺灣省", "內(nèi)蒙古自治區(qū)", "廣西壯族自治區(qū)", "西藏自治區(qū)", "寧夏回族自治區(qū)", "新疆維吾爾自治區(qū)", "香港特別行政區(qū)", "澳門特別行政區(qū)" }; 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、調(diào)試效果
得到效果
這樣基本就完成通過data-*來初始化組件了。
三、總結(jié)
上面簡單演示了下jquery data()方法結(jié)合html5 data-*屬性的使用?；旧夏苓_(dá)到博主的需求：不用多寫一行js代碼直接初始化標(biāo)簽。使用的時候直接引用jquery.js和jquery.extension.js文件即可。但是我們知道既然是html5里面的特性，那么對瀏覽器就得有一定的要求了。當(dāng)然，此用法功能比較初級，但是對于一些簡單組件的初始化夠用了。
文中如果有理解不對的地方，歡迎指出，博主將不勝感激。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
