不用一句js代码初始化组件


Posted in Javascript onJanuary 27, 2016

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

不用一句js代码初始化组件

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

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

原始用法如下:

不用一句js代码初始化组件

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

下面看看data()方法和html5 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代码初始化组件

不用一句js代码初始化组件

得到效果

不用一句js代码初始化组件

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

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

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

Javascript 相关文章推荐
利用Jquery实现可多选的下拉框
Feb 21 Javascript
javascript实现的简单计时器
Jul 19 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 #Javascript
封装属于自己的JS组件
Jan 27 #Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 #Javascript
Bootstrap树形控件使用方法详解
Jan 27 #Javascript
window.onerror()的用法与实例分析
Jan 27 #Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 #Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 #Javascript
You might like
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python的gevent框架的入门教程
2015/04/29 Python
python实现随机漫步方法和原理
2019/06/10 Python
机器学习实战之knn算法pandas
2019/06/22 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
三方合作协议书范本
2014/04/18 职场文书
临床护理求职信
2014/04/26 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
高一军训口号
2015/12/25 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS