JS组件系列JS组件封装过程详解

时间：2021-09-05 来源：互联网编辑：宝哥软件园浏览：次

前言：

我之前分享过很多使用引导组件的经验。本文旨在研究JS组件的扩展和封装。让我们感受一下JQuery为我们提供的魔力。扩展，看看我们如何定制自己的组件。例如，我们想要扩展一个$('#id ')。MyJsControl({})成为我们自己的组件。我们做什么呢别急，我们慢慢来看看过程。

首先，扩展现有组件

1.需求背景

很多时候，我们使用jquery.ajax向后台发送请求，例如

$.Ajax ({type :' post '，URL :'/user/edit '，数据： {data : JSON。Stringify (post data)}，success 3360函数(data，status){ if(status==' 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。错误(xmlhttprequest。responsetext，“错误消息”，{closebutton3360 true，timeout3360 0，position class : ' toast-top-full-width ' })；}，成功：函数(数据、文本状态){}，发送前：函数(xhr) {}，完成：函数(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:函数(xmlhttprequest，textstatus，error through){ toastr。错误(xmlhttprequest。responsetext，“错误消息”，{closeButton: true，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。现在，我们将封装一种通过select进行远程数据检索的方法。

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 '，占位符： '请选择'，onBeforeLoad:函数(param) { }，onLoadSuccess:函数(){ }，onChange:函数(value){ }；如果用户没有传递参数，将使用默认的参数列表。如果你细心的话，你会发现以前博主共享的其他bootstrap组件的js文件中都有这样的默认参数列表。让我们随机找两个：

引导上传组件