[XJBG系列] 封装一下jquery.ajax当插件吧，为了少些几行代码

Posted 2021-04-15 课工场大前端

好了，之前几篇都是Vue的，我们暂时先换个口味。随便讲讲有意思的东西，比如JS的奇技淫巧。也是前端开发中可以提升效率的地方。

首先如果你还处在S2的阶段，还不了解AJAX，我们就。。

随便你吧，不管了，我们后面如果写JS入门篇，再讲。

直接看下ajax是怎么用的：

我就不分别解释里面的属性了。但我们每次使用ajax都要写一遍这样的重复代码对不对？

而且，一般ajax请求，我们都要给个loading层的gif效果，也就是转圈圈啦。之前文章有说过。

定义个层，里面是个gif转圈圈的图，然后刚开始隐藏掉

然后html有了，JS里面咋写呢？

也就是请求之前显示，请求成功或者失败都隐藏。这里hide方法里写了个slow参数，只是为了提醒一下，其实这里面是可以写参数的，有点像淡入淡出的效果。

自己试试把。

这一般就是初级前端开发者惯用的方式了，他们可能都没有看过jq.ajax到底有多少参数，比如隐藏圈圈这行代码，完全可以写在complete完成方法中

但即使如此，每次还是要都写一遍，重复代码。那我们如何将jQuery原生的ajax方法封装一下，让我们可以更爽的调用呢？

在此之前呢，要插个话。介绍下另一个奇技淫巧，如果你已经懂一点js了，你可能会说一句卧槽，JS还能这么写。

当然也可以传参：

事实上，这样写也可以。

甚至还能这么写。

但不能这么写：

是不是懵逼了？

这里简单解释一下：

因为编译器会认为前面是一个定义函数，而后面跟了个括号，不伦不类。函数用方法名调用。

而如果加上了括号或者其他的符号，则会自动当成表达式来编译。

自己试试把。反正就是这样可以用来初始化一个闭包就是了。

那么了解了这个，我们就可以封装个插件了。

不废话直接看下封装ajax后代码吧，两张图是一个方法。

里面不懂的关键字自己搜一下。主要的思路就是把参数都设置默认值，然后外界调用时传入自己需要的参数，不传的则都使用默认值。

不管啥语言，插件不都这个吊样吗外界通过构造，注入一些信息进来，然后实现自己想要的效果。

这里可以看到，比如type和dataType这样的属性，都给了默认值了，以后调用就可以不用传了。而开始和结束的loading转圈动画，也可以不用写了。甚至连error以及状态码的捕捉都可以统一控制了。

看下调用代码：

好了好了。又要say fuck bye了。连续几天都是23:59赶时间发的，今天早发了。为啥早了呢，不是因为我拖延症改掉了，而是我马上要回老家一趟，怕断更

随便看看吧，不成体系，都说了是XJBG了。

如果觉得这篇文章对你有帮助，不妨顺手关注+点赞+转发传播给更多想要进步的人。

PS：

北大青鸟南京中博的还是很靠谱的，有幸参与其中。我们真的都是用心在教学的，对IT感兴趣的同学可以找我聊一聊，说一下你心中的疑惑，改变你的人生。微信：18305181376  QQ：674254975