JQUERY 闭包基础及插件开发基础

来源：互联网发布：固态硬盘修复软件编辑：程序博客网时间：2024/06/07 02:09

/**

* 制作JQUERY

* JQUERY 闭包，匿名函数的书写格式

* 为了更好的兼容性，开始前有个分号

* 时间：2015-10-24 2：30

* 作者：郑开金

//匿名函数定义：function (){ }

; (function ($) {//定义一个匿名函数，$作为匿名函数的形参

* Jquery 的插件主要3种类型及基本要点

* 3种类型：

* 1、封装对象方法的插件：是将对象方法封装起来，用于通过选择器获取的JQUERY对象进行操作，是最常见的一种插件

* 2、封装全局函数的插件：将独立的函数加到jquery命名空间下，

* 3、选择器插件

* 基本要点：

* 1、插件命名：以jquery开头，避免与其他的JavaScript库混淆，示例：jquery.red.js

* 2、所有的对象都应该附加到jquery.fn对象上，部分全局函数应附加到jquery对象本身

* 3、在插件内部，this指向当前通过选择器获取的jquery对象，而不像一般的方法那样，例如click（）方法，内部的this指向的是DOM元素

* 4、可以通过this.each来变量所以元素

* 5、所有的方法或函数插件，都要以分号结尾，否则压缩的时候会出现问题，甚至在插件头部先加一个分号，以避免别人的不规范代码给插件带来的影响。

* 6、插件应该返回一个JQUERY对象，以保证插件的可连式操作，除非插件需要返回的是一些需要获取的量，例如：字符串或者数组等

* 7、避免在插件插件内部使用$作为jquery对象的别名，应该使用完整jquery表示，这样可以避免冲突，可以使用闭包避免$别名冲突

//匿名函数内编写插件代码，可以继续使用$作为Jquery的别名

//定义个变量fo ，在匿名函数内部定义的变量，只有在匿名函数内部使用，外部无法访问。

var fo;

var bar = function () {

//在匿名函数的内部函数可以访问 fo,即便是在匿名函数的外部调用 bar()的时候，也可以在bar()的内部访问到 fo，但在匿名函数

//的外部直接访问 fo是做不到的

}

下面的语句让匿名函数内部的函数bar()避免到全局可访问的范围内，这样

就可以在匿名函数的外部通过jquery.BAR() 来访问内部的函数bar() ，

并且内部函数bar() 也能访问匿名函数内的变量 fo

$.BAR = bar;

/**

* jquery提供的两个扩展方法

* 1、jQuery.fn.extend() 这个方法是用来扩展 “封装对象方法”的插件。

* 2、 jQuery.extend() 这个方法是用来扩展 “全局函数”和“选择器”的插件。

* 这两种方法都接收一个参数，类型为Object 。Object对象的"名/值对" 分别代表“函数或方法名/函数主体”

*jQuery.extend() 除了可以扩展jQuery对象之外，还可以扩展已有的Object对象

*示例代码：jQuery.extend(trarget,obj1,.....objN)

*用一个或多个其他对象来扩展一个对象，返回被扩展的对象

*例如：合并settings 对象和options对象，修改并返回 settings对象。

*var settings ={validate:false,limit:1,name:"fo"}

*var options ={validate:true,name:"bar"}

*返回结果：

*newOptions = jQuery.extend(valideta:true,limit:1,name:"fo");

* jquery.extend()经常被用于设置插件的方法的一系列默认参数。例如：

function fo(options){

options= jquery.extend({

nume:"bar",

length:3,

dataType:"xml" //默认为xml

},options); //options 为传递的参数

}

如果在调用fo（）方法时候，在传递参数options对象中设置了相应的值，那么就会使用设置的值，否则使用默认值。调用如下

fo({name:"a",length:1,dataType:"json"});

fo({name:"b",length:1});

fo()

通过jQuery.extend()方法，可以方便传入参数覆盖原有的值

/************************************************************************************

*************************************************************************************

*以上说了那么多只是让我们清楚一些规则性的东西下面我们就来做一个简单的color颜色插件吧*

*************************************************************************************

*************************************************************************************/

//1、写闭包

; (function ($) {

//2、写插件，使用jQuery.extend方法写对象插件

$.extend({

//定义一个插件改变颜色

"color": function (vlaue) {

return this.css("color", vlaue)

//如果我们想定义一组插件，可以这样写

"alertBgColor": function (options) {//各行变色

//设置默认值

options =$.extend({

odd: "odd", //偶数行变色

even: "even", //奇数行变色

selectd:"select" //选中样式

}, options);

//在插件内部调用each（）方法遍历匹配元素，然后执行相应的方法，this会依次引用每个DOM元素

return this.each(function () {

$("tbody >tr:odd", this).addClass(options.odd);

$("tbody >tr:even", this).addClass(options.even);

$("tbody >tr", this).click(function () {

//判断当前是否选中

$("tbody > tr:odd", this).hasClass(options.selectd);

//如果选中，就移除selectd类，否则加上selectd类，判断可以使用算木运算符

$(this)[hasSelected ? "removeClass" : "addClass"](options.selectd)

//查找能不复选框checkbox ,设置对应的属性

.find(':checkbox').attr('checked', !hasSelected);

});

//如果单选框默认情况下是选择的，则高亮

$('tbody > tr:has(:checked)', this).addClass(options.selectd);

});

"background": function (value) {

//插件代码

}

});

})(jQueyr);

//应用插件

$(function () {

//下面就是调用插件诺

$("div").color();//改变div的颜色

$("#mm").alertBgColor().find("th").css("color","red")//各行变色，

})

})(jQuery); // 2、通过（）运算符来执行匿名函数，可以传递参数供内部使用，这里JQUERY作为实参传递给匿名函数

0 0