jQuery插件编写规范

第一种方法:

在很多基于jQuery或基于Zepto的插件中,在立即函数执行前面会加上";"这个符号。

这是为了防止前面的其他插件没有正常关闭。

在立即执行函数执行时,会一般会传入jQuery,window等。举个例子:

;(function($,window,undefined){
	//.....
})(jQuery,window)

window传递进来作为局部变量存在,而非全局变量,这样可以加快解析流程,以及影响最小化。

undefined没有传进来,以便可以确保此undefined是真正的undefined。因为ECMAScript3里的undefined是可以修改的,ECMAScript5不可以修改。

下面是自定义jQuery插件的规范:

;(function($,window,undefined){
	var pluginName = "chaojidan",
		defaults = {
			name:"dandan"
		};
	function Plugin(element, options){
		this.element = element;
		this.options = $.extend( {} , defaults,options );
		this._name = pluginName;
		this._defaults = defaults;
		this.init();
	}
	Plugin.prototype.init = function(){
		//初始化插件
	};
	$.fn[pluginName] = function(options){     //真正的插件包装,防止出现多个实例
		return this.each(function(){
			if(!$.data(this,"plugin_"+pluginName)){
				$.data(this,"plugin_"+pluginName, new Plugin(this, options));
			}
		});
	}

})(jQuery,window)

调用此插件:

$("#elem").chaojidan({name:"xiaoxiao"});  

第二种方法:

;(function($,window,undefined){
	var myObject = {
		init : function(options, elem){
			this.options = $.extend({}, this.options, options);
			this.elem = elem;
			this.$elem = $(elem);
			this._build();
			return this;
		},
		options:{
			name:"dandan"
		},
		_build:function(){

		},
		myMethod:function(){

		}
	};
	if(typeof Object.create != "function"){
		Object.create = function(o){
			function F(){}
			F.prototype = o;
			return new F();
		}
	}
	$.plugin = function(name, object){
		$.fn[name] = function(options){
			return this.each(function(){
				if(!$.data(this,name)){
					$.data(this,name,Object.create(object).init(options,this))
				}
			});
		}
	}
    $.plugin("chaojidan",myObject);
})(jQuery,window);

调用方式:

$("#elem").chaojidan({name:"xiaoxiao"}); 

对于上面的两种方法,我们定义插件时,都传递了带有默认值的对象字面量给$.extend()。然而,如果我们想自定义此默认值的对象字面量,也就是说,用户可以重写此默认对象字面量,那么我们该如何来写呢?

其实非常简单,我们只要把此默认对象字面量这样赋值就行了。

$.fn.pluginName.options = {
  name:"dandan"
}

这样,用户能够重写全局默认配置,达到插件构造的灵活性。

加油! 

时间: 2024-08-08 17:24:05

jQuery插件编写规范的相关文章

自己动手丰衣足食之征服jQuery插件编写

原文地址:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择.

jQuery插件编写

jQuery种类 1.封装对象方法的插件,这种插件是我们常用的插件,后面将会具体针对这种插件介绍,如:$("#div").parent(); 2.封装全局函数的插件 如:jQuery.ajax() 3.选择器插件 如:$("ul li:eq(0)") 基本要点 1.所有的对象方法(第1种)都应该附加在jQuery.fn=jQuery.prototype,而所有的全局函数都应该附加在jQuery上 2.this在插件内部,是通过选择器获取的jQuery对象,而例如cl

jQuery插件编写及链式编程模型小结

JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下: (function($){ $.fn.m

jQuery插件编写及链式编程模型

jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下:

JQuery插件编写之定制版选择器

很多人是因为jQuery的强大选择器而爱上它的(没错,我就是特别讨厌原生JS的FindElementById),但是何尝不想把一些经常用的链式操作组合写成一个选择器呢?! 从机制上来讲,jQuery的选择符解析器首先会使用一组正则表达式来解析选择器,然后对解析出来的每个选择符执行选择器函数,最后根据true或false来决定是否保留元素. 比如说: $('div:gt(1)') 在jQuery的源文件中是由jQuery.expr[":"] = jQuery.expr.pseudos 对

JQuery插件编写之封装对象

Jquery扩展插件有三大法宝, 1.封装对象方法 (本文详细介绍):对通过选择器获取的jQuery对象进行操作.2.封装全局函数3.选择器插件 jQuery插件的机制: jQuery插件的机制很简单,就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法,扩展jQuery的功能. jQuery.fn.extend()多用于扩展上面提到的3种类型中的第一种,jQuery.extend()用于扩展后两种插件. 废话不多说,自己编写的插件建议命名为jque

浅析bootstrap插件编写规范

转载.最近学习 bootstrap  转载一下留着用. bootstrap-button.js插件是一款基于jquery的为html原生的button扩展了一些简单功能的插件,用twitter bootstrap的朋友可能再熟悉不过了,只要向button标签添加一些额外的data属性,我们就能实现点击button出现loading文字以及模拟复选和单选等功能. 下面以bootstrap-button.js的源码为实例,谈一下js插件编写的一些基本规范,笔者也是刚刚接触JS插件,权且拿这一篇,希望

jQuery插件编写步骤详解

如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下 面就是一个简单扩展Jquery对象的demo: //sample:扩展jquery对象的方法,bold(

jquery插件编写学习小结

编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率. 一.插件的种类 jQuery的插件主要分为3种类型. 1.封装对象方法的插件 2.封装全局函数的插件 3.选择器插件 这里我们主要讨论第一种插件的开发流程. 封装对象方法的插件: 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件,有95%以上的插件都是这种类型的插件. 二.插件的基本要点 1.所有对象方法都应当附加到jQuery.fn上,而所