JS组件系列之使用HTML标签的data属性初始化JS组件


Posted in Javascript onSeptember 14, 2016

前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里面,可是从后台取数据就需要js的初始化,所以导致页面初始化的时候js的初始化代码里面出现很多重复的代码,看着很闹心。于是想起bootstrap table里面的data属性来,如果能够直接在html里面使用data-*这种方式来初始化简单的组件,那该多爽。我们先来看看bootstrap table的文档:

JS组件系列之使用HTML标签的data属性初始化JS组件

可以看到bootstrap table里面几乎所有的属性、事件都可以用data-*这种方式来做,感觉还不错。那博主就要开始研究了。data-*这东西是哪里来的呢?

一、jquery data()初探

网上查了一圈,终于找到data-*的出处了,原来是Jquery和html5里面的,好东西,真是好东西!我们先来看看jquery的API

原始用法如下:

JS组件系列之使用HTML标签的data属性初始化JS组件

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

下面看看data()方法和html5 data-*属性的结合使用

JS组件系列之使用HTML标签的data属性初始化JS组件

哈哈,这个东西好,通过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);

大部分代码和上次的没啥区别,我们重点看看最下面这一段

//这一段是新加的,在页面初始化完成之后调用初始化方法
 $(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-*属性。将所有的data-*属性作为参数传入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-*做组件的初始化,必须要设置一个class="combobox"样式,这样后台才取得到需要初始化的标签。

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、调试效果

JS组件系列之使用HTML标签的data属性初始化JS组件

JS组件系列之使用HTML标签的data属性初始化JS组件

得到效果

JS组件系列之使用HTML标签的data属性初始化JS组件

这样基本就完成通过data-*来初始化组件了。

三、总结

上面简单演示了下jquery data()方法结合html5 data-*属性的使用。基本上能达到博主的需求:不用多写一行js代码直接初始化标签。使用的时候直接引用jquery.js和jquery.extension.js文件即可。但是我们知道既然是html5里面的特性,那么对浏览器就得有一定的要求了。当然,此用法功能比较初级,但是对于一些简单组件的初始化够用了。

文中如果有理解不对的地方,欢迎指出,博主将不胜感激。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
jquery实现下载图片功能
Jul 18 jQuery
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 #Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 #Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 #Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 #Javascript
利用bootstrapValidator验证UEditor
Sep 14 #Javascript
JavaScript鼠标特效大全
Sep 13 #Javascript
javascript表单控件实例讲解
Sep 13 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
在layui中select更改后生效的方法
2019/09/05 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python实现的简单dns查询功能示例
2017/05/24 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
Python turtle库的画笔控制说明
2020/06/28 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
护士专业推荐信
2013/11/02 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
幼儿园秋游感想
2014/03/12 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
信访工作个人总结
2015/03/03 职场文书
技术入股合作协议书
2016/03/21 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Java的Object类的九种方法
2022/04/13 Java/Android