目录
1）对jQuery函数prototype函数的别名（jQuery.fn）进行（原型）扩展。
2）采用jQuery.extend（）方法进行（静态）扩展。
1.什么是插件？
jQuery插件是对jQuery框架利用原型的扩展。
插件通常是一个完备功能的封装，它是JQ功能的一个补充或扩展。
注意：开发JQ插件，该插件是依赖jQuery的必须先引入jQuery，再引入插件。
2.jQuery的插件主要分为3种类型
1）封装对象方法的插件（原型扩展）主要的开发方式
这种是大多数采用的方法。操作原型，对jQuery框架入侵性较小，例如：parent（）方法，append（）方法和addClass（）方法等DOM操作方法。
2）封装全局函数的插件（静态扩展）
将方法或插件直接挂到对象/类上。
常见如：$.trim（）方法和$.now（）方法，都是jQuery内部作为全局函数的插件附加到内核上去的。
3）选择器插件
对jQuery选择DOM的补充或扩展。
虽然jQuery的选择器功能十分强大，但有时用户的特殊需求，还是会扩展一些自己喜欢的选择器，例如用：color（“red”）来把选择匹配的元素的文字样式一次性设置为红色。
3.命名规范
1）jquery.插件名.js
开发模式
2）jquery.插件名.min.js
压缩格式
4.插件中的冲突
1）JQ让渡方法，让JQ让出对$的占用
jQuery.noConflict（） 解绑jQuery对$的引用
其后使用jQuery中的$时用jQuery代替$：jQuery("#box").css("color","red")
2）深度让渡
jQuery.noConflict(true) （$和jQuery都不能使用）
其后使用jQuery中的$时：
var jq = jQuery.noConflict(true) //深度让渡 ($和jQuery都不能使用)
console.log($.getEl("box"));
jq("#box").css("color","red")5.在插件中使用闭包
在封装插件时使用闭包。
闭包：闭包是指一个函数能够访问并操作其外部作用域中的变量，即使在函数被调用之后，仍然可以访问这些变量。
目的：为了避免变量的全局污染，对内部信息进行了保护（在IIFE外部不能调用闭包内的变量）。
IIFE是实现闭包的一种方式。
实现方式：
;(function(){
function _插件名(){
实现插件名的代码
}
jQuery.prototype.插件名 = _插件名
})()
或：
;(function($){
function _插件名(){
//实现插件功能的代码
}
$.fn.插件名 = _插件名 //jQuery.prototype === $.fn
})(jQuery)6.jQuery的插件机制
1）对jQuery函数prototype函数的别名（jQuery.fn）进行（原型）扩展。
;(function ($) {
// 在原型上绑定单个方法
$.fn.chSize = function chSize(w, h) {
$(this).width(w);
$(this).height(h);
};
// 批量绑定方法
$.fn.extend({
// 扩展方法1
setHtml: function (htmlText) {
$(this).html(htmlText);
//this：原生写法 $(this)：jQuery写法 两者都可以获取到当前节点
},
// 扩展方法2
getHtml: function () {
return this.html();
},
// 扩展方法3......
});
})(jQuery);2）采用jQuery.extend（）方法进行（静态）扩展。
;(function($){
$.extend({
方法名：function(参数){
//实现方法的代码
}
});
})(jQuery)7.插件的固定格式：
;(function($){
var that ;
$.fn.插件名称 = function(){
that = this;
//实现插件功能的代码
return that;
}
})(jQuery);
或
;(function($){
var that ;
$.fn.extend ={
插件名1:function(){
that = this;
//实现插件功能的代码
return that;
},
插件名2:function(){
that = this;
//实现插件功能的代码
return that;
},
插件名3:function(){
that = this;
//实现插件功能的代码
return that;
},
........
}
})(jQuery);
8.配置参数
1）如果传的参数是两个以上，最好将参数设置成对象
问题：如果传参过多，在调用时可能将其参数位置写错。 解决上面问题办法是： 把参数写成与顺序无关的对象形式
$("p").setAttr({
width: "400px",
fontSize: "35px",
color: "pink",
background: "#0ff",
height: "200px",
});
;(function ($) {
$.fn.setAttr = function (config) {//用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;
};
})(jQuery);2）设置默认值
问题：如果用户在使用这个插件时，不传参或少传参，这时怎么办？
①设置默认值
var 默认值对象 = {值内容}②将默认值对象和用户传过来的对象合并成一个新的对象
var setting = $.zxtend({},默认值对象,传过来的对象) //对象合并操作
eg：
// $("p").setAttr() //全为默认值
$("p").setAttr({background:"aqua",fontSize:"30px"})
(function ($) {
$.fn.setAttr = function (config) {
var that = this;
// 默认值设置
var def = {
width: "200px",
height: "100px",
fontSize: "16px",
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);9.命名空间
问题：插件的命名经常会有冲突的情况。
解决：把所有方法以私有方法定义在命名空间下，然后再结合闭包把方法查询表对外暴露出去。
(function ($) {
var that;
// 把方法私有化
var methods = {
init: function (content) {
// console.log(content);
console.log("init");
// this.html("这是init初始化后的内容")
this.html(content);
},
setData: function () {
console.log("setData");
},
getData: function () {
console.log("getData");
},
};
$.fn.namespace = function (option) {
that = this;
// methods[option.fn]() // 这种方法中的this指向会出问题
methods[option.fn].call(that, option.txt); //将methods[option.fn]中的this指向that
return that;
};
})(jQuery);
<script>
$(".box").namespace({fn:"init",txt:"我是前端大咖"})
</script>
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
