如何搭建属于你自己的前端插件系统

开课吧小白2021-05-18 11:42

插件架构宏观上来讲就是一种框架能够在确定的点上执行外部的代码,而不需要提前知道这部分代码的细节。

它既可以很简单,也可以很复杂。开发插件需要遵循一些约定,就像网络传输需要协议。它们必须能够被主进程以某种方式获取并使用。通常最初的开发者会发布一些接口或开发套件,允许其他的开发者对原系统开发插件,提供新的能力。

可以说,利好好插件可以大大节约你的开发成本,5月15日的《HelloWorld公开课》,资深前端老司机川哥就教你,如何搭建自己的插件系统。

插件三要素

无论是什么类型的插件,基本都是由plugCore、pluginAPI、plugin三个部分构成的,如果要以浏览器为例,plugCore就是浏览器本身,它是插件内核,提供插件运行时,管理插件的加载、运行、卸载等生命周期。

pluginAPI相当于Windows系统,它是插件运行时需要的基础接口,而plugin就是浏览器的网页,它是一系列特定功能的独立模块。

 

插件机制可以保证在系统提供的能力范围内参与系统内部定制化的改造,这为第三方开发提供了更便利的条件,而且这种机制的存在可以激发更多的想法,促进整个生态的发展。

这里有一点要注意的,插件不是组件,更不是库,这三者是有明显区分的。

插件插件:参与程序内部运行环节的一段或多段代码集合;即Plugin,遵循一定规范写出来方便程序展示效果,拥有特定功能且方便调用

组件:调用者只需关注输入和输出,总思想就是分而治之、重复利用。低耦合;组件解决资源整合问题、增强功能促进开发效率。提高可维护性,便于协同开发

库:为解决某种特定需求的程序功能集合;即library,如jQuery,常用于方便dom操作、解决浏览器兼容等问题。

各大平台插件

jquery.cookie.js

操作cookie

swiper

滚动banner插件

wow.js

滚动

shine.js

文字阴影插件

numscroller.js

数字滚动增加

jbooklet.js

书本真实翻页

uploadfive.js

带进度条文件上传

shine.js

文字阴影

event.js

监控事件触发与否

uploadPreview.js

支持图片上传预览

simple-keyboard

自定义扩展的软键盘

autoComplete.js

输入自动建议

indigo-player

视频播放器

fslightbox.js

图片幻灯插件

Moveable

拖拽缩放旋转变幻

Hotkey

快捷键操作

pagemap

网页做迷你版缩略地图

lax.js

跟随页面滑动的 动画

babel-polyfill

依赖core-js,提供es*->es3的方法,只转化语法,不转换API(类Promise,WeakMap)

 

 

上面我们列举了针对前端开发工程师常用的插件工具。如果你使用过这些插件,可以发现这些插件从应用场景来看可以分为三类。

第一类是插件的API丰富,一般这种插件都是能力内置,开放API,提供多维度的功能。第二类是插件本身丰富的,这类插件一般都是开放系统数据,组件特别丰富,生态也很完整。

最后一种就是自身的插件和API都很丰富,这类插件看似完美,但是开发成本要远高于前面两者,所以还是要根据自己的项目团队来选择合适的插件。

搭建自己的插件系统

前面我们说了使用插件有那么多的好处,那么为什么还要搭建自己的插件系统呢?不能直接使用其他成熟的插件么?

如果你已经是有多年开发经验的工程师,相信一定会遇到这种问题,需求不断变更,导致代码越来越臃肿,有许多为了特定需求开发的定制化功能。当这些积累到一定程度,系统要么进行重构,要么弃之不用,这样就形成了一个恶性循环。

所以无论是出于代码的开发成本,还是自身的经验积累与面试资本,有一套自己的插件系统是有百利而无一害的。

在搭建自己的插件系统时,根据之前我们说的,从富Plugins、富API、两者兼具三个方向来考虑。然后再确定具体的方向,比如数据处理、文本处理、逻辑处理、代码ATS、视图处理等等。

以上只是公开课的一部分内容,如果有同学想了解更多关于插件的内容,比如插件管理器,插件调试工具等相关内容,可以点击前端开发工具插件实战观看公开课的回放视频!

如果有同学想要川哥的授课PPT文件和源码,可以扫描下方二维码添加小开微信呦!

讲师介绍

川哥,FCC武汉社区组织者,360前端Leader

《Hello ,World公开课》是由开课吧推出的面向广大开发工程师的免费加餐课,集结业内名师大咖,聚焦热门技术和实战解决方案,以专业知识分享交流为桥梁,链接正在创造世界的一群科技主力们,向初心致敬,为技术发烧。无论你是初入职场的应届生,还是准备升职加薪的职场精英,相信这里都有你需要的养料。
有用
分享