jQuery插件开发--(转)
1,开始
可以通过为jQuery.fn增加一个新的函数来编写jQuery插件。属性的名字就是你的插件的名字:
- jQuery.fn.myPlugin = function(){
- //开始写你的代码吧!
- };
但是,那惹人喜爱的美元符号$哪里去了?她就是jQuery,但是为了确保你的插件与其他使用$的库不冲突,最好使用一个立即执行的匿名函数,这个匿名函数的参数是jQuery,这样其他的库就可以放心的使用$符号了。
- (function( $ ){
- $.fn.myPlugin = function() {
- // 开始吧!
- };
- })( jQuery );
这样更好了就。在闭包内,可以放心的使用$符号了~
2,上下文
现在已经可以编写我们的代码了,但是编写之前,我必须说一说上下文。在插件内部的范围中,this关键字指向的是jQuery对象。人们很容易误解这一点,因为在正常使用jQuery的时候,this通常指向的是一个DOM元素。不了解这一点,会经常使用$又包装了一次。
- (function( $ ){
- $.fn.myPlugin = function() {
- // 没有必要使用$(this)
- // $(this) 跟 $($('#element'))是一样的
- this.fadeIn('normal', function(){
- //这里的this指的就是一个DOM元素了
- });
- };
- })( jQuery );
- $('#element').myPlugin();
3,基本开发
接下来写一个能用的插件吧。
- (function( $ ){
- $.fn.maxHeight = function() {
- var max = 0;
- this.each(function() {
- max = Math.max( max, $(this).height() );
- });
- return max;
- };
- })( jQuery );
- var tallest = $('div').maxHeight();
这是一个简单的插件,通过调用height()返回页面上height最大的div的height。
4,维护链式开发的特性
上一个例子是返回了一个整数,但是大多数情况下,一个插件紧紧是修改收集到的元素,然后返回这个元素让链条上的下一个使用。这是jQuery设计的精美之处,也是jQuery如此流行的原因之一。为了保证可链式,你必须返回this。
- (function( $ ){
- $.fn.lockDimensions = function( type ) {
- return this.each(function() {
- var $this = $(this);
- if ( !type || type == 'width' ) {
- $this.width( $this.width() );
- }
- if ( !type || type == 'height' ) {
- $this.height( $this.height() );
- }
- });
- };
- })( jQuery );
- $('div').lockDimensions('width').css('color','red');
因为该插件返回了this,所以保证了可链式,从而可以继续使用jQuery方法进行修改,如css()。如果你的插件如果不是返回一个简单值,你通常应该返回this。而且,正如你可能想到的,你传进去的参数也可以在你的插件中访问。所以在这个例子中,可以访问到type。
5,默认值和选项
为了一些复杂的,可订制的插件,最好提供一套默认值,在被调用的时候扩展默认值。这样,调用函数的时候就不用传入一大堆参数,而是传入需要被替换的参数。你可以这样做:
- (function( $ ){
- $.fn.tooltip = function( options ) {
- var settings = {
- 'location' : 'top',
- 'background-color' : 'blue'
- };
- return this.each(function() {
- // 如果存在选项,则合并之
- if ( options ) {
- $.extend( settings, options );
- }
- // 其他代码咯
- });
- };
- })( jQuery );
- $('div').tooltip({'location':'left'});
在这个例子中,调用插件后,默认的location会被替换城'left',而background-color还是'blue'。这样可以保证高度可配置性,而不需要开发者定义所有可能的选项了。
6,命名空间
正确的命名空间对于插件开发十分重要,这样能确保你的插件不被其他插件重写,也能避免被页面上其他代码重写。命名空间可以使你更长寿,因为你能记录你自己的方法,事件,数据等。
a,插件方法
在任何情况下,都不要在一个插件中为jQuery.fn增加多个方法。如:
- (function( $ ){
- $.fn.tooltip = function( options ) { // 这样 };
- $.fn.tooltipShow = function( ) { // 是 };
- $.fn.tooltipHide = function( ) { // 不好的 };
- $.fn.tooltipUpdate = function( content ) { // 同学! };
- })( jQuery );
不推荐这样使用,搞乱了$.fn命名空间。要纠正之,你可以把所有的方法放进一个对象中,然后通过不同的参数来调用。
- (function( $ ){
- var methods = {
- init : function( options ) { // THIS },
- show : function( ) { // IS },
- hide : function( ) { // GOOD },
- update : function( content ) { // !!! }
- };
- $.fn.tooltip = function( method ) {
- // Method calling logic
- if ( methods[method] ) {
- return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
- } else if ( typeof method === 'object' || ! method ) {
- return methods.init.apply( this, arguments );
- } else {
- $.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
- }
- };
- })( jQuery );
- $('div').tooltip({ // calls the init method
- foo : 'bar'
- });
- $('div').tooltip('hide'); // calls the hide method
- $('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method
jQuery自己的扩展也是使用这种插件结构。
b,事件
绑定事件的命名空间是比较不为人知的。如果你的插件绑定了某个事件,最好将它搞到一个命名空间中。这样,如果你以后需要解绑,就不会影响到其他绑定到这个事件上的函数了。你可以使用".<namespace>"来增加命名空间。
- (function( $ ){
- var methods = {
- init : function( options ) {
- return this.each(function(){
- $(window).bind('resize.tooltip', methods.reposition);
- });
- },
- destroy : function( ) {
- return this.each(function(){
- $(window).unbind('.tooltip');
- })
- },
- reposition : function( ) { // ... },
- show : function( ) { // ... },
- hide : function( ) { // ... },
- update : function( content ) { // ...}
- };
- $.fn.tooltip = function( method ) {
- if ( methods[method] ) {
- return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
- } else if ( typeof method === 'object' || ! method ) {
- return methods.init.apply( this, arguments );
- } else {
- $.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
- }
- };
- })( jQuery );
- $('#fun').tooltip();
- // Some time later...
- $('#fun').tooltip('destroy');
在这个例子中,tooltip在init方法中初始化,它将reposition方法绑定到window对象的resize事件的tooltip名字空间下。稍候,如果开发者需要去掉这个tooltip,我们可以解绑这个绑定。这样就不会影响到其他绑定到window对象的resize事件的方法了。
c,数据
在开发插件的时候,你通常会有保持状态或者检查你的插件是否已经初始化的需要。使用jQuery的data方法是保持变量的很好的方法。但是,我们不把变量单独保存,而是放在一个对象中,这样就可以在一个名字空间下统一访问了。
- (function( $ ){
- var methods = {
- init : function( options ) {
- return this.each(function(){
- var $this = $(this),
- data = $this.data('tooltip'),
- tooltip = $('<div />', {
- text : $this.attr('title')
- });
- // If the plugin hasn't been initialized yet
- if ( ! data ) {
- /*
- Do more setup stuff here
- */
- $(this).data('tooltip', {
- target : $this,
- tooltip : tooltip
- });
- }
- });
- },
- destroy : function( ) {
- return this.each(function(){
- var $this = $(this),
- data = $this.data('tooltip');
- // Namespacing FTW
- $(window).unbind('.tooltip');
- data.tooltip.remove();
- $this.removeData('tooltip');
- })
- },
- reposition : function( ) { // ... },
- show : function( ) { // ... },
- hide : function( ) { // ... },
- update : function( content ) { // ...}
- };
- $.fn.tooltip = function( method ) {
- if ( methods[method] ) {
- return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
- } else if ( typeof method === 'object' || ! method ) {
- return methods.init.apply( this, arguments );
- } else {
- $.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
- }
- };
- })( jQuery );
使用data方法可以帮助你在插件的各个方法间保持变量和状态。将各种变量放在一个对象中,可以方便访问,也可以方便移除。
7,总结与最佳实践
编写jQuery插件可以充分利用库,将公用的函数抽象出来,“循环利用”。以下是简短的总结:
- 使用(function($){//plugin})(jQuery);来包装你的插件
- 不要在插件的初始范围中重复包裹
- 除非你返回原始值,否则返回this指针来保证可链式
- 不要用一串参数,而是使用一个对象,并且设置默认值
- 一个插件,不要为jQuery.fn附上多个函数
- 为你的函数,事件,数据附着到某个命名空间
jQuery插件开发--(转)的更多相关文章
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- JavaScript学习总结(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- jQuery插件开发精品教程,让你的jQuery提升一个台阶
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- jquery插件开发
jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...
- jQuery插件开发(溢出滚动)
声明:此程序仅针对手机端,简单的封装一个插件,意在记载插件的开发过程,如有错误及不足之处,还望即时指出. 移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到 ...
- 从零开始学jQuery插件开发
http://www.w3cfuns.com/notes/19462/ec18ab496b4c992c437977575b12736c.html jQuery 最成功的地方,是它的可扩展性,通过吸引了 ...
- jquery插件开发继承了jQuery高级编程思路
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- jQuery插件开发(转)
jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命 ...
- jQuery插件开发的两种方法及$.fn.extend的详解
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...
- Jquery插件开发学习
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
随机推荐
- 【leetcode】Partition List(middle)
Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...
- 【XLL API 函数】xlSet
快速的将常数值放入到单元格区域中. 原型 Excel12(xlSet, LPXLOPER12 pxRes, 2, LPXLOPER12 pxReference,LPXLOPER pxValue); 参 ...
- qt编译mysql插件
安装MySQL,C:\Program Files (x86)\MySQL\MySQL Server 5.7,然后把include和lib文件夹拷贝到C盘,因为qmake不允许路径中有空格!!! 安装Q ...
- September 24th 2016 Week 39th Saturday
The worst solitude is to be destitute of sincere friendship. 最大的孤独莫过于没有真诚的友谊. I walk slowly, but I n ...
- 原始套接字SOCK_RAW
原始套接字SOCK_RAW 实际上,我们常用的网络编程都是在应用层的报文的收发操作,也就是大多数程序员接触到的流式套接字(SOCK_STREAM)和数据包式套接字(SOCK_DGRAM).而这些数据包 ...
- poj1417(种类并查集+dp)
题目:http://poj.org/problem?id=1417 题意:输入三个数m, p, q 分别表示接下来的输入行数,天使数目,恶魔数目: 接下来m行输入形如x, y, ch,ch为yes表示 ...
- Ionic2 Tutorial
build your first app Now that you have Ionic and its dependencies installed, you can build your firs ...
- MVC – 4.mvc初体验(1)
1.MVC请求模式 2.MVC简单请求流程图 展开 折叠 3.返回string的mvc方法 展开 折叠 4.加载视图的方法
- WPF布局
1.Canvas 布局控件 Canvas面板是最轻量级的布局容器,它不会自动调整内部元素的排列和大小,不指定元素位置,元素将默认显示在画布的左上方.Canvas主要用来画图.Canvas默认不会自动裁 ...
- HDU1899 Sum the K-th's(树状数组)
枚举,每次增加点,删除点 #include<cstdio> #include<iostream> #include<cstdlib> #include<cst ...