封裝屬於自己的JS元件_javascript技巧-js教程-PHP中文網

一、擴充已經存在的組件
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上传组件