欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

不用一句js代碼初始化組件

 更新時(shí)間:2016年01月27日 14:49:03   投稿:lijiao  
不用一句js代碼初始化組件,是不是很神奇?

最近使用bootstrap組件的時(shí)候發(fā)現(xiàn)一個(gè)易用性問(wèn)題,很多簡(jiǎn)單的組件初始化都需要在JS里面寫很多的初始化代碼,比如一個(gè)簡(jiǎn)單的select標(biāo)簽,因?yàn)閮H僅只是需要從后臺(tái)獲取數(shù)據(jù)填充到option里面,可是從后臺(tái)取數(shù)據(jù)就需要js的初始化,所以導(dǎo)致頁(yè)面初始化的時(shí)候js的初始化代碼里面出現(xiàn)很多重復(fù)的代碼,看著很鬧心。于是想起bootstrap table里面的data屬性來(lái),如果能夠直接在html里面使用data-*這種方式來(lái)初始化簡(jiǎn)單的組件,那該多爽。我們先來(lái)看看bootstrap table的文檔:

可以看到bootstrap table里面幾乎所有的屬性、事件都可以用data-*這種方式來(lái)做,感覺(jué)還不錯(cuò)。那博主就要開始研究了。data-*這東西是哪里來(lái)的呢?

一、jquery data()初探
網(wǎng)上查了一圈,終于找到data-*的出處了,原來(lái)是Jquery和html5里面的,好東西,真是好東西!我們先來(lái)看看jquery的API

原始用法如下:

作用其實(shí)很明顯,就是給元素加某些屬性和數(shù)據(jù),或者取值。

下面看看data()方法和html5 data-*屬性的結(jié)合使用

哈哈,這個(gè)東西好,通過(guò)html5 的data-*設(shè)置的值,能夠用jquery 的data()方法取到。這里的規(guī)則如下:

  • 1)所有的data屬性必須以“data-”開頭,
  • 2)屬性用“-”隔開,
  • 3)jquery里面取屬性的時(shí)候去掉“data”和“-”即可。

有了這個(gè)作為基礎(chǔ),我們就知道如何在標(biāo)簽里面設(shè)置屬性,然后在js里面取對(duì)應(yīng)的屬性了。下面就結(jié)合上次封裝combobox的例子來(lái)說(shuō)明下。

二、jquery data()實(shí)現(xiàn)data-*初始化組件
還記得之前JS組件系列——封裝自己的JS組件,你也可以這篇里面封裝了一個(gè)簡(jiǎn)單的combobox,可以通過(guò)url去后臺(tái)取數(shù)據(jù)。那么下面我們?nèi)匀辉谶@個(gè)組件的基礎(chǔ)上做手腳,實(shí)現(xiàn)直接在select標(biāo)簽里面添加data-*屬性來(lái)初始化下拉框組件。

1、js組件封裝代碼

(function ($) {
  //1.定義jquery的擴(kuò)展方法combobox
  $.fn.combobox = function (options, param) {
    if (typeof options == 'string') {
      return $.fn.combobox.methods[options](this, param);
    }
    //2.將調(diào)用時(shí)候傳過(guò)來(lái)的參數(shù)和default參數(shù)合并
    options = $.extend({}, $.fn.combobox.defaults, options || {});
    //3.添加默認(rèn)值
    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.判斷用戶傳過(guò)來(lái)的參數(shù)列表里面是否包含數(shù)據(jù)data數(shù)據(jù)集,如果包含,不用發(fā)ajax從后臺(tái)取,否則否送ajax從后臺(tái)取數(shù)據(jù)
    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.如果傳過(guò)來(lái)的是字符串,代表調(diào)用方法。
  $.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('請(qǐng)選擇');
        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.默認(rèn)參數(shù)列表
  $.fn.combobox.defaults = {
    url: null,
    param: null,
    data: null,
    valueField: 'value',
    textField: 'text',
    placeholder: '請(qǐng)選擇',
    onBeforeLoad: function (param) { },
    onLoadSuccess: function () { },
    onChange: function (value) { }
  };

  //這一段是新加的,在頁(yè)面初始化完成之后調(diào)用初始化方法
  $(document).ready(function () {
    $('.combobox').each(function () {
      var $combobox = $(this);
      $.fn.combobox.call($combobox, $combobox.data());
    })
  });
  
})(jQuery);
大部分代碼和上次的沒(méi)啥區(qū)別,我們重點(diǎn)看看最下面這一段
  //這一段是新加的,在頁(yè)面初始化完成之后調(diào)用初始化方法
  $(document).ready(function () {
    $('.combobox').each(function () {
      var $combobox = $(this);
      $.fn.combobox.call($combobox, $combobox.data());
    })
  });

很明顯,就是在頁(yè)面初始化完成之后通過(guò)樣式選擇器去初始化組件。使用了each,如果有多個(gè).combobox樣式,依次去初始化每一個(gè)。通過(guò) $.fn.combobox.call($combobox, $combobox.data()); 調(diào)用call方法去調(diào)用combobox的初始化,call方法里面兩個(gè)參數(shù)分別對(duì)應(yīng):

  • 1)當(dāng)前初始化的jquery對(duì)象
  • 2)參數(shù)列表。這里通過(guò)$combobox.data()得到的就是所有html里面的data-*屬性。將所有的data-*屬性作為參數(shù)傳入combobox的初始化方法中。

2、html里面通過(guò)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-*屬性。從上面我們知道這里初始化是通過(guò)樣式選擇器.combobox來(lái)初始化組件的,所以就要求,如果想要使用data-*做組件的初始化,必須要設(shè)置一個(gè)class="combobox"樣式,這樣后臺(tái)才取得到需要初始化的標(biāo)簽。

3、后臺(tái)C#方法

 public class HomeController : Controller
 {
    public List<string> lstProvince = new List<string>() { "北京市", "天津市", "重慶市", "上海市", "河北省", "山西省", "遼寧省", "吉林省", "黑龍江省", "江蘇省", "浙江省", "安徽省", "福建省", "江西省", "山東省", "河南省", "湖北省", "湖南省", "廣東省", "海南省", "四川省", "貴州省", "云南省", "陜西省", "甘肅省", "青海省", "臺(tái)灣省", "內(nèi)蒙古自治區(qū)", "廣西壯族自治區(qū)", "西藏自治區(qū)", "寧夏回族自治區(qū)", "新疆維吾爾自治區(qū)", "香港特別行政區(qū)", "澳門特別行政區(qū)" };

    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; }
  }

測(cè)試代碼,沒(méi)什么好說(shuō)的。

4、調(diào)試效果


得到效果

這樣基本就完成通過(guò)data-*來(lái)初始化組件了。

上面簡(jiǎn)單演示了下jquery data()方法結(jié)合html5 data-*屬性的使用?;旧夏苓_(dá)到需求:不用多寫一行js代碼直接初始化標(biāo)簽。使用的時(shí)候直接引用jquery.js和jquery.extension.js文件即可。但是我們知道既然是html5里面的特性,那么對(duì)瀏覽器就得有一定的要求了。當(dāng)然,此用法功能比較初級(jí),但是對(duì)于一些簡(jiǎn)單組件的初始化夠用了。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

  • JavaScript中字符串的常用操作方法及特殊字符

    JavaScript中字符串的常用操作方法及特殊字符

    這篇文章主要介紹了JavaScript中字符串的常用操作方法及js特殊字符,需要的朋友可以參考下
    2018-03-03
  • 小程序?qū)崿F(xiàn)五星點(diǎn)評(píng)效果

    小程序?qū)崿F(xiàn)五星點(diǎn)評(píng)效果

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)五星點(diǎn)評(píng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • js代碼延遲一定時(shí)間后執(zhí)行一個(gè)函數(shù)的實(shí)例

    js代碼延遲一定時(shí)間后執(zhí)行一個(gè)函數(shù)的實(shí)例

    下面小編就為大家?guī)?lái)一篇js代碼延遲一定時(shí)間后執(zhí)行一個(gè)函數(shù)的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-02-02
  • 微信小程序宿主環(huán)境基礎(chǔ)介紹

    微信小程序宿主環(huán)境基礎(chǔ)介紹

    這篇文章主要介紹了微信小程序宿主環(huán)境的基礎(chǔ)知識(shí),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • JavaScript與函數(shù)式編程解釋

    JavaScript與函數(shù)式編程解釋

    JavaScript與函數(shù)式編程解釋...
    2007-04-04
  • JS實(shí)現(xiàn)控制表格行文本對(duì)齊的方法

    JS實(shí)現(xiàn)控制表格行文本對(duì)齊的方法

    這篇文章主要介紹了JS實(shí)現(xiàn)控制表格行文本對(duì)齊的方法,涉及javascript操作表格樣式的相關(guān)技巧,需要的朋友可以參考下
    2015-03-03
  • 基于JS實(shí)現(xiàn)橫線提示輸入驗(yàn)證碼隨驗(yàn)證碼輸入消失(js驗(yàn)證碼的實(shí)現(xiàn))

    基于JS實(shí)現(xiàn)橫線提示輸入驗(yàn)證碼隨驗(yàn)證碼輸入消失(js驗(yàn)證碼的實(shí)現(xiàn))

    最近在開微信的頁(yè)面,在項(xiàng)目需求中遇到之前沒(méi)有做過(guò)的功能,要求橫線提示輸入驗(yàn)證碼隨驗(yàn)證碼輸入橫線消失,基于js怎么實(shí)現(xiàn)的呢?下面小編給大家分享基于js實(shí)現(xiàn)驗(yàn)證碼功能,感興趣的朋友一起看看吧
    2016-10-10
  • 原生JS實(shí)現(xiàn)圖片左右輪播

    原生JS實(shí)現(xiàn)圖片左右輪播

    本文主要分享了原生JS實(shí)現(xiàn)圖片左右不停運(yùn)動(dòng)的完整示例代碼,可直接保存到HTML文檔打開可以查看效果。下面跟著小編一起來(lái)看下吧
    2016-12-12
  • 理解Javascript閉包

    理解Javascript閉包

    閉包是ECMAScript一個(gè)很重要的特征,但是卻很難用合適的定義來(lái)描述它。雖然閉包很難清晰地描述,但是,卻很容易創(chuàng)建,或者說(shuō),不小心創(chuàng)建。然而,閉包的存在其實(shí)是有一定的潛在問(wèn)題的。為了避免“不小心”地創(chuàng)建閉包,以及更好地利用閉包的優(yōu)點(diǎn),有必要理解閉包的機(jī)制
    2013-11-11
  • 淺析JS中常用類型轉(zhuǎn)換及運(yùn)算符表達(dá)式

    淺析JS中常用類型轉(zhuǎn)換及運(yùn)算符表達(dá)式

    這篇文章主要介紹了關(guān)于JS中涉及的常用類型轉(zhuǎn)換及運(yùn)算符表達(dá)式 ,包括js中常用類型轉(zhuǎn)換,及常用的運(yùn)算符表達(dá)式,需要的朋友可以參考下
    2017-07-07

最新評(píng)論