在没有js代码的情况下初始化组件

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

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

首先，jquery data()在网上搜索了一圈，终于找到了数据的来源-*了。原来在Jquery和html5里面是好事，真的是好事！我们先来看看jquery的API。

原始用法如下：

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

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

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

1)所有数据属性必须以“data-”开头，2)属性之间应该用“-”分隔，3)jquery中取属性时应该去掉“data”和“-”。以此为基础，我们知道如何在标签中设置属性，然后在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-。从上面，我们知道这里的初始化是通过样式选择器初始化组件。combobox，所以要求如果要用data-*来初始化组件，就必须设置一个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中的一个特性，所以对浏览器必须有一定的要求。当然，这个用法函数比较初级，但是对于一些简单组件的初始化就足够了。

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