当前位置:首页>正文

JQuery插件的开发真的有那么难吗 怎么开发jQuery的插件呢

2023-07-03 03:58:47 互联网 未知

JQuery插件的开发真的有那么难吗

现在网上关于js和jquery封装的插件很多,我刚刚接触前端的时候,就很敬佩那些自己写插件的大牛们!因为是他们给网站开发更多的便利,很多网页效果,网上很多现成的插件!那么这些插件是如何写的呢看首先是有扎实的js和jquery技术基础,其次还有一些写插件的方法和技巧。关于js和jquery的技术基础,那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧,本文可以略微介绍一下,方便以后写插件的时候用得到。
jquery插件开发模式
jquery插件一般有三种开发方式:
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍。第二种则是一般插件开发用到的方式,本文着重讲讲第二种。

怎么开发jQuery的插件呢?

插件开发很麻烦的,需要不小的jquery功底,各浏览器的兼容性,开发过程中还要考虑插件的通用性、可扩展性..
http://www.cnblogs.com/fromearth/archive/2009/07/08/1519054.html 一个很简单的插件开发示例

请问如何写JQuery插件?

一、类级别($.extend)
类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法。
开发扩展其方法时使用$.extend方法,即jQuery.extend(object)
二、 对象级别
对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...) 这里这个changeColor呢,就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法,即jQuery.fn.extend(object)
三、 jQuery插件开发过程
1、定义作用域:为插件定义私有作用域,外部代码不能直接访问插件内部的代码,插件内部的代码不污染全局变量、
2、为jQuery扩展一个插件:为jQuery的实例添加一个宽展方法。该宽展方法可以接收一些参数。
3、设置默认值:为扩展方法设置默认值,一般会将默认属性对象定义为defaults。使用$.extend(defaults,options)将默认值和传入的参数进行合并。
4、支持jQuery的连接调用:循环把每个元素返回。
5、插件里的方法:为了使代码结构化可视化,需要用到function。在插件里的方法不能被外界调用。
6、自定义回调函数:使用call和apply方法执行回调函数。

如何编写jquery 插件 函数A调用函数B

编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护。
在编写jQuery插件的时候,我们一般会遵循一些约定:
jQuery插件推荐命名为:jquery.插件名.js。
所有对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上。
在插件内部,this指向的是当前通过选择器获取的jQuery对象;而一般的方法如click()方法,内部的this指向的是DOM元素。
所有的方法或函数插件,都应当以分号结尾,否则压缩的时候可能出现问题,甚至可以在插件头部先加上一个分号,以免他人的不规范代码给插件带来影响。
插件应该返回一个jQuery对象,以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量,例如字符串或者数组等。
为了避免冲突,避免在插件内部使用作为jQuery对象的别名,而应使用完整的jQuery来表示。当然,也可以利用闭包技术来回避这个问题,使插件内部继续使用作为jQuery的别名。
闭包:当内部函数在包含它们的外部函数之外被调用的时候,就会形成闭包,即内部函数会在外部函数返回后执行。

function a(){
    var i = 0
    function  b(){
    alert( i)
    }
    return b
}
var c = a()
c()

以上代码中,当函数a的内部函数b被函数a外的一个变量c引用的时候,就创建了一个我们通常所谓的“闭包”。
另外,还可以通过匿名函数创建闭包(一个函数是不是匿名函数和是不是闭包并没有直接关系):

var JSON = JSON || {}
(
    function(){
    var f = function(n){
    for(var i=0i    alert(i)
    }
    }
    JSON.f=f
})()
JSON.f(1)  

内部函数:函数定义和函数表达式位于另一个函数的函数体内,并且这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。
闭包的作用:1、保护函数内的变量安全;2、在内存中维持一个变量(javascript垃圾回收机制)。
利用闭包的特性,我们可以在既避免内部临时变量影响全局空间,又可以在插件内部使用$符号作为jQuery的别名。常见的jQuery插件都是以下这种形式:
(function(){
    /*编写代码*/
})()

首先定义一个匿名函数function(){/*编写代码*/},然后用括号括起来,最后通过()这个运算符来执行。可以传递参数进去,以供内部函数使用。
//为了更好的兼容性,开始前有个分号
(function($){    //此处将$作为匿名函数的形参
/*编写代码,可以使用$作为jQuery的别名*/
})(jQuery)    //将jQuery作为实参传递给匿名函数