JS组件系列用HTML标签的数据属性初始化JS组件

最近，在使用bootstrap组件时，我们发现了一个易于使用的问题。很多简单的组件初始化都需要在js中写很多初始化代码，比如一个简单的select标签，因为它只需要从后台获取数据来填充选项，但是从后台获取数据需要js初始化，这就导致页面初始化时JS初始化代码中有很多重复的代码，非常烦人。然后我想到了引导表中的数据属性。如果我可以直接在html中使用data-*来初始化简单的组件，那就太好了。让我们先看看引导表文档：

可以看到bootstrap表中几乎所有的属性和事件都可以用data-*的方式来完成，感觉还不错。然后博主会开始学习。数据-*这东西从哪来的？

1.jquery数据的初步研究()

我在网上搜索，终于找到了数据的来源-*。这在Jquery和html5中被证明是一件好事。真的是好事！让我们首先看看jquery的API

原始用法如下：

其实作用很明显，就是给元素增加一些属性和数据或者取值。

让我们看看data()方法和html5 data-*属性的组合

哈哈，这个东西不错。html5的data-*设置的值可以通过jquery的data()方法获得。这里的规则如下：

1)所有数据属性必须以“data-”开头。

2)属性用“-”分隔，

3)在3)jquery中提取属性时，删除“数据”和“-”。

以此为基础，我们知道如何在标签中设置属性，然后在js中获取相应的属性。以下是最后一个打包组合框的示例。

其次，jquery data()实现了data-*初始化组件

请记住，JS组件系列——之前封装了自己的JS组件，您也可以在本文中封装一个简单的combobox，它可以通过url在后台获取数据。然后，我们仍然捉弄这个组件，通过在select标记中直接添加data-*属性来初始化下拉框组件。

1.js组件封装代码

（函数($) { //1。定义jquery的扩展方法combobox $。fn。combobox=function(options，param){ if(options类型==' string '){ return $。fn。组合框。方法[选项](this，param)；} //2.将调用时候传过来的参数和系统默认值参数合并选项=$。extend({}，$.fn.combobox.defaults，options | | { })；//3.添加默认值var target=$(this)；target.attr('valuefield '，选项。值字段)；target.attr('textfield '，选项。text field)；目标。empty()；var option=$(' option/option ')；option.attr('value '，' ')；选项。文本(选项。占位符)；target.append(选项);//4.判断用户传过来的参数列表里面是否包含数据数据数据集，如果包含，不用发创建交互式、快速动态网页应用的网页开发技术从后台取，否则否送创建交互式、快速动态网页应用的网页开发技术从后台取数据if (options.data) { init(target，options。数据)；} else {//var param={ }；选项。onbeforeload。呼叫(目标，选项。param)；if(！options.url)返回；if(选项类型。param==' string '){ options。param=JSON。解析(选项。param)；} $.getJSON(options.url，options.param，function (data) { init(target，data)；});}函数初始化(目标，数据){ $。每个（数据、函数(I、item){ var option=$(' option/option ')；option.attr('value '，item[options。值字段])；选项。文本(项目[选项。text field])；target.append(选项);});options.onLoadSuccess.call(目标);}目标。解除绑定(“更改”)；target.on('change ')，函数{ if (options.onChange)返回选项。onchange(目标。val())；});} //5.如果传过来的是字符串，代表调用方法$ .fn。组合框。methods={ getvalue : function(jq){ return jq。val()；}，setValue:函数(jq，param){ jq。val(参数)；}，load:函数(jq，url) { $ .getJSON(url)，函数（数据){ jq。empty()；var option=$(' option/option ')；option.attr('value '，' ')；option.text('请选择');jq.append(选项);$.每个（数据、函数(I、item){ var option=$(' option/option ')；option.attr('value '，item[jq。attr('值字段')])；选项。文本(项目[jq。attr('文本字段')])；jq.append(选项);});});} };//6.默认参数列表$ .fn。组合框。默认值={ URL : null，参数： null，数据： null，值字段： '值'，文本字段： '文本'，占位符： '请选择、onBeforeLoad:函数(参数){ }、onLoadSuccess:函数(){ }、onChange:函数(值){ }；//这一段是新加的，在页面初始化完成之后调用初始化方法$(文档)。ready(function () { $(')).combobox’).每个(function(){ var $ combobox=$(this)；$.fn.combobox.call($combobox，$combobox。data())；}) });})(jQuery)；大部分代码和上次的没啥区别，我们重点看看最下面这一段

//这一段是新加的，在页面初始化完成之后调用初始化方法$(文档)。ready(function () { $(')).combobox’).每个(function(){ var $ combobox=$(this)；$.fn.combobox.call($combobox，$combobox。data())；}) });很明显，就是在页面初始化完成之后通过样式选择器去初始化组件。使用了每一个，如果有多个。组合框样式，依次去初始化每一个。通过$.fn.combobox.call($combobox，$combobox。data())；调用呼叫方法去调用组合框的初始化，打电话方法里面两个参数分别对应：

1)当前初始化的jquery对象

2)参数列表。这里通过$combobox.data()得到的就是所有超文本标记语言里面的数据-*属性。将所有的数据-*属性作为参数传入组合框的初始化方法中。

2、html里面通过数据-*初始化

选择Id=' Search _ ' Name=' Search _ vehicle ' class=' form-control combobox ' data-URL='/Home/getvehicle ' data-param=' { ' type ' : ' 0 ' } ' data-text-field=' Name ' data-value-field=' Id '/select指定数据-*属性。从上面我们知道这里初始化是通过样式选择器。组合框来初始化组件的，所以就要求，如果想要使用数据-*做组件的初始化，必须要设置一个class='combobox '样式，这样后台才取得到需要初始化的标签。

3、后台C#方法

公共课家庭控制器：控制器{公共课liststring lst省份=新增liststring () { '北京'，'天津'，'重庆'，'上海'，'河北省'，'山西省'，'辽宁省'，'吉林省，黑龙江省，江苏省，浙江省，安徽省，福建省，江西省，山东省，河南省，湖北省，湖南省，广东省，海南省和四川省内蒙古自治区；广西壮族自治区；西藏自治区；宁夏回族自治区；新疆维吾尔自治区；香港特别行政区和澳门特别行政区。public JsonResult GetProvince(字符串类型){ var lstRes=new listPublic()；for(var I=0；i 10i ) { var oModel=新省()；oModel。id=I；oModel。name=LSt ProvinCe[I]；lstRes。add(Omo del)；}返回Json(lstRes，JsonRequestBehavior。allow get)；} }公共类省份{ public int Id { get设置；}公共字符串名称{ get设置；}}测试代码，没什么好说的。

4.调试效果

获得效果

这基本上通过data-*完成了组件的初始化。

三.摘要

上面简单演示了jquery data()方法结合html5 data-*属性的使用。基本上可以满足博主的需求：不需要多写一行js代码直接初始化标签。使用时可以直接引用jquery.js和jquery.extension.js文件。但是我们知道，由于它是html5中的一个特性，所以对浏览器有一定的要求。当然，这个用法函数比较初级，但是对于一些简单组件的初始化就足够了。

如果这篇文章有什么误解，请指出，博主会非常感激。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。