修改第三方插件或库的源码经验技巧总结

浅浅的花香味﹌ 2023-10-01 02:23 1阅读 0赞

**目录**

1.前言：

2. 需求

3.功能点

3.1 鼠标经过取消悬停显示

3.2 鼠标经过左侧card组件显示当前节点数据

3.3 修改每个小圈圈里面显示的文字，并且文字溢出省略号显示

3.4 ……

4.技巧总结

--------------------

### 1.前言： ###

--------------------

> 在日常开发中，经常用到各种各样的插件，比如elementUI、jquery、d3等。有时候，根据项目需求需要对三方插件进行修改，如增删改查改变样式之类的。本文以d3.js为例，进行总结。

--------------------

### 2. 需求 ###

--------------------

**需求是做一个这样的知识图谱：**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_14_color_FFFFFF_t_70_g_se_x_16][]

--------------------

### 3.功能点 ###

--------------------

#### 3.1 鼠标经过取消悬停显示 ####

#### 3.2 鼠标经过左侧card组件显示当前节点数据 ####

#### 3.3 修改每个小圈圈里面显示的文字，并且文字溢出省略号显示 ####

#### 3.4 …… ####

--------------------

### 4.技巧总结 ###

--------------------

> 4.1 修改源码，肯定是修改核心的.js文件，先找到要修改的js文件
> 
> --------------------
> 
> 4.2 打开浏览器f12,比如说取消鼠标悬停显示悬浮框这个插件自带功能，应该立马想到这是一个鼠标进入事件，我用的vscode，直接在js文件里面查找mouse事件，然后接下来应该想到的就是，悬浮框肯定是添加元素，直接搜.html()方法，然后看看里面是啥，比如我实际情况是遇上了一个函数，那我接下来就是把函数的return给注释了，然后看页面上鼠标悬停还有没有悬浮框出现。我到这一步就已经解决问题了。
> 
> --------------------
> 
> 4.3 快速定位我们想找的地方，我直接推荐类名查找法，就是通过浏览器检查元素，找到我们想操作的dom元素，然后去js文件里面定位一下。
> 
> --------------------
> 
> 4.4 快速定位我们想找的地方，还可以通过关键词，就是一些长得比较特殊的字符。
> 
> --------------------
> 
> 4.5 鼠标经过左侧card组件显示当前节点数据，这个我是通过定位发现，它抛出了一个函数，于是我就使用这个函数把数据保存到新变量中，以供后续使用。
> 
> --------------------
> 
> 4.6 修改每个小圈圈里面显示的文字，并且文字溢出省略号显示，这个我是通过观察页面展示的默认内容是数据中的id值，于是定位到源码处，改成了name值
> 
> ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_14_color_FFFFFF_t_70_g_se_x_16 1][]
> 
> 至于文字溢出省略号，我先是结合源码上下文操作.attr()加属性，发现不行，于是就直接通过字符串截取，当字符串的length超过10就截取10个字符拼接一个…就好了。
> 
>     .html(function (d) {
>                   var _icon = icon(d)
>                   if (typeof d.labels[0] !== 'string' || 'String') {
>                     d.labels[0] = String(d.labels[0])
>                   }
>                   if (d.labels[0].length >= 10) {
>                     d.labels[0] = d.labels[0].slice(0, 9) + '…'
>                   }
>                   return _icon ? '&#x' + _icon : d.labels[0]
>                 })
> 
> --------------------
> 
> **小结：记住要点,要结合源码和浏览器控制台，通过元素的类名啊特殊字符啊之类的，定位到源码相应的位置，再结合源码上下文，进行一些诸如增删改的操作，然后通过console.log或是页面变化来看有没有达到想要的效果。**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c677becde93f49e5a1ff95e32ccb1d8b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_14_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/2727b2fdc3a34788a3a4a933377c786c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3e67ae40ca574c1ba3e10118cacbf76a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16