JavaScript插件开发教程(2)

一、开篇分析。

大家好！还记得上一篇文章吗——本系列的开篇(JavaScript插件开发教程1)。主要讲“如何用jQuery开发插件”，

所以今天我们就用昨天的问题继续我们的插件开发之旅。之前的问题如下：

(1)如果这些插件在项目的技术选择上发生了变化，严重依赖“jQuery”机制，那么我们之前写的插件就无法工作了(假设不使用jQuery)，如何重构呢？

(2)重构插件的关键逻辑，我们将如何组织？

好，让我们带着问题学习今天的文章。

首先，我不是否定“jQuery插件的方式”。其次要从不同的角度分析问题，比如“jQuery插件有以下优点”:

(1)、将所有代码放在一个闭包中(一个立即执行的函数)。此时闭包相当于一个私有范围，内部信息无法从外部访问，也不会有全局变量的污染。

(2)、a)避免全球依赖；b)避免第三方的损害；c)与jQuery运算符“$”和“jQuery”兼容。

我们的重构将如何组织代码？是面向对象的思维(OOP)吗？还是思考到底的过程？还是两者的结合？哈哈，继续看。

第二，重构昨天的例子。

以下是昨天Js的源代码部分：

复制代码如下：(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)、显示我们设置的标题文本信息。

(2)动态异步获取内容信息。

好吧。清楚地讨论需求很容易。从上面的代码不难看出，逻辑组织松散，流程思维明显，所以第一步就是把我们的功能需求。

以班级的形式有效地组织。如下所示查看重构的代码：

复制代码如下： $ (function () {$ ('# bb ')。big bear()；}) ;(function($){ $ . fn . big bear=function(opts){ opts=$。extend({}，$.fn.bigbear.defaults，opts)；返回this . each(function(){ var elem=$(this)；var bb=new BigBear(elem，opts)；bb.getElem()。触发器('数据')；}) ;} ;$ . fn . big bear . defaults={ title : '这是一个简单的测试'，URL : ' data . JSON ' }；})(jQuery)；函数BigBear(elem，opts){ this . elem=elem；this.opts=optsthis . init()；} ;var bbProto=BigBear.prototypebbproto . getelem=function(){ return this . elem；} ;bbproto . getopts=function(){ return this . opts；} ;bbProto.init=function(){ var那=thisthis.getElem()。on('data '，function(){ that。_ setTitle(that . getopts()[' title '])；$.get(that.getOpts()['url']，function(result){ that.getElem()。查找(' div ')。文本(结果[' text '])；}) ;}) ;} ;bbProto。_ setTitle=function(text){ this . getelem()。查找(' span ')。文本(text)；} ;

哈哈，代码不是很多吗？其实这种方式就是从面向对象的角度看问题，先分析功能需求，然后设计我们的类。虽然我们不能一下子设计得很好，

然而，问题的视角发生了变化，我们的代码变得更易读、更好维护，从而我们的目标实现了。

下面是从“bootstrap”js中提取的相关源代码实现，如下所示：

不难看出，它是一个类似的实现，我们插件的主要逻辑是通过类来维护的。

(三)、增加新功能，引出附加类。

现在需求增加了，体验需要改变。加载数据时会产生“加载”效应。

实现思路可以是：在原内容区，文本设置为“在加载数据”。”，然后介绍一个新的班级，如下：

复制代码代码如下：函数覆盖(){ 0

} ;var olp roto=overlay . prototypolp roto。show=function(){ }；奥尔波特。hide=function(){ }；//具体实现就不写了

好了，遮罩层已经有了，现在我们怎么集成进来那？我们用组合的方式接入进来，如下：

复制代码代码如下：功能BigBear(elem，opts){ this。elem=elemthis.opts=optsthis。Overlay=new Overlay()；这个。init()；} ;var bbProto=BigBear . prototypebproto。getelem=function(){返回这个。elem} ;bbproto。getopts=function(){返回这个。opts} ;bbProto.init=function(){ var那=此“var loadingText=”数据装载中。' ;this.getElem().on('data '，function(){即._ setTitle(即。getopts()[' title '])；那个。覆盖。show()；that.getElem().查找(' div ').文本（加载文本);$.get(that.getOpts()['url']，function(result){ that。覆盖。hide()；that.getElem().查找(' div ').文本（结果[' text '])；}) ;}) ;} ;bbProto ._ setTitle=函数(文本){ this。getelem().查找(' span ').文本(文本)；} ;

到此只为我们的功能就算是结束了，这样写的插件，我相信比第一个版本好很多，当然这不是最优的实现，需要从细节上不断重构，但是这种方式是一种可选的开发插件的方式。

以下是完整的代码：

复制代码代码如下：$(function(){ $('#bb ').大熊()；}) ;(函数($){ $。fn。大熊=函数(opts){ opts=$ .extend({}，$.fn.bigbear.defaults，opts)；返回这个。每个(function(){ var elem=$(this)；var bb=new BigBear(elem，opts)；bb.getElem().触发器('数据');}) ;} ;$ .fn。大熊。默认值={ title : '这是一个简单的测试，URL : '数据。JSON ' }；})(jQuery)；函数BigBear(elem，opts){这个。elem=elemthis.opts=optsthis。Overlay=new Overlay()；这个。init()；} ;var bbProto=BigBear . prototypebproto。getelem=function(){返回这个。elem} ;bbproto。getopts=function(){返回这个。opts} ;bbProto.init=function(){ var那=此“var loadingText=”数据装载中。' ;this.getElem().on('data '，function(){即._ setTitle(即。getopts()[' title '])；那个。覆盖。show()；that.getElem().查找(' div ').文本（加载文本);$.get(that.getOpts()['url']，function(result){ that。覆盖。hide()；that.getElem().查找(' div ').文本（结果[' text '])；}) ;}) ;} ;bbProto ._ setTitle=函数(文本){ this。getelem().查找(' span ').文本(文本)；} ;函数叠加(){ }；var olp roto=overlay . prototypolp roto。show=function(){ }；奥尔波特。hide=function(){ }；//具体实现就不写了

本文暂时先到这里了，小伙伴们是否对插件化开发爪哇岛描述语言有了新的认识了呢。