编写jquery插件 js插件

大家好，如果您还对编写jquery插件不太了解，没有关系，今天就由本站为大家分享编写jquery插件的知识，包括js插件的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

如何创建一个自定义jquery插件

jQuery库是专为加快 JavaScript开发速度而设计的。通过简化编写 JavaScript的方式，减少代码量。使用

jQuery库时，您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话，这可能就是您需要编写自定义 jQuery插件的一个原因。

jQuery插件允许您使用自定义代码扩展 jQuery库；您可以对一些重复性函数使用插件。例如，很多插件可供幻灯片、下拉菜单和折叠菜单所用。如果您搜索 jQuery插件，就会发现有大量可用于自己项目的示例（看看它们是如何构建的）。

准备工作

对JavaScript、jQuery和CSS有一个基本了解。（用到的源代码及示例在本文最下方）

开始

jQuery是一个可扩展 JavaScript语言的库。当您创建一个 jQuery插件时，本质上是在扩展这个 jQuery

库。要真正了解插件如何扩展 jQuery库需要对 JavaScript prototype属性有一个基本了解。尽管不直接使用，但是

JavaScript prototype属性可通过 jQuery属性 fn在后台使用，这是原生 JavaScript prototype

属性的一个 jQuery别名。

要使用 fn属性创建一个新 jQuery插件，只需要为 fn属性分配一个插件名，并将其指向一个充当构造函数的新函数，类似于纯

JavaScript。Code 1显示了如何定义一个名为 accordion的新 jQuery插件，其方法是通过使用 jQuery对象和

fn属性，并将其分配给一个新的构造函数。

Code 1：定义一个名为 accordion的新 jQuery插件

jQuery.fn.accordion= function(){

//在这里添加插件代码

};

Code 1展示了创建 jQuery插件的一种方法；该示例没有什么功能性错误。但是，创建一个 jQuery

插件所推荐的方法是，先创建一个允许使用美元符号($)的包装器函数。在默认情况下，美元符号可能与其他 JavaScript

框架发生冲突，如果将插件包装在一个函数中，就不会出现冲突。Code 2中的示例代码显示如何将一个包装器函数应用到一个 jQuery

插件定义中。

(function($){

$.fn.accordion= function(){

//在这里添加插件代码

};

})(jQuery);

在Code 2中，jQuery关键字被应用到包装器函数中，这允许您在插件中使用美元符号，就像使用 fn

属性时那样。包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替 jQuery

关键字，不会干扰其他第三方插件。该选项提供了一种方法使我们可以在开发整个插件中编写较少的代码，并且有助于您的插件代码保持整洁，易于维护。

维护链接性

jQuery的一个优势是允许您使用任何类型的选择器。但是，必须记住，您的插件可以处理几种不同的元素类型。使用 this

关键字允许您的插件应用于相关函数，通过循环实现每个元素的访问，而不考虑元素类型。如果在 each循环前使用 return

关键字，就可以使用您的插件维护链接性。清单 3显示了分配给一个函数处理程序且与 return关键字相结合的 each循环。

code 3.在 each循环之前使用 return关键字

(function($){

$.fn.accordion= function(){

return this.each(function(){

//使用 return

});

};

})(jQuery);

有了Code 3的代码后，示例 accordion插件可用在一个方法调用链中。有了链接性（另一个强大的 jQuery

特性），您的插件就可用在一个方法调用链中。例如，下面的代码显示了如何淡出 HTML元素，并在单一的方法调用链中将其从文档对象模型(DOM)

中删除。

$("#my-div").fadeOut().remove();

构造一个 accordion

一个典型的层叠设计包括标题栏和相关内容区域。定义列表是一个可供 accordions使用的很好的 HTML结构；dt元素供标题所用，而dd元素供内容区域所用。清单 4中的 HTML结构是一个定义列表，含有四个标题以及相应的内容区域。

Code 4.单一方法调用链

<dl class="accordion" id="my-accordion">

<dt>第1部分</dt>

<dd>内容一</dd>

<dt>第2部分</dt>

<dd>内容二</dd>

<dt>第3部分</dt>

<dd>内容三</dd>

<dt>第4部分</dt>

<dd>内容四</dd>

</dl>

Code 4中定义的列表也有一个分配给它的名为 accordion的 CSS类。没有应用任何 CSS，这个 accordion结构看起来类似于图 1中的基础设计

为了美观，我们再给Code 4中的Html美化一下，并命名为“jquery.accordion.css”

Code 5. CSS部分

.accordion{

width: 500px;

border: 1px solid#ccc;

border-bottom: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

.accordion dt,

.accordion dd{

border-bottom: 1px solid#ccc;

margin: 0px;

}

.accordion dt{

background:#eaeaea;

cursor: pointer;

padding: 8px 4px;

font-size: 13px;

font-weight: bold;

}

.accordion dd{

padding: 12px 8px;

}

效果如下图：

自定义插件

要制作一个功能性 accordion，必须将自定义代码应用到您上一小节创建 jQuery插件的函数。accordion

插件从遍历所有已定义的 accordion开始。要定义一个 accordion，在 HTML文档或外部嵌入式 JavaScript

文件中使用下列 jQuery。

$('dl#my-accordion').accordion();

对于每个 Accordion，您可以使用 jQuery的 children方法访问相关定义的标题，返回一个数组或 dt元素。应用一个

click事件到 dt元素，然后一个名为 reset方法应用到每个 dt。accordion首次加载时，该 reset方法会折叠所有

dd元素。单击 dt元素或者标题栏时，click事件会触发一个名为 onClick的自定义方法。自定义 onClick方法用于查找

accordion中的所有 dt元素。它调用一个自定义 hide方法，该方法通过使用 next方法找到紧挨着 dt元素的 dd

元素，隐藏每个相关的 dd元素，通过使用 next方法找到紧挨着 dt元素的 dd元素，然后向上滑动激活它。

所有 dd元素被隐藏后，使用 slideDown方法，就可以看见与单击过的 dt元素相关的 dd元素，并创建一个放大和收缩动画，如清单 8

所示。onClick方法的最后一行代码是 return false，确保任何被点击的主题栏没有显现出其一般行为。例如，如果您使用一个

anchor元素作为标题栏，您可能想要执行 return false，这样就不会将用户定向到另一个页面或现有页面的一部分。

Code 6.自定义用于创建一个 jQuery插件的 accordion函数

(function($){

$.fn.accordion= function(options){

return this.each(function(){

var dts=$(this).children('dt');

dts.click(onClick);

dts.each(reset);

});

function onClick(){

$(this).siblings('dt').each(hide);

$(this).next().slideDown('fast');

return false;

}

function hide(){

$(this).next().slideUp('fast');

}

function reset(){

$(this).next().hide();

}

}

})(jQuery);

如果该 accordion插件与一个 HTML定义列表结构相关联时，比如您之前创建的那个 accordion函数将被应用。有了

accordion函数，单击一个标题栏或 dt元素时，会打开其内容区域，而其他内容区域则关闭。换句话说，一次只能打开一个内容区域。

设定插件的默认值（Defaults）和设置项（options）

jQuery插件可以包括 defaults和 options。Options本质上就是传递给插件的参数。可以使用 options

发送一个参数作为 object literal，这是一个标准 jQuery实践，而不需要传递多个参数。如果您的插件支持 options，使用

defaults对象设置默认的 options将是一个最佳方式。和 options一样，defaults是一个 object

literal，应该包括您想要传递到插件中的属性。

例如，如果您支持一个可用于在首次加载时打开 accordion第一个内容区域的属性，那么在您的插件中应该包括一个 open

属性的默认值。在您的插件中使用 defaults确定默认函数，使用 options覆盖默认值。如果插件接收 options，可以使用

$.extend方法执行覆盖。jQuery的$.extend方法合并两个或多个对象。Code 7中的示例显示在一个自定义 jQuery

插件中使用$.extend方法合并用户定义选项和默认选项的一般实现。

Code 7.向一个自定义的 accordion jQuery插件添加 options和 defaults

(function($){

$.fn.accordion= function(options){

var settings=$.extend({},{open: false}, options);

return this.each(function(){

var dts=$(this).children('dt');

dts.click(onClick);

dts.each(reset);

if(settings.open)$(this).children('dt:first-child').next().show();

});

function onClick(){

$(this).siblings('dt').each(hide);

$(this).next().slideDown('fast');

return false;

}

function hide(){

$(this).next().slideUp('fast');

}

function reset(){

$(this).next().hide();

}

}

})(jQuery);

$.extend方法参数是一个目标对象和 2个或多个合并对象。在本示例中，目标对象是一个空 object

literal，充当合并对象容器。目标将成为一个包含合并对象值的单一对象（在该案例中是 settings变量）。第 2

个参数是一个包含默认插件属性的 object literal。第 3个参数是用户定义的 options参数。要在一个 HTML元素上使用

accordion插件传递 options，需要知道除了之前您作为 object literal传递的属性外还有哪些属性，如下所示。

$('dl#my-accordion').accordion({open:true});

在Code 7示例中，传递到插件的 options通过$.extend方法覆盖 defaults。如果没有传递 options，则使用默认值。对于示例插件，可使用 open属性确定加载时是否打开第一个内容区域。

可重用性

您可以在任何 HTML文档中重用示例 accordion插件，可以在单个 HTML文档中多次使用。您也可以包括多个

accordion结构，就像已创建的那个 accordion，使用刚创建的新 accordion插件通过 jQuery将每个单独定义为

accordion。要向一个 HTML文档添加多个 accordion，只需要添加尽可能多的 accordion结构。Code 8

中的代码包括两个 accordion结构，由一个段落隔开。

Code 8.在同一个 HTML文档中使用多个 accordion

<dl class="accordion" id="my-accordion">

<dt>第1部分</dt>

<dd>内容一</dd>

<dt>第2部分</dt>

<dd>内容二</dd>

<dt>第3部分</dt>

<dd>内容三</dd>

<dt>第4部分</dt>

<dd>内容四</dd>

</dl>

<dl class="accordion" id="my-accordion">

<dt>第5部分</dt>

<dd>内容五d>

<dt>第6部分</dt>

<dd>内容六dd>

<dt>第7部分</dt>

<dd>内容七/dd>

</dl>

Code 8中的两个 accordion结构几乎一样，除了内容不一样外，更重要的是 ID值也不一样。第一个结构包含一个

my-accordion ID值。第 2个结构包含一个 my-accordion2 ID值。现在可以单独定向这些结构。例如，下列

jQuery脚本使用已创建的新插件将每个 accordion结构定义为一个 accordion。

$('dl#my-accordion').accordion({open:true});

$('dl#my-accordion2').accordion({open:true});

两个 accordion结构定义完成后，第一个面板默认设置为打开下图显示一个用在同一个 HTML文档的多个 accordion插件的示例。

jQuery怎么编写插件呢插件的格式是怎么样的

jQuery插件的开发包括两种：

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

1.1添加一个新的全局函数

添加一个全局函数，我们只需如下定义：

Java代码

jQuery.foo= function(){

alert('This is a test. This is only a test.');

};

1.2增加多个全局函数

添加多个全局函数，可采用如下定义：

Java代码

jQuery.foo= function(){

alert('This is a test. This is only a test.');

};

jQuery.bar= function(param){

alert('This function takes a parameter, which is"'+ param+'".');

};

调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3使用jQuery.extend(object);

Java代码

jQuery.extend({

foo: function(){

alert('This is a test. This is only a test.');

},

bar: function(param){

alert('This function takes a parameter, which is"'+ param+'".');

}

});

1.4使用命名空间

虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。

Java代码

jQuery.myPlugin={

foo:function(){

alert('This is a test. This is only a test.');

},

bar:function(param){

alert('This function takes a parameter, which is"'+ param+'".');

}

};

采用命名空间的函数仍然是全局函数，调用时采用的方法：

$.myPlugin.foo();

$.myPlugin.bar('baz');

通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。

2、对象级别的插件开发

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

形式1：

Java代码

(function($){

$.fn.extend({

pluginName:function(opt,callback){

// Our plugin implementation code goes here.

}

})

})(jQuery);

形式2：

Java代码

(function($){

$.fn.pluginName= function(){

// Our plugin implementation code goes here.

};

})(jQuery);

上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

2.1在JQuery名称空间下申明一个名字

这是一个单一插件的脚本。如果你的脚本中包含多个插件，或者互逆的插件（例如：$.fn.doSomething()和$.fn.undoSomething()），那么你需要声明多个函数名字。但是，通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。我们的示例插件命名为“highlight“

Java代码

$.fn.hilight= function(){

// Our plugin implementation code goes here.

};

我们的插件通过这样被调用：

$('#myDiv').hilight();

但是如果我们需要分解我们的实现代码为多个函数该怎么办？有很多原因：设计上的需要；这样做更容易或更易读的实现；而且这样更符合面向对象。这真是一个麻烦事，把功能实现分解成多个函数而不增加多余的命名空间。出于认识到和利用函数是javascript中最基本的类对象，我们可以这样做。就像其他对象一样，函数可以被指定为属性。因此我们已经声明“hilight”为jQuery的属性对象，任何其他的属性或者函数我们需要暴露出来的，都可以在"hilight"函数中被声明属性。稍后继续。

2.2接受options参数以控制插件的行为

让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件函数。例如：

Java代码

// plugin definition

$.fn.hilight= function(options){

var defaults={

foreground:'red',

background:'yellow'

};

// Extend our default options with those provided.

var opts=$.extend(defaults, options);

// Our plugin implementation code goes here.

};

我们的插件可以这样被调用：

$('#myDiv').hilight({

foreground:'blue'

});

2.3暴露插件的默认设置

我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象。

Java代码

// plugin definition

$.fn.hilight= function(options){

// Extend our default options with those provided.

// Note that the first arg to extend is an empty object-

// this is to keep from overriding our"defaults" object.

var opts=$.extend({},$.fn.hilight.defaults, options);

// Our plugin implementation code goes here.

};

// plugin defaults- added as a property on our plugin function

$.fn.hilight.defaults={

foreground:'red',

background:'yellow'

};

现在使用者可以包含像这样的一行在他们的脚本里：

//这个只需要调用一次，且不一定要在ready块中调用

$.fn.hilight.defaults.foreground='blue';

接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：

$('#myDiv').hilight();

如你所见，我们允许使用者写一行代码在插件的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值：

//覆盖插件缺省的背景颜色

$.fn.hilight.defaults.foreground='blue';

//...

//使用一个新的缺省设置调用插件

$('.hilightDiv').hilight();

//...

//通过传递配置参数给插件方法来覆盖缺省设置

$('#green').hilight({

foreground:'green'

});

2.4适当的暴露一些函数

这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件（同时让其他人扩展你的插件）。例如，我们插件的实现里面可以定义一个名叫"format"的函数来格式化高亮文本。我们的插件现在看起来像这样，默认的format方法的实现部分在hiligth函数下面。

Java代码

// plugin definition

$.fn.hilight= function(options){

// iterate and reformat each matched element

return this.each(function(){

var$this=$(this);

//...

var markup=$this.html();

// call our format function

markup=$.fn.hilight.format(markup);

$this.html(markup);

});

};

// define our format function

$.fn.hilight.format= function(txt){

return'<strong>'+ txt+'</strong>';

};

我们很容易的支持options对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。这是另外一个出色的方法来修改你的插件。这里展示的技巧是进一步有效的暴露format函数进而让他能被重新定义。通过这技巧，是其他人能够传递他们自己设置来覆盖你的插件，换句话说，这样其他人也能够为你的插件写插件。

考虑到这个篇文章中我们建立的无用的插件，你也许想知道究竟什么时候这些会有用。一个真实的例子是Cycle插件.这个Cycle插件是一个滑动显示插件，他能支持许多内部变换作用到滚动，滑动，渐变消失等。但是实际上，没有办法定义也许会应用到滑动变化上每种类型的效果。那是这种扩展性有用的地方。 Cycle插件对使用者暴露"transitions"对象，使他们添加自己变换定义。插件中定义就像这样：

$.fn.cycle.transitions={

//...

};

这个技巧使其他人能定义和传递变换设置到Cycle插件。

2.5保持私有函数的私有性

这种技巧暴露你插件一部分来被覆盖是非常强大的。但是你需要仔细思考你实现中暴露的部分。一但被暴露，你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性。一个通理是，如果你不能肯定是否暴露特定的函数，那么你也许不需要那样做。

那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢？这就是闭包的功能。为了演示，我们将会添加另外一个“debug”函数到我们的插件中。这个 debug函数将为输出被选中的元素格式到firebug控制台。为了创建一个闭包，我们将包装整个插件定义在一个函数中。

Java代码

(function($){

// plugin definition

$.fn.hilight= function(options){

debug(this);

//...

};

// private function for debugging

function debug($obj){

if(window.console&& window.console.log)

window.console.log('hilight selection count:'+$obj.size());

};

//...

})(jQuery);

我们的“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。

2.6支持Metadata插件

在你正在写的插件的基础上，添加对Metadata插件的支持能使他更强大。个人来说，我喜欢这个Metadata插件，因为它让你使用不多的"markup”覆盖插件的选项（这非常有用当创建例子时）。而且支持它非常简单。更新：注释中有一点优化建议。

Java代码

$.fn.hilight= function(options){

//...

// build main options before element iteration

var opts=$.extend({},$.fn.hilight.defaults, options);

return this.each(function(){

var$this=$(this);

// build element specific options

var o=$.meta?$.extend({}, opts,$this.data()): opts;

//...

这些变动行做了一些事情：它是测试Metadata插件是否被安装如果它被安装了，它能扩展我们的options对象通过抽取元数据这行作为最后一个参数添加到JQuery.extend，那么它将会覆盖任何其它选项设置。现在我们能从"markup”处驱动行为,如果我们选择了“markup”：

调用的时候可以这样写： jQuery.foo();或$.foo();

Java代码

<!-- markup-->

<div class="hilight{ background:'red', foreground:'white'}">

Have a nice day!

</div>

<div class="hilight{ foreground:'orange'}">

Have a nice day!

</div>

<div class="hilight{ background:'green'}">

Have a nice day!

</div>

现在我们能高亮哪些div仅使用一行脚本：

$('.hilight').hilight();

2.7整合

下面使我们的例子完成后的代码：

Java代码

//创建一个闭包

(function($){

//插件的定义

$.fn.hilight= function(options){

debug(this);

// build main options before element iteration

var opts=$.extend({},$.fn.hilight.defaults, options);

// iterate and reformat each matched element

return this.each(function(){

$this=$(this);

// build element specific options

var o=$.meta?$.extend({}, opts,$this.data()): opts;

// update element styles

$this.css({

backgroundColor: o.background,

color: o.foreground

});

var markup=$this.html();

// call our format function

markup=$.fn.hilight.format(markup);

$this.html(markup);

});

};

//私有函数：debugging

function debug($obj){

if(window.console&& window.console.log)

window.console.log('hilight selection count:'+$obj.size());

};

//定义暴露format函数

$.fn.hilight.format= function(txt){

return'<strong>'+ txt+'</strong>';

};

//插件的defaults

$.fn.hilight.defaults={

foreground:'red',

background:'yellow'

};

//闭包结束

})(jQuery);

这段设计已经让我创建了强大符合规范的插件。我希望它能让你也能做到。

3、总结

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend(object);给jQuery对象添加方法。

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。

3.1 jQuery.fn.extend(object);

fn是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn= jQuery.prototype={

init: function( selector, context){//....

//......

};

原来 jQuery.fn= jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如我们用语句$("#btn1")会生成一个 jQuery类的实例。

jQuery.fn.extend(object);对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert当前编辑框里的内容。可以这么做：

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val());

});

}

});

$("#input1").alertWhileClick();//页面上为：<input id="input1" type="text"/>

$("#input1")为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

3.2 jQuery.extend(object);

为jQuery类添加添加类方法，可以理解为添加静态方法。如：

$.extend({

add:function(a,b){return a+b;}

});

便为jQuery添加一个为 add的“静态方法”，之后便可以在引入 jQuery的地方，使用这个方法了，$.add(3,4);//return 7

--转自ITeyes，作者：gaojiewyh

如何写一个jquery 插件

jquery插件开发模式

jquery插件一般有三种开发方式：

通过$.extend()来扩展jQuery

通过$.fn向jQuery添加新的方法

通过$.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。

插件开发

第二种插件开发方式一般是如下定义

$.fn.pluginName= function(){

//your code here

}

插件开发，我们一般运用面向对象的思维方式

例如定义一个对象

var Haorooms= function(el, opt){

this.$element= el,

this.defaults={

'color':'red',

'fontSize':'12px',

'textDecoration':'none'

},

this.options=$.extend({}, this.defaults, opt)

}

//定义haorooms的方法

haorooms.prototype={

changecss: function(){

return this.$element.css({

'color': this.options.color,

'fontSize': this.options.fontSize,

'textDecoration': this.options.textDecoration

});

}

}

$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象，保留对象的默认值。

$.fn.myPlugin= function(options){

//创建haorooms的实体

var haorooms= new Haorooms(this, options);

//调用其方法

return Haorooms.changecss();

}

调用这个插件直接如下就可以

$(function(){

$('a').myPlugin({

'color':'#2C9929',

'fontSize':'20px'

});

})

上述开发方法的问题

上面的开发方法存在一个严重的问题，就是定义了一个全局的Haorooms，这样对于插件的兼容等等各个方面都不好。万一别的地方用到了Haorooms，那么你的代码就悲催了！现在我们把上面的代码包装起来，用一个自调用匿名函数(有时又叫块级作用域或者私有作用域)包裹，就不会出现这个问题了！包括js插件的开发，也是一样的，我们用一个自调用匿名函数把自己写的代码包裹起来，就可以了！包裹方法如下：

(function(){

})()

用上面的这个包裹起来，就可以了。

但是还有一个问题，当我们研究大牛的代码的时候，前面经常看到有“；”，那是为了避免代码合并等不必要的错误。

例如，我们随便定义一个函数：

var haoroomsblog=function(){

}

(function(){

})()

由于haoroomsblog这个函数后面没有加分号，导致代码出错，为了避免这类情况的发生，通常这么写！

；(function(){

})()

把你的插件代码包裹在上面里面，就是一个简单的插件了。（注js插件和jquery插件都是如此）

还有一个问题

把你的插件包裹在

；(function(){

})()

基本上可以说是完美了。但是为了让你开发的插件应用更加广泛，兼容性更加好，还要考虑到用插件的人的一些特殊的做法，例如，有些朋友为了避免jquery和zeptojs冲突，将jquery的前缀“$”,修改为“jQuery”，还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行，那么我们的做法是，把代码包裹在如下里面：

;(function($,window,document,undefined){

//我们的代码。。

})(jQuery,window,document);

就可以避免上面的一些情况了！

至此，你开发的插件就算完美了！

关于编写jquery插件和js插件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。