前端教程之插件和类库封装

最新推荐文章于 2024-06-24 22:14:24 发布

liuyingv8

最新推荐文章于 2024-06-24 22:14:24 发布

阅读量1.7k

点赞数

文章标签：前端教程

前端教程插件和类库封装

在项目开发过程中，如果没有插件和类库，那么开发的效率和可扩展性就非常的差，插件不是JavaScript特有的，插件思想的出现是由来已久的，是任何编程语言的都会有的做法。

使用插件的最大好处就是：代码复用性好，即插即用，可移植；易修改、可维护性强；结构容易调整；降低耦合度等等。当然，这也是为什么软件公司在项目开发中，会经常使用插件的原因所在。

✦ 提高代码的复用性，即插即用，可移植

如：把电子商务网站常见的放大镜做成插件的形式（一次完成，多次使用），如果需要给哪个图片上增加放大镜，一句话即可以完成（即插即用）。而且任何网站上都可以使用（可移植）。

✦ 易修改，可维护性强

如果需要给放大镜插件增强一些功能，只需要修改插件的代码即可，修改维护的成本也降低了。

✦ 结构容易调整；降低耦合度

由于网页和插件之间的代码是分离的（耦合度很低），网页的代码出了问题，只需要网页的代码，插件的代码有问题，只需要修改插件的代码，两个互不干涉，不会出现牵一发而动全身的情况。

在一个开发公司的一个项目组中，能做插件开发的人员只能占公司开发人员的20%，所以，技术含量可见一斑。千锋只做精品，对于培训出来的学员要求很高。所以，千锋就业班课程体系6.5版第二阶段的课程中，专门设置“插件和类库编写”内容，并把“插件和类库”的使用作为学生项目合格的标准之一。内行人都知道，能写插件的人员不是普通的程序员。

前端教程插件和类库封装

在开发中，常见的第三方插件有：图表插件echarts，highCharts；抛物线插件；内容滚动插件等。对于第三方插件，我们只懂得去调用，而千锋的课程中，不但告诉大家如何调用第三方的插件，更重要的是教给学生必须会写插件，并在项目中要有使用。

目前，千锋的课程体系中，对于插件编写有两种方式体现：

✦使用原生JS面向对象的方式

✦使用jQuery的方式

第一种方式（原生JS面向对象的方式）：众所周知，面向对象思想是多么的难理解，多么的重要，通过这种方式，一方面，让学生对面向对象思想了解得更加深刻，另一方面，对插件的封装有所了解

第二种方式（使用jQuery的方式）：很多第三方的插件都是用jQuery进行编写的，那么，通过这种方式，带着学生一起揭开了第三方插件神秘的面纱，学生的理解高度就会有很大的提升。

前端教程插件和类库封装

1) 千锋课程中，对于“插件及类库编写”知识的讲解主要体现在：

✦前后衔接，形成体系

对于面向对象思路编写时，首先，回顾以前面向过程所做的放大镜，轮播图作为对比，抛出问题，也为学完本知识点后，能够对比面向过程和面向对象两个思想之间的区别打下基础。

✦需求驱动，提升兴趣

当一个项目中需要多个放大镜，手风琴，轮播图效果时，该如何解决，引发学生的思考。因为，紧接着的二阶段项目就需要使用插件。也算是提前了解二阶段项目需求，然后为二阶段项目打下基础。

在讲解该知识点前，先做放大镜的演示，在演示时，直接引入写好的插件代码，再在需要增加放大镜效果的图片上，加上id，并写上一句代码，即可看到效果，让学生先充满了好奇和神秘。

✦讲师引导，学生思考

在讲师的循循善诱下，由学生进行思考，因为，在此课程之前，已经学习过了面向对象编程，只是需要封装，所以，由讲师引导，学生思考，一步一步完成插件的封装。

✦循序渐进，逻辑严密

在授课过程中，让学生学会拆分，按照项目的功能，先分析项目中的对象，然后分析每个对象的属性和方法，每个方法的参数和逻辑思路，由大到小，由抽象到具体，层层推进，一步步实现项目的功能。

在封装的过程中，体现通用性。

2) 具体讲解步骤

✦提出插件的必要性

如：当一个项目中，在很多的地方用到了放大镜，手风琴效果，轮播图效果时，或者，很多的项目中都会用到放大镜，手风琴效果，轮播图效果等等，是否可以把这些通用的功能提前写好封装成一个插件，一方面能够提升开发效率，另外一方面，降低耦合度等等。

✦分析接口

对于每个案例，先跟学生来分析插件必要的接口参数。如：放大镜，包括“对应的大图的地址”,“原始图片的尺寸”,“放大镜镜子的尺寸”,“放大的倍数”,“大图出现的位置（上右下左）”等等。而轮播图，包括“容器”，“轮播图的图片数组”，“轮播图的尺寸”，“轮播效果（淡入淡出，滑入滑出等等常见的轮播效果）”，“两张图片的时间间隔”，“完成一次淡入淡出的时间长度”，“完成一次效果的时间长度”，“按钮出现的位置（上右下左）”，“按钮的原始颜色”，“按钮的高亮颜色”，“按钮的尺寸”，“按钮上是否有序号”

✦分析对象

如：放大镜中，主要就是放大镜对象。而轮播图中除了轮播图对象外，还有按钮的对象等等。

✦分析每个对象的属性

放大镜中，放大镜对象的属性包括：“是否创建了大图”，“大图的容器DOM对象”，“放大镜DOM对象”，“大图DOM对象”，“对应大图的地址”,“原始图片的尺寸”,“放大镜镜子的尺寸”,“放大的倍数”,“大图出现的位置（上右下左）”等等。而轮播图，包括“容器”，“轮播图的图片数组”，“轮播图的尺寸”，“轮播效果（淡入淡出，滑入滑出等等常见的轮播效果）”，“两张图片的时间间隔”，“完成一次淡入淡出的时间长度”，“完成一次效果的时间长度”，“淡入淡出图片的序号”，“当前透明度及其增量”“两个定时器对象”，按钮对象需要：“按钮出现的位置（上右下左）”，“按钮的原始颜色”，“按钮的高亮颜色”，“按钮的尺寸”，“按钮上是否有序号”

✦分析每个对象的方法

放大镜插件包括：初始化UI，创建大图，删除大图，移动放大镜进行放大效果等等；轮播图插件包括：自动播放，单步效果，跳转到对应图片，淡入淡出效果（这个有很多效果：包括滑入滑出等等），淡入淡出初始化，改变按钮颜色，鼠标的悬停，鼠标的离开等等。

✦实现方法

先用汉语写出每个方法的逻辑步骤，然后，把汉语变成JS代码。这样，每次永远解决的都是最小的问题，学生也容易听得懂。

前端教程插件和类库封装