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(方法名，方法的参数); 调用存储在$(‘选择器’)对应对象的方法。注意在对对象操作前必须实例化，否则会报错。

转载于:https://www.cnblogs.com/htmlwall/p/3699404.html

jQuery ui widget和jQuery plugin的实现原理简单比较相关推荐

jQuery UI Widget(1.8.1)工作原理--转载
先看下代码的相关注释: /*!* jQuery UI Widget 1.8.1** Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) ...
使用 jQuery UI Widget Factory 编写有状态的插件（Stateful Plugins）
使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) 使用 jQuery UI Widget Factory 编写有状态的插件(Stateful ...
jQuery UI Autocomplete是jQuery UI的自动完成组件
jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大.最灵活的Autocomplete,它支持本地的Array/JSON数组.通过ajax请求的Array/ ...
Wijmo 更优美的jQuery UI部件集：复合图表(CompositeChart)
Wijmo的CompositeChart控件允许您使用一个Chart来分析和展现复杂的数据.相同的数据可以使用不同的可视化效果,不同的图表类型展现在一个图表内,使得用户可以从不同的角度,了解分析这组数 ...
基于 jquery ui 扩展Widget
jQuery UI CSS Framework是jQuery UI中的一个样式框架,可以利用jQuery Theme roller 来生成自己想要的css样式效果.我们可以利用jQuery UI的一些 ...
学习 jQuery UI
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序 ...
w3cschool教程之jQuery UI 教程概述
w3cschool教程之jQuery UI 教程概述链接地址: http://www.w3cschool.cc/jqueryui/jqueryui-tutorial.html w3cschool教程 ...
jQuery UI - Accordion 手风琴组件的使用
这里的例子使用 jQuery UI 1.8.6 示例效果可以看 jQuery 网站中的例子. 手风琴效果将多个内容组织到多个逻辑组中,通过选择组的标题可以展开或者收缩组中的内容,使用效果很像 Tab, ...
JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

jQuery ui widget和jQuery plugin的实现原理简单比较

jQuery ui widget和jQuery plugin的实现原理简单比较相关推荐

最新文章

热门文章