My-Note-Blog
My-Note-Blog copied to clipboard
huangchucai
主要生活blog
## Vue服务端渲染 **前言：** 现在浏览器对于spa页面的抓取能力还是比较差，本文从零开始搭建一个简单的Vue服务端渲染的案例。 ### 本质 1. 服务端和客户端共用代码和入口文件 2. 通过webpack分开打包服务端和客户端代码 ， 然后打包 3. 通过webpack打包后服务端的bundle后，通过服务端模板`server-index.html`和`vue-server-renderer`生成一个渲染bundler，返回返回给用户，其中**服务端模板需要引入客户端打包的js**来进行一下事件和交互。 ### 项目构建 1. 创建项目 `mkdir vue-ssr && cd vue-ssr` 2. 初始化项目 `npm init -y` 3. 添加对应的依赖...
## 前端自动化部署 由于本人最近在公司搭建Jenkins自动部署方面，特意总结一下关于前端自动化部署的使用，本文主要从4个方面来讲述整个流程 1. docker的介绍 2. 使用docker构建Jenkins 3. Jenkins自动化发布 4. Nginx反向代理 ### Docker ##### 1. 基本概念： **Docker**是一个[开放源代码](https://zh.wikipedia.org/wiki/開放原始碼)软件项目，让应用程序部署在[软件货柜](https://zh.wikipedia.org/wiki/作業系統層虛擬化)下的工作可以自动化进行，借此在[Linux](https://zh.wikipedia.org/wiki/Linux)操作系统上，提供一个额外的软件[抽象层](https://zh.wikipedia.org/wiki/抽象層)，以及[操作系统层虚拟化](https://zh.wikipedia.org/wiki/作業系統層虛擬化)的自动管理机制[[1\]](https://zh.wikipedia.org/wiki/Docker#cite_note-SYS-CON_Media-1)。 ##### 2. 核心概率： Docker中有2个核心镜像（`image`）和容器（`container`） **镜像** ： 是由一系列的只读的层构建，每一层对应`DockerFile`里面的声明构成。如果你有装过 Windows 操作系统，那么 Docker 镜像特别像“Win7纯净版.rar”文件 **容器**： 容器（container）的定义和镜像（image）几乎一模一样，也是一堆层的统一视角，唯一区别在于容器的最上面那一层是可读可写的。...
# jest学习总结 最近要给项目添加单元测试，所以总结一下jest单元测试的语法点和单元测试的用意。 ## 为什么要写单元测试 1. 保持代码的可持续迭代 2. 减少bug 3. 减少调试时间 4. 放心的进行重构 ## 基本语法 #### 相等判定 1. toBe() => 实现原理是Object.is() 2. toEqual() => 针对object 3. not.toBe(). => 不相等 ```javascript...
## jest mock讲解 ### jest.fn（） **创建**：jest 创建mock最简单的方法就是直接使用`jest.fn()` **使用**： 1. jest.fn接受一个callback当做函数真正的调用，如果没有函数内部的实现，会默认的返回undefined 2. 会返回一个`mock`属性，来展示mock函数的一些调用情况 **用途：** 1. 跟踪函数的调用情况（this, 返回值，参数） 2. 判定一个回调函数是否被执行（一般用途） 创建一个`demo.js` ```javascript import axios from 'axios'; export const getData = () =>...
## 栈和队列 ### 定义 - **栈：** LIFO(Last in first out) - **队列**：FIFO(First in first out) #### 栈的初始化和基本操作 ##### Java类库: ` stack stack = new Stack();` ##### 基本操作(后进先出） | 方法 |...
### 数组 ##### 注意点 1. 输入是否合法 2. 数组是否排序 3. 是否重复元素 4. 返回的结果 ### 常见面试题 #### 1. 两数之和 给定一个整数数组(无重复元素)和一个目标值，找出数组中和为目标值的两个数 1. 按照从小到大的顺序输出结果对 2. 可以假设每个输入只对应一种答案 ```java Input: numbers={2, 7, 11, 15}, target=9 Output:...
## JS引擎的工作原理 ##### 相关知识点 1. 执行环境栈（上下文栈）: 当函数执行前，为了让程序保证能够按照正确的顺序被执行 2. 全局对象： 全局初始化的时候创建 3. 执行环境（执行上下文）: 当函数执行的时候，会创建函数的执行环境 4. 变量对象（`VO`）： 全局对象的一些属性的集合 5. 活动对象 （`AO`）： 函数执行的时候，定义函数内部的一些属性 6. 作用域： 函数执行的时候，会创建函数的执行作用域 7. 作用域链： 函数执行的时候，添加到作用域链中 8. JS 是静态作用域语言，其在**程序声明阶段**，所有的作用域都将确定。 ###...
## rebase和merge的区别 #### 场景 1. 现在有2个分支，我们的开发分支feature和主分支master 2. 我们在开发分支已经提交了部分内容 3. 这个时候，master分支有其他的功能提交  #### rebase操作 1. 我们切换到我们的开发分支`git checkout feature` 2. 使用`git rebase master`进行合并  总结：可以看出我们在feature原来的**提交会被删除掉**，然后基于master分支的又重新开始新的提交了 **注意： ** 1. 永远**不要在公共**分支进行rebase的操作 2. rebase的操作并不会改变master分支的内容，master分支还是在c7上，如果要发布上线提mr操作`git checkout...
# git的高级小知识 ### 基础知识 我们知道git一般把**区域**分为四个部分，通过不同的命令可以完成每一个区域的切换。对于这四种区域，内心一定要清楚的记住。  ```javascript git add ..=> 把工作区的内容放入暂存区 git commit .. => 把暂存区的内容提交到本地仓库 git push .. => 把本地仓库推送到远程仓库 ``` ## 版本知识 ##### 版本知识 一般`HEAD`表示当前版本: `HEAD^ 表示上一个版本，HEAD^^上上个版本，HEAD~100往上100个版本`。 **当前版本记录**...
## TypeScript ### 基础类型 1. Number ```javascript const age: number = 25 ``` 2. String ```javascript const name: string = 'hcc' ``` 3. Boolean ```javascript const isDone: boolean = false...