0
点赞
收藏
分享

微信扫一扫

JS 插件开发

松鼠树屋 2021-09-23 阅读 42

jQuery 插件两种函数的开发

1. 类级别的插件开发
类级别的插件开发最直接的理解就是给 jQuery 类添加类方法,可以理解为添加静态方法。典型的例子就是"$.ajax()"这个函数,将函数定义于jQuery的命名空间中。

类级别插件开发的几种形式进行扩展:

  • 添加一个新的全局函数
$.hello = function(){
alert("Hello!") ;
} ;
  • 增加多个全局函数添加多个全局函数
$.extend({
hello : function(name){
// put your code here
} ,
world : function(){
// put your code here
}
}) ;
  • 使用jQuery.extend(object)
  • 使用命名空间

说明:”$.extend(target, [object1], [objectN])“(该方法主要用于合并两个或更多对象的内容(属性)到第一个对象,并返回合并后的第一对象。

如果该方法只有一个参数target,则该参数将扩展jQuery的命名空间,即作为静态方法挂在jQuery全局对象下)。

2. 对象级别的插件开发

对象级别的插件开发需要如下的两种形式:

  • 通过“$.fn.extend()”为原型动态挂载相关的属性。
(function($){  
$.fn.extend({
pluginName : function(opts){
// put your code here
}
}) ;
})(jQuery) ;
  • 直接添加动态属性到原型链上。
(function($) {    
$.fn.pluginName = function(){
// put your code here
} ;
})(jQuery) ;

说明:二者是等价的,对于一个 jQuery 插件,一个基本的函数就可以很好地工作,但是对于复杂一点的插件就需要提供各种各样的方法和私有函数。

jQuery 插件开发的规范

  • 使用闭包:
(function($){
//Code goes here
})(jQuery);

这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢?

a) 避免全局依赖
b) 避免第三方破坏
c) 兼容 jQuery 操作符 ’$’ 和 ’jQuery’

举报

相关推荐

0 条评论