JavaScript插件开发教程(一)

一、开篇分析。

大家好！今天的系列文章主要讲的是如何开发基于JavaScript的插件开发。我想很多人都很熟悉“插件”这个词。

有些人可能被称为“组件”或“组件”，这并不重要。关键是看怎么设计，怎么全方位考虑。这是本文重点研究的概念。我想每个人都是对的。

我们对“jQuery插件的方式”有一定的了解。我们将一起讨论这个话题，最后给出相关的实施方案，不断提升自己的能力。

第二，进入插件业务。

一般来说，jQuery插件的开发可以分为两种类型：一种是挂在jQuery命名空间中的全局函数，也可以称为静态方法。

另一种是jQuery对象级方法，即挂在jQuery原型下的方法，这样通过选择器得到的jQuery对象实例也可以共享这个方法。

(1)类级别的插件开发。

在类级别对插件开发最直接的理解就是在‘jQuery’类中添加类方法，可以理解为添加静态方法。一个典型的例子是函数“$”。ajax()'，它是在jQuery的命名空间中定义的。类级别的插件开发可以扩展为以下形式：

1.1要添加一个全局函数，我们只需要定义如下，参见代码：

副本代码如下： $。hello=function () {alert('你好，熊俊！'。) ;} ;

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

副本代码如下： $。extend ({hello :函数(name){//把代码放在这里}，world:函数(){//把代码放在这里} })；

描述：“$。extend (target、[object1]、[objectn])”(此方法主要用于将两个或多个对象的内容(属性)合并到第一个对象中，并返回合并后的第一个对象。

如果方法只有一个参数target，这个参数将扩展jQuery的命名空间，也就是说，它将作为静态方法挂在jQuery全局对象下。

(2)对象级插件开发。

对象级插件开发需要以下两种形式：

2.1通过“$.fn.extend()”为原型动态挂载相关属性。

复制的代码如下：(function($){ $ . fn . extend({ plugin name 3360 function(opts){//把代码放在这里} })；})(jQuery)；

2.2直接向原型链添加动态属性。

复制代码如下：(函数($) {$)。fn . plugin name=function(){//将代码放在这里}；})(jQuery)；

注意：两者是等价的。对于一个jQuery插件来说，一个基本的函数可以很好的工作，但是对于一个比较复杂的插件来说，需要提供各种方法和私有函数。

您可以使用不同的名称空间为插件提供各种方法，但是添加太多名称空间会混淆代码并降低其健壮性。所以最好的解决方案是正确定义私有函数和方法。

所以我们通过自执行函数和闭包的结合来实现模拟的私有插件，就像我们上面的例子一样。

(三)，下面举一个简单的例子来看看实现过程：

(1)、“html”片段代码，如下：

复制的代码如下： div id=' bb ' style=' width :220 px；' border:1px实心# ccc'span/span div style=' margin-top :10 px；边距-底部：30 px；'8/分区/分区

(2)“data . JSON”的定义如下：

复制的代码如下：{'text' : '你好，熊俊{{bb}}！'；}

(3)、“bb.js”代码如下：

复制代码如下： $ (function () {$ ('# bb ')。big bear()；}) ;(function($){ $ . fn . big bear=function(opts){ opts=$。extend({}，$.fn.bigbear.defaults，opts)；返回this . each(function(){ var elem=$(this)；elem.find('span ')。text(opts[' title '])；$.get(opts['url']，function(data){ elem.find('div ')。文本(数据[' text '])；}) ;}) ;} ;$ . fn . big bear . defaults={ title : '这是一个简单的测试'，URL : ' data . JSON ' }；})(jQuery)；

运行效果：

总而言之：

(1) "$.fn.bigbear.defaults”为插件提供默认参数选项。一个扩展性好的插件应该允许用户根据自己的需要自定义参数选项，控制插件的行为，所以需要提供默认的选项进行恢复。您可以通过jQuery的扩展方法来设置这些选项。

(2)，"返回this . each(){ 0.}”遍历多个元素并返回jQuery。使用Sizzle选择器引擎。Sizzle可以为您的函数提供多元素操作(例如，对所有具有相同类名的元素)。这是jQuery的几个优秀特性之一。即使您不准备在插件开发过程中为您的插件提供多元素支持，这仍然是一个很好的准备方式。此外，jQuery还有一个很好的特性，它可以级联方法，也可以称为链调用，所以我们不应该破坏这个特性，总是在方法中返回一个元素。

(4)、最后总结。

(1) jQuery提出了两种开发插件的方法：jQuery . fn . extend(object)；向jQuery对象添加一个方法。jQuery.extend(对象)；若要扩展jQuery类本身，请向该类添加新方法。

(2)将所有代码放在闭包(一个立即执行的函数)中。此时闭包相当于一个私有范围，内部信息无法从外部访问，也不会有全局变量的污染。创建开发规范的官方解释是：a)避免全球依赖；b)避免第三方的损害；c)与jQuery运算符“$”和“jQuery”兼容。

(3)为插件提供默认参数选项。一个具有良好扩展性的插件应该允许用户根据自己的需要定制参数选项，并控制插件的行为。因此，有必要提供默认选项的恢复。您可以通过jQuery的扩展方法来设置这些选项。

(4)遍历多个元素，返回jQuery。使用Sizzle选择器引擎。Sizzle可以为您的函数提供多元素操作(例如，对所有具有相同类名的元素)。这是jQuery的几个优秀特性之一。即使您不准备在插件开发过程中为插件提供多元素支持，为此做好准备仍然是一个很好的实践。此外，jQuery还有一个很好的特性，它可以级联方法，也可以称为链调用，所以我们不应该破坏这个特性，总是在方法中返回一个元素。

(5)将一次性代码放在主循环之外非常重要，但经常被忽略。简单地说，如果您有一段代码是一堆默认值，只需要实例化一次，而不是每次调用插件函数，那么您应该将这段代码放在插件方法之外。

(6)学习完了，我们再想想。如果为了项目的技术选择而改变这些插件，并且严重依赖“jQuery”机制，那么我们之前编写的插件将无法工作(假设没有使用jQuery)。如何重建？

明天的文章会讲到这个问题，会重构插件的关键逻辑。敬请期待。