前言：最近使用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);
大部分代码和上次的没啥区别，我们重点看看最下面这一段