# wangrongding

**Repository Path**: wangrongding/wangrongding

## Basic Information

- **Project Name**: wangrongding
- **Description**: 荣顶的个人博客，分享，记录，总结前端相关知识。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: https://www.fedtop.com/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-23
- **Last Updated**: 2022-11-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 大前端技术博客

![](https://img.shields.io/badge/-Nodejs-43853d?style=flat-square&logo=Node.js&logoColor=white) ![](https://img.shields.io/badge/-WebRTC-008000?style=flat-square&logo=WebRTC&labelColor=90EE90&color=fff) ![](https://img.shields.io/badge/-JavaScript-e5cd0c?style=flat-square&logo=JavaScript&labelColor=f7df1e&logoColor=000) ![](https://img.shields.io/badge/-TypeScript-3178C6?style=flat-square&logo=TypeScript&logoColor=white&color=blue) ![](https://img.shields.io/badge/-Vue.js-29beb0?style=flat-square&logo=vue.js&labelColor=ffffff&color=4FC08D) ![](https://img.shields.io/badge/-React-29beb0?style=flat-square&logo=React&labelColor=ffffff&color=61DAFB) ![](https://img.shields.io/badge/-WebPack-1C78C0?style=flat-square&logo=WebPack&logoColor=white) ![](https://img.shields.io/badge/-Electron-white?style=flat-square&logo=electron&logoColor=white&color=47848F) ![](https://img.shields.io/badge/-Three.js-000000?style=flat-square&logo=Three.js) ![](https://img.shields.io/badge/-MiniProgram-008000?style=flat-square&logo=WeChat&labelColor=fff&color=07C160) ![](https://img.shields.io/badge/-NPM-CB3837?style=flat-square&logo=npm&logoColor=white) ![](https://img.shields.io/badge/-Github_Actions-2088FF?style=flat-square&logo=github-actions&logoColor=white) [![](https://img.shields.io/badge/-Gist-black?style=flat-square&logo=GitHub&labelColor=blue&color=fff&logoColor=fff)](https://gist.github.com/wangrongding) ![](https://img.shields.io/badge/-Tampermonkey-black?style=flat-square&logo=Tampermonkey&labelColor=black&color=00485B) ![](https://img.shields.io/badge/-KaliLinux-white?style=flat-square&logo=KaliLinux&logoColor=white&color=blue) ![](https://img.shields.io/badge/-MySQL-white?style=flat-square&logo=MySQL&logoColor=white&color=fff&labelColor=4479A1) ![](https://img.shields.io/badge/-CodePen-white?style=flat-square&logo=CodePen&logoColor=white&color=000) ![](https://img.shields.io/badge/-Jenkins-white?style=flat-square&logo=Jenkins&labelColor=D24939&color=white&logoColor=white) ![](https://img.shields.io/badge/-Docker-white?style=flat-square&logo=Docker&labelColor=2496ED&color=2496ED&logoColor=white) ![](https://img.shields.io/badge/-Bilibili-white?style=flat-square&logo=Bilibili&labelColor=00A1D6&logoColor=white)


![](https://raw.githubusercontent.com/wangrongding/image-house/master/img/202208260058268.png)
(思维导图地址)[https://www.processon.com/view/link/62fe04fd0e3e7437cabf1a91]

## 目录结构

```sh
|- docs 文章的归档目录
  |- 0-前端
  |- 1-后端相关
  |- 9-其他
```

## JavaScript

- [前端 JS 获取内网 IP](docs/0-%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AFJS%E8%8E%B7%E5%8F%96%E5%86%85%E7%BD%91IP.md)
- [简单的防止你的程序被他人恶意调试](docs/0-%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E7%9A%84%E9%98%B2%E6%AD%A2%E4%BD%A0%E7%9A%84%E7%A8%8B%E5%BA%8F%E8%A2%AB%E4%BB%96%E4%BA%BA%E6%81%B6%E6%84%8F%E8%B0%83%E8%AF%95.md)
- [防止网页被嵌入框架的代码](docs/0-%E5%89%8D%E7%AB%AF/%E9%98%B2%E6%AD%A2%E7%BD%91%E9%A1%B5%E8%A2%AB%E5%B5%8C%E5%85%A5%E6%A1%86%E6%9E%B6%E7%9A%84%E4%BB%A3%E7%A0%81.md)
- [js 动态添加 dom，如何绑定事件](docs/0-%E5%89%8D%E7%AB%AF/js%E5%8A%A8%E6%80%81%E6%B7%BB%E5%8A%A0dom%EF%BC%8C%E5%A6%82%E4%BD%95%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6.md)
- [js 中文字合成语音,文字转语音的实现方法](docs/0-%E5%89%8D%E7%AB%AF/js%E4%B8%AD%E6%96%87%E5%AD%97%E5%90%88%E6%88%90%E8%AF%AD%E9%9F%B3,%E6%96%87%E5%AD%97%E8%BD%AC%E8%AF%AD%E9%9F%B3%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%B3%95.md)

## 前端工程化

- [前端工程化之谁动了我的代码](docs/0-%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E4%B9%8B%E8%B0%81%E5%8A%A8%E4%BA%86%E6%88%91%E7%9A%84%E4%BB%A3%E7%A0%81.md)
- [前端团队基于 VUE 开发的格式化统一方案](docs/0-%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AF%E5%9B%A2%E9%98%9F%E5%9F%BA%E4%BA%8EVUE%E5%BC%80%E5%8F%91%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E7%BB%9F%E4%B8%80%E6%96%B9%E6%A1%88.md)
- [前端应该知道的 npm 知识点](docs/0-%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AF%E5%BA%94%E8%AF%A5%E7%9F%A5%E9%81%93%E7%9A%84npm%E7%9F%A5%E8%AF%86%E7%82%B9.md)

### Vue

- [vue 路由 history 模式下刷新页面 404](docs/0-%E5%89%8D%E7%AB%AF/vue%E8%B7%AF%E7%94%B1history%E6%A8%A1%E5%BC%8F%E4%B8%8B%E5%88%B7%E6%96%B0%E9%A1%B5%E9%9D%A2404.md)
- [Vue 中 key 值的作用](docs/0-%E5%89%8D%E7%AB%AF/Vue%E4%B8%ADkey%E5%80%BC%E7%9A%84%E4%BD%9C%E7%94%A8.md)
- [Vuex 精简文档](docs/0-%E5%89%8D%E7%AB%AF/Vuex%E7%B2%BE%E7%AE%80%E6%96%87%E6%A1%A3.md)
- [如何引用外部 cdn 资源](docs/0-%E5%89%8D%E7%AB%AF/%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E5%A4%96%E9%83%A8cdn%E8%B5%84%E6%BA%90.md)

### 小程序

- [小程序多选和单选组件的封装](docs/0-%E5%89%8D%E7%AB%AF/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%A4%9A%E9%80%89%E5%92%8C%E5%8D%95%E9%80%89%E7%BB%84%E4%BB%B6%E7%9A%84%E5%B0%81%E8%A3%85.md)
- [小程序开发过程中遇到的坑](docs/0-%E5%89%8D%E7%AB%AF/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E8%BF%87%E7%A8%8B%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E5%9D%91.md)
- [小程序如何获取设备信息](docs/0-%E5%89%8D%E7%AB%AF/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96%E8%AE%BE%E5%A4%87%E4%BF%A1%E6%81%AF.md)
- [小程序使用 canvas 绘制多行文本的方案](docs/0-%E5%89%8D%E7%AB%AF/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BD%BF%E7%94%A8canvas%E7%BB%98%E5%88%B6%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E7%9A%84%E6%96%B9%E6%A1%88.md)
- [小程序在“页面 B”更改 title，返回“页面 A”仍会显示“页面 B”的 title](docs/0-%E5%89%8D%E7%AB%AF/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9C%A8%E2%80%9C%E9%A1%B5%E9%9D%A2B%E2%80%9D%E6%9B%B4%E6%94%B9title%EF%BC%8C%E8%BF%94%E5%9B%9E%E2%80%9C%E9%A1%B5%E9%9D%A2A%E2%80%9D%E4%BB%8D%E4%BC%9A%E6%98%BE%E7%A4%BA%E2%80%9C%E9%A1%B5%E9%9D%A2B%E2%80%9D%E7%9A%84title.md)
- [小程序中当有异步操作或者耗时同步操作时，不能保证 app.js 中的 onLaunch 与 page.js 中 onLoad 先后执行顺序的解决方案](docs/0-%E5%89%8D%E7%AB%AF/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E5%BD%93%E6%9C%89%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C%E6%88%96%E8%80%85%E8%80%97%E6%97%B6%E5%90%8C%E6%AD%A5%E6%93%8D%E4%BD%9C%E6%97%B6%EF%BC%8C%E4%B8%8D%E8%83%BD%E4%BF%9D%E8%AF%81app.js%E4%B8%AD%E7%9A%84onLaunch%E4%B8%8Epage.js%E4%B8%ADonLoad%E5%85%88%E5%90%8E%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88.md)
- [小程序中非常好用的富文本插件 wxParse](docs/0-%E5%89%8D%E7%AB%AF/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E9%9D%9E%E5%B8%B8%E5%A5%BD%E7%94%A8%E7%9A%84%E5%AF%8C%E6%96%87%E6%9C%AC%E6%8F%92%E4%BB%B6wxParse.md)
- [小程序中如何用 canvas 画出圆角的矩形](docs/0-%E5%89%8D%E7%AB%AF/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E5%A6%82%E4%BD%95%E7%94%A8canvas%E7%94%BB%E5%87%BA%E5%9C%86%E8%A7%92%E7%9A%84%E7%9F%A9%E5%BD%A2.md)

### 图像/画布

- [每一个用到 canvas 的小伙伴都应该了解的 fabric.js](docs/0-%E5%89%8D%E7%AB%AF/%E6%AF%8F%E4%B8%80%E4%B8%AA%E7%94%A8%E5%88%B0canvas%E7%9A%84%E5%B0%8F%E4%BC%99%E4%BC%B4%E9%83%BD%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84fabric.js.md)
- [通过文本与图片的隐写来隐藏信息（非常有意思）.md](docs/0-%E5%89%8D%E7%AB%AF/%E9%80%9A%E8%BF%87%E6%96%87%E6%9C%AC%E4%B8%8E%E5%9B%BE%E7%89%87%E7%9A%84%E9%9A%90%E5%86%99%E6%9D%A5%E9%9A%90%E8%97%8F%E4%BF%A1%E6%81%AF%EF%BC%88%E9%9D%9E%E5%B8%B8%E6%9C%89%E6%84%8F%E6%80%9D%EF%BC%89.md)
- [我用 10000 张图片合成我们美好的瞬间](docs/0-%E5%89%8D%E7%AB%AF/%E6%88%91%E7%94%A8%2010000%20%E5%BC%A0%E5%9B%BE%E7%89%87%E5%90%88%E6%88%90%E6%88%91%E4%BB%AC%E7%BE%8E%E5%A5%BD%E7%9A%84%E7%9E%AC%E9%97%B4.md)
- [Javascript 将 html 转成 pdf,下载（html2canvas 和 jsPDF）](docs/0-%E5%89%8D%E7%AB%AF/Javascript%E5%B0%86html%E8%BD%AC%E6%88%90pdf,%E4%B8%8B%E8%BD%BD%EF%BC%88html2canvas%20%E5%92%8C%20jsPDF%EF%BC%89.md)

### Webpack

- [webpack 基础知识整理](docs/0-%E5%89%8D%E7%AB%AF/webpack%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%95%B4%E7%90%86.md)
- [webpack 多版本控制方案](docs/0-%E5%89%8D%E7%AB%AF/webpack%E5%A4%9A%E7%89%88%E6%9C%AC%E6%8E%A7%E5%88%B6%E6%96%B9%E6%A1%88.md)
- [代理 https 热更新失效的解决方案](docs/0-%E5%89%8D%E7%AB%AF/%E4%BB%A3%E7%90%86%20https%20%E7%83%AD%E6%9B%B4%E6%96%B0%E5%A4%B1%E6%95%88%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88.md)
- [webpack 配置多页面应用的一次尝试](docs/0-%E5%89%8D%E7%AB%AF/webpack%E9%85%8D%E7%BD%AE%E5%A4%9A%E9%A1%B5%E9%9D%A2%E5%BA%94%E7%94%A8%E7%9A%84%E4%B8%80%E6%AC%A1%E5%B0%9D%E8%AF%95.md)
- [解决 webpack 打包慢](docs/0-%E5%89%8D%E7%AB%AF/%E8%A7%A3%E5%86%B3%20webpack%20%E6%89%93%E5%8C%85%E6%85%A2.md)
- [跨域解决方案之 proxyTable](docs/0-%E5%89%8D%E7%AB%AF/%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E4%B9%8BproxyTable.md)

### Nodejs

- [一款小巧的基于 Node 环境的终端翻译小工具](docs/0-%E5%89%8D%E7%AB%AF/%E4%B8%80%E6%AC%BE%E5%B0%8F%E5%B7%A7%E7%9A%84%E5%9F%BA%E4%BA%8E%20Node%20%E7%8E%AF%E5%A2%83%E7%9A%84%E7%BB%88%E7%AB%AF%E7%BF%BB%E8%AF%91%E5%B0%8F%E5%B7%A5%E5%85%B7.md)

### 客户端.exe

- [制作兼容 xp 的 exe](docs/0-%E5%89%8D%E7%AB%AF/%E5%88%B6%E4%BD%9C%E5%85%BC%E5%AE%B9%20xp%20%E7%9A%84%20exe.md)

### Chrome 浏览器

- [《chrome 腾飞之路》 之 chrome 95 新特性](docs/0-%E5%89%8D%E7%AB%AF/%E3%80%8Achrome%E8%85%BE%E9%A3%9E%E4%B9%8B%E8%B7%AF%E3%80%8B%20%E4%B9%8B%20chrome%2095%20%E6%96%B0%E7%89%B9%E6%80%A7.md)

### 资源汇总分享

- [20+个前端必备的站点](docs/0-%E5%89%8D%E7%AB%AF/20+%E4%B8%AA%E5%89%8D%E7%AB%AF%E5%BF%85%E5%A4%87%E7%9A%84%E7%AB%99%E7%82%B9.md)

- [一些有用的工具库](docs/0-%E5%89%8D%E7%AB%AF/%E4%B8%80%E4%BA%9B%E6%9C%89%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7%E5%BA%93.md)

### 后端相关内容

- [mongoDB 设置权限登陆后，在 keystonejs 中创建新的数据库连接实例](docs/1-%E5%90%8E%E7%AB%AF%E7%9B%B8%E5%85%B3/mongoDB%E8%AE%BE%E7%BD%AE%E6%9D%83%E9%99%90%E7%99%BB%E9%99%86%E5%90%8E%EF%BC%8C%E5%9C%A8keystonejs%E4%B8%AD%E5%88%9B%E5%BB%BA%E6%96%B0%E7%9A%84%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5%E5%AE%9E%E4%BE%8B.md)
- [mongoDB 设置权限配置](docs/1-%E5%90%8E%E7%AB%AF%E7%9B%B8%E5%85%B3/mongoDB%E8%AE%BE%E7%BD%AE%E6%9D%83%E9%99%90%E9%85%8D%E7%BD%AE.md)

### 其他内容

- [关于写作，我想要说的](docs/9-%E5%85%B6%E4%BB%96/%E5%85%B3%E4%BA%8E%E5%86%99%E4%BD%9C%EF%BC%8C%E6%88%91%E6%83%B3%E8%A6%81%E8%AF%B4%E7%9A%84.md)
- [在 VsCode 中优雅的刷 LeetCode](docs/9-%E5%85%B6%E4%BB%96/%E5%9C%A8VsCode%E4%B8%AD%E4%BC%98%E9%9B%85%E7%9A%84%E5%88%B7LeetCode.md)
- [《谷歌如何让运营的》读后总结](docs/9-%E5%85%B6%E4%BB%96/%E3%80%8A%E8%B0%B7%E6%AD%8C%E5%A6%82%E4%BD%95%E8%AE%A9%E8%BF%90%E8%90%A5%E7%9A%84%E3%80%8B%E8%AF%BB%E5%90%8E%E6%80%BB%E7%BB%93.md)
- [《相约星期二》读后感](docs/9-%E5%85%B6%E4%BB%96/%E3%80%8A%E7%9B%B8%E7%BA%A6%E6%98%9F%E6%9C%9F%E4%BA%8C%E3%80%8B%E8%AF%BB%E5%90%8E%E6%84%9F.md)
- [《重返狼群》观后感](docs/9-%E5%85%B6%E4%BB%96/%E3%80%8A%E9%87%8D%E8%BF%94%E7%8B%BC%E7%BE%A4%E3%80%8B%E8%A7%82%E5%90%8E%E6%84%9F.md)
- [《追风筝的人》读后感](docs/9-%E5%85%B6%E4%BB%96/%E3%80%8A%E8%BF%BD%E9%A3%8E%E7%AD%9D%E7%9A%84%E4%BA%BA%E3%80%8B%E8%AF%BB%E5%90%8E%E6%84%9F.md)
- [创建一个美区 Apple ID](docs/9-%E5%85%B6%E4%BB%96/%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E7%BE%8E%E5%8C%BA%20Apple%20ID.md)
- [发呆有感](docs/9-%E5%85%B6%E4%BB%96/%E5%8F%91%E5%91%86%E6%9C%89%E6%84%9F.md)
- [使用 ss 进行 google 和外服游戏总结](docs/9-%E5%85%B6%E4%BB%96/%E4%BD%BF%E7%94%A8ss%E8%BF%9B%E8%A1%8Cgoogle%E5%92%8C%E5%A4%96%E6%9C%8D%E6%B8%B8%E6%88%8F%E6%80%BB%E7%BB%93.md)
- [Docker 中怎么安装 Jenkins](docs/9-%E5%85%B6%E4%BB%96/Docker%E4%B8%AD%E6%80%8E%E4%B9%88%E5%AE%89%E8%A3%85Jenkins.md)
- [github pages 中用 hexo 搭建精致博客](docs/9-%E5%85%B6%E4%BB%96/github%20pages%E4%B8%AD%E7%94%A8hexo%E6%90%AD%E5%BB%BA%E7%B2%BE%E8%87%B4%E5%8D%9A%E5%AE%A2.md)
- [GitLab Pages 中用 Vuepress 生成项目文档和博客](docs/9-%E5%85%B6%E4%BB%96/GitLab%20Pages%E4%B8%AD%E7%94%A8Vuepress%E7%94%9F%E6%88%90%E9%A1%B9%E7%9B%AE%E6%96%87%E6%A1%A3%E5%92%8C%E5%8D%9A%E5%AE%A2.md)
- [gitlab-CI 持续集成以及 runner 的配置简版](docs/9-%E5%85%B6%E4%BB%96/gitlab-CI%20%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90%E4%BB%A5%E5%8F%8Arunner%E7%9A%84%E9%85%8D%E7%BD%AE%E7%AE%80%E7%89%88.md)
- [linux 命令备忘录(持续更新...)](<docs/9-%E5%85%B6%E4%BB%96/linux%E5%91%BD%E4%BB%A4%E5%A4%87%E5%BF%98%E5%BD%95(%E6%8C%81%E7%BB%AD%E6%9B%B4%E6%96%B0...).md>)
- [markdown 语法](docs/9-%E5%85%B6%E4%BB%96/markdown%E8%AF%AD%E6%B3%95.md)


如果你也非常热爱前端相关技术！欢迎加入千人前端技术交流群~ 🦄  
![](https://assets.fedtop.com/picbed/1655029924164.jpg)