1.扩展现有组件1。需求背景。在许多情况下，我们使用jquery.ajax向后台发送请求，如下所示。

$.Ajax ({type:' post '，url3360'/user/edit '，data : { data : JSON . stringfy(post data)}，success3360function(数据，状态){if(状态=' success') {to。$('#tb_aaa ')。bootstrapTable('刷新')；} }，error: function (e) { }，complete : function(){ })；这种代码太常见了。这个时候我们有这样一个要求：我们自己调用ajax requests的时候，不是每次都要写error:function(e){}这个代码，而是希望它每次都把ajax错误信息输出给浏览器，让用户看到。怎么办？

2.实施原则达到上述效果并不难。我们可以封装$。层中的ajax({})并定义对应于封装的公共方法中的错误的事件。的确，这可以满足我们的要求，但并不完美。原因很简单：1)在jquery之上封装一层效率不高；2)要改变打电话人的习惯。每次调用ajax时，都应该根据我们定义的方法的规则来编写，而不是原始的$。ajax({})，这是我们不想看到的。

在这种情况下，我们如何在不封装控件的情况下达到上述要求？答案是通过我们的$.extend扩展本机jquery.ajax。

事实上，实现起来并不难，我们可以通过下面的代码来满足我们的需求。

(函数($) {//1。获取$的对象。ajax var _ajax=$。ajax$.ajax=function (options) {//2。定义默认的错误处理方法varfn={ Error : function(xmlhttprequest，textstatus，Error throw){ toastr . Error(xmlhttprequest . response text，' error message '，{ closebutton3360 true，time out 3360 0 0，position class : ' toast-top-full-width ' })；}，success:函数(数据，文本状态){}，send:函数(xhr)之前{}，complete:函数(xhr，ts){ }//3。如果错误处理方法是在调用时编写的，则不需要默认的if(options . error){ fn . error=options . error；} if(options . success){ fn . success=options . success；} if(options . before send){ fn . before send=options . before send；} if(options.complete){ fn.complete=options.complete；} //4.展开原生$。方法并返回最新的参数var _ options=$。extend (options，{ error : function(xmlhttprequest，textstatus，error through){ fn。错误(xmlhttprequest，textstatus，error through)；}，success:函数(数据，textStatus) { fn.success(数据，textStatus)；}，beforeSend:函数(XHR){ fn . before send(XHR)；}，完成：功能(XHR，TS) { fn.complete(XHR，TS)；} });//5.将最新参数返回给Ajax object _ Ajax(_ options)；};})(jQuery)；没有接触过美元方法的童鞋。在jquery中extend可能不理解上面的意思。好的，让我们首先看看jquery API是如何解释$。extend()方法。

你什么意思？让我们看两个官方的例子。

栗子一号：

var settings={ validate : false，limit: 5，name : ' foo ' }；var options={ validate: true，name : ' bar ' }；$.扩展(设置，选项)；结果：

设置=={validate : true，limit : 5，name :' bar'}栗子2:

var empty={ }；var defaults={ validate : false，limit: 5，name : ' foo ' }；var options={ validate: true，name : ' bar ' }；var设置=$。扩展(空、默认、选项)；结果：

Settings=={validate:true，limit: 5，name:' bar'} empty=={ validate 3360 true，limit3360 5，name : ' bar ' }以上两个简单的例子说明了extend()方法是用来合并另一个对象的，如果是同一个对象，就会被覆盖，但不是同一个对象。就这么简单。

知道$的功能。extend()，我们大概可以理解上面扩展jquery.ajax的实现主要步骤如下：

1)定义默认的错误处理方法。

varfn={ error : function(xmlhttprequest，textstatus，error through){ toastr。错误(xmlhttprequest.responsetext，“错误消息”，{closebutton3360true，timeOut: 0，position class : ' toast-top-full-width ' })；}，success: function (data，textStatus) { }，beforeSend: function (XHR) { }，complete: function (XHR，TS) {} }2)在调用$ }时确定用户是否自定义了error:function(){}。ajax({})。如果已定义，请使用用户定义的方法，否则，请使用默认的错误处理方法。

3)使用$。extend()将默认的错误处理方法传递给参数$。ajax()。当我们查看options参数时，我们包括了$中的所有参数。方法，然后使用默认的fn来扩展它。

通过以上三个步骤，我们可以实现在$中默认的错误处理方法。ajax()方法。通过这种扩展，我们可以感觉到我们的用户没有任何变化，我们仍然可以。Ajax({ })；用这种方式发送ajax请求。如果没有特殊情况，不需要写错误处理方法。

3.组件扩展的意义使用组件扩展可以帮助我们在原有的组件上增加一些与我们系统业务相关的处理需求，但是在使用的时候，我们还是像使用原有的组件一样调用它，从而避免了组件上另一层的臃肿封装。

其次，扩展自己的组件。$的错误事件处理方法。ajax()是通过$扩展的。extend()方法。让我们尝试封装我们自己的组件。功能很简单，但更具说明性。让我们以组件选择为例。在许多情况下，我们的select中的选项需要从数据库中获取数据，所以一般的方法是发送一个ajax请求，然后在success方法中拼写html。现在，我们将封装一种选择远程数据的方法。

1.代码实现和使用示例：首先，干货，并完成书面的：

（函数($) { //1。定义jquery的扩展方法combobox $。fn。combobox=function(options，param){ if(options类型==' string '){ return $。fn。组合框。方法[选项](this，param)；} //2.将调用时候传过来的参数和系统默认值参数合并选项=$。extend({}，$.fn.combobox.defaults，options | | { })；//3.添加默认值var target=$(this)；target.attr('valuefield '，选项。值字段)；target.attr('textfield '，选项。text field)；目标。empty()；var option=$(' option/option ')；option.attr('value '，' ')；选项。文本(选项。占位符)；target.append(选项);//4.判断用户传过来的参数列表里面是否包含数据数据数据集，如果包含，不用发创建交互式、快速动态网页应用的网页开发技术从后台取，否则否送创建交互式、快速动态网页应用的网页开发技术从后台取数据if (options.data) { init(target，options。数据)；} else {//var param={ }；选项。onbeforeload。呼叫(目标，选项。param)；if(！options.url)返回；$.getJSON(options.url，options.param，function (data) { init(target，data)；});}函数初始化(目标，数据){ $。每个（数据、函数(I、item){ var option=$(' option/option ')；option.attr('value '，item[options。值字段])；选项。文本(项目[选项。text field])；target.append(选项);});options.onLoadSuccess.call(目标);}目标。解除绑定(“更改”)；target.on('change ')，函数{ if (options.onChange)返回选项。onchange(目标。val())；});} //5.如果传过来的是字符串，代表调用方法$ .fn。组合框。methods={ getvalue : function(jq){ return jq。val()；}，setValue:函数(jq，param){ jq。val(参数)；}，load:函数(jq，url) { $ .getJSON(url)，函数（数据){ jq。empty()；var option=$(' option/option ')；option.attr('value '，' ')；option.text('请选择');jq.append(选项);$.每个（数据、函数(I、item){ var option=$(' option/option ')；option.attr('value '，item[jq。attr('值字段')])；选项。文本(项目[jq。attr('文本字段')])；jq.append(选项);});});} };//6.默认参数列表$ .fn。组合框。默认值={ URL : null，参数： null，数据： null，值字段： '值'，文本字段： '文本'，占位符： '请选择、onBeforeLoad:函数(参数){ }、onLoadSuccess:函数(){ }、onChange:函数(值){ }；})(jQuery)；先来看看我们自定义组件如何使用：

用法一：通过统一资源定位器远程取数据并初始化首先定义一个空的挑选

选择id=' sel _ search _ plant ' class=' form-control '/select然后初始化它

$(函数(){ $(' # sel _ search _ plant ')).combobox({ URL : '/a pia action/Plant/Find '，valueField: 'TM_PLANT_ID '，text field : ' NAME _ C ' })；})参数很简单，就不一一介绍了。很简单有木有~~

用法二：取值和设置

var strSelectedValue=$(' # sel _ search _ plant ').combobox(' GetVaLue ')；$('#sel_search_plant ').combobox('setValue '，' AAA ')；其实对于简单的挑选标签，博主觉得这里的getValu和设置值意义不大，因为直接通过$('#sel_search_plant ').val()就能解决的事，何必要再封一层。这里仅仅是做演示，试想，如果是封装成类似选择2或者多选这种组件，getValue和设置值的意义就有了，你觉得呢？

2、代码详细讲解上面的实现代码，如果您一眼就能看懂，证明您是经常封组件的大虾了，下面的就不用看了。如果看不懂，也没关系，我们将代码拆开详细看看里面是什么鬼。

(1)首先看看我们最常看到的如下写法：

（函数($) { //.封装组件逻辑})(jQuery)；初初看到这种用法，博主也是狂抓，这是什么鬼嘛，四不像啊。使用多了之后才知道原来这就是一个匿名函数的形式。将它拆开来看如下：

Var fn=函数($){ //.组件打包逻辑}；fn(jQuery)；也就是说，这种编写意味着先定义一个方法，然后立即调用它。jQuery相当于一个参数。打开jQuery.js的原始文件，可以看到jQuery在这个文件中是一个全局变量。

(2)定义自己组件的代码：

$.fn.combobox=function (options，param){ }；那些习惯于这种写作的人应该知道，这意味着向jquery对象添加一个自定义方法。例如，如果您想使用$(“# id”)的用法。MyJsControl({})在文章的开头，可以定义$。fn . myjscontrol=function(options){ }。

(3)选项=$。extend({}，$.fn.combobox.defaults，options | | { })；这句话，看过上面的朋友应该还记得extend这样的方法。怎么，你又来了。其实这句话没什么好说的，默认参数是和用户传入的参数组合在一起的。

(4)默认参数表。

$ . fn.combobox . defaults={ URL : null，param : null，data : null，valuefield :' value '，textfield :' text '，占位符3360 '请选择'，onBeforeLoad:函数(param) { }，onLoadSuccess:函数(){ }，onChange:函数(value){ }；如果用户没有传递参数，将使用默认的参数列表。如果你小心的话，你会发现博主共享的其他引导组件的js文件有这样一个默认参数列表。让我们随机找两个：

引导上传组件。

引导表组件

基本上是一样的用法。这样，我还能自己封一个js组件吗~ ~

以上是对js组件扩展和封装用法的理解和总结。希望大家喜欢。