JQ写插件

使用Sublime Text编写代码，拥有强大的插件系统，适合程序员使用。 #生活知识# #生活经验# #软件#

接下来有两种插件书写的形式

一种是一个函数：$.fn.函数名 = function([options]){}

另外一种自然是可以多个函数：$.fn.extend({函数名:function(){}});

第一种能一次声明一个函数，而第二个可以一次声明多个函数

js写插件有多种方法，最常见的是通过$.fn添加自定义方法来实现；

$.fn.pluginName = function() {

this.css('color','red')//your code goes here

}

这样就相当于给jqury对象添加一个方法属性，$('#id').pluginName(); 就可以直接调用我们的插件了；方法里面的this就是jQuery选择器返回的集合，那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了，但此刻要注意的是，在each方法内部，this指带的是普通的DOM元素了，如果需要调用jQuery的方法那就需要用$来重新包装一下。

1.让插件接收参数，通常使用jQuery的extend方法来实现，相当于继承关系，键相同的会覆盖值；

$.fn.myPlugin = function(options) {

var defaults = {

'color': 'red',

'fontSize': '12px'

};

var settings = $.extend(defaults, options);

return this.css({

'color': settings.color,

'fontSize': settings.fontSize

});

}

保护默认参数，如果一个页面会多次调用插件，那第一次调用后，defaults值会发生改变，所以我们可以让他们合并的值赋给一个新的对象，这样defaults就不会变了；

$.fn.myPlugin = function(options) {

var defaults = {

'color': 'red',

'fontSize': '12px'

};

var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数

return this.css({

'color': settings.color,

'fontSize': settings.fontSize

});

}

2.面向对象的插件开发

为什么要有面向对象的思维，因为如果不这样，你可能需要一个方法的时候就去定义一个function，当需要另外一个方法的时候，再去随便定义一个function，同样，需要一个变量的时候，毫无规则地定义一些散落在代码各处的变量。所以我们可以定义一个对象，把方法和变量作为对象的属性；插件中我们就可以操作这个对象了。

var Beautifier = function(ele, opt) {

this.$element = ele,

this.defaults = {

'color': 'red',

'fontSize': '12px',

'textDecoration':'none'

},

this.options = $.extend({}, this.defaults, opt)

}

//定义Beautifier的方法，就是给Beautifier对象加个属性

Beautifier.prototype = {

beautify: function() {

return this.$element.css({

'color': this.options.color,

'fontSize': this.options.fontSize,

'textDecoration': this.options.textDecoration

});

}

}

//在插件中使用Beautifier对象

$.fn.myPlugin = function(options) {

//创建Beautifier的实体

var beautifier = new Beautifier(this, options);

//调用其方法

return beautifier.beautify();

}

这样改动并不影响我们调用插件的方法：

$(function() {

$('a').myPlugin({

'color': '#2C9929',

'fontSize': '20px'

});

})

3.命名空间

不仅仅是jQuery插件的开发，我们在写任何JS代码时都应该注意的一点是不要污染全局命名空间。因为随着你代码的增多，如果有意无意在全局范围内定义一些变量的话，最后很难维护，也容易跟别人写的代码有冲突。比如你在代码中向全局window对象添加了一个变量status用于存放状态，同时页面中引用了另一个别人写的库，也向全局添加了这样一个同名变量，最后的结果肯定不是你想要的。所以不到万不得已，一般我们不会将变量定义成全局的。一个好的做法是始终用自调用匿名函数包裹你的代码，这样就可以完全放心，安全地将它用于任何地方了，绝对没有冲突。

(function() {

//定义Beautifier的构造函数

var Beautifier = function(ele, opt) {

this.$element = ele,

this.defaults = {

'color': 'red',

'fontSize': '12px',

'textDecoration': 'none'

},

this.options = $.extend({}, this.defaults, opt)

}

//定义Beautifier的方法

Beautifier.prototype = {

beautify: function() {

return this.$element.css({

'color': this.options.color,

'fontSize': this.options.fontSize,

'textDecoration': this.options.textDecoration

});

}

}

//在插件中使用Beautifier对象

$.fn.myPlugin = function(options) {

//创建Beautifier的实体

var beautifier = new Beautifier(this, options);

//调用其方法

return beautifier.beautify();

}

})();

 

4、在匿名函数前面加个分号，防止解析报错；

var foo=function(){

//别人的代码

}//注意这里没有用分号结尾

//开始我们的代码。。。

;(function(){

//我们的代码。。

alert('Hello!');

})();

5. 同时，将系统变量以参数形式传递到插件内部也是个不错的实践。当我们这样做之后，window等系统变量在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能的提升最后我们得到一个非常安全结构良好的代码;

;(function($,window,document,undefined){

//我们的代码。。

//blah blah blah...

})(jQuery,window,document);

转载from： https://www.cnblogs.com/ajianbeyourself/p/5815689.html

网址：JQ写插件 https://www.yuejiaxmz.com/news/view/415606

相关内容

jquery 日程管理插件
【兔】年啦~给大家看看楼下的超级【大白兔】~跟肥猫一样大呀~内附JQ= =
油猴插件（一）
ps证件照插件
网购省钱攻略——购物软件插件合辑（上）
搜狗购物插件
edius效果插件 200种 免费版 下载
ai智能管家插件：、安装、使用方法与介绍
ChromeFK插件推荐系列三:购物助手插件推荐
书写情意 画出创意――“我为图书画插画”

随便看看