JS組件封裝的示例分析

這篇文章主要介紹了JS組件封裝的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著(zhù)大家一起了解一下。

一、擴展已經(jīng)存在的組件

1、需求背景

很多時(shí)候，我們使用jquery.ajax的方式向后臺發(fā)送請求，型如　　　　

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

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

2、實(shí)現原理

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

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

其實(shí)實(shí)現起來(lái)也并不難，通過(guò)以下一段代碼就能達到我們的要求。

(function ($) {
 //1.得到$.ajax的對象
 var _ajax = $.ajax;
 $.ajax = function (options) {
  //2.每次調用發(fā)送ajax請求的時(shí)候定義默認的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.如果在調用的時(shí)候寫(xiě)了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);

如果沒(méi)接觸過(guò)jquery里面$.extend這個(gè)方法的童鞋可能看不懂以上是什么意思。好，我們首先來(lái)看看jquery API對$.extend()方法是作何解釋的。

什么意思呢？我們來(lái)看官方的兩個(gè)例子就知道了

栗子一：

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

以上的兩個(gè)簡(jiǎn)單例子就說(shuō)明extend()方法作用就是合并另個(gè)對象，有相同的則覆蓋，沒(méi)有相同的則添加。就是這么簡(jiǎn)單。

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

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）判斷用戶(hù)在調用$.ajax({})的時(shí)候是否自定了error:function(){}，如果定義過(guò)，則使用用戶(hù)定義的，反之則用默認的error處理方法。

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

通過(guò)以上三步就能夠實(shí)現對$.ajax()方法里面error默認處理方法。這樣擴展，對于我們使用者來(lái)說(shuō)完全感覺(jué)不到變化，我們仍然可以$.ajax({});這樣去發(fā)送ajax請求，如果沒(méi)有特殊情況，不用寫(xiě)error處理方法。

3、組件擴展的意義

使用組件擴展，能夠幫助我們在原有組件上面增加一些和我們系統業(yè)務(wù)相關(guān)的處理需求，而在使用時(shí)，還是和使用原生組件一樣去調用，免去了在組件上面再封裝一層的臃腫。

二、擴展自己組件

上面通過(guò)$.extend()方法擴展了$.ajax()的error事件處理方法。下面我們來(lái)封裝一個(gè)自己的組件試試，功能很簡(jiǎn)單，但比較有說(shuō)明性。我們就以select這個(gè)組件為例，很多情況下，我們的select里面的option都是需要從數據庫里面取數據的，所以一般的做法就是發(fā)送一個(gè)ajax請求，然后在success方法里面拼html?，F在我們就封裝一個(gè)select遠程取數據的方法。

1、代碼實(shí)現以及使用示例

先上干貨吧，將寫(xiě)好的整出來(lái)：

(function ($) {
  //1.定義jquery的擴展方法combobox
 $.fn.combobox = function (options, param) {
  if (typeof options == 'string') {
   return $.fn.combobox.methods[options](this, param);
  }
  //2.將調用時(shí)候傳過(guò)來(lái)的參數和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.判斷用戶(hù)傳過(guò)來(lái)的參數列表里面是否包含數據data數據集，如果包含，不用發(fā)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.如果傳過(guò)來(lái)的是字符串，代表調用方法。
 $.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);

先來(lái)看看我們自定義組件如何使用：

用法一：通過(guò)URL遠程取數據并初始化

首先定義一個(gè)空的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'
  });
})

參數很簡(jiǎn)單，就不一一介紹了。很簡(jiǎn)單有木有~~

用法二：取值和設置

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

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

2、代碼詳細講解

上面的實(shí)現代碼，如果您一眼就能看懂，證明您是經(jīng)常封組件的大蝦了，下面的就不用看了。如果看不懂，也沒(méi)關(guān)系，我們將代碼拆開(kāi)詳細看看里面是什么鬼。

（1）首先看看我們最?？吹降娜缦聦?xiě)法：

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

初初看到這種用法，博主也是狂抓，這是什么鬼嘛，四不像啊。使用多了之后才知道原來(lái)這就是一個(gè)匿名函數的形式。將它拆開(kāi)來(lái)看如下：

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

也就是說(shuō)這種寫(xiě)法就表示先定義一個(gè)方法，然后立即調用這個(gè)方法，jQuery相當于實(shí)參。打開(kāi)jquery.js的原文件可以看到，jQuery是這個(gè)文件里面的一個(gè)全局變量。

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

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

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

（3） options = $.extend({}, $.fn.combobox.defaults, options || {}); 這一句，看過(guò)上文的朋友應該還記得extend這么一個(gè)方法吧，怎么樣，又來(lái)了你。這句話(huà)其實(shí)就沒(méi)什么好說(shuō)的了，合并默認參數和用戶(hù)傳進(jìn)來(lái)的參數。

（4）默認參數列表

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

如果用戶(hù)沒(méi)有傳參，就用默認的參數列表。如果你夠細心，你會(huì )發(fā)現博主之前分享的其他bootstrap組件的js文件里面都有這么一個(gè)default參數列表。我們隨便找兩個(gè)：

bootstrap上傳組件

bootstrap table組件

基本都是這么些用法。這樣來(lái)看，是否也可以自己封一個(gè)js組件~~