npm run

1.npm run 发生了什么？

npm run 命令运行的是package.json 文件配置的脚本，

假设在package.json 文件配置了以下运行脚本：

1

"scripts":{"lint": "vue-cli-service lint"}

我们执行命令 npm run lint，等价于执行./node_modules/.bin/vue-cli-service lint

可以知道：

npm run lint 命令实际运行的是项目文件目录./node_modules/.bin 下的可执行文件

npm run 会自动把./node_modules/.bin 添加到我们配置的 scripts 指令前面，就是说：

我们可以这样写：

1

"scripts":{"lint":"vue-cli-service lint"}

而不必：

1

"scripts":{"lint": "./node_modules/.bin/vue-cli-service lint"}

2.bin

之所以npm run 能运行指定脚本，是因为依赖的库为我们提供了相关的可执行文件

在依赖库中的package.json 中可以看到如下配置：

1
2
3
4
5

{
  "bin": {
    "myapp": "./cli.js"
  }
}

在执行npm install 命令安装依赖的时候，

更多

bin

vue源码阅读笔记

1.new Vue发生了什么

2.Vue实例的挂载实现

3.render

​ 用来把实例渲染成一个虚拟Node。 最终调用了createElement方法，并返回一个vnode。

4.虚拟DOM

参考https://github.com/snabbdom/snabbdom

###5.createElement

创建虚拟DOM的方法

_createElement方法的封装

_createElement(context, tag, data, children, normalizationType)

五个参数：

context: component类型

tag：标签，字符串或者component

data：VNodeData类型

children： 任意类型

normalizationType：子节点规范的类型

这个方法主要的流程：

• children的规范化，涉及以下两个方法

​ normalizeChildren(children) 调用场景有两个：render是用户自己手写的、编译slot和v-for时

simpleNormalizeChildren(children) 调用场景是render函数生成的，理论上编译生成的children都是VNode类型，但这里有一个例外，就是functional component函数式组件返回的是一个数组而不是一个根节点，

• VNode的创建

​ 先判断tag，tag是字符串类型，继续看是否为内置的一些节点，是的话直接创建一个普通的VNode，如果是已注册的组件名则通过createComponent创建一个组件类型的VNode，否则创建一个未知的标签的VNode节点。

6.update

把VNode渲染成真实的DOM

​ Vue的_update是实例的一个私有方法，它被调用的时机有两个：

• 一个是首次渲染，

• 一个是数据更新的时候

​ 核心是调用vm.__patch__方法。这个方法在不同的平台定义是不一样的。

7.createComponent

createElement对tag判断，当tag不是普通html标签时，以createComponent方法创建一个组件VNode

• 构造子类构造函数
• 安装组件钩子函数，暴露patch流程中的钩子函数，方便做一些额外操作
• 实例化VNode

8.patch

JS创建私有变量属性

1.使用WeakMap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const wm = new WeakMap();
const setPrivateProp = function(obj, prop, val){
	if(!wm.has(obj)) wm.set(obj,{})
	let v = wm.get(obj); 
	v[prop] = val
}
class User {
  constructor(name){
		this.setName(name);
  }
  getName(){
  	return wm.get(this).name;
  }
  setName(name){
  	setPrivateProp(this, "name", name);
  }
}

上面的案例还是可以访问到私有变量

1
2

const user = new User("jay");
wm.get(user).name; //jay

2.闭包，将上面的案例用立即执行函数封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

(function User(){
  const wm = new WeakMap();
  const setPrivateProp = function(obj, prop, val){
    if(!wm.has(obj)) wm.set(obj,{})
    let v = wm.get(obj); 
    v[prop] = val
  }
  class User {
    constructor(name){
      this.setName(name);
    }
    getName(){
      return wm.get(this).name;
    }
    setName(name){
      setPrivateProp(this, "name", name);
    }
  }
  return User
})()

Git

1.版本回退

git reset

1
2

git reset --hard HEAD^		回到上一个版本
git reset --hard ca1020   回到指定版本

HEAD^ 表示上一个版本 HEAD^^ 上上一个版本 HEAD~3 往上三个版本

ca1020表示某个commit的id，怎么找到想恢复版本的commit id，使用git reflog：

1
2
3
4
5
6
7

znh@99-12-199-38 webpack-vue-demo % git reflog           
4a48ea1 (HEAD -> master) HEAD@{0}: reset: moving to 4a48
d2770f4 HEAD@{1}: reset: moving to d277
4a48ea1 (HEAD -> master) HEAD@{2}: commit: 配置字体文件打包2
d2770f4 HEAD@{3}: commit: 配置字体文件打包
e852570 HEAD@{4}: commit: 加载图片用自带的AssetsModules
aedbeea HEAD@{5}: commit: 手写plugin

2.撤销修改

git checkout -- filenname

• 撤销还没添加到暂存区的修改，让filenname 文件回到最近一次git commit或git add时的状态

• 假设修改已经添加到暂存区了，怎么撤销？git reset：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

znh@99-12-199-38 webpack-vue-demo % git status
On branch master
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        modified:   src/pages/Home/index.vue
【此时修改在暂存区】
znh@99-12-199-38 webpack-vue-demo % git reset HEAD src/pages/Home/index.vue 
Unstaged changes after reset:
M       src/pages/Home/index.vue
znh@99-12-199-38 webpack-vue-demo % git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   src/pages/Home/index.vue
【执行git reset 后，此时修改回到工作区】
no changes added to commit (use "git add" and/or "git commit -a")
znh@99-12-199-38 webpack-vue-demo % git checkout src/pages/Home/index.vue
【此时执行git checkout -- filename即可撤销修改】

• 撤销提交到版本库的修改，使用git reset，参考版本回退

删除文件，在文件管理器删除了某个文件：

确实要删除：

1
2

git rm filename 
git commit -m "删除文件filename"

删错了，可以从版本库中恢复，前提是该文件之前已经提交到版本库了：

1

git checkout -- filename

3.git代理设置

1
2
3
4
5
6

#设置
git config --global https.proxy http://127.0.0.1:1080
git config --global https.proxy https://127.0.0.1:1080
#取消代理
git config --global --unset http.proxy
git config --global --unset https.proxy

兼容性问题

1.不同浏览器的标签默认的margin和padding不一样。

1

*{margin:0;padding:0;}

前端缓存

什么是缓存？缓存分类？缓存工作机制？

浏览器请求资源过程

浏览器发起请求到收到服务器响应的过程：

上图说明了一个浏览器向服务端请求资源的大概过程，但是有些步骤还是可以细分的：

x1~x4 分别为性别、年龄、身高、体重，假设模型：

\[ y=w_{0}+w_{1}x_{1}+w_{2}x_{2}+w_{3}x_{3}+w_{4}x_{4} \]

使用多元线性回归

nginx

内容为 nginx基本使用，nginx代理跨域理解

Nginx是一个轻量级、高性能、稳定性高、并发性好的HTTP和反向代理服务器。

git rebase 使用场景，代码commit呈现干净的时间线

https://segmentfault.com/a/1190000019455172

通常使用Git做分支合并有两种方式：merge 和 rebase。

mac地址

​ 以太网规定，连入网络的所有设备，都必须具有"网卡"接口。数据包必须是从一块网卡，传送到另一块网卡。网卡的地址，就是数据包的发送地址和接收地址，这叫做MAC地址。

ip地址

规定网络地址的协议，叫做IP协议。它所定义的地址，就被称为IP地址。 目前，广泛采用的是IP协议第四版，简称IPv4。这个版本规定，网络地址由32个二进制位组成。 习惯上，我们用分成四段的十进制数表示IP地址，从0.0.0.0一直到255.255.255.255。

​ 互联网上的每一台计算机，都会分配到一个IP地址。这个地址分成两个部分，前一部分代表网络，后一部分代表主机。比如，IP地址172.16.254.1，这是一个32位的地址，假定它的网络部分是前24位（172.16.254），那么主机部分就是后8位（最后的那个1）。处于同一个子网络的电脑，它们IP地址的网络部分必定是相同的，也就是说172.16.254.2应该与172.16.254.1处在同一个子网络。

IP协议的作用主要有两个，一个是为每一台计算机分配IP地址，另一个是确定哪些地址在同一个子网络。