# web-notes

**Repository Path**: wfanny/web-notes

## Basic Information

- **Project Name**: web-notes
- **Description**: web前端笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-06
- **Last Updated**: 2021-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 我的前端笔记

## Version of node vs node-sass

安装node-sass
```sh
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
```

安装指定版本node对应的node-sass

```sh
npx -p node@12.19.0 npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
```

![node vs node-sass](./images/node-vs-node-sass.png)


## 思考
1. 思考一个问题，用什么方式可以把前端的管理、氛围、凝聚力做起来？
管理：
  1. 制定合理的管理条例
  2. 合理的沟通机制（如：定时&及时的进行沟通），促进管理者与团队成员的相互了解，从而增强团队协作能力
  3. 团队内部采取`技术分享会`，`一带一`，`一带多`等方法，增强团队专业能力
  4. 合理安排各成员的工作内容, 保证任务保质保量的按时完成
  5. 及时发现问题，合理调整管理条例

氛围：
  1. 要立一个flag，想要营造怎样的氛围？
  算了，还是顺其自然吧

凝聚力:
  


## JavaScript笔记

### requestAnimationFrame

```js
this.navLeft = i*84
let move = 0
const animloop = () => {
  move++;
  this.navLeft++;
  
  let rafId = requestAnimationFrame(animloop);
  //如果left等于7, 停止动画
  if(move == 17){
    console.log(9999)
    cancelAnimationFrame(rafId)
  }
};
animloop()
```

### content-type类型

以下三种是比较常见的三种 content-type类型

* Content-Type:application/json

application/json 以json字符串的格式发送给后端 是Content-type的默认值

* Content-Type:application/x-www-form-urlencoded

x-www-form-urlencodedd是原生表单的默认请求方式，传递时数据需要处理

1.使用qs.stringify处理数据 (qs是axios自带的，无需导入）
2.URLSearchParams
3.querystring

* Content-Type:multipart/form-data

是form表单的方式提交, 一般用于文件上传
```js
let formData = new fromData()

formData.append("name", value)
```


### 解构赋值

![解构赋值](./images/js/js-01.png)
![解构赋值](./images/js/js-02.png)


### 对象属性命名规则

![解构赋值](./images/js/js-03.png)

<br>
<hr>
<br>

## Node笔记

### npm运行出现堆内存溢出问题

**npm运行出现堆内存溢出问题**

![堆内存溢出](./images/node/node-01.png)

#### 问题原因

CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆内存不足。查阅网上资料后，这里说的 JavaScript 其实就是 Node。

JavaScript 是一款拥有「自动垃圾回收」功能的编程语言。V8 作为一个 JavaScript 引擎，最初服务于 Google Chrome 浏览器的。它随着 Chrome 的第一版发布而发布以及开源。现在它除了 Chrome 浏览器，已经有很多其他的使用者了。诸如 NodeJS、MongoDB、CouchDB 等。在 Node 中通过 JavaScript 使用内存时只能使用部分内存（64位系统下约为1.4 GB，32位系统下约为0.7 GB）。如果项目十分庞大，超出了V8对于Node默认的内存最大限制，就会出现此问题。

#### 解决方案一

1. 打开一个cmd窗口
2. setx NODE_OPTIONS --max_old_space_size=8192（这个操作设置用户变量）
3. 关闭所有cmd /代码编辑器
4. 重新打开cmd并再次运行npm命令

知识点：
SETX命令：Window XP 以上的系统都自带了该命令（如果没有，下载一个Setx.exe)，这种方式为永久设定环境变量。
设置用户环境变量 setx path “%JAVA_HOME%\bin”
设置系统环境变量 setx path “%JAVA_HOME%\bin” /m

使用时，应该注意：
1. setx设置环境变量后，将在新打开的终端中生效，当前终端不会立即生效。
2. setx在设置变量的长度超过1024，会截取多出的字符。
3. setx还可以操作远程计算机，具体参数设置百度一下setx用法。
4. setx在设置某一变量的值，如果已经存在该变量会覆盖之前的值。所以正确方式是：要保存值=获取当前该变量的值+新值。

#### 解决方案二

1. 打开你的工程中的package.json文件
2. 找到
```json
{
  "scripts": {
    "build": "node build/build.js"
  }
}
```
3. 在build中加入–max_old_space_size=8192
即：
```json
{
  "scripts": {
    "build": "node --max_old_space_size=8192 build/build.js"
  }
}
```

> 以上参考：《深入浅出Node.js》

<br>
<hr>
<br>

## css笔记
### Transition，Transform闪烁问题解决办法

如果发现这些动画导致某些元素或者容器闪烁抖动时，可以使用以下方案解决:

**方法一**

可以开启浏览器**GPU硬件加速**

现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。
```css
.tran {  
  -webkit-transform: translate3d(200px,200px,200px)
  rotate3d(200px,200px,200px,-120deg)
  scale3d(0.5, 0.5, 0.5);
}
```

可是在一些情况下，我们并不需要对元素应用3D变换的效果，那怎么办呢？这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。
```css
.tran {  
  -webkit-transform: translateZ(0);  
  -moz-transform: translateZ(0);  
  -ms-transform: translateZ(0);  
  -o-transform: translateZ(0);  
  transform: translateZ(0);  
  /* Other transform properties here */
}
```

**方法二**

可以在使用动画属性的元素上（或发生抖动的元素上）添加如下声明：
```css
.listname{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /*或者*/

  -webkit-backface-visibility: hidden;  
  -moz-backface-visibility: hidden;  
  -ms-backface-visibility: hidden; 
  backface-visibility: hidden;  
  -webkit-perspective: 1000;  
  -moz-perspective: 1000;  
  -ms-perspective: 1000;  
  perspective: 1000;
}
```

但是有的时候一些完全不相关的元素也跟着抖动闪烁，可以在body元素上做如下声明：
```css
body {
  -webkit-transform: translate3d(0, 0, 0) ;
  transform: translate3d(0, 0, 0);
}
```

<br>
<hr>
<br>

## docker教程

Docker 是一个开源的应用容器引擎，基于 Go 语言 并遵从 Apache2.0 协议开源。

Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。

容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。

### 打包项目

1. 在`package.json`的同一目录创建 `Dockerfile` 文件

```dockerfile
 # syntax=docker/dockerfile:1
 FROM node:12-alpine
 RUN apk add --no-cache python g++ make
 WORKDIR /app
 COPY . .
 RUN yarn install --production
 CMD ["node", "src/index.js"]
```

2. 打开项目目录终端，运行如下 `docker build` 命令

```sh
docker build -t getting-started .
```

`-t`: 设置 image_name
`getting-started`: image_name
`.`: 说明在当前目录下查找 `Dockerfile` 文件 (应该可以更换指定目录)

### 启动项目

1. 使用 `docker run` 启动项目， 并指定 `image_name`, 如下：

```sh
 docker run -dp 3000:3000 getting-started
```

2. 几秒后， 访问 http://localhost:3000

### 移除项目

1. 获取`ID of the container`
```sh
docker ps
```

2. 停止`container`
```sh
# Swap out <the-container-id> with the ID from docker ps
docker stop <the-container-id>
```

3. 移除`container`
```sh
docker rm <the-container-id>
```

4. 使用docker面板移除项目

![移除docker项目](./images/dashboard-removing-container.png)


### 分享项目

1. 创建项目

在<a href="https://hub.docker.com/">Docker Hub</a>中创建一个`public repo`。

2. Push 项目


<br>
<hr>
<br>

## Jenkins

Jenkins是开源CI&CD软件领导者， 提供超过1000个插件来支持构建、部署、自动化， 满足任何项目的需要。

> CI(Continuous Integration): 持续集成， CD(Continuous Delivery): 持续交付