有哪些前端插件化架构

发布时间:2021-10-28 10:07:52 作者:iii
来源:亿速云 阅读:581

本篇内容主要讲解“有哪些前端插件化架构”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“有哪些前端插件化架构”吧!

1. 插件化架构定义

插件化架构又称微核架构,指的是软件的内核相对较小,主要功能和业务逻辑都通过插件实现。插件化架构一般有两个核心的概念:内核和插件。

内核一般会将要完成的所有业务进行抽象,抽象出最小粒度的基础接口,供插件方来调用。这样,插件开发的效率将会极大的提高。比方说,浏览器就是一个典型的插件化架构,浏览器是内核,页面是插件,这样通过不同的URL地址加载不同的页面,来提供非常丰富的功能。而且,我们开发网页时候,浏览器会提供很多API和能力,这些接口通过 window来挂载, 比如,DOM、BOM、Event、Location等等。

设计一个完善的插件化架构的系统,包含三要素:

有哪些前端插件化架构

2. 插件化架构的实践

我们将从plugCore、 pluginAPI和plugin三要素,来解析jQuery、Babel和Vue CLI这三大优秀的开源库其插件化架构的实践。

2.1 jQuery的插件化架构

jQuery 是一个 JavaScript 库,极大地简化了JavaScript 编程,用更少的代码完成更多工作。早期浏览器的标准不统一,开发网页需要兼容不同浏览器的用户使用是一件十分痛苦的事情。jQuery在适配了不同浏览器的差异的基础上提供了更加完善易用API,供前端开发人员完成网页编程,使用jQuery编写的网页,在一套代码下也可以在不同厂商的浏览器上正常运行。在 MV* 框架流行之前,jQuery是绝对的扛霸子。jQuery是可扩展的,其拥有完善的插件体系,网页开发所需要的各种插件在其生态都可以找到。我们解析一下jQuery插件体系。

插件定义:

有哪些前端插件化架构

特别说明:$.fn = jQuery.protype(插件精髓)。jQuery的插件机制通过原型链来挂载。

插件机制执行过程

有哪些前端插件化架构

demo 示例

有哪些前端插件化架构

$app便可以在原型链上查找到myPlugin:

有哪些前端插件化架构

从三要素来总结:

2.2 Babel的插件化架构

Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。在代码转换的过程中会涉及许多特性和语法的转换,而且ECMAScript的提案总是不断地更新。如何组织大量(不断增加)的转换规则呢?我们来看看 Babel的工作原理。

Babel转换源码,分为三个步骤:

有哪些前端插件化架构

Babel在AST转换的过程(即上图的第2步),便使用插件化架构,下面将会详细讲解这个转换过程的插件化架构的使用。

插件定义:

有哪些前端插件化架构

插件是一个函数,返回值是一个包含visitor的对象。插件定义的部分概念说明:

(笔者认为pluginAPI还应包括nodePath,因为,每个节点实例除了语法和词法描述,还包含需求语法间的转换方法)

插件示例

箭头函数转换成普通函数的插件:@babel/plugin-transform-arrow-functions [3]源码:

有哪些前端插件化架构

插件的执行思路:

单个插件的执行思路很明确了,那么在ATS遍历过程,怎么做到多个插件一起工作呢?

Babel在转换源码过程中,插件化架构的工作流程是这样的:

有哪些前端插件化架构

合并后的visitor对象:

有哪些前端插件化架构

visitor的对象中的值变成了 Array<function(nodePath)>

从三要素来总结:

2.3 vue-cli的插件化架构

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。CLI插件是向你的 Vue 项目提供可选功能的 npm 包,例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头,非常容易使用。下面,我们将会解析cli插件的定义、执行、安装等过程。

插件定义

插件必须是vue-cli-plugin-命名的npm包,并且目录结构也是要严格遵循文件命名来定义。

注意:@vue/cli-service [6],会通过 项目根目录下package.json中dependencies和devDependencies中定义的 npm包中符合插件命名规范的 npm包作为项目的插件。

有哪些前端插件化架构

文件命名和内容说明:

有哪些前端插件化架构

有哪些前端插件化架构

有哪些前端插件化架构

详情可以去看Vue Cli 插件开发指南 [9]

我们把Vue CLI的插件执行分成两种情况:

第一种 安装流程

相比Babel的手动安装添加插件方式,Vue CLI的插件系统提供命令行的安装方式就显得很方便了。我们看看Vue Cli插件系统时怎么实现一行命令添加插件的功能。

安装流程的执行思路如下:

有哪些前端插件化架构

有哪些前端插件化架构

       1)require(vue-cli-plugin-xxx/generator),获得插件的执行函数;

       2)构建GeneratorAPI(即pluginAPI);

       3)调用generator.js导出函数。

有哪些前端插件化架构

第二种 运行流程

插件运行流程是由@vue/cli-service [14]这个插件系统定义的,这里的调用插件有两种:

有哪些前端插件化架构

插件运行逻辑很简单:

有哪些前端插件化架构

这两个流程的 pluginAPI是不一样的。

到此,相信大家对“有哪些前端插件化架构”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. Nagios插件化之ganglia插件
  2. 微信小程序前端开发架构

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery babel

上一篇:iBATIS.NET日志的处理方式是什么

下一篇:Mysql数据分组排名实现的示例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》