rancher/ui 如何快速定位资源,找到要修改的地方

你的名字 2022-11-26 07:56 114阅读 0赞

刚接触rancher那会,每天都头皮发麻,项目技术栈太偏,ember.js 文档基本上是英文,也有些老旧的是中文的,

项目结构复杂

很多变量,组件,都是全局注入的,很难找到源头

路由没有统一管理

使用hbs模板解释器,html中大量使用变量,破坏结构,难以理解

组件加载,编译方式与目前主流的vue组件与react组件差异很大.

针对技能

1.  全局搜索 **ctrl + shift + f**
2.  文件搜索  **ctrl + p**
3.  重要入口 文件 **/app/router.js**
4.  记录文档

## 全局搜索 ##

使用全局 搜索的时候要根据页面的独特标识,如title, 关键字,区别于其他页面的,或在其他页面没有出现,这个页面特有的资源,进行全局搜索,如果是文本一般都会搜到它的国际化定义文件,  rancher的ui页面上是没有中文的,全部中文都是由配置国际化文件来显示的.

搜索思路是  页面标志项字段=> 国际化定义文件=>字段定义文件=>找到hbs文件

如需要一个页面, 此页面有个按钮叫做 **部署应用**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1][]

这个**lib/pipeline/addon/components/step-summary/template.hbs**就是我们要找的页面

文件搜索

有些文本是指向的一个文件, 这个时候我们就要用到文件搜索了 在windows下的vscode 中使用 **ctrl+p** 来搜索

如 下图,此处的setting 指向的是有一个settings, 虽然你可能不太了解service() 有什么用处,方法,但你可以 ctrl+p 来找到

settings的相关定义文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 2][]

搜索结果如下, 其中 **lib\\shared\\app\\settings\\service.js 以及 lib\\shared\\addon\\settings\\service.js  看着最像我们要找的文件,**

**因为这个文件的路径中包含 settings 和service 这两个关键性字段 要文件发挥联系,想象是也是很关键的.**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 3][]

## 寻找关键文件 ##

**/app/router.js 是这个项目的路由配置文件, 一级二级的路径都是在这个文件进行定义的, 路由使用的是  长路由转化为短路由**

**我们在浏览器地址栏看到的是短路由, 使用这个短路由找到长路由找到对应路由的文件夹 这是正确的思路**

如

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 4][]

浏览器中的短路径 **g** 对应是长路径 **globa-admin ** 对应的文件加就是 **lib/global-admin  貌似,长路径对应的就是文件夹名称**

**路径中还有一些需要授权,和不需要授权的页面. 可以多看看 后面我也会多写一些关于路由的解析,快速定位的文章**

## 记录文档 ##

俗话说,好记性不如一个烂笔头, 在项目探索,研究阶段,一定要多记忆,沉淀成文档, 不仅仅是帮助自己,也是帮助后来人.

就算是我 现在也要时常去查看以前写的文档, 相当于一个 checklist 吧

rancher/ui这个项目  所有的组件都是开发者自己开发的, 没有引用第三方的成熟的组件库.所以项目体积很大. 不过不用怕,他们的开发人员很友好, 我给他们提的两个issues都回复的很快,解决了我的问题.

祝你在rancher的开发道路上越走越顺

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221124/e8a5d712b17b4cb9b313d52ff1bcf711.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]: /images/20221124/ebc7a83141814a589e81ad8700815854.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 2]: /images/20221124/90454be057b7476ca70efd0e4a2e553c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 3]: /images/20221124/9790d1946ce34138a5f233b3b1061bb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 4]: /images/20221124/ff5738f321144bf99b35297d78e577d4.png