创意电子

标题: JavaScript｜jQuery 自定义插件 [打印本页]

作者: 经典 时间: 2019-10-14 23:22
标题: JavaScript｜jQuery 自定义插件

### 前言

以前写过javascript，但都是临时更改，没怎么太研究怎么去写好，怎么去封装，还有JQuery，都是拿来即用，根本就没想过去写插件，主要吧，都是做后端的内容，很少写前端代码。其实写写前端挺有意思的，顺便心血来潮，

整个JQuery插件玩玩：）～
* $.fn.extend 当然这种方式只适用实例范围, 例如：$([class name | tag | et..]).hi(),可以调用
### 无参插件
```
$.fn.extend({
hi: function () {
alert("hello world.");
}
});
```
切记：为了不和其他插件对共享$这个符号的冲突，尽量用下面这个包起来，妥妥的
```
(function($){
})(jQuery);
```
调用
```
$("#id").hi();
```
### 有残参插件，当然这种方式只适用实例范围, 例如：$([class name | tag | et..]).hi(),可以调用
```
$.fn.extend({
hi: function (options) {
var defaults={
background-color:'red'
};
var opts = $.extend(defaults,options);//合并两个对象为一个，类似于java的copyProperties(original, target)
$(this).css("background-color",opts.background);
}
});
```
切记：为了不和其他插件对共享$这个符号的冲突，尽量用下面这个包起来，妥妥的
```
(function($){
})(jQuery);
```
调用
```
$("#id").hi({"background": "red"});
```
### jQuery的链式调用
大家都知道，也都在使用jQuery的链式调用，很优雅，那我们自己的插件可以这样调用吗？
能不能，我们来做个实验,直接执行如下：
```
$("#id").hi({"background": "red"}).html();
```
不好意思，你会看到令人厌烦的异常
```
Uncaught TypeError: Cannot read property 'html' of undefined at :1:46
```
也就是说，我们自己的插件打破了jQuery的链式传递，怎么办呢？其实很简单，在函数最后添加如下：
```
return this.each(function() {
// Using return allows for chainability
});
```
### 最后完整代码
```
(function($){
$.fn.extend({
hi: function (options) {
var defaults={};
var opts = $.extend(defaults,options);
console.log(opts);
$(this).css("background-color", opts.backgroundcolor);
return this.each(function() {
// Using return allows for chainability
});
}
});
})(jQuery);
```
### 注意：如果你直接 $.hi() 来调用，会抛出异常
```
Uncaught TypeError: $.hi is not a functionx at :1:3
```
这也证实了hi方法只是赋予了选择器的实例上，那么我们想给$(jQuery)对象赋予自定义功能，该如何实现呢？
###jQuery类级别的自定义插件,也可以理解为静态方法，工具类。
跟之前比较类似，如下：
```
(function($){
$.extend({
hiDate: function () {
return new Date().toJSON().slice(0,10)
}
});
})(jQuery);
```
调用方式
```
$.hiDate();
```
### 结束
没事写写代码，写写后端，写写前端，哦，js已经不仅限于前端啦
小写怡情，大写伤身。
:)~

欢迎光临创意电子 (https://wxcydz.cc/)