DIV CSS 佈局教程網

一、擴展已經存在的組件
1、需求背景
很多時候，我們使用jquery.ajax的方式向後台發送請求，型如　　　　　　

$.ajax({
        type: "post",
        url: "/User/Edit",
        data: { data: JSON.stringify(postdata) },
        success: function (data, status) {
          if (status == "success") {
            toastr.success('提交數據成功');
            $("#tb_aaa").bootstrapTable('refresh');
          }
        },
        error: function (e) {
        },
        complete: function () {
        }

      });

這種代碼太常見了，這個時候我們有這樣一個需求：在自己調用ajax請求的時候，我們不想每次都寫error:function(e){}這種代碼，但是我們又想讓它每次都將ajax的錯誤信息輸出到浏覽器讓用戶能夠看到。怎麼辦呢？

2、實現原理
要想實現以上效果其實並不難，我們可以將$.ajax({})封裝一層，在封裝的公共方法裡面定義error對應的事件即可。確實，這樣能達到我們的要求，但是並不完美，原因很簡單：1）在jquery的基礎上面再封裝一層，效率不夠高；2）需要改變調用者的習慣，每次調用ajax的時候需要按照我們定義的方法的規則來寫，而不能直接用原生的$.ajax({})這種寫法，這是我們不太想看到。

既然如此，那我們如何做到既不封裝控件，又能達到以上要求呢？答案就是通過我們的$.extend去擴展原生的jquery.ajax。

其實實現起來也並不難，通過以下一段代碼就能達到我們的要求。

(function ($) {
  //1.得到$.ajax的對象
  var _ajax = $.ajax;
  $.ajax = function (options) {
    //2.每次調用發送ajax請求的時候定義默認的error處理方法
    var fn = {
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        toastr.error(XMLHttpRequest.responseText, '錯誤消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
      },
      success: function (data, textStatus) { },
      beforeSend: function (XHR) { },
      complete: function (XHR, TS) { }
    }
    //3.如果在調用的時候寫了error的處理方法，就不用默認的
    if (options.error) {
      fn.error = options.error;
    }
    if (options.success) {
      fn.success = options.success;
    }
    if (options.beforeSend) {
      fn.beforeSend = options.beforeSend;
    }
    if (options.complete) {
      fn.complete = options.complete;
    }
    //4.擴展原生的$.ajax方法，返回最新的參數
    var _options = $.extend(options, {
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        fn.error(XMLHttpRequest, textStatus, errorThrown);
      },
      success: function (data, textStatus) {
        fn.success(data, textStatus);
      },
      beforeSend: function (XHR) {
        fn.beforeSend(XHR);
      },
      complete: function (XHR, TS) {
        fn.complete(XHR, TS);
      }
    });
    //5.將最新的參數傳回ajax對象
    _ajax(_options);
  };
})(jQuery);

如果沒接觸過jquery裡面$.extend這個方法的童鞋可能看不懂以上是什麼意思。好，我們首先來看看jquery API對$.extend()方法是作何解釋的。

什麼意思呢？我們來看官方的兩個例子就知道了

栗子一：

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);

結果：

settings == { validate: true, limit: 5, name: "bar" }

栗子二：

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);

結果：

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

以上的兩個簡單例子就說明extend()方法作用就是合並另個對象，有相同的則覆蓋，沒有相同的則添加。就是這麼簡單。

了解了$.extend()的作用，我們就能大概看懂上面那個擴展jquery.ajax的實現了吧。主要的步驟分為：

1）定義默認的error處理方法。

var fn = {
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        toastr.error(XMLHttpRequest.responseText, '錯誤消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
      },
      success: function (data, textStatus) { },
      beforeSend: function (XHR) { },
      complete: function (XHR, TS) { }
    }

2）判斷用戶在調用$.ajax({})的時候是否自定了error:function(){}，如果定義過，則使用用戶定義的，反之則用默認的error處理方法。

3）使用$.extend()將error默認處理方法傳入$.ajax()的參數中。我們看options參數時包含$.ajax()方法裡面所有的參數的，然後用默認的fn去擴展它即可。

通過以上三步就能夠實現對$.ajax()方法裡面error默認處理方法。這樣擴展，對於我們使用者來說完全感覺不到變化，我們仍然可以$.ajax({});這樣去發送ajax請求，如果沒有特殊情況，不用寫error處理方法。

3、組件擴展的意義
使用組件擴展，能夠幫助我們在原有組件上面增加一些和我們系統業務相關的處理需求，而在使用時，還是和使用原生組件一樣去調用，免去了在組件上面再封裝一層的臃腫。

二、擴展自己組件
上面通過$.extend()方法擴展了$.ajax()的error事件處理方法。下面我們來封裝一個自己的組件試試，功能很簡單，但比較有說明性。我們就以select這個組件為例，很多情況下，我們的select裡面的option都是需要從數據庫裡面取數據的，所以一般的做法就是發送一個ajax請求，然後在success方法裡面拼html。現在我們就封裝一個select遠程取數據的方法。

1、代碼實現以及使用示例
先上干貨吧，將寫好的整出來：

(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;
      $.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) { }
  };
})(jQuery);

先來看看我們自定義組件如何使用：

用法一：通過URL遠程取數據並初始化
首先定義一個空的select

<select id="sel_search_plant" class="form-control"></select>

然後初始化它

$(function(){
   $('#sel_search_plant').combobox({
      url: '/apiaction/Plant/Find',
      valueField: 'TM_PLANT_ID',
      textField: 'NAME_C'
   });
})

參數很簡單，就不一一介紹了。很簡單有木有~~

用法二：取值和設置

var strSelectedValue = $('#sel_search_plant').combobox("getValue");
$('#sel_search_plant').combobox("setValue", "aaa");

其實對於簡單的select標簽，博主覺得這裡的getValu和SetValue意義不大，因為直接通過$('#sel_search_plant').val()就能解決的事，何必要再封一層。這裡僅僅是做演示，試想，如果是封裝成類似select2或者multiselect這種組件，getValue和setValue的意義就有了，你覺得呢？

2、代碼詳細講解
上面的實現代碼，如果您一眼就能看懂，證明您是經常封組件的大蝦了，下面的就不用看了。如果看不懂，也沒關系，我們將代碼拆開詳細看看裡面是什麼鬼。

（1）首先看看我們最常看到的如下寫法：

(function ($) {
   //....封裝組件邏輯
})(jQuery);

初初看到這種用法，博主也是狂抓，這是什麼鬼嘛，四不像啊。使用多了之後才知道原來這就是一個匿名函數的形式。將它拆開來看如下：

var fn = function($){
    //.....組件封裝邏輯
};
fn(jQuery);

也就是說這種寫法就表示先定義一個方法，然後立即調用這個方法，jQuery相當於實參。打開jquery.js的原文件可以看到，jQuery是這個文件裡面的一個全局變量。

（2）定義自己的組件的代碼：

$.fn.combobox = function (options, param) {
  
};

習慣這種寫法的應該知道，這個就表示向jquery對象添加自定義方法，比如你想使用文章開始的 $("#id").MyJsControl({}) 這種用法，你就可以這樣定義 $.fn.MyJsControl=function(options){} 。

（3） options = $.extend({}, $.fn.combobox.defaults, options || {}); 這一句，看過上文的朋友應該還記得extend這麼一個方法吧，怎麼樣，又來了你。這句話其實就沒什麼好說的了，合並默認參數和用戶傳進來的參數。

（4）默認參數列表

 $.fn.combobox.defaults = {
    url: null,
    param: null,
    data: null,
    valueField: 'value',
    textField: 'text',
    placeholder: '請選擇',
    onBeforeLoad: function (param) { },
    onLoadSuccess: function () { },
    onChange: function (value) { }
  };

如果用戶沒有傳參，就用默認的參數列表。如果你夠細心，你會發現博主之前分享的其他bootstrap組件的js文件裡面都有這麼一個default參數列表。我們隨便找兩個：

bootstrap上傳組件

bootstrap table組件

基本都是這麼些用法。這樣來看，是否也可以自己封一個js組件~~

以上就是對js組件擴展以及封裝用法的認識和總結，希望大家喜歡。