【elementui源码解析】如何实现自动渲染md文档-第二篇

news2025/6/26 17:41:23

目录

1.概要

2.引用文件

1)components.json

2)json-template/string

3)os.EOL

3.变量定义

4.模版填充

5.MAIN_TEMPLATE填充

6.src下的index.js文件

1)install

2)export

7.总结


1.概要

今天看第二个命令node build/bin/build-entry.js做了什么事。

图1

这就是build-entry.js文件,我们主要从这四个方面来看。

图2

2.引用文件

1)components.json

第一行代码:require了components.json,可见图3,这里面就是存放的各个组件的位置,比如pagination,后面的“packages/pagination/index.js”,这就是在packages目录下,packages目录下就是所有elementui存放所有组件的文件夹,会在每个对应组件的index.js目录下去export这个组件。

图3

图4

2)json-template/string

我们看看第3行“json-template/string”这个库有什么作用。

他是一个javascript库,主要的功能是让我们使用模版字符串来生成字符串,主要处理需要动态插入值的字符串。举个例子:

var render = require('json-template/string');
var template = 'Hello, {{content}}!';
var message = render(template, { content: 'World' });
console.log(message); // Hello, World!

3)os.EOL

os.EOL是Node.js的os模块的一个属性,它表示操作系统特定的行末结束符。

在 POSIX 系统(如 Linux 或 macOS)中,os.EOL 的值是 '\n',在 Windows 系统中,它的值是 '\r\n'

这个属性通常用于处理跨平台的文件读写操作,因为不同的操作系统有不同的行末结束符。例如,当你需要在文件中写入一行新的内容时,你可以使用 os.EOL 来添加一个正确的行末结束符,而不用关心当前的操作系统是什么。

/比如我使用fs添加这个文件 在最后加上os.EOL 那么不管在什么类型的操作系统上运行这段代码,都会使用正确的行末结束符,确保生成的文件格式正确。

fs.writeFileSync('test.txt', 'Hello, world!' + os.EOL);

3.变量定义

OUTPUT_PATH定义的是最后build-entry.js文件最后输出文件的路径。

IMPORT_TEMPLATEINSTALL_COMPONENT_TEMPLATE

MAIN_TEMPLATE的内容如图5和图6。

主要注意其中的所有模版字符的内容,在下面会用到。

图5 

图6 

4.模版填充

这里我们看这个forEach函数。

首先ComponentsNames是['pagination', 'dropdown-menu','tooltip']等所有组件名字的数组。

73行的componentName是用uppercamelcase将每个词转换为大驼峰形式,上面数组就变成了['Pagination', 'DropdownMenu','Tooltip']这种类型。

75-78行用了json-template/string库,将name和package的值推入了IMPORT_TEMPLATE,比如dropdown-menu这个值最后push进去的就是“import DropdownMenu from '../packages/dropdown-menu/index.js';”。

80-85也是差不多的作用,比如dropdown-menu这个值最后push进去的就是“DropdownMenu”。

87行就是把除了Loading的所有componentName都push进去。

图7

5.MAIN_TEMPLATE填充

最后这里大家就很清楚了吧,也是把各个值填充到模版里面,可以回过头看看图5图6,这些值都被填充到对应位置了。最后文件被输出到src的index.js文件。

图8

6.src下的index.js文件

这个文件就是build-entry.js输出的文件了,这是elementui项目的入口文件。这个index.js文件很有意思。

首先引入了所有的elementui组件。

图9

然后在components常量里面定义了所有组件名称。

图10

1)install

210-212行代码在是vue环境下就执行install函数。在install里最主要的就是把elementui的所有组件都全局注册了。所以我们才能在任何位置直接使用elementui文件而不用单独引入。

图11

2)export

最后就是export这个elementui包,然后我们在npm下载elementui包后直接使用vue.use(elementui)就可以直接使用elementui的所有组件了。

图12

7.总结

个人觉得其实这些代码并不难理解,重点是如何换做我们自己,能否想到用这些模式来写,比如我可能第一反应就会直接写死index.js的内容,而不是通过build-entry.js来动态生成。但是饿了么团队肯定是考虑到该库开源后肯定会有很多人来共建,所以每个组件肯定会经常有修改、增加或者删除,那么通过动态生成这个入口文件,那么就不需要每个开发者去手动更新入口文件,而是只需要关注修改package里的每个单独组件的源码,就由build-entry.js来统一生成动态生成入口文件,即灵活又能减少错误。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1822767.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Blender骨骼创建

骨骼系统 建立 使用Shift A添加骨骼或在添加|骨架中添加一段骨骼 骨骼的三种模式 -物体模式:做动画,摆人物pose时在该模式 -编辑模式:进行骨骼搭建(选择一段骨骼,然后按E挤出一段骨骼并进行调整) -姿…

解析ISP许可证:构建安全可靠的网络空间

在当今数字化时代,互联网已成为人们生活和工作中不可或缺的一部分。作为连接世界的纽带,互联网服务提供商(ISP)承担着重要的责任,为用户提供稳定、高效的网络接入和服务。而ISP许可证,则是保障这些服务合法…

Python学习打卡:day05

day5 笔记来源于:黑马程序员python教程,8天python从入门到精通,学python看这套就够了 目录 day538、函数的初体验39、函数的基础定义语法函数的定义注意事项 40、函数的基础定义案例练习41、函数的传入参数42、函数的传入参数案例练习——升…

【智能家居控制系统项目】一、项目系统镜像烧录与系统登录

前言 完成本章节将可以获得本项目的系统UI界面功能。本章节主要介绍如何烧录项目系统镜像以及进入系统。配套的视频介绍可以点击跳转到智能家居项目复刻配套视频 1.系统功能页面介绍 完成本章全部步骤,我们将可使用以下项目系统功能界面。 1.1 家居总览界面 主界面…

2分钟用手机开发一个ChatBot

前言: 在上一期,我们测评了CodeFlying,用它开发出了一个复杂推文管理系统,然后体验了一下它的热门应用:AI智能机器人。今天咱就继续用CodeFlying来开发一个属于我们自己的聊天机器人。 老规矩,我们先在手机…

【elementui源码解析】如何实现自动渲染md文档-第一篇

文章目录 目录 背景 获取源码 代码分析 背景 之前基于vant3的源码开发过二次开发过组件,其中vant实现了将md文档渲染到界面上,有天突发奇想想知道这是如何实现的将md文档渲染到界面上的,因为平时开发中使用elementui占多数,所…

并发、多线程、HTTP连接数有何关系?

在计算机领域,"并发"、"多线程"和"HTTP连接数"是三个重要的概念,它们之间存在着密切的关系。本文将探讨这三者之间的联系以及它们在现代计算机系统中的作用。 一、并发的概念 并发是指系统能够同时处理多个任务或事件的能…

thinkphp6 入门(23)--如何给上传图片的服务器目录授权

开发网站,上传图像时提示”上传图片失败,Impossible to create the root directory /var/www/html/xxxxx/public/uploads/avatar/20240608.“ 在Ubuntu上,你可以通过调整文件夹权限来解决这个问题。首先,确保Web服务器&#xff08…

填报志愿选大学专业,文科生如何选专业?

读文科的同学接触的专业知识相对广泛,往往被认为是“万金油”,他们仿佛什么都能做,但是和专业技能类知识不同,缺乏技术支持,从而使得文科专业的就业方向和前景远远比不上理科专业那么明朗,对于众多文科生而…

带头+双向+循环链表的实现

目录 1. 链表1.1 带头双向循环链表 2. 链表的实现2.1 结构体2.2 初始化2.3 打印2.4 判断空不能删2.5 尾插2.6 头插2.7 尾删2.8 头删2.9 查找2.10 在pos之前插入2.11 删除pos位置的值2. 12 销毁2.13 创建节点 3. test主函数4. List.c文件5. List.h文件 1. 链表 1.1 带头双向循环…

基于机器学习的CFD模型降阶

降阶模型 ROM 降阶模型ROM(Reduced Order Models)是一种对高保真度静态或动态模型的简化方法。模型降阶在保留了模型的基本特性与主导效应的同时,大大减少复杂模型的CPU计算时间及存储空间。 ROM的用途: 加速大规模系统的仿真速度…

每日一练:攻防世界:2-1

攻防世界:2-1 拿到一个打不开的图片,放到winhex里面,很直观的看到文件头损坏 修改以后还是打不开,继续往下分析 0000 000d说明IHDR头块长为13 4948 4452IHDR标识(ascii码为IHDR) 下面是IHDR数据块的实际…

【MySQL】事务的特性和隔离级别

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ …

报名进行中 | ISCSLP2024 对话语音克隆挑战赛(CoVoC)

晴数智慧(Magic Data)联合西北工业大学音频语音与语言处理研究组(ASLPNPU)、新加坡资讯通讯研究院(I2R)、深圳大数据研究院(SRIBD)、香港中文大学(深圳)等多家单位在2024年中文口语语言处理国际会议(ISCSLP2024)上推出对话语音克隆挑战赛(Conversational Voice Clone Challenge…

FRP 内网穿透 | 实现远程访问与安全管理

唠唠闲话 内网穿透简介 在互联网上&#xff0c;两个不同主机进行通信需要知道对方的 IP 地址。由于世界人口和设备众多&#xff0c;IPv4 资源相对紧缺&#xff0c;因此绝大部分情况下是通过路由器或交换机转换公网 IP 后才上网。 位于路由器或交换机后的设备通常是内网设备&…

Kettle根据分类实现Excel文件拆分——kettle开发31

将整理好的一份供应商付款明细Excel文件&#xff0c;按供应商拆分成多个Excel文件。 实现思路 本文我们首先将供应商付款明细表&#xff0c;按照“名称”拆分成多份Excel文件。拆分Excel文件打算用两个转换实现&#xff0c;一个用来将Excel数据读取到参数中&#xff0c;另外一…

2.4G低功耗无线收发SOC芯片-SI24R03

随着物联网产业对集成度的需求越来越高&#xff0c; 也在不断地完善公司产品生态。 “射频MCU”产品组合--无线SOC芯片&#xff08;MCU&#xff09;&#xff0c;简化了系统设计。只需要少量的外围器件&#xff0c;用户即可实现产品的开发&#xff0c;有效减少了PCB板的占用…

热门开源项目推荐: diffusionbee

随着AI技术的快速发展&#xff0c;深度学习和机器学习已经成为各领域的热门话题。Stable Diffusion是一种强大的深度学习模型&#xff0c;它能够在图像生成和处理方面展现出惊人的效果。为了让更多用户能够轻松地使用Stable Diffusion&#xff0c;Diffusion Bee应运而生&#x…

Instagram怎么打不开?IP被限制怎么解决?

Instagram作为跨境电商的主要推广平台之一&#xff0c;账号安全关系重大。了解并掌握账号管理及防IP封禁的知识可以有效防止Ins账号被限制访问。因此本文将重点介绍 Instagram账号的管理技巧以及如何通过代理IP等工具防封禁&#xff0c;帮助新手用户更好地享受这个社交平台的乐…

python django初步搭建(一)

记录一次简单的python django使用&#xff0c;后续调用api相关的暂时不想写。。。 一、环境 windows python 3.11.7 django 二、初步搭建 2.1 新建空文件夹 为了方便本次记录&#xff0c;新建了一个空的文件夹来使用。 直接在这里输入cmd 然后按下回车 2.2 安装virtual…