【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,一经查实,立即删除!

相关文章

无理数的渊源

无理数-西方欧美数学史上的第1次危机 第一次数学危机是数学史上的一次重要事件,发生于公元前400年左右的古希腊时期。这次危机的出现冲击了一直以来在西方数学界占据主导地位的毕达哥拉斯学派,同时标志着西方世界关于无理数的研究的开始。 古希腊的毕达…

还在用nginx,这款网关更强大

OpenResty与Nginx在功能和性能上有着密切的关联,但也存在一些关键的区别。以下是OpenResty与Nginx在不同方面的具体比较: 1. **技术架构** - **OpenResty**:OpenResty基于Nginx核心,集成了LuaJIT VM,允许直接在Nginx中…

整理好了!2024年最常见 20 道并发编程面试题(五)

上一篇地址:整理好了!2024年最常见 20 道并发编程面试题(四)-CSDN博客 九、请解释什么是线程安全以及如何实现线程安全。 线程安全是一个重要的概念,特别是在多线程编程中。当多个线程访问共享数据时,如果…

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

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

c++ 函数内对象的释放

void someFunction() {MyClass obj MyClass(); }void someFunction() {MyClass obj new MyClass();}void someFunction() {MyClass* obj new MyClass(); }void someFunction() {std::unique_ptr<MyClass> obj std::make_unique<MyClass>(); }在函数中用这4种…

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语音工牌:如何帮助房企打造数字化的案场接待体验

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

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

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

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

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

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

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

从零开始精通Onvif之事件处理

&#x1f4a1; 如果想阅读最新的文章&#xff0c;或者有技术问题需要交流和沟通&#xff0c;可搜索并关注微信公众号“希望睿智”。 概述 Onvif的事件处理允许IPC等摄像头主动向客户端&#xff08;比如&#xff1a;NVR、VMS、平台服务等&#xff09;推送事件通知&#xff0c;比…

浅谈Web开发的三大主流框架:Angular、React和Vue.js

在现代Web开发领域&#xff0c;Angular、React和Vue.js作为三大主流前端框架&#xff0c;各自拥有独特的特点和优势&#xff0c;为开发者提供丰富的选择。让我们更深入地了解这三大框架&#xff0c;并通过一些小型样例来展示它们的特性。 Angular Angular是一个完整的前端框架…

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

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

Python库

Python库 babel huey 图片视频处理 moviepy 一个用于视频编辑的Python模块,可用于进行视频的基本操作(如剪切、连接、标题插入)、视频合成(也称非线性编辑)、视频处理或创建高级效果 patchworklib 一个专注于图像拼接和合成的Python库 patchworklib 一个专注与图…

鸿蒙 如何将base64的图片保存到相册

把一个base64图片 保存到鸿蒙手机 相册中怎么实现呢&#xff1f; 下面有2中方法 方案一&#xff1a;可以通过安全控件「保存控件&#xff08;SaveButton&#xff09;」实现。该控件对应媒体库写入特权。应用集成保存控件后&#xff0c;用户点击该控件&#xff0c;应用会获取1…

CI/CD实战面试宝典:从构建到高可用性的全面解析

实战部署与配置 请描述你设计和实现的一个CI/CD pipeline的完整流程&#xff0c;包括构建、测试、部署各个阶段。 我设计的CI/CD pipeline通常包括以下几个阶段&#xff1a; 代码提交&#xff1a;开发人员将代码提交到Git仓库&#xff0c;触发CI/CD流程。代码检查&#xff1…

【区分vue2和vue3下的element UI Transfer 穿梭框组件,分别详细介绍属性,事件,方法如何使用,并举例】

Element UI 是为 Vue 2 设计的&#xff0c;而 Element Plus 是 Element UI 的 Vue 3 版本。在这两个版本中&#xff0c;Transfer 穿梭框组件&#xff08;如果有的话&#xff09;的 API 和使用方式可能会有所不同。以下是根据我对这两个版本组件的了解&#xff0c;对 Vue 2 的 E…

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

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

持续总结中!2024年面试必问 20 道并发编程面试题(六)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 20 道并发编程面试题&#xff08;五&#xff09;-CSDN博客 十一、什么是信号量&#xff08;Semaphore&#xff09;&#xff1f; 信号量是一种并发编程中使用的同步机制&#xff0c;用于控制对共享资源的访问。它…