百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

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

bigegpt 2024-08-31 17:01 3 浏览

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

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

可以说,利好好插件可以大大节约你的开发成本,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、视图处理等等。

相关推荐

Java 泛型大揭秘:类型参数、通配符与最佳实践

引言在编程世界中,代码的可重用性和可维护性是至关重要的。为了实现这些目标,Java5引入了一种名为泛型(Generics)的强大功能。本文将详细介绍Java泛型的概念、优势和局限性,以及如何在...

K8s 的标签与选择器:流畅运维的秘诀

在Kubernetes的世界里,**标签(Label)和选择器(Selector)**并不是最炫酷的技术,但却是贯穿整个集群管理与运维流程的核心机制。正是它们让复杂的资源调度、查询、自动化运维变得...

哈希Hash算法:原理、应用(哈希算法 知乎)

原作者:Linux教程,原文地址:「链接」什么是哈希算法?哈希算法(HashAlgorithm),又称为散列算法或杂凑算法,是一种将任意长度的数据输入转换为固定长度输出值的数学函数。其输出结果通常被...

C#学习:基于LLM的简历评估程序(c# 简历)

前言在pocketflow的例子中看到了一个基于LLM的简历评估程序的例子,感觉还挺好玩的,为了练习一下C#,我最近使用C#重写了一个。准备不同的简历:image-20250528183949844查...

55顺位,砍41+14+3!季后赛也成得分王,难道他也是一名球星?

雷霆队最不可思议的新星:一个55号秀的疯狂逆袭!你是不是也觉得NBA最底层的55号秀,就只能当饮水机管理员?今年的55号秀阿龙·威金斯恐怕要打破你的认知了!常规赛阶段,这位二轮秀就像开了窍的天才,直接...

5分钟读懂C#字典对象(c# 字典获取值)

什么是字典对象在C#中,使用Dictionary类来管理由键值对组成的集合,这类集合被称为字典。字典最大的特点就是能够根据键来快速查找集合中的值,其键的定义不能重复,具有唯一性,相当于数组索引值,字典...

c#窗体传值(c# 跨窗体传递数据)

在WinForm编程中我们经常需要进行俩个窗体间的传值。下面我给出了两种方法,来实现传值一、在输入数据的界面中定义一个属性,供接受数据的窗体使用1、子窗体usingSystem;usingSyst...

C#入门篇章—委托(c#委托的理解)

C#委托1.委托的定义和使用委托的作用:如果要把方法作为函数来进行传递的话,就要用到委托。委托是一个类型,这个类型可以赋值一个方法的引用。C#的委托通过delegate关键字来声明。声明委托的...

C#.NET in、out、ref详解(c#.net framework)

简介在C#中,in、ref和out是用于修改方法参数传递方式的关键字,它们决定了参数是按值传递还是按引用传递,以及参数是否必须在传递前初始化。基本语义对比修饰符传递方式可读写性必须初始化调用...

C#广义表(广义表headtail)

在C#中,广义表(GeneralizedList)是一种特殊的数据结构,它是线性表的推广。广义表可以包含单个元素(称为原子),也可以包含另一个广义表(称为子表)。以下是一个简单的C#广义表示例代...

「C#.NET 拾遗补漏」04:你必须知道的反射

阅读本文大概需要3分钟。通常,反射用于动态获取对象的类型、属性和方法等信息。今天带你玩转反射,来汇总一下反射的各种常见操作,捡漏看看有没有你不知道的。获取类型的成员Type类的GetMembe...

C#启动外部程序的问题(c#怎么启动)

IT&OT的深度融合是智能制造的基石。本公众号将聚焦于PLC编程与上位机开发。除理论知识外,也会结合我们团队在开发过程中遇到的具体问题介绍一些项目经验。在使用C#开发上位机时,有时会需要启动外部的一些...

全网最狠C#面试拷问:这20道题没答出来,别说你懂.NET!

在竞争激烈的C#开发岗位求职过程中,面试是必经的一道关卡。而一场高质量的面试,不仅能筛选出真正掌握C#和.NET技术精髓的人才,也能让求职者对自身技术水平有更清晰的认知。今天,就为大家精心准备了20道...

C#匿名方法(c#匿名方法与匿名类)

C#中的匿名方法是一种没有名称只有主体的方法,它提供了一种传递代码块作为委托参数的技术。以下是关于C#匿名方法的一些重要特点和用法:特点省略参数列表:使用匿名方法可省略参数列表,这意味着匿名方法...

C# Windows窗体(.Net Framework)知识总结

Windows窗体可大致分为Form窗体和MDI窗体,Form窗体没什么好细说的,知识点总结都在思维导图里面了,下文将围绕MDI窗体来讲述。MDI(MultipleDocumentInterfac...