**easymock是一款后台接口的mock生成平台**

**本文将记录 EasyMock 的本地部署方法，以下操作均在Linux环境下进行**



## 1. 创建容器
```bash
docker run -it --restart=always -p 7300:7300  --name easymock centos
```

## 2. nvm安装
```bash
# 下面两个安装方式，任选其一就行
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

source ~/.bashrc # 加载环境配置 
nvm --version  # 可查看nvm版本，说明安装成功
```

## 3. 利用nvm安装node（8.9.1）
```bash
nvm install 8.9.1 # 安装8.9.1版本的node（npm会同步当前版本的node）
nvm alias n8 8.9.1 # 将 8.9.1版本的别名设置为n8
nvm use n8   
```

## 4. 拉取easymock源码
```bash
yum install -y git  # 下载git
git clone https://github.com/easy-mock/easy-mock.git # 拉取源码
cd easy-mock && npm install # 安装项目环境依赖包
```

## 5. mongodb(>=3.4)安装
```bash
cd /opt
curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.10.tgz  # 下载压缩包
tar -zxvf mongodb-linux-x86_64-4.0.10.tgz # 解压
mv mongodb-linux-x86_64-4.0.10 /usr/local/mongodb  # 移动
cd / && mkdir data && cd data && mkdir db  # mongodb默认存放位置，需提前创建
```

## 6. redis（>=4.0）安装
```bash
curl -O http://download.redis.io/releases/redis-5.0.5.tar.gz  
tar xzf redis-5.0.5.tar.gz
cd redis-5.0.5
# make命令使用（安装依赖）
yum -y install gcc automake autoconf libtool make
yum install gcc gcc-c++
make   # 安装redis（需等待五六分钟）
mv redis-5.0.5  /usr/local/redis  # 移动
```

## 7. 全局命令
```bash
ln -s /usr/local/mongodb/bin/mongod /usr/bin/mongod
ln -s /usr/local/mongodb/bin/mongo  /usr/bin/mongo
ln -s /usr/local/redis/src/redis-server /usr/bin/redis-server
ln -s /usr/local/redis/src/redis-cli  /usr/bin/redis-cli
mongod  # 若能执行，说明配置成功
redis-server # 若能执行，说明配置成功
```

## 8. 启动数据库
```bash
cd /
vi start.sh
```
将下面内容写进 start.sh
```bash
nohup mongod &
nohup redis-server & 
```
接着运行如下命令，
```bash
chmod u+x *.sh  # 给予权限
./start.sh   # 脚本若能运行，说明启动成功
mongo      # 查看命令是否正常执行
redis-cli   # 查看命令是否正常执行
```

## 9. 部署easymock npm部署
```bash
 cd easy-mock/
 npm run dev # 服务是否可以开启（测试环境）
 npm run build # 打包正式环境
 npm start # 服务是否可以开启（正式环境）
```

## 10. pm2部署easymock
```bash
 npm install pm2 -g  # 安装pm2
 pm2 start app.js  # 服务是否可以正常启动（测试环境，页面初始化较慢，需等待三四分钟）
 pm2 delete 0 # 删除测试环境守护
 vi pm.yml    # 新建pm.yml
 ```
将以下内容写进pm.yml
```yaml
apps:
script: ./app.js
name: easymock
env:
       NODE_ENV: production
       HOST: localhost
env_dev:
     PORT: 3000
```
接着运行以下命令，
```bash
 pm2 start pm.yml   # 以yml方式启动（正式环境）
 pm2 delete 0   # 删除
 vi package.json  # 别名配置
```
修改package.json，在scripts下面添加一段命令
```
"publish": "pm2 start pm.yml"
```
接着运行以下命令，
```bash
 npm run publish   # 部署服务（正式环境）
 ```


--------------------完结--------------------

easymock 本地部署

## 微信浏览器下字体大小变化（导致rem布局错乱）
https://www.cnblogs.com/cassiel/p/7794599.html

## 微信下 SPA 单页 路由跳转至支付页，无法支付问题
```js
export const payWeiXinCompatibleMixin = {
  beforeCreate () {
    if (this.$route.query.reload) return
    let { isIOS, isWechat } = this.$sdk
    if (isIOS && isWechat) {
      let href = location.href
      href += `${href.indexOf('?') === -1 ? '?' : '&'}reload=true`
      location.replace(href)
      location.reload()
    }
  }
}
```

微信浏览器兼容问题

### ios下底部input框被遮挡（第三方输入法还是有问题）

第一步：

父级元素CSS设置：
```css
z-index: 99;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
```
底部子元素CSS设置
```css
z-index: 9999;
position: absolute;
left: 0;
```

第二步：

页面加载时，动态计算top值，此时页面初始化时，底部元素就会被固定在底部
```js
mounted() {
    this.$nextTick(()=>{
        let pageHeight = document.documentElement.clientHeight
        this.top = pageHeight - this.$refs.footer.clientHeight
    })
}
```

第三步：

input获取焦点时，让底部元素在输入法之上
```js
handleFocus() {
    let initBodyHeight = document.body.clientHeight;
    let footerHeight = this.$refs.footer.clientHeight;
    setTimeout(() => {
        let u = navigator.userAgent, app = navigator.appVersion;
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        document.body.scrollTop = document.body.scrollHeight;
        if (isIOS && document.body.clientHeight !== initBodyHeight) {
            this.top = initBodyHeight - footerHeight
        }
    }, 300);
}
```



第四步：此情况出现在需要固定的底部元素为子页面时：

例：home元素需要使用fixed布局
```html
<div class="home">
    <router-link to="/publish" class="add"></router-link>
    <div class="content-container"> </div>
    <router-view></router-view>
</div>
```
此时需改变home的样式
```css
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
height: 100%;
```








IOS 下底部 input 框被遮挡

**一年到头，做下今年的总结，写下明年的期待。
2018年很多事情从无到有，有喜有悲。最开心的是找到了自己愿用一生去守护的人(#^.^#)（手动比心），最难过的是因为个人原因辞去了第一家的工作，毕业前就加入这家公司，有很多聊得来的小伙伴，一起熬夜看世界杯，一起加班，一起吃饭玩耍，希望公司和他们以后都能有更好的发展。还有其余一大堆的事情，就BalaBalaBala**



于2018年10月加入新公司-瀚越太古，期间完成的工作如下：
1. 使用Mpvue完成公司小程序的开发
2. Pc官网的优化
3. 运营后台模块
4. h5开发


部门的小伙伴也很给力，希望一起进步，一起学习。

2018年技术成长最快的一年，感谢这一年坚持不懈的自己。

写下今年的技术开拓，对自己的今年进行一个交待。

前端技术类:
- Vue深度学习，Vue、Lodash、Jquery源码解析阅读
- Es基础加固，函数式编程
- GraphQL，结合GraphQl+Element-UI重新封装组件，减少工作实际代码量以及GraphQl command制作，一键生成所有枚举
- 表单验证插件、Webpakc预加载插件制作
- Vue+Cordova混合开发原生应用，地图、摄像头、蓝牙功能整合
- Electron开发桌面应用，Nedb,IndexedDB学习使用
- 微信公众号开发，微信小程序开发
- 后台管理系统模板搭建，mock数据结合
- whistle、Proxy SwitchyOmega，代理抓包
- GIT深度掌握
- 前端性能优化，http深度学习
- AMD，CommonJs源码实现
- XSS、CSRF攻击
- Mpvue学习使用，Nuxt ssr 后端渲染

Node后端类：
- Express、Koa学习，源码解析阅读
- Mongodb，Mongoose
- Redis
- Koa中间件学习，Koa中间件制作，便于日常开发
- Nginx部署服务
- 服务器+域名部署绑定，xshell管理服务器
- Node爬虫
- CI/CD,TeamCity、JenKins持续集成，持续部署


2019年希望能有新的突破，做技术实质是在做交流，希望今年交流这块能有大方面提升，
列出2019年关于技术方面想做的事情：
- Docker深度掌握
- React + TS 学习
- React 源码解析阅读
- React Native 学习
- 前端自动化测试
- 制作2~3个插件，便于日常开发以及性能优化方面
- PWA
- Node深度学习

冲冲冲!!!

2018年自我总结

**当谈到JavaScript时，ES6（ECMAScript 6）是最重要的一个版本。它是JavaScript语言的一项重大更新，也被称为ECMAScript 2015。ES6引入了一系列的新功能，包括箭头函数、let和const关键字、类和模块等。学习ES6是每个现代JavaScript开发人员必备的技能之一。**



## let

**块级作用域**
- 在 { } 内用let声明的变量，只在当前的{ } 内生效 
- 另外，for循环有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。所以for循环{ }内部访问的是for循环声明变量的父作用域

**不存在变量声明提升**

**暂时性死区**

**变量x使用let命令声明，所以在声明之前，都属于x的“死区”**

**不允许重复声明**

**函数在块级作用域下**
- 允许在块级作用域内声明函数。
- 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
- 同时，函数声明还会提升到所在的块级作用域的头部
- 块级作用域下的函数会被提升

## const
- 对于const来说，只声明不赋值，就会报错。
- 其他特性与let一样


var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。


## 数组的解构
如果解构不成功，变量的值就等于undefined。
![image.png](https://blog.ccz.life/static/img/0e881f9cb8368a14a72f74b0bf164081.image.png)

![image.png](https://blog.ccz.life/static/img/d62764ead4eab342018a8f13b17a34e7.image.png)

**默认值**

解构赋值允许指定默认值。

![image.png](https://blog.ccz.life/static/img/037445ddbbf60c7b21ccec204286ac81.image.png)

**对象的解构**
first和last属于模式，模式不会被赋值

![image.png](https://blog.ccz.life/static/img/382952c880dc81217d4b3c020a4f4306.image.png)


**字符串的解构**
![image.png](https://blog.ccz.life/static/img/878bb6946130ccc66b0cc58888976176.image.png)


## 字符串的扩展
![image.png](https://blog.ccz.life/static/img/f171aa3466f20aa406b1a9d8eec08f7b.image.png)

## 数值的扩展
![image.png](https://blog.ccz.life/static/img/6195dda7984d96a3fb75fa6898691f21.image.png)

## 函数的扩展

**参数默认值的位置**

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

函数的length属性
指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

![image.png](https://blog.ccz.life/static/img/7f1177ae466af37c4d81e7c134076a93.image.png)

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。
![image.png](https://blog.ccz.life/static/img/8fd3cee4f6ff26db9a8c5da7b63d7473.image.png)

## 箭头函数

- 内部this对象指向创建期上下文对象
- 不能作为构造函数，也就是不能被new使用
- 没有arguments
- 不能作为生成器函数
- 箭头函数的this会在函数申明的时候，就被绑定。后续你使用apply或者call都无法改变this作用域。
- 普通函数的this作用域只有在被执行的时候，才会被绑定。

## promise
- then和catch都会默认返回成功状态的Promise
```js
let p = new Promise((resolve, reject) => {
  reject(10)
})
p.then(() => {
  console.log('success1')
}).catch(() => {
  console.log('fail1')
}).then(() => {
  console.log('success2')
}).catch(()=>{
  console.log('fail2')
})

// fail1 第一步返回reject，所以执行fail1
// success2 第二步catch默认返回resolve，所以执行success2
```

- 链式下一个的then或者catch，会根据上一个是否成功，进行返回。而不是第一个成功了，后面所有的就都会走then

- catch的执行，如果catch前面有三个then，任一一个then执行了reject，都会直接跳到catch
```js
let p = new Promise((resolve, reject) => {
  resolve(10)
})

p.then(() => {
  console.log('success1')
  return Promise.reject()
}).then(() => {
  console.log('success2')
}).then(() => {
  console.log('success3')
}).catch(()=>{
  console.log('fail1')
})

// success1 第一步resolve，执行success1
// fail1  第二步执行reject，直接跳转到catch，执行fail1
```

## generator
```js
function* test(){
  let val= yield 3 // val值由下次的next实参决定，也就是300
  console.log(val)
}
let iterator=test()

iterator.next() // 返回{value: 3, done: false}
iterator.next(300) // 这里传入的300，决定val的返回值，返回{value: undefined, done: true}
```



封装自执行generator
```js
function* test () {
  console.log('start')
  let val1 = yield new Promise((resolve) => {
    setTimeout(() => {
      resolve(100)
    }, 1000)
  })
  console.log('2',val1)
  let val2 = yield '3'
  console.log(val2)
  console.log('end')
}

// 封装方法：
function co (fn) {
  let iterator = fn()
  function next (d) {
    let result = iterator.next(d)
    if (result.done) return
    if (Object.prototype.toString.call(result.value) !== '[object Promise]') {
      next(result.value)
      return
    }
    result.value.then((data) => {
      next(data)
    })

  }
  next()
}

co(test)
 
//start
//2 100
//3  
//end  
```

## iterator
对象迭代器实现
```js
let obj={
  a:1,
  b:2
}
obj[Symbol.iterator]=function(){
  let values=Object.values(obj)
  let i=0
  return {
    next:function(){
      return {
        value:values[i++],
        done:values.length>=i
      }
    }
  }
}
let iterator=obj[Symbol.iterator]()
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
```

## Class

### 私有方法

私有方法和私有属性，是只能在类的内部访问的方法和属性，外部不能访问。这是常见需求，有利于代码的封装，但 ES6 不提供，只能通过变通方法模拟实现。一种做法是在命名上加以区别。
```js
class Widget {

  // 公有方法
  foo (baz) {
    this._bar(baz);
  }

  // 私有方法
  _bar(baz) {
    return this.snaf = baz;
  }

  // ...
}
```
上面代码中，_bar方法前面的下划线，表示这是一个只限于内部使用的私有方法。但是，这种命名是不保险的，在类的外部，还是可以调用到这个方法。
另一种方法就是索性将私有方法移出模块，因为模块内部的所有方法都是对外可见的。
```js
class Widget {
  foo (baz) {
    bar.call(this, baz);
  }

  // ...
}

function bar(baz) {
  return this.snaf = baz;
}
```
上面代码中，foo是公开方法，内部调用了bar.call(this, baz)。这使得bar实际上成为了当前模块的私有方法。
还有一种方法是利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值。
```js
const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass{

  // 公有方法
  foo(baz) {
    this[bar](baz);
  }

  // 私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }

  // ...
};
```
上面代码中，bar和snaf都是Symbol值，一般情况下无法获取到它们，因此达到了私有方法和私有属性的效果。但是也不是绝对不行，Reflect.ownKeys()依然可以拿到它们。
```js
const inst = new myClass();

Reflect.ownKeys(myClass.prototype)
// [ 'constructor', 'foo', Symbol(bar) ]
上面代码中，Symbol 值的属性名依然可以从类的外部拿到。


ES6提供的方法
class Foo {
  #a;
  #b;
  constructor(a, b) {
    this.#a = a;
    this.#b = b;
  }
  #sum() {
    return #a + #b;
  }
  printSum() {
    console.log(this.#sum());
  }
}
```

### 私有属性
目前，有一个提案，为class加了私有属性。方法是在属性名之前，使用#表示。
```js
class IncreasingCounter {
  #count = 0;
  get value() {
    console.log('Getting the current value!');
    return this.#count;
  }
  increment() {
    this.#count++;
  }
}
```
上面代码中，#count就是私有属性，只能在类的内部使用（this.#count）。如果在类的外部使用，就会报错。
```js
const counter = new IncreasingCounter();
counter.#count // 报错
counter.#count = 42 // 报错
```
上面代码在类的外部，读取私有属性，就会报错。

### 静态属性
```js
// 老写法
class Foo {
  // ...
}
Foo.prop = 1;

// 新写法
class Foo {
  static prop = 1;
}
```

### 静态方法
注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。
另外，从这个例子还可以看出，静态方法可以与非静态方法重名。
```js
class Foo {
  static bar() {
    this.baz();
  }
  static baz() {
    console.log('hello');
  }
  baz() {
    console.log('world');
  }
}

Foo.bar() // hello
```

### 于ES5的不同

#### 类不存在变量提升
类不存在变量提升（hoist），这一点与 ES5 完全不同。
```js
new Foo(); // ReferenceError
class Foo {}
```

#### 类和模块的内部，默认就是严格模式
类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

#### 类定义的方法不可以被枚举
类的内部所有定义的方法，都是不可枚举的（non-enumerable）
```js
class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

 采用 ES5 的写法，toString方法就是可枚举的。
var Point = function (x, y) {
  // ...
};

Point.prototype.toString = function() {
  // ...
};

Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
```

#### 类必须使用new调用
```js
class Foo {
  constructor() {
    return Object.create(null);
  }
}

Foo() // TypeError: Class constructor Foo cannot be invoked without 'new'
```

# WeakSet 和 WeakMap
首先我们来理解下关于对象被垃圾回收的基本概念：

一个对象的内存地址如果被变量使用，则不会被回收，

当我们要释放内存地址时，可以将这个变量赋值为null或者其他值。

当这个内存地址没有被任何变量使用时，就会被回收，

函数运行完，会进行垃圾回收，除非存在闭包。


**WeakSet和WeakMap**

内存地址的引用类型为弱引用，即垃圾回收机制不将该引用考虑在内。
因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存

执行：node --expose-gc ./node.js
```js
global.gc(); // 查看内存占用的初始状态，heapUsed 为 4M 左右
console.log('未使用',process.memoryUsage());
let wm = new WeakMap();


// 新建一个变量 key，指向一个 5*1024*1024 的数组
let key = new Array(5 * 1024 * 1024);
wm.set(key, 1);
global.gc();

// 这时内存占用 heapUsed 增加到 45M 了
console.log('已使用',process.memoryUsage());


// 清除变量 key 对数组的引用，
// 但没有手动清除 WeakMap 实例的键名对数组的引用
key = null;
 global.gc();
// 内存占用 heapUsed 变回 4M 左右，

console.log('清除后',process.memoryUsage());
```
```
执行结果：
未使用 4472832
已使用 6832128
清除后 6832128
```