不用一句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 相关文章推荐
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
Element Input组件分析小结
Oct 11 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
JS数组Reduce方法功能与用法实例详解
Apr 29 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中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP Directory 函数的详解
2013/03/07 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python中的整除和取模实例
2020/06/03 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
技术副厂长岗位职责
2013/12/26 职场文书
请假条标准格式规范
2014/04/10 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技