本文介绍如何利用jQuery的data()方法与HTML5的data-*属性，实现前端组件的零JavaScript代码初始化。通过封装jQuery插件，读取HTML标签中的自定义属性并自动调用初始化逻辑，简化了Bootstrap等UI组件的配置过程，提升了开发效率。
引言：组件初始化的痛点与data-*属性构想
近期在使用Bootstrap组件时注意到一个便捷性问题：许多基础组件的初始化往往需要编写大量JavaScript代码。例如，一个仅需从后端获取数据并填充到option标签的简单select元素，为了获取这些数据就必须在JS中编写初始化逻辑，导致页面加载时充斥着大量重复的初始化代码，影响代码可读性。受Bootstrap Table中data属性用法的启发，如果能在HTML中直接通过data-*属性来初始化简单组件，将极大提升开发体验。首先回顾Bootstrap Table的文档规范：
观察发现，Bootstrap Table中绝大多数属性与事件均支持通过data-*形式配置，这种设计十分便捷。接下来将深入探讨其实现原理。data-*属性的来源究竟何在？
jQuery data()与HTML5 data-*属性解析
一、jQuery data()方法解析 经过查阅相关资料，确认data-*属性源自jQuery与HTML5的结合，这一特性非常实用。首先查看jQuery的API文档：
其基础用法如下所示：
该方法的用途十分明确，主要用于为DOM元素添加自定义属性与数据，或读取这些值。
接下来探讨data()方法与HTML5 data-*属性的协同工作机制：
这一机制十分巧妙，通过HTML5的data-*设置的值，可以直接被jQuery的data()方法读取。其具体规则如下：
- 1）所有data属性必须以“data-”前缀开头；
- 2）属性名之间使用“-”进行分隔；
- 3）在jQuery中读取属性时，需去除“data”前缀及“-”符号。
基于上述原理，我们可以在HTML标签中设置属性，并在JS中获取对应值。以下结合之前封装的combobox组件示例进行说明。
基于jQuery data()实现组件初始化
二、基于jQuery data()实现data-*初始化组件 回顾之前JS组件系列文章——《封装自己的JS组件，你也可以》中封装的一个简单combobox组件，该组件支持通过url从后端获取数据。在此基础上进行改造，实现在select标签中直接添加data-*属性来初始化下拉框组件。
JS组件封装代码实现
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-*属性值，并将其作为参数传入combobox的初始化方法中。
HTML中data-*属性的配置
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"，以便后端脚本能识别并处理需要初始化的标签。
后端C#方法支持
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特性，该用法对浏览器版本有一定要求。尽管此功能较为初级，但对于简单组件的初始化已足够使用。
以上就是本文的全部内容，希望对各位的学习有所助益。