一、什么是jQuery插件
jQuery插件是对jQuery框架利用原型的一个扩展。插件通常是一个完备功能的封装,它是JQ功能的一个补充或扩展。
注意:开发JQ插件,该插件是依赖于JQ,所以必须先引入JQ,再引入插件。
二、jQuery的插件主要分3种类型:
1、封装对象方法的插件(原型扩展)(主要的开发方式):这种是大多数采用的方法。操作原型,对jQuery框架侵入性较小。
2、封装全局函数的插件(静态扩展):装方法或插件直接挂到类上。
3、选择器插件:对JQ选择DOM的补充或扩展。
三、命名规范
1、jquery.插件名.js(开发模式)
2、jquery.插件名.min.js(产品模式,去bug调试,删除了回车、注释和多余的空格)
四、插件中$的冲突
1、JQ让渡方法,让JQ让出对$的占用
jQuery.noConflict() -- 解绑jQuery对$的引用,其后可以用jQuery代替$
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">box</div>
</body>
<script src="jquery.js"></script>
<script src="jquery.test.js"></script>
<script>
jQuery.noConflict()
console.log($.getEl('box'));//null
jQuery('#box').css('color', 'red')
</script>
</html>
js代码
var $={
getEl:function(id){
return document.getElementById(id)
}
}
2、深度让渡
jQuery.noConflict(true) -- $和jQuery都不能用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">box</div>
</body>
<script src="jquery.js"></script>
<script src="jquery.test.js"></script>
<script>
var jq=jQuery.noConflict(true)
console.log($.getEl('box'));
jq('#box').css('color','red')
</script>
</html>
5.在插件中使用闭包
目的:为了避免变量的全局污染。IIFE是实现闭包的一种方式。
实现方式:
;(function(){
function 插件名(){
// 实现插件功能的代码
}
jQuery.prototype.插件名 = 插件名
})();
或:
;(function($){
function 插件名(){
// 实现插件功能的代码
}
$.fn.插件名 = 插件名
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">good day</div>
<div id="test">test</div>
</body>
<script src="jquery.js"></script>
<script src="jquery.color.v3.js"></script>
<script>
$('.box').color();
//链式调用
$('.box').css('border','1px solid #999').css('background','yellow')
</script>
</html>
js代码
;(function($){
var that;
function _color(){
that=this
$(this).css('color','red')
return that
}
$.fn.color=_color
})(jQuery)
六、jQuery插件机制
第一种,对jQuery函数prototype属性的别名(jQuery.fn)进行扩展。
1、在原型上绑定单个方法
;(function($){
$.fn.插件名 = function(参数){
// 实现插件功能的代码
}
})(jQuery);
2、批量绑定方法
;(function($){
$.fn.extend({
// 扩展方法1
方法1:function(参数){
// 实现插件功能的代码
},
// 扩展方法2
方法2:function(参数){
// 实现插件功能的代码
},
// 扩展方法N .....
})
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>this is a p</p>
</body>
<script src="jquery.js"></script>
<script src="jquery.chsize.js"></script>
<script>
$('p').chSize('400px','100px')
$('p').setHtml("这是修改后的内容")
console.log($('p').getHtml());
</script>
</html>
js代码
;(function($){
//在原型上绑定单个方法
$.fn.chSize=function chSize(w,h){
$(this).width(w)
$(this.height(h))
}
//批量绑定方法
$.fn.extend({
//扩展方法1
setHtml:function(htmlText){
this.html(htmlText)
return this
},
getHtml:function(){
return this.html();
}
})
})(jQuery)
第二种,采用jQuery.extend()方法进行(静态)扩展。
语法格式:
;(function($){
$.extend({
方法名: function(参数) {
// 实现插件功能的代码
}
});
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>this is a p</p>
</body>
<script src="jquery.js"></script>
<script src="jquery.formatdate.js"></script>
<script>
console.log($.formatDate('feel what'));
</script>
</html>
js代码
; (function ($) {
$.extend({
formatDate: function (message) {
var now = new Date(),
y = now.getFullYear(),//获取年
//js中的月份是从0开始的
m = now.getMonth() + 1 >= 10 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1),
d = now.getDate(), // 获取日期
h = now.getHours(),
min = now.getMinutes(),
s = now.getSeconds();
var time = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s;
return time + ' myLog: ' + message;
}
})
})(jQuery)
七、this
在插件开发中,应先this缓存起来。这个this指向的是对象本身。 this可以写成:this或$(this)
八、插件尽可能返回对象本身。
插件的固定格式:
;(function($){
var that;
$.fn.插件名 = function(){
that = this;
// 实现插件功能的代码
}
return that;
})(jQuery);
或:
;(function($){
var that;
$.fn.extend = {
插件名1: function(){
that = this;
// 实现插件功能的代码
},
插件名2: function(){
that = this;
// 实现插件功能的代码
},
插件名3: function(){
that = this;
// 实现插件功能的代码
},
...
}
return that;
})(jQuery);
九、配置参数
如果传的参数是两个以上,最好将参数设置成对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>这是测试内容。</p>
</body>
<script src="./jquery.js"></script>
<script src="./jquery.setattr.js"></script>
<script>
// $('p').setAttr('400px','200px','20px','#f00','#0ff');
$('p').setAttr({
color:'#f00',
width:'400px',
fontSize:'20px',
background:'#0ff',
height:'200px'
});
</script>
</html>
js代码
/* ;(function($){
$.fn.setAttr = function(w,h,s,fc,bc){
var that = this;
that.css('width',w)
that.css('height',h)
that.css('font-size',s)
that.css('color',fc)
that.css('background-color',bc)
return that;
}
})(jQuery); */
/* // 改造后:
;(function($){
$.fn.setAttr = function(config){
var that = this;
that.css('width',config.width)
that.css('height',config.height)
that.css('font-size',config.fontSize)
that.css('color',config.color)
that.css('background-color',config.background)
return that;
} */
十、设置默认值
1、默认值设置var 默认值对象 = {值内容}
2、将默认值对象和用户传过来的对象合并成一个新的对象。var settings = $.extend({},默认值,传过来的对象) // 对象合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>这是测试内容。</p>
</body>
<script src="./jquery.js"></script>
<script src="./jquery.setattr.js"></script>
<script>
$('p').setAttr({width:'600px',fontSize:'30px',background:'olive'})
</script>
</html>
js代码
;(function($){
$.fn.setAttr = function(config){
var that = this;
// 默认值设置
var def = {width:'200px',height:'100px',fontSize: '14px',color:'#fff',background:'red'}
// 将def和config合并成一个对象。注意:用户传值的对象要写在最后!
var settings = $.extend({},def,config)
that.css('width',settings.width)
that.css('height',settings.height)
that.css('font-size',settings.fontSize)
that.css('color',settings.color)
that.css('background-color',settings.background)
return that;
}
})(jQuery);
注意:用户传值的对象要写在最后!
十一、命名空间
把所有方法以私有方法定在命名空间下,然后再结合闭包把方法查询表对外暴露出去。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">box</div>
</body>
<script src="./jquery.js"></script>
<script src="./jquery.namespace.js"></script>
<script>
$('.box').namespace({fn:'init',txt:'我是前端大咖!'})
$('.box').namespace({fn:'show'})
$('.box').namespace({fn:'update'})
</script>
</html>
js代码
;(function($){
var that;
var methods = {
init: function(content){
console.log(content);
console.log('init.........')
// this.html('这init初始化后的内容。')
this.html(content.txt)
},
setData: function(){
console.log('setData')
},
getData: function(){
console.log('getData')
},
show: function(){
console.log('show')
},
update: function(){
console.log('update')
},
destroy: function(){
console.log('destroy')
}
}
$.fn.namespace = function(option){
that = this;
// methods[option.fn]() // 这种方法中的this指向会出问题
methods[option.fn].apply(that,arguments)
return that;
}
})(jQuery);