# JavaScriptCollection

**Repository Path**: chufan443/JavaScriptCollection

## Basic Information

- **Project Name**: JavaScriptCollection
- **Description**: 基于Node.js衍生的全栈技能仓库，点滴总结、积少成多
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-01
- **Last Updated**: 2025-06-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
  <img
    alt="JavaScriptCollection"
    src="https://cdn.statically.io/gh/142vip/cdn_service@main/doc_book/jsc/jsc_logo.png"
    style="text-align: center;border-radius: 5px"
  >
  <p style="font-size: 20px">
    <strong>✨【理论+实战】保姆级成长笔记✨</strong>
  </p>
</div>

<div align="center">
    <div id="wechat">
        <a href="#we-media-container">
            <img alt="作者: 储凡" src="https://img.shields.io/badge/公众号-储凡-8A2BE2.svg" style="text-align: center;">
        </a>
    </div>
    <div>
       <a href="https://js-collection.netlify.app" target="_blank" style="padding: 5px">
        <img alt="Netlify" src="https://api.netlify.com/api/v1/badges/75a7251a-f873-4aff-b387-6449ca241ef7/deploy-status">
       </a>
       <a href="https://js-collection.vercel.app" target="_blank" style="padding: 5px">
        <img src="https://deploy-badge.vercel.app/vercel/js-collection" alt="JavaScriptCollection Deploy"></img>
       </a>
    </div>
    <div >
      <img alt="code size" src="https://img.shields.io/github/languages/code-size/142vip/JavaScriptCollection" style="padding: 5px">
      <img alt="release version" src="https://img.shields.io/github/v/release/142vip/JavaScriptCollection" style="padding: 5px">
      <img alt="repo size" src="https://img.shields.io/github/repo-size/142vip/JavaScriptCollection" style="padding: 5px">
    </div>
    <div id="repo-link">
        <a href="https://github.com/142vip/JavaScriptCollection" target="_blank" style="padding: 5px">GitHub</a>
        |
        <a href="https://gitee.com/chufan443/JavaScriptCollection" target="_blank" style="padding: 5px">Gitee</a>
    </div>
</div>
<br>

<!-- #region quick-start -->

这里是工作、学习、生活中总结的各类文章，`有技术`、`有生活`、`有思考`。
所有内容会选择性的发表在`微信公众号`、`掘金`、`CSDN`、`Github`平台上（延迟1-2篇） ，实际内容以本仓库排版、校对为主。

## 在线浏览

**没有效访问链接的代表尚未完成，大家善用快捷键`Ctrl+F`**

- 稳定版：<https://code.142vip.cn>

> 网站无法访问时，合理使用魔法、通过科学上网访问第三方托管平台

- Github：<https://142vip.github.io/JavaScriptCollection>
- Netlify： <https://js-collection.netlify.app>
- Vercel： <https://js-collection.vercel.app>

## 前端

> 前端技术百花齐放、层出不穷，个人认为要注重广度，学会看官方文档熟练操作即可；

### HTML

### CSS

- [ ] CSS开发规范
- [ ] 样式属性
- [ ] 页面布局
- [ ] 移动端适配

### JavaScript

#### 快速入门

- [ ] [简单介绍]()
- [ ] [快速了解]()
- [ ] [JavasScript开发规范]()

#### 基础教程

- [ ] [语法与数据结构]()
- [ ] [循环与迭代]()
- [ ] [流程控制与错误处理]()
- [ ] [表达式和运算符]()
- [ ] [函数和方法]()
- [ ] [数字和日期]()
- [ ] [对象的使用]()
- [ ] [正则表达式]()
- [ ] [promise对象的使用]()
- [ ] [modules模块]()

#### 中级教程

- [ ] [Promise对象]()
- [ ] [async函数]()
- [ ] [class类]()
- [ ] [不一样的ajax]()
- [ ] [什么是事件循环]()
- [ ] [JSON.stringify()的三个参数]()
- [ ] [ES6、ES7、ES8、ES9、ES10的新特性]()
- [ ] [ES2020新特性]()
- [ ] [工具函数大全]()
- [ ] [常用函数方法整理]()

### JQuery

- [ ] [安装使用]()
- [ ] [基本属性]()
- [ ] Css样式
- [ ] 选择器
- [ ] 文档处理
- [ ] 筛选
- [ ] 事件
- [ ] 效果
- [ ] 事件对象
- [ ] 延迟对象
- [ ] 回调函数

### Vue.js

### React

### Nuxt.js

Nuxt.js是在vue框架上进行封装的，主要是用来解决单体页面的服务端渲染问题，提供网站进行SEO优化的可能

- [ ] [前端读写cookie]()

### UI框架

市面上前端框架层出不穷，不同的技术栈依赖的UI框架也不尽相同，这里将会依据笔者使用的UI框架，以线上项目展示的方式，介绍用过的框架；

#### Bootstrap

#### LayerUI

#### Ant-Design-Vue

#### IView-UI

#### Vant-UI

#### Element-UI

## 后端【Node】

### [Express框架](https://www.expressjs.com.cn/)

- [ ] [框架概念简介]()
- [ ] [brew和tree的安装]()
- [ ] 搭建express基础项目
- [ ] 安装
- [ ] 路由
- [ ] 静态文件
- [ ] 中间件
- [ ] 统一错误处理
- [ ] [express()函数]()
- [ ] [application对象详解]()
- [ ] [request对象]()
- [ ] [response对象]()
- [ ] [router对象]()
- [ ] 数据库集成
- [ ] MVC分层
- [ ] 分环境部署上线

### Koa框架

### Egg.js框架

#### 入门教程

- [ ] [接口参数获取]()
- [ ] [Egg内置对象]()
- [ ] [Config配置]()
- [ ] [Egg生命周期]()
- [ ] [中间件理解]()
- [ ] [Router路由分发]()
- [ ] [Controller控制器]()
- [ ] [Service服务]()
- [ ] [日志输出]()
- [ ] [定时任务]()
- [ ] [HttpClient网络请求]()
- [ ] [Cookie的基本使用]()
- [ ] [Session的基本使用]()
- [ ] [统一异常-错误处理]()
- [ ] [CSRF防范和XSS攻击]()
- [ ] [RESTful API风格]()

#### 插件使用

- [ ] [egg-validate参数校验]()
- [ ] [egg-view-ejs页面渲染]()
- [ ] [egg-redis缓存]()
- [ ] [egg-mysql]()
- [ ] [egg-sequelize]()
- [ ] [egg-socket.io即时通讯]()

#### 最佳实践

- [ ] [图片前端在线剪辑]()
- [ ] [文件上传后台处理]()
- [ ] [MD5加密-解密算法]()
- [ ] [Egg Jwt加密和校验]()

### Nest.js框架

> `Nestjs`框架推崇`Typescript`语法，友好的兼容`Express`框架，因此在学习`Nestjs`框架之前，请务必熟悉`Express`
> 框架、`Typescript`入门。

- [ ] [核心基础概念]()
- [ ] [项目创建初始化入门]()
- [ ] [整合swagger快速生成api文档]()
- [ ] [接口路由请求传参]()

## 数据库

> 主讲数据库基础知识，结合node的简单使用，相关的部署方案参照下方的文档

### MySQL

- [ ] [【服务器版】MySQL的安装部署](https://mp.weixin.qq.com/s/U1OUZYHEChFDx03FvgbMHA)
- [ ] [MySQL优化之Explain参数说明]()
- [ ] 索引
- [ ] sql优化
- [ ] [基于GTID主从复制的原理和基础配置]()
- [ ] [MySQL日志类型把我难哭了，你学废了吗？]()

### Redis

- [ ] [key命名规范与建议]()
- [ ] [redis开发使用规范]()
- [ ] [redis基础介绍]()
- [ ] [redis的简单安装和部署](https://mp.weixin.qq.com/s/Xe-ZDf2kgUWfYSkuULAdlw)
- [ ] 数据类型
- [ ] [redis简单主从集群部署-docker方式]()
- [ ] [memCache与Redis比较]()

### MongoDB

- [ ] 基本介绍
- [ ] 安装部署
- [ ] 简单使用
- [ ] Node下的CURD操作、

## 算法

- [ ] 算法时间、空间复杂度分析

### 查找算法

- [ ] 顺序查找
- [ ] 折半查找
- [ ] 分块查找
- [ ] B树和B+树
- [ ] 散列（Hash）表
- [ ] 字符串模式匹配(KPM)

### 排序算法

- [ ] 插入排序
- [ ] 交换排序
- [ ] 选择排序
- [ ] 归并排序
- [ ] 基数排序

## 设计模式

> 弥补编程语言缺陷

### 架构型模式

- [ ] [MVC模式]()
- [ ] [MVP模式]()
- [ ] [MVVM模式]()
- [ ] [Widget模式]()
- [ ] [简单工厂模式]()
- [ ] [异步模块模式]()
- [ ] [同步模块模式]()

### 技巧型模式

- [ ] [链模式]()
- [ ] [委托模式]()
- [ ] [惰性模式]()
- [ ] [防抖模式]()
- [ ] [节流模式]()
- [ ] [参与者模式]()
- [ ] [等待者模式]()
- [ ] [简单模板模式]()
- [ ] [数据访问对象模式]()

### 23种经典模式

#### 创建型模式（5种）

- [ ] [建造者（Builder）模式]()
- [ ] [单例（Singleton）模式]()
- [ ] [原型（Prototype）模式]()
- [ ] [工厂方法（FactoryMethod）模式]()
- [ ] [抽象工厂（AbstractFactory）模式]()

#### 结构型模式（7种）

- [ ] [代理（Proxy）模式]()
- [ ] [桥接（Bridge）模式]()
- [ ] [外观（Facade）模式]()
- [ ] [适配器（Adapter）模式]()
- [ ] [装饰（Decorator）模式]()
- [ ] [享元（Flyweight）模式]()
- [ ] [组合（Composite）模式]()

#### 行为型模式（11种）

- [ ] [状态（State）模式]()
- [ ] [命令（Command）模式]()
- [ ] [策略（Strategy）模式]()
- [ ] [备忘录（Memento）模式]()
- [ ] [访问者（Visitor）模式]()
- [ ] [中介者（Mediator）模式]()
- [ ] [迭代器（Iterator）模式]()
- [ ] [观察者（Observer）模式]()
- [ ] [解释器（Interpreter）模式]()
- [ ] [模板方法（Template Method）模式]()
- [ ] [职责链（Chain of Responsibility）模式]()

## 开发技巧

### 代码管理

### 代码风格

### 编译工具

## 微服务

### 容器相关

### 服务部署

### 网关

## 服务注册|发现

### Apollo

> 携程开发的配置中心经典项目，可集成多语言客户端，实现灰度部署，在分布式微服务的场景下抽离出服务配置，方便统一管理、发布

### Consul

> 服务注册、发现，key-value键值对管理

### Nacos

> 阿里巴巴出品，适用于微服务下的配置管理，支持Java、Nodejs等主流语言，目前生态良好，技术支持表现一般，属于Apollo替代产品

## 消息中间件

### RabbitMQ

### kafka

### RocketMQ

## RPC框架

### gRPC

> gRPC 一开始由 google 开发，是一款语言中立、平台中立、开源的远程过程调用(RPC)系统，tensorflow分布式与tensorflow
> serving底层通信都是是用的gRPC。我自己基于JavaScript技术栈上较多的接触到gRPC，传送门:[基于js下各框架gRPC的使用]()

- [ ] nodejs下gRPC的简单实用
- [ ] gRPC集成express框架
- [ ] gRPC集成Koa框架
- [ ] gRPC在egg.js下的应用
- [ ] gRPC插件开发示例

### Dubbo

> Alibaba开发的一个RPC框架，远程接口基于Java Interface, 依托于`Spring`框架(**Java技术栈重点研究**)

### Thrift

## ELK

> 全链路日志追踪

- [ ] [ELK基础概念与常用架构整理]()

### ElasticSearch

> 数据存储

### Logstash

> 数据收集

### Kibana

> 数据展示

## 监控工具

### Prometheus

### Grafana

### Zabbix

### lepus(天兔)

## 高可用架构

### MySQL集群

#### 主从同步

> 实现功能：主从服务器数据一致，低延迟、高并发

- [ ] Binlog主从复制
- [ ] GTID主从复制
- [ ] 主主复制

#### 代理中间件

> 实现功能：读写分离、分库分表、负载均衡、故障切换

- [ ] MyCat
- [ ] 360Atlas

#### 可视化监控

> 实现功能：实时监控、可视化数据显示、故障报警

##### Prometheus

- [ ] 监控MySQL集群
- [ ] 监控Mongo数据库
- [ ] 监控Node服务
- [ ] 监控linux服务器
- [ ] 监控redis集群

##### Grafana

- [ ] 基本安装部署
- [ ] 功能介绍和简单操作
- [ ] 可视化数据图形显示界面
- [ ] 常用模板

##### alter-manager

- [ ] 推送到邮箱
- [ ] 推送到钉钉、微信机器人
- [ ] 推送到自定义消息接口（webhook钩子）

#### 压力测试

- [ ] Jmeter

### Redis集群

#### 主从模式

#### 哨兵模式

#### 集群模式

## 程序人生

## 读书整理

### 技术类

- [ ] ES6标准入门
- [ ] 深入浅出的Node.js
- [ ] 更了不起的Node.js - 狼书卷1
- [ ] 了不起的Node.js
- [ ] 分布式消息中间件实践

### 非技术类

> 主要是跟计算机无关的一些书，在看完之后，会选择性的进行思维导图、经典词句整理，也可能添加个人思考

- [ ] 你好孤独 - 陈果
- [ ] 好的，爱情 - 陈果
- [ ] 在细雨中呼喊 - 余华
- [ ] 第七天 - 余华
- [ ] 兄弟 - 余华
- [ ] 文城 - 余华

<!-- #endregion quick-start -->

[//]: # '宣传内容'

<!-- #region we-media -->

## 赞赏列表

以下排名不分先后! [传送门→]() **赞赏过的一定要微信跟我说呀！！！！！！**

<div>
  <a href="https://github.com/ChiefPing" target="_blank" style="margin: 5px">
    <img src="https://avatars2.githubusercontent.com/u/34122068?s=460&v=4" width="50px" style="border-radius:5px;" alt="ChiefPing"/>
  </a>
   <a href="https://github.com/xiaoliuxin" target="_blank" style="margin: 5px">
    <img src="https://avatars2.githubusercontent.com/u/60652527?s=460&v=4"  style="border-radius:5px;"  width="50px" alt="xiaoliuxin"/>
  </a>
</div>

## 赞助商

**以下排名不分先后! 还木有收到赞助，哈哈哈，先留坑**

## 贡献

感谢向仓库提交MR的所有开发者

<div style="text-align: left;">
<a href="https://github.com/142vip/JavaScriptCollection/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=142vip/JavaScriptCollection"  alt="JavaScriptCollection" title="感谢向仓库提交MR的所有开发者"/>
</a>
</div>

## 趋势

<div style="text-align: center" align="center">
    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=142vip/JavaScriptCollection,142vip/core-x,142vip/408CSFamily&type=Date" />
</div>

## 联系作者

若系列文章对你有所帮助，欢迎订阅公众号或微信”骚扰“，获取更多内容。**商务合作请备注来意**

<div style="text-align: center;margin: 10px" id="we-media-container">
    <div align="center" >
            <img src="https://cdn.statically.io/gh/142vip/cdn_service@main/media/main-code.png"
                width="auto"
                style="margin:5px;border-radius: 5px"
                title="关注微信公众号或添加好友联系储凡" alt="关注微信公众号或添加好友联系储凡"/>
    </div>
    <div style="text-align: center;padding: 5px" align="center">
        <a
          href="https://github.com/mmdapl"
          rel="nofollow noreferrer"
          target="_blank"
          title="点击跳转Github主页"
        >
          <img src="https://cdn.statically.io/gh/142vip/cdn_service@main/main-vip/svg/github.svg" alt="CSDN" title="CSDN"
            style="margin: 5px;width: 24px;height: 24px;">
        </a>
        <a
          href="https://gitee.com/Mmdapl"
          rel="nofollow noreferrer"
          target="_blank"
          title="点击跳转码云主页"
        >
          <img src="https://cdn.statically.io/gh/142vip/cdn_service@main/main-vip/svg/gitee.svg" alt="Gitee" title="Gitee"
            style="margin: 5px;width: 24px;height: 24px;">
        </a>
        <a
          href="https://juejin.im/user/448256476724807"
          rel="nofollow noreferrer"
          target="_blank"
          title="点击跳转掘金主页"
        >
          <img src="https://cdn.statically.io/gh/142vip/cdn_service@main/main-vip/svg/juejin.svg" alt="掘金"
            style="margin: 5px;width: 24px;height: 24px;">
        </a>
        <a
          href="https://space.bilibili.com/350937042"
          rel="nofollow noreferrer"
          target="_blank"
          title="点击跳转B站主页"
        >
          <img
            src="https://cdn.statically.io/gh/142vip/cdn_service@main/main-vip/svg/bilibili.svg"
            alt="Bilibili"
            style="margin: 5px;width: 24px;height: 24px;">
        </a>
        <a
          href="https://blog.csdn.net/Mmdapl"
          rel="nofollow noreferrer"
          target="_blank"
          title="点击跳转CSDN博客主页"
        >
          <img
            src="https://cdn.statically.io/gh/142vip/cdn_service@main/main-vip/svg/csdn.svg"
            title="点击跳转CSDN博客主页" alt="CSDN"
            style="margin: 5px;width: 24px;height: 24px;"
          >
        </a>
    </div>
</div>

交流/加群/互看朋友圈、**聊天/提问/建议/提需求** 可以在公众号直接**私信**，有时间即会回复，偶尔的延迟和疏漏还请小伙伴们谅解，蟹蟹。

<!-- #endregion we-media -->