首页 > 代码库 > jQuery ui widget和jQuery plugin的实现原理简单比较
jQuery ui widget和jQuery plugin的实现原理简单比较
一、创建
1、 jQuery plugin
(function($){
$.fn.MyPlugin=function(){
//js代码
}
})(jQuery)
为了与页面上其他代码友好相处,将plugin定义在一个闭包里,MyPlugin是plugin的名字。调用方式:$(‘选择器’).MyPlugin();
2、 jquery ui widget
(function($){
$.widget(‘ui.mywidget’,{
options:{
//默认的配置参数
},
//方法的定义
})
})(jQurry)
同样定义在一个闭包里。Mywidget 为这个widget的名字。调用方式:$(‘选择器’).mywidget();
上述代码只是简单概述,具体实现jQuery官方文档讲得很详细。
二、实现原理
创建一个jQuery plugin其实是创建了一个jQuery对象(在这里我把通过$(‘选择器’)的返回值叫做jQuery对象)的方法。看下$()和$.fn 是什么就明白了。
通过$.widget 这个Widget Factory 函数创建的一个widget,本质上是通过创建一个类即一个构造函数实现的。
看下 widget 工厂函数的调用,方法:$.widget(name,[,base],prototype)。
name:要创建的widget的名字,包扩命名空间。如:ui.mywidget。
base:为一个父类。新创建的类将继承他的方法。默认为:$.Widget。
Prototype:作为创建的类即构造函数的prototype属性值。
再看下widget的调用。
实例化:通过$(‘选择器’).mywidget(),实例化相应的类,并通过$.data()将实例化后得到的对象存储在对应的$(‘选择器’)中。源码:$.data( this, fullName, new object( options, this ) );
对象操作: $(‘选择器’).mywidget(方法名,方法的参数); 调用存储在$(‘选择器’)对应对象的方法。注意在对对象操作前必须实例化,否则会报错。