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

目录

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.mzph.cn/pingmian/27295.shtml

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

相关文章

videoJS 视频 + 独一无二皮肤 + mp4/m3u8

推荐和参考文章: video.js调用-腾讯云开发者社区-腾讯云> 一、总结(点击显示或隐藏总结内容)一句话总结:网上有各种细致的现成的代码可以拿来用,没必要自己死专1、video.js有两种初始化方式?一种是在v…

C++并发之条件变量(std::condition_variable)

目录 1 概述2 使用实例3 接口使用3.1 wait3.2 wait_for3.3 wait_until3.4 notify_one3.5 notiry_all3.5 notify_all_at_thread_exit1 概述 条件变量是一个能够阻塞调用线程直到被通知恢复的对象。   当调用其中一个等待函数时,它使用unique_lock(通过互斥锁)来锁定线程。线程…

hadoop和hbase对应版本关系

https://hbase.apache.org/book.html#configuration

DuDuTalk语音工牌:如何帮助房企打造数字化的案场接待体验

房地产案场接待作为客户体验的第一站,其服务质量直接影响客户的购房决策。然而,传统的案场接待方式存在诸多挑战,如信息记录不准确、服务流程难以标准化、客户反馈收集困难等。语音工牌作为一种创新的智能设备,凭借其独特的功能和…

Office 2021 mac/win版:智慧升级,办公新风尚

Office 2021是微软公司推出的一款高效、智能且功能丰富的办公软件套件。它集成了Word、Excel、PowerPoint等多个经典应用程序,旨在为用户提供更出色的办公体验。 Office 2021 mac/win版获取 Office 2021在继承了前代版本优点的基础上,进行了大量的优化…

接口测试之用Fiddler对手机app进行抓包

Fiddler是一款非常流行并且实用的http抓包工具,它的原理是在本机开启了一个http的代理服务器,然后它会转发所有的http请求和响应,因此,它比一般的firebug或者是chrome自带的抓包工具要好用的多。不仅如此,它还可以支持…

JVC摄像机SD卡变成RAW的恢复方法

JVC小日本胜利公司,公司名字绕口且产品线极广,涉及汽车、影音、娱乐……,而JVC在摄像机产品方面也有涉及,不过市场上极为少见。下边我们来看下这个JVC摄像机MP4恢复案例。 故障存储: 32G存储卡 RAW文件系统 故障现象: 客户无…

万字长文讲解如何快速搭建一个Spring Cloud项目

文章目录 概念基本概念微服务七大组件 初始化Maven父工程整合注册中心组件整合远程调用与负载均衡组件组件整合网关组件整合配置中心组件以gateway模块为例 整合分布式事务组件操作数据库模拟创建订单和扣减库存整合Seata 整合熔断降级组件整合链路追踪组件源码地址参考来源 概…

springcloud gateway转发websocket请求的404问题定位

一、问题 前端小程序通过springcloud gateway接入并访问后端的诸多微服务,几十个微服务相关功能均正常,只有小程序到后端推送服务的websocket连接建立不起来,使用whireshark抓包,发现在小程序通过 GET ws://192.168.6.100:8888/w…

Robot Operating System (ROS)中,发布与订阅

在Robot Operating System (ROS)中,发布与订阅是一种基于主题的异步消息传递机制,用于节点间的通信。ROS的设计是围绕着这一概念,它允许不同节点之间解耦,每个节点专注于自己的任务,通过发布和订阅消息来与其他节点交互…

计算机体系结构重点学习

从外部I/O与上层应用交互的整体软硬件过程 上层应用发出I/O请求:上层应用程序,如一个文本编辑器、网络浏览器或者任何软件应用,需要读取或写入数据时,会通过调用操作系统提供的API(如文件操作API、网络操作API等&…

SpringBoot之请求映射原理

前言 我们发出的请求,SpringMVC是如何精准定位到那个Controller以及具体方法?其实这都是 HandlerMapping 发挥的作用,这篇博文我们以 RequestMappingHandlerMapping 为例并结合源码一步步进行分析。 定义HandlerMapping 默认 HandlerMappi…

Docker部署常见应用之桌面版系统ubuntu-desktop

文章目录 ubuntu-desktop 简介ubuntu-desktop 部署参考文章 ubuntu-desktop 简介 colinchang/ubuntu-desktop 是一个Docker镜像,基于KasmWeb⁠的 Ubuntu 22.04 桌面版(Web) Docker Image。镜像替换了阿里云Ubuntu Jammy镜像源,安…

重生之 SpringBoot3 入门保姆级学习(21、场景整合 Redis 定制对象序列化存储)

重生之 SpringBoot3 入门保姆级学习(21、场景整合 Redis 定制对象序列化存储) 6.4 定制化 6.4 定制化 需求:保存一个 Person 对象到 redis 创建 Person 类 package com.zhong.redis.entity;import lombok.AllArgsConstructor; import lombok…

浅谈C++基本框架内涵及其学习路线

目录 一.C的内涵本质 1. 面向对象编程(OOP) 2. 低级控制 3. 模板编程 4. 标准库(STL) 5. 多范式支持 二.学习路线 1. 基础阶段 C基础语法 函数 数组和指针 2. 面向对象编程 类和对象 继承和多态 运算符重载 3. 高级…

【服务的主从切换实现原理】

文章目录 主从架构介绍zookeeper利用ZK实现主从架构 主从架构介绍 主从服务架构是一种常见的分布式系统设计模式,常用于提高系统的性能、可用性和扩展性。在这种架构中,系统中的节点被分为两类:主节点(Master)和从节点…

Java基础面试重点-1

0. 符号: *:记忆模糊,验证后特别标注的知识点。 &:容易忘记知识点。 *:重要的知识点。 1. 简述一下Java面向对象的基本特征(四个),以及你自己的应用? 抽象&#…

R可视化:ggpubr包学习

欢迎大家关注全网生信学习者系列: WX公zhong号:生信学习者 Xiao hong书:生信学习者 知hu:生信学习者 CDSN:生信学习者2 介绍 ggpubr是我经常会用到的R包,它傻瓜式的画图方式对很多初次接触R绘图的人来…

提升你的编程体验:自定义 PyCharm 背景图片

首先,打开 PyCharm 的设置菜单,点击菜单栏中的 File > Settings 来访问设置,也可以通过快捷键 CtrlAItS 打开设置。 然后点击Appearance & Behavior > Appearance。 找到Background image...左键双击进入。 Image:传入自己需要设置…

常见的 EVM 版本以及它们的区别

EVM(以太坊虚拟机)版本的演进是为了引入新的特性和改进以太坊平台的安全性、效率和功能性。每个版本通常伴随着以太坊网络的硬分叉,这是以太坊协议的重大升级。以下是一些常见的EVM版本及其主要区别: Homestead (2016年3月)&…