若端的博客网站 - Ruoduan's blog site

Volta 对每个项目的Node版本管理

Ruoduan — Invalid Date

缘起

介绍一个工具 Volta 👉 Volta，用来做项目环境管理的，他和诸如此类的nvm、n、...有啥不一样呢？他是针对项目的不用在多项目之间切换的时候来回切换环境，且可以多个环境一起 Start

直接安装

curl https://get.volta.sh | bash

Windows 参考官网下载程序 doc

进入项目文件目录下面 cd /projectxxx

volta pin node@18
volta pin npm@6.3
volta pin yarn@1.17
...

诸如此类然后就会在 package.json 增加如下👇

...

"volta": {
    "node": "18.20.3",
    "yarn": "1.19.2"
  }

...

然后在本项目内node -v 就是指定版本啦～

微信小程序WebView在IOS中回退刷新问题

Ruoduan — Invalid Date

缘起

在微信小程序IOS 某些版本中(我遇到的是 17^ )的 WebView中，回退并不会触发重新渲染；

无论是使用 pageshow 监听还是，effect 都没用；

捣鼓了各种方式发现嵌套在 iframe 中可以，但是这样的方式过于复杂和相当于嵌套了三层：

微信 WebView => iframe => Project A => ProjectB，交互起来过于麻烦。

Solve

经过多次尝试，发现就是微信小程序在 IOS特定系统中，back 会缓存当前页面，回退根本不会触发渲染；直接配置在该项目的 Nginx 中配置缓存 Cache-Control 指定浏览器 no-cache👇

# Nginx Config
...

location /ProjectA {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

...

Cache-Control "no-cache, no-store, must-revalidate"; 告诉浏览器不要缓存页面的副本，每次都需要向服务器重新请求内容
add_header Pragma "no-cache";：Pragma 是一个 HTTP/1.0 的遗留指令，旧版本浏览器特定指令，这里的含义是不要缓存页面。
add_header Expires 0;值为 0将过期时间设置为过去的时间，以确保浏览器立即将内容标记为过期，从而不会缓存页面。

React项目使用 Web Worker

Ruoduan — Invalid Date

缘起

Web Worker 老生常谈了 —— 它允许你在主线程之外创建额外的线程来执行任务，例如处理文件，埋点轮询，如何在 React 中使用呢？

webpack5^

JSX

  useEffect(() => {
    const worker = new Worker(new URL('./wk.ts', import.meta.url));

    // set Worker Handle
    worker.onmessage = function (e: MessageEvent) {
      const result: string = e.data;
      console.log('Received result from Worker:', result);
    };

    // post Worker message
    worker.postMessage('hello from main thread');
  }, []);

wk.ts

self.onmessage = function(e: MessageEvent) {
  const data: string = e.data;  
  //  This's Worker in data 
  const result: string = data.toUpperCase();
  
  // Post result to JSX
  self.postMessage(result);
};

import.meta 是一个内置在 ES 模块内部的对象，import.meta.url 表示一个模块在浏览器和 Node.js 的绝对路径。该特性属于 es2020 的一部分
new URL传入 path & base 写入内存

worker-loader

不是 webpack5^ 可以使用插件 Loader worker-loader

module.exports = {
  module: {
    rules: [
      {
        // 以 .worker.js 结尾的文件将被 worker-loader 加载
        test: /\.worker\.(c|m)?js$/i,
        use: {
          loader: "worker-loader",
        },
      },
    ],
  },
};

  chainWebpack(config) {
    config.module
      .rule('worker')
      .test(/\.worker\.ts$/)
      .use('worker-loader')
      .loader('worker-loader')
      .end();
  },

为了保证 worker 中的代码被 babel 转译，可以让 babel-loader 在 worker-loader 之前执行。ts-loader 同理

why import worker file ？

import workPath from "./worker.js";
const worker = new Worker(workPath);

为什么不能直接这样导入worker 文件呢？

同样也是需要借助特定的 loader，类似于 file-loader。至于 worker-loader 则是将new Worker(workPath)的步骤内置到 loader 处理流程了，并导出一个函数，外面直接使用该函数即可创建指定的 Worker

module.exports = function () {
  return new Worker(__webpack_public_path_ + "123abc.worker.js");
};

worker-loader 把文件转成类似👆

blobUrl

还有一种方式就是 —— worker.js 的主函数转化为 blobUrl 导出，供主线程引用。该方法的好处是可以动态创建 worker

// worker.js
const contentCode = function () {} // worker 脚本主函数
const blob = new Blob([contentCode.toString()], {type: 'text/javascript'});
export {url: URL.createObjectURL(blob)}


// main.js
import { url } from './worker.js'
const worker = new Worker(url);

Reference: worker-loader源码

Nest Validator 校验参数

Ruoduan — Invalid Date

缘起

在Nest Controller 对客户端参数校验并处理同意的异常结果 Message，例如校验参数 1< name < 100, 响应不同的 Message “ 请填写 name 长度 1 ~ 100 之间！” 等等

蹩脚写法

@Controller('list')
export class ListController {
  @Post()
  addList(@Body() body): any {
    const { name } = body;
    if(name.length > 100) {
			.....
    }
  }
}

可以使用 class-validator 来完成对参数的校验，class-validator

示例

npm i --save class-validator class-transformer

yarn add class-validator class-transformer

class-validator 和 class-transformer 是一个作者，前者提供数据的校验，后者提供对复杂数据结构的类型转换

使用之前我们先定义一个 Dto 例如 dto.ts 👇🏻

class FooBodyDto {
  @IsString()
  @Length(1, 100, {
    message: '请输入1-100长度之间的名称',
  })
  name: string;
}

export { FooBodyDto };

使用这个 dto 来校验我们需要的参数

处理结果还可以使用 validateOrReject 具体参考文档

@Controller('list')
export class ListController {
  @Post()
  async addList(@Body() body): Promise<any> {
    const { name } = body;
    const post = plainToClass(FooBodyDto, { name });
    const errors = await validate(post);

    if (errors.length > 0) {
      const msgs = [];
      errors.forEach((item) => {
        msgs.push(Object.values(item.constraints)[0]);
      });
      throw new HttpException(String(msgs), 500);
    } else {
      // ...
    }
  }
}

这段代码，使用 plainToClass 来把客户端的参数转换为 validate 需要的类，然后使用 Dto 里面的校验来对我们的参数进行校验，最好返回的 errors 然后我们对里面的校验结果我们自定义的文案也就是 message 进行合并处理最后用HttpException 异常状态来抛给客户端。

完整的逻辑我们还需要一个 Res 拦截器来处理这个异常例如 response-interceptor.interceptor.ts 👇🏻

import {
  Injectable,
  NestInterceptor,
  ExecutionContext,
  CallHandler,
  BadGatewayException,
} from '@nestjs/common';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

@Injectable()
export class ResponseInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    return next.handle().pipe(
      map((data) => {
        return {
          success: true,
          data,
        };
      }),
      catchError((error) => {
        // 处理异常的数据结构
        return throwError(
          () =>
            new BadGatewayException({
              success: false,
              code: 500,
              message: error.message,
            }),
        );
      }),
    );
  }
}

class-validator

class-validator 来校验参数，除了以上直接使用 validate 、validateOrReject 、还可以直接在 body 上校验

class-validator 更多参考文档这里就不做过多赘述

import { Body, Controller, Post, UsePipes, ValidationPipe } from '@nestjs/common';
import { CreateUserDto } from './create-user.dto';

@Controller('users')
export class UsersController {
  @Post()
  @UsePipes(new ValidationPipe())
  create(@Body() createUserDto: CreateUserDto) {
    // 在这里，如果请求体不满足 CreateUserDto 的验证规则，
    // NestJS 将自动返回一个带有错误详情的 400 Bad Request 响应。

    // 如果验证成功，你可以安全地使用 createUserDto
    // ...
  }
}

class-transformer

class-transformer 不仅可以对 dto 的转换还可以执行参数的转换例如

class-transformer 更多参考文档这里就不做过多赘述

classToPlain & plainToClass 就是实例和对象的相互转化啦

import { classToPlain } from 'class-transformer';

let user = new User();
// ...给 user 赋值...

let plainUser = classToPlain(user);

------- 分割线 -------


import { plainToClass } from 'class-transformer';

let plainUser = { /* ... */ };

let user = plainToClass(User, plainUser);

import { Exclude, Expose, Transform } from 'class-transformer';

@Exclude() 
export class User {
  id: number;

  @Expose()
  name: string;

  @Expose()
  @Transform(value => value.toUpperCase(), { toClassOnly: true })
  email: string;
}

@Exclude()：此装饰器用于指定不应该被包含在转换过程中的属性。如果你在类的定义中使用了 @Exclude() 装饰器，那么默认情况下将不包含任何属性，只有被 @Expose() 装饰的属性才会被包含。这对于处理敏感信息非常有用，例如，你可能想要在转换用户对象时排除密码字段。
@Expose()：此装饰器用于指定应该被包含在转换过程中的属性。如果你没有在类的定义中使用 @Exclude() 装饰器，那么默认情况下会包含所有属性，使用 @Expose() 装饰器在这种情况下没有实际效果。然而，如果你使用了 @Exclude()，那么只有被 @Expose() 装饰的属性才会被包含。
@Transform()则是对特定属性的转换，如email 就被 toUpperCase 转换为大写

记-Docker服务器时间之ENV环境变量

Ruoduan — Invalid Date

记-Docker 服务器时间之ENV环境变量

缘起

发现使用当前时间 format('YYYY-MM-DD HH:mm:ss') 的时候本地运行时正确的，服务器Docker 镜像中调用晚八个小时，进去 exec bash date 打印时间发现镜像中默认时区是 UST

解决方案：👇🏻

docker run -e TZ=Asia/Shanghai xxxx
设置 Dockerfile 的 ENV

FROM node:18.15.0

# 设置时区
ENV TZ=Asia/Shanghai

# 设置主机名
ENV HOSTNAME=my-container

WORKDIR /app

COPY . .

...略

其中TZ —— 时区设置，用于指定容器的时区。

顺势看了下重用的ENV 整理如下：

变量	解释
PATH	用于指定可执行文件的搜索路径。
HOME	用户的主目录路径。
USER	当前用户的用户名。
PWD	当前工作目录的路径。
LANG	指定容器的默认语言设置。
TERM	终端类型，用于控制终端的行为和显示方式。
HOSTNAME	容器的主机名。
TZ	时区设置，用于指定容器的时区。
HTTP_PROXY / HTTPS_PROXY	HTTP/HTTPS 代理服务器的地址。
NO_PROXY	不使用代理的主机列表。

Nest 使用SSE 服务端推送实现"协同"

Ruoduan — Invalid Date

缘起

一些涉及到 “实时更新”的场景,使用 “websocket” | “SSE”，老生常谈的问题了，这篇文章会用一个通俗、简单的例子，来解释在 Nodejs 框架 “Nest” 中使用 SSE 技术完成状态同步。、

Demo 完整代码

Why SSE ？

基于HTTP协议，不需要额外的协议
单向通信，实时性：SSE 提供了实时的数据推送机制，服务器可以在任何时候向客户端发送数据。当有新数据可用时，服务器会立即将其推送给客户端，而不需要客户端主动请求。
自动重连、客户端连接、断开
事件驱动：SSE 使用基于事件的模型。服务器可以定义不同类型的事件，并将数据作为事件发送给客户端。客户端可以通过监听特定类型的事件来处理接收到的数据。

协议

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

协议很简单本质上还是 http 请求

网图侵删 👇

HTTP

SSE

场景

设想一个场景，类似语雀、金山文档等这些在线编辑的文档软件，他们是如何实现多人状态下编辑内容同步的呢？例如金山文档 Excel 实时的展示每个人正在编辑的单元格？

我们抽象一下例如：有2个接口：

postLocation，接口负责推送当前编辑的位置
getLocation，获取最新的位置

这种情况下，可以实现的方式很多比较常见的：“轮询”、“webSocket”、“SSE”; 我们可以理解 “切换单元格”是一件很频繁的事情，只有在状态更新的时候再去触发推送，避免不必要的带宽浪费；且 getLocation 不需要 “双向通信” 只需要实时的获取数据就可以了，相信你们心里已经有答案了那就是 SSE.

正文

接下来我们简单的通过假代码实现一个 SSE，本文建立在有一定的前端技术基础和 nodejs nest 技术基础上。

server

我们先来实现一个简单的 SSE

import { Controller, Post, Body, Sse } from '@nestjs/common';
import { Observable, interval, map } from 'rxjs';

@Controller('location')
export class LocationtController {
  @Sse('sse')
  sse(): Observable<MessageEvent> {
    return interval(1000).pipe(
      map((_) => ({ data: { hello: 'world' } } as MessageEvent)),
    );
  }

  @Post()
  addList(@Body() body): any {
    console.log('当前位置信息');
    console.log(body);
    return 'ok';
  }
}

Client

const ev = new EventSource('xxx/location/sse');

ev.onmessage = (e) => {
  console.log(e.data)
};

这个时候你就可以看到控制台不断的输出 hello word 这个键值对,

这个示例完成后我们可以在浏览器 network 看到每秒打印 “hello: ‘world’”, 你可能注意到了这里的 Observable<MessageEvent>, 这个稍后解释。

我们把代码改写一下创建一个一个 mapList 来储存所有人的位置

import { Controller, Post, Body, Sse } from '@nestjs/common';
import { Observable, interval, map } from 'rxjs';

@Controller('location')
export class LocationtController {
  private mapList = [];

  @Sse('sse')
  sse() {
    return this.mapList;
  }

  @Post()
  addList(@Body() body): any {
    this.mapList = [body, ...this.mapList];
    return 'ok';
  }
}

打开客户端，链接 SSE 一开始一开始我们接受到的是[], 请求下 post请求传递一个 { "x": 2, "y": 2 } 我们会发现数据是这样子的 👇🏻 ：

👇🏻

数据从 [] => [{“x”:2,“y”:2}]

但是主要为什么 SSE 请求那么多，而且每次都是 ID: 1 ？

这时候我们来看 Observable<MessageEvent> 的解释

/**
   * @constructor
   * @param {Function} subscribe the function that is called when the Observable is
   * initially subscribed to. This function is given a Subscriber, to which new values
   * can be `next`ed, or an `error` method can be called to raise an error, or
   * `complete` can be called to notify of a successful completion.
   */
  constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic) {
    if (subscribe) {
      this._subscribe = subscribe;
    }
  }

MessageEvent

interface MessageEvent<T = any> {
    /**
     * @deprecated
     *
     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/MessageEvent/initMessageEvent)
     */
    initMessageEvent(type: string, bubbles?: boolean, cancelable?: boolean, data?: any, origin?: string, lastEventId?: string, source?: MessageEventSource | null, ports?: Iterable<MessagePort>): void;
}

再结合文档 👇🏻

**WARNING**

Server-Sent Events routes must return an `Observable` stream.

大概意思就是: SSE 服务器端事件发送路径必须返回Observable流，可是我们明明可以直接返回静态数据呀！

接下来看 Observable 说：Observable 赋值一个订阅者接收 subscribe 为参数，通过 next 或者 error 调用，complete 完成。

大致理解下来就是在使用 SSE 的过程中，是通过 stream 也就是浏来通信的，ID是用于客户端的状态跟踪，通过为每个事件指定唯一的标识符。

这下哦我们可以理解了，因为我们每次返回静态数据所以每次都会创建一个新的 stream 且 ID 也默认每次都是第一个了

接下来我们要把代码改写一下解决：

SSE 多个的问题
SSE 在 send 数据的时候只有在 addList 被调用的时候，而不是一直朝客户端推送

解决思路👇🏻
使用发布订阅来控制 SSE 的推送时机(当然实现的方式有很多种，这里用 node 的 events)
SSE 发送数据处在一个流中
完整代码：

import { Controller, Post, Body, Sse } from '@nestjs/common';
import { Observable, interval, map } from 'rxjs';
import * as EventEmitter from 'events';

const myEmitter = new EventEmitter();

@Controller('location')
export class LocationtController {
  private mapList = [];

  @Sse('sse')
  sse(): Observable<MessageEvent> {
    return new Observable<any>((observer) => {
      myEmitter.on('send', (data: any) => {
        this.mapList = [data, ...this.mapList];
        observer.next({ data: this.mapList });
      });
    });
  }

  @Post()
  addList(@Body() body): any {
    myEmitter.emit('send', body);
    return 'ok';
  }
}

以上代码，只不过是通过一个简单的例子来更好的理解 SSE，实际上我们的语雀、金山文档不可能把数据存在 class 里面，也不会那么简单的实现。

Demo 完整代码

Shell-字符串替换生成模板文件

Ruoduan — Invalid Date

缘起

在构建 Build 的时候需要根据平台和环境写入配置文件, 需要写一个脚本来提供不同的模板,记于此

例如 👇🏻

...
{{ base }}
...

替换

<base href="test/xxx/xx">
or
<base href="prod/xxx/xx">

模板文件:

... 略

{{base}}

.... 略

代码

可以使用 shell 的 sed 命令就行替换

sed "s/{{base}}/<base href=\"\/yhk\/\">/g" $filename > ./web/index.html

在当前文件替换修改加 -i 👉🏻 sed -i "s/{{base}}/<base href=\"\/yhk\/\">/g" $filename

但是在 MacOS中不行需使用 sed -i '' "s/{{base}}/<base href=\"\/yhk\/\">/g" $filename 原因 👇🏻

其他解决方法

调整mac下sed的用法，使其与linux一致 mac上安装gnu-sed

brew install gnu-sed

alias sed=gsed

调整后两系统下sed的用法完全一致。

完

2022-summary

Ruoduan — Invalid Date

今年没有总结。

忙碌的生活中从未停下来过；思考生活该怎么过, 或许遗憾或许庆幸；但那又怎么样呢？

未来可期正当时

Flutter web bridge 通信总结

Ruoduan — Invalid Date

缘起

公司医疗业务人手比较少【小而美】的团队~ 较少采用的前端技术架构是：

toC：小程序 toB2C: Flutter + H5(SPA - React)【build 👉🏻 Android + IOS】 Flutter web + H5 【企业微信服务商应用】

toB: 后台端、数据大屏 Vue

边缘业务：社区平台等使用的原生

虽然团队不大但是技术挺杂的，至于为什么要在flutter 中加入混合开发是因为想通过微架构模式拆分业务，达到资源最大程度的复用；通过 Flutter 解决平台间的复用；微架构的单页面应用程序解决业务间的复用。这个暂且不谈，本期整理一下 flutter 中的 bridge 通信；

架构图大致如下 👇🏻

bridge 部分解决各端的

兼容性和平台差异
不同操作系统之间的处理
各端之间跨端通信
第三方 SDK 调用整合
各端业务复用
解决各端之间 Auth 的授权整合
…

通信方式

老生常谈了其实就是 JS 和 dart 之间的相互调用和注入方法

APP 中 JS & dart call

APP 中

app中主要是通过 webview 来通信和混合开发的方式大同小异；都是 H5 & App 各自注册通过 postmessage | urlchange 来触发调用

主要代码：

通过 Flutter webview中注入 flutter 的方法
Flutter端

javascriptChannels: <JavascriptChannel>[
                  JavascriptChannel(
                    name: 'xxBridge',
                    onMessageReceived: (JavascriptMessage jsMessage) {
                      Map messageMap = json.decode(jsMessage.message);
                      print(messageMap);
                      if (messageMap['type'] == 'appPagePop') {
                        Navigator.pop(context, messageMap['value']);
                        return;
                      }
                      if (messageMap['type'] == 'navigateTo') {
                        Map params = messageMap['params'];
                        String patientCode = params['code'];
                        Routes.navigateTo(context, messageMap['url'],
                            params: {'id': UserUtil.transferCodeToId(patientCode)});
                        return;
                      }
                    },
                  ),
                ].toSet()

H5端

export default class xxBridge {
  isApp: boolean;
  constructor() {
    /**
     *  receipt app  message callback func
     * @param message
     * @returns boolean
     */
    window.flutterMessage = (message: string) => {
      console.log(message, ' receipt app message');

      return true;
    };
  }

  appPagePop = (value = false) => {
    if (!this.isApp) {
      console.log('当前不是app环境，或者没有Bridge 运行时哦 ~ ！');
      window.history.back();
      return;
    }

    window.xxBridge.postMessage(
      JSON.stringify({
        type: 'appPagePop',
        value: value,
      }),
    );
  };
}

Flutter 中调用 H5 在window 注册的方法

onPageFinished: (url) {
                  print(url + '加载完成');

                  Map data = {
                    'doctorCode': UserUtil.doctorCode(),
                    'doctorName': SpUtil.getString(DOCTOR_NAME_KEY),
                  };
                  var dataJson = json.encode(data);
                  print(dataJson);

                  _webviewController?.evaluateJavascript("getAppLoginInfo('$dataJson')").then((res) {
                    print("evaluateJavascript-res: ${res}"); // evaluateJavascript-res: true
                  });

                  // print('加载结束');
                },

xxBridge 是 Flutter JavascriptChannel 注入通信对象
onMessageReceived 接收 web端 postmessage 触发 dart 方法
web 端中 window.flutterMessage 注册方法给 Flutter 在 app 中调用

至此 Flutter APP 和 H5 通信基本是以上方式拓展，当然还有 Url 的方式和 Storage 的方式这里不表；

Flutter web 中 JS & dart call

dart 调用 js

有2种方式

1. Promise js文件的方式被调用

定义方法

function print(msg) {
  return new Promise((resolve, reject) => {
     resolve('code : xxxxx')
    alert(msg)
  });
}

调用

import 'dart:js' as js;

@JS()
external print(String msg);

var wxScanPromise = print('123');
String code = await jsUtil.promiseToFuture(wxScanPromise)

2. 通过 js.context 获取上下文来调用

首先在 init 中注入方法

webapp main.dart

class Application {
  static Future init(ui.VoidCallback callback) async {
    DarttoJS().into();
   
  }

  ...
}

//  This's a test dart to js func
class DarttoJS {
  // js call dart
  static void myalert(String text) {
    Fluttertoast.showToast(
        msg: "This's JS pass on test ！：$text",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0);
  }


  void into() {
    js.context["myalert"] = myalert;
    js.context.callMethod('onLogin');
  }
}

webaapp index 文件中添加 onLogin

const onLogin = () => {
    ...
}

export { onLogin }

在 init 中注入方法调用类
js.context 来给 js 注入window下的全局方法

js 调用 dart

通过 js.context["myalert"] = myalert 注册了方法
直接在js文件中调用

summary

之后我们可以在 xxBridge 中不断的继承 WeChat SDK、dingdingSDK、等等和一些业务方法通过 rollup 等一些工具打包发布NPM包整合自己的工具

记-WindowsServer2019-IIS 权限问题

Ruoduan — Invalid Date

缘起

帮忙公司一个客户部署一个在阿里云服务器的数据大屏，操作系统是 WindowsServer2019，build 后扔到 IIS 的web 目录下出现 2个问题

“/”应用程序中的服务器错误之解决方案

401未授权由于凭据无效，访问被拒绝

解决方案

打开 IIS 对应的web 服务目录下 <身份验证> => 启用 <匿名身份验证>
<网站文件夹📂 => 右键“属性” => ” 安全” or 编辑权限 => “ 安全 ” => ( 编辑 => 添加用户 => “IIS_IUSRS” )
<网站文件夹📂 => 右键“属性” => ” 安全” or 编辑权限 => “ 安全 ” => ( 编辑 => 添加用户 => “IUSR” )

Why IUSR ？

IUSR用户组默认为iis创建网站默认的匿名用户。可以在创建网站的身份验证中看到.当然也可以到.

当IIS启动工作进程时，需要用户来标识进程，而IIS_IUSRS用户组成员ApplicationPoolIdentity就是默认的标. ApplicationPoolIdentity并不是指一个用户，而是所有程序池默认标识用户的统称。这些用户与程序池是一一对应的。例如，程序池DefaultAppPool的ApplicationPoolIdentity是用IISAPPPOOL\DefaultAppPool。

因此，有了IIS_IUSRS用户组，管理应用程序池标识就变得简单多了，至少你不需要再为不同程序池下的站点设置不同的程序池标识用户权限

记 chmod -R 权限变更导致git大量变更

Ruoduan — Invalid Date

缘起

chmod 修改项目文件夹的权限以后，git status 发生了大量变化的文件。原因是 Git 不仅能够管理文件的版本，而且能够管理对文件的访问权限。 Git对文件的访问权限的管理与配置选项core.filemode有关。core.filemode选项默认true，即区分文件的执行权限，校验Git的Index中和工作目录中的文件权限。

关闭git权限校验

  git config core.fileMode false

Flutter 处理 webview IOS bounce 弹簧效果

Ruoduan — Invalid Date

缘起

flutter 没有类似 ios 👇🏻

_webView.scrollView.alwaysBounceVertical = NO;
_webView.scrollView.bounces = NO;

可以通过 evaluateJavascript 给 body 加 style hidden 来处理

...

onWebViewCreated: (WebViewController webViewController) {
    _webviewController = webViewController;
},

/**
 * Todo: This's a test function . WebView disable bounce on iOS 
 * issues: https://github.com/flutter/flutter/issues/57090
 */
onPageFinished: (url) {
    _webviewController?.evaluateJavascript('document.body.style.overflow = \'hidden\';');
}

...

这个方式尽管不太完美，等待官方给出解决方案吧

NPM包魔改利器 patch-package 给包打补丁

Ruoduan — Invalid Date

NPM包魔改利器 patch-package 给包打补丁

缘起

在使用 npm 包的过程中有有一些特性不支持，可以通过修改源码来完成，尽管已经可以通过 Issues | pr ; 但是毕竟开源社区审核较慢，这时候就可以通过 patch-package 来完成

当然其他方法也有很多种，patch-package 对比其他方法算是最优解吧

安装

    npm i patch-package -D
    
    or
    
    yarn add patch-package postinstall-postinstall  -D

ps：这里有一个坑，就是使用 yarn 的话要多装一个 postinstall-postinstall Why use postinstall-postinstall with Yarn

大概意思就是说：大多数情况下在npm包安装和卸载的时候 patch-package 会通过 diff 去替换包内的源码，但是 yarn 只会在安装的时候执行，卸载的时候不会去执行，使用 postinstall-postinstall 后确保卸载的时候也会执行.

生成源码

以 antd 为例子 🌰

我们首先去 fork antd 的代码拉到本地后，我们修改源码，跑过单元测试等等.

等待打包 yarn build

把需要的模块扔到对应包下面

生成补丁

yarn patch-package package-name(修改的包名)

or

npx patch-package package-name（npm版本 > 5.2）

此时，项目根目录会出现一个 patches 文件夹 📂, 里面会有类似 git diff 数据

添加 script

    "patchinstall": "patch-package"

这样每次 install 完成后执行 patchinstall 就会去替换源文件中的更改

然后正常提交 commit 就行 .

这样以后，其他人每次 install 后只要执行下 patchinstall 就可以了

注意：

patch-package 是锁定版本的，所以在 package.json 最后是把版本锁定到当前 patchinstall 的这个版本

other

介绍下其他方法

copy 整个项目法

直接把整个项目 copy 下来放到项目中引用
或者把整个项目 copy 下来发布到私有 npm 使用

修改引用法

通过 webpack alias 配置

resolve: { alias: { 'antd-mobile/calendar': path.resolve(__dirname, './patched/calendar/*'), } }

        大同小异 ...

游泳与“禅”

Ruoduan — Invalid Date

游泳与“禅”

2022年已过去大半，作为一个西南边出来的 “旱鸭子”终于下定决心去学习游泳了，心得体会记录于此。

缘起

学习游泳 🏊🏻 这个事情在好几年前就被提上日程立下 flag 了，前几年和朋友去了几次游泳馆，基本上能做到不怕水；对于游泳技巧是一无所知。

今年的关键词：疫情、互联网裁员、加班、俄乌冲突、台海危机 … ；好像每年的这个时候，自我都会感觉今年发生了好多事，每年都是这些事情没什么特别的

后疫情时代下年轻人的焦虑

在这个信息爆炸的年代人们在互联网上可以随意表达，信息传递很快；一些人、一些观念，可以很容易的就达成某种共识，从而在互联网上疯狂 “广播” ，特别是一些负面的表达很容易就可以达成共识，例如: 躺平、经济下行、加班、或者一些网红、明星的一些不道德标准可以在互联网上疯狂传播从而成为我等社畜的 “饭后谈资” 。

对于我这种社畜在今年也有些焦虑：一个是体重焦虑、一个是工作焦虑；

体重焦虑

今年体重骤增变成了一个不折不扣的“胖子”，体重更是达到了 “ 82 KG ” ，从而带来身体上的变化就是运动 🏃🏻‍♀️能力的下降，还有一些一脂性皮炎导致的脱发
工作焦虑

今年这个环境下离职有差不多2个月的空窗期，其实在离职第二天就有一个面试并且拿到 offer 了，当时对那家不太满意（其实也还行），加上像休息一段时间。然后买了个 PS4 在家彻底放飞自我。

也有可能是前公司的高压和公司气氛（比较卷 - 互联网PUA），算是一种逃避吧，（好像能理解 “ 三和大神了 ” ）直致一个月后才开始投简历找工作，这个时候恰好赶上疫情爆发 “ 拱墅区 ” 封区了、还有就是互联网大裁员；这时候心里就有点没底了。

—— 每个人都笑 “ 树先生 ”，自己何尝不是 “ 树先生 ” 呢？

是否是我们的错觉？

我们始终有一种错觉，以为我们的感情源自于我们自己的内心。

后面我调整了下心态，觉得自己应该独立思考，不应该被社会或者说身边的气氛给带偏了。

确实有社会原因的事实，但是更多的还是自己的原因。

—— 你永远无法改变他人，你只能改变自己

后面入职了一家小公司担任前端负责人，还算不太卷，工作生活能够平衡

引子

出于以上种种焦虑，公司对面有一家健身房。我去办了一张健身卡；又出于对游泳的想法，我又请了一位泳教（心疼 💰）

教练是个壮实东北小伙，年纪相仿，挺开朗的我称他为 “大硕” 这名字仿佛在开车 🚗 哈哈~

蛙泳

教练给我规划的课程是蛙泳入门到自由泳

因为我也不怎么“怕水”第一节课也蛮顺利，我以为会一直很顺利结果相反

旱鸭子在水里漂浮仿佛就像一直蚯蚓掉进了沙堆，—— 扭来扭去原地打转

作为一个20多年在陆地呼吸的人类，突然在水里面有着各种不适，教练教的 “ 收 - 翻 - 蹬- 夹 - 呼吸” 在陆地上面做的井井有条，下到水里就变的手足无措了，真正的诠释了什么叫做 “ 眼睛会了，手不会 ”

刚开始的那几天仿佛打了鸡血，每天早上咖啡一杯冰美式；早上跑步🏃🏻‍♀️ —— 中午游泳🏊🏻 —— 晚上健身 💪🏻；

天气 41 ℃

时间：不记得是哪一天的一个中午

这天人很少，我还是一如既往的下水，那天人很少，天气很燥热；下水的哪一刻真的很凉快，躺在水面上，蓝色的水底瓷砖，心里感受到了一种 “平静” ，头埋在水里面的这一刻仿佛这一刻这个世界只有我一个人。这时候一下子就悟了，loop 👉🏻“收 — 翻 — 蹬 — 夹 — 呼吸 ” ，在水里好不畅快。

尝到甜头的我从此每天会去游泳 🏊🏻了。

刚开始使用蛮力在水里面蹬的那叫一个狠，一周后我的 “ 髋关节 ” 酸痛难忍，走路都在痛。

典型的因为 “ 奖励 ” 用力过猛

观察我和别人的不一样

通过我的观察，我发现其他一些游泳游的比较好的人，它们在水里面很轻松，动作也很 “ 软 ”，不像我这样在水里面 “ 打架 ”。

不要试图和水做对抗，顺水而行

感受水的阻力，水流击打在胸口的 “ 力 ”，腿夹紧的 “ 力 ”

果然顺畅很多

期间

期间工作中遇到个脾气很奇怪的同事，某一天早上我向另外一个同事（开发）的询问合作的一个 project 的进度，这个人仿佛点燃了引线一样，各种 “ 时间那么紧你不知道啊！ ” 、 “ 我那么多事做都做不完 ” 、 “ 我手上这个还 … ” 各种抱怨和语气像我袭来，就连和我一起的一个同事也感到了诧异 —— 我们只是正常交流工作进度为何和我们说这些？（他的事情为何要把脾气撒在我们身上？为何评审的时候不提出来？种种，方式谁和他说了话，就是他工作不舒服的作俑者）

这个一刻我脑袋 “ 中演练了一百个怼他的方式 ”最后还是笑了笑说 “ 按照你的进度来吧，有问题可以和产品反馈下 ” 有些事情顺而退之，争执反而适得其反。

果不其然这个 “ 脾气不太好的同事 ” 遭到了大家的吐槽

魔鬼训练与体重

在我坚持下体重也迎来了大幅下降

从巅峰 82 KG => 73 还在有序减脂

好让我们回到游泳

自由泳

蛙泳熟练了后我迫不及待的想学自由泳，因为自由泳 “ 快 ”，二则是我的髋关节疼痛越发激烈，教练说： “ 看来是学习自由泳的时候了 ”

“打腿” 累和停止不前

自由泳过程中，我表现出一些 “ 急功近利 ” 的心态。

因为肌肉腿下身比较重，练习打腿的期间异常累，而且停止不前；看着一些小孩子在水中打腿打的 “ 飞起 ”，速度也很快，我差不多半程就很累了；是我不行了？ —— 当然不是！

避重就轻方法论

在连续好几天的 “ 蛮力打腿 ” 我找到了一点 “ 水感 ”，教练所说的 “ 大腿根部发力，鞭腿 ” ，这样的一丝丝 “ 鞭腿 ” 的感觉

上来直接，蛮力打腿，我发现不太适合我，因为到后面会体力不支；我开始使用手部动作的滑动产生向上的浮力之后这个时候再来打腿，这样的话会轻松的多，虽然还是不太标准但是起码能游起来，期间也在 “知乎”、 “bilibili” 上面看了很多教程，每天都迫不及待的去尝试。

就这样找到 “ 方法论 ” 能游起来之后后面经过不断的训练，和观察人家的节奏和姿势，我也能畅快的游自由泳了，当然这是需要一个过程的期间也经常呛水；

程序员的路？

作为新一代互联网 “ 民工 ”，新的技术层出不穷，分化出来的职业和路径也很多相关的 — — 前端、后端、算法、大数据 …

火的语言技术一轮又一轮：Flutter 、PyTorch、Rust、WebAssembly …

挑花了眼，之前的心态是看到什么新的框架技术什么的都会去尝试尝试 —— 浅尝辄止

人的精力是有限的，先把能量专注于一个领域

因为之前对 Python Web / Python 的一些东西挺感兴趣的也有一些尝试，我觉得还是应该沿着自己感兴趣的方向去探索，而不是东打一耙，西打一耙。

训练模型？

我发现如果我单单靠堆量去训练，效率太低，还容易养成一些不正确的姿势的习惯，我觉得应该像写程序那样建立一个训练模型然后再去学习

找到问题点和瑕疵的地方
建立训练模型
- 打腿训练次数和计划
- 划手训练次数和计划
- 节奏和呼吸的配合时机
大量学习模仿别人
Loop：模仿 => 改进模型 => 模仿 => 学习

因为我打腿的体力没有别人好，我总结了我自己的方式 —— 出发不要蛮力打腿，通过划手的浮力带起来脑袋从而呼气，保持有节奏打腿保证不沉腿，保存体力到游泳的过程中

进阶：仰泳、蝶泳？

没有那么容易，还是要通过大量训练先把当下的蛙泳、自由泳，奠定基础

1000 小时定律之 100 小时定律，在一个东西上专注花费 100 小时，一定可以在你的圈子成为 “ 高手 ” 无论学习、技能、游戏也好

“ 急功近利 ” 不可取，技术也好、技能也好，需要沉淀、需要经验，来进阶。

完

祝好

Docker 部署 Flask

Ruoduan — Invalid Date

Docker 部署 Flask

最近在用 Monorepo => (Flask + React) + (Python + TypeScript) 写一些自己东西，记于此，温故而知新

WSGI Server

Python 项目不同于其他服务例如 javax.servlet.Servlet \ Go \ PHP 等，Python 是 WSGI 即（Python Web Server Gateway Interface） Python Web服务器网关接口

Gunicorn \ Gevent

Gunicorn ‘Green Unicorn’ 是一个 UNIX 下的 WSGI HTTP 服务器，它是一个移植自 Ruby 的 Unicorn 项目的 pre-fork worker 模型。它既支持 eventlet ，也支持 greenlet
Gevent 是一个 Python 并发网络库，它使用了基于 libev 事件循环的 greenlet 来提供一个高级同步 API

Gunicorn 给 WSGI 组件提供服务器功能，Gunicorn 默认使用同步阻塞的网络模型(-k sync)，对于大并发的访问可能表现不够好，Gevent来增加并发量，这就组成一个 “高性能” 服务器

我们利用 Gunicorn \ Gevent 来组件我们生产环境下的应用 Server

Docker

这个没什么好说的 —— 容器服务来提供 Server 的环境运行时

简单复习下 docker： 👇🏻

FROM

格式：FROM：

第一条指令必须为 FROM 指令，Dockerfile 中创建多个镜像；定义容器运行时

格式：RUN或 RUN [“”, “”, “”]

当前镜像的执行指令

格式：CMD [“”,””,””]

当前容器 shell

ENV

环境变量，会被 RUN 指令使用，并在容器运行时保存

COPY

格式：COPY

复制本地主机的（为 Dockerfile 所在目录的相对路径）到容器中的（当使用本地目录为源目录时，推荐使用 COPY）

WORKDIR

格式：WORKDIR /path/to/workdir

为后续的 RUN 、 CMD 、 ENTRYPOINT 指令配置工作目录。（可以使用多个 WORKDIR 指令，后续命令如果参数是相对路径，则会基于之前命令指定的路径）

…

Docker Doc info 📃

下面让我们开始吧~

安装使用 Gunicorn + Gevent

pip3 install gunicorn gevent

Root 下新建文件 /gunicorn.conf.py 文件

touch gunicorn.conf.py

vim gunicorn.conf.py

workers = 5    # 定义同时开启的处理请求的进程数量，根据网站流量适当调整
worker_class = "gevent"   # 采用gevent库，支持异步处理请求，提高吞吐量
bind = "0.0.0.0:5000"

这时候我们可以测试一下

gunicorn app:app -c gunicorn.conf.py

正常启动的话我们可以看到启动了一个服务员我们可以正常访问它 http://localhost:5000/

如若报错，则根据错误提示修复即可。

下面我们用 Docker 制作 Flask 的镜像和容器从而在服务器上面部署它们

制作镜像

requirements.txt

首先我们需要为该应用创建一个 requirements.txt 文件，以便容器里面 python 环境的安装：/requirements.txt

pip3 install -r requirements.txt

or pipreqs 来生成，pipreqs 可以只生成当前项目使用的依赖推荐使用这种方式

pip3 install pipreqs

pipreqs ./ --encoding=utf-8

创建 Dockerfile 文件

FROM python:3.9
WORKDIR ~/docker-project/

COPY requirements.txt ./
RUN pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

COPY . .

CMD ["gunicorn", "app:app", "-c", "./gunicorn.conf.py"]

下面我们构建镜像

sudo docker build -t testflask:0.1 .

期间要等待一段时间

查看镜像

sudo docker images

这时候在列表里面我们就可以看到我们刚刚构建的镜像 testflask

在本地临时启动它试一试

sudo docker run -it --rm -p 5000:5000 testflask:0.1

容器正常运行，我们现在要做的就是上传镜像然后再服务器上安装启动容器

上传镜像

登录Docker-Hub
创建 Project

重新定义tag

格式：docker tag SOURCE_IMAGE[:TAG] TARGET_IMAGE[:TAG]

docker tag testflask:0.1 youName/testflask:0.1

注意在上传镜像的时候要求 tag 前缀是你的用户名，在创建project的时候上面会有说明

上传镜像

格式：docker push [OPTIONS] NAME[:TAG]

docker push youName/testflask:0.1

服务器安装容器

前提是服务器上面安装了 Docker

sudo apt-get install docker.io

其他操作系统自行按照教程安装

Docker install 📃

拉取镜像

docker pull youName/testflask:0.1

安装容器

docker run -d  -p 80:5000  youName/testflask:0.1

把操作系统的 80 端口映射到了容器 5000 端口上面，这时候去开发安全组就可以正常访问了

使用Rollup构建SDK

Ruoduan — Invalid Date

缘起

需要提供一个JavaScript的 SDK，当然我们使用 webpack可也以构建； ps(对于现代浏览器来说 webpack 打包体积其实都不算事) 主要是 Rollup 配置文件全面 ESM，配置简介，对于爱干净的我来说比较喜爱

Rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

link - Rollup

Flow 👇🏻

打包构建
加载额外资源（ resolve ）
转译 ES module
Babel
输出压缩、移除 console 等
发布脚本

本文旨在 Rollup 的构建过程介绍，和业务无关

install 化环境依赖

yarn add -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve

rollup
@rollup/plugin-commonjs // 转译
@rollup/plugin-node-resolve // 加载依赖

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel'; // 转换babel
import { terser } from 'rollup-plugin-terser' // 压缩代码
import pkg from './package.json';

export default [
  {
    input: 'src/index.js',
    external: ['ms'],
    output: [
      { file: `${process.cwd()}/dist/cjs/index.js`, format: 'cjs' },
      { file: `${process.cwd()}/dist/esm/index.js`, format: 'esm' },
      { file: `${process.cwd()}/dist/index.js`, format: 'umd', name: pkg.name },
    ],
    plugins: [
      resolve(), // so Rollup can find `ms`
      commonjs(), // so Rollup can convert `ms` to an ES module
      babel({
        babelHelpers: 'runtime', // 
        exclude: 'node_modules/**' // 排除 node_modules
      }),
      terser({
        output: {
          ascii_only: true // 仅输出ascii字符
        },
        compress: {
          pure_funcs: ['console.log'] // 去掉console.log函数
        }
      }),
    ]
  }
];

external & resolve

我们开发SDK的不可能全然自己造轮子，也会使用其他一些依赖

external : 申明外部依赖

例如：🌰

{
	external: ['lodash']
	resolve()
}

output

输出目录和文件名

输出了三个文件分别是：

cjs：Commonjs 规范
esm: ESmodule 规范
umd：集 CommonJs、CMD、AMD 的规范于一身

terser

压缩代码、移除console

TypeScript

更改 src/index.js => index.ts
安装依赖

yarn add -D @rollup/plugin-typescript typescript

增加配置文件 tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxFactory": "VueTsxSupport",
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "experimentalDecorators": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.d.ts",
  ],
  "exclude": ["node_modules", "dist", "scripts"],
}

rollup.config.js

...

import ts from '@rollup/plugin-typescript';

// ts
const tsPlugin = ts({
  tsconfig: getPath('./tsconfig.json'), // 导入本地ts配置
  exclude: 'node_modules/**',
});

export default [
  {
    input: 'src/index.ts',
    external: ['ms'],
    output: [
      { file: `${process.cwd()}/dist/cjs/index.js`, format: 'cjs' },
      { file: `${process.cwd()}/dist/esm/index.js`, format: 'esm' },
      { file: `${process.cwd()}/dist/index.js`, format: 'umd', name: pkg.name },
    ],
    plugins: [
			...
      tsPlugin,
    ],
  },
];
...

package.json

  "types": "src/index.d.ts",

ESLint

ESlint 还要安装支持 TS 的插件

安装依赖

yarn add -D @rollup/plugin-eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier

rollup.config.js

...
import eslint from '@rollup/plugin-eslint'; // eslint

// eslint
const esPlugin = eslint({
  throwOnError: true,
  include: ['src/**/*.ts'],
  exclude: ['node_modules/**'],
});


export default [
  {
    ...
    plugins: [
			...
      tsPlugin,
    ],
  },
];

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    node: true,
    amd: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaVersion: 2015,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'warn',
  },
};

.eslintignore

dist/*.js
config/*.js
scripts/*.js
test/*.js

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "endOfLine": "auto",
  "printWidth": 100,
  "proseWrap": "never",
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "ignore",
  "overrides": [
    {
      "files": ".prettierrc.js",
      "options": {
        "parser": "json"
      }
    }
  ]
}

package.json

添加脚本

  "lint": "eslint --ext .js,.ts src",
  "format": "eslint --ext .js,.ts src --fix",

Publish Script

SDK 发布到 NPM 、 PNPM 或者私有 npm 等

直接上代码简单版

把 package.json and README copy 到 dist 下面
修改版本
发布

我这里省略了版本修改，因为每次通过 process.argv 来指定版本不如直接修改 package.json

const path = require('path');
const shelljs = require('shelljs');
const program = require('commander');
const { copyFile } = require('fs');
const colors = require('colors');


const copyFunc = () => {
  copyFile(`${process.cwd()}/package.json`, `${process.cwd()}/dist/package.json`, (err) => {
    if (err) {
      console.log(`copy package 失败 \n ${err}`)
    }
  })
  copyFile(`${process.cwd()}/README.md`, `${process.cwd()}/dist/README.md`, (err) => {
    if (err) {
      console.log(`copy README 失败 \n ${err}`)
    }
  })
}



const pubFunc = () => {
  copyFunc()
  shelljs.cd('dist');
  shelljs.exec('npm publish'); // 发布
}

pubFunc()

发布

yarn adduser --registry http://xxx

or
yarn login login
yarn publish

完

Verdaccio搭建私有包管理库

Ruoduan — Invalid Date

缘起

没有什么特别的原因

环境准备

CentOS (Linux 系列)
yum | apt | wge …
Nodejs
npm
Verdaccio

1. 安装Nodejs & npm

yum install -y nodejs npm

2. 安装 Verdaccio

npm install verdaccio -g

3. 启动 Verdaccio

# verdaccio 可直接启动 
verdaccio

启动之后会看到如下👇🏻

warn --- config file  - /root/verdaccio/config.yaml
(node:22955) Warning: Verdaccio doesn't need superuser privileges. don't run it under root
(Use `node --trace-warnings ...` to show where the warning was created)
(node:22955) Warning: Verdaccio doesn't need superuser privileges. don't run it under root
 warn --- "crypt" algorithm is deprecated consider switch to "bcrypt". Read more: https://github.com/verdaccio/monorepo/pull/580
 info --- plugin successfully loaded: verdaccio-htpasswd
 info --- plugin successfully loaded: verdaccio-audit
 warn --- http address - http://localhost:4873/ - verdaccio/5.13.0

启动成功了！

配置文件：config file - /root/verdaccio/config.yaml
访问路径 http://localhost:4873/

我们可以通过配置文件来改变默认端口

具体参考文档 👉🏻 link

这个时候我们已经可以访问到了

初始页面

但是这时候终端不能断，所以我们要守护进程

守护进程

使用 pm2 守护进程或者直接 nohup 来进程常驻

npm install pm2 -g

or

nohup verdaccio >/root/verdaccio/verdaccio.log 2>&1 &

ps：还需要去开启 verdaccio 对应端口的安全组

发布一个测试包

touch .npmrc
vim .npmrc

next

registry = "http://47.114.102.165:20010/"

操作说明依据初始页面的说明

.npmrc 配置文件的优先级

项目配置文件: /project/.npmrc
用户配置文件：~/.npmrc
全局配置文件：$PREFIX/etc/npmrc
npm 内置配置文件 /path/to/npm/npmrc

完

jupyter notebook 格式化代码

Ruoduan — Invalid Date

缘起

使用 jupyter notebook 想一键格式化代码和内容

安装 jupyter_contrib_nbextensions

👇🏻

pip3 install jupyter_contrib_nbextensions
jupyter contrib nbextensions install
pip3 install yapf

打开jupyter notebook，进入 Nbextensions，勾选上Code prettify 。

完

Parallels Desktop 科学版 - 小记

Ruoduan — Invalid Date

缘起

今天需要在 MAC 上安装一个 Windows 系统来使用一个软件，那 mac 上肯定首选Parallels Desktop

囊中羞涩，迫于无奈只能选择 学习版来学习了. 找了一圈最新版各大学习网站都没有了。

找了个老版本 12版本的来使用

ps: 幸好不是M1芯片，最近对M1 芯片非常反感，在ipad，mac中适配都不是很好，兼容性问题，闪退，层出不穷

好了回归正题：

在我下载好了软件准备安装的时候看到安装包的一句话非常 hacker 记于此 👇🏻

why join the navy if you can be a pirate ？

如果你能成为海盗，为什么要加入海军 ？

Awesome ！

在这里提倡使用官方正版软件，本文章仅供学习！

过程

正常安装是无法安装的，—— “ Parallels Desktop”已损坏,无法打开。您应该推出磁盘映像 “。
首先要打开：设置 -> 安全与隐私 -> 允许从以下位置下载APP ： 选择任何来源
- 没有的话输入 sudu spctl --master-disable
然后按快捷键 shift + command + . 会看到安装包里隐藏的“Parallels Desktop.app”文件
Desktop.app 拖到桌面
sudo xattr -r -d com.apple.quarantine ~/Desktop/Parallels\ Desktop.app

Monorepo And MicroService

Ruoduan — Invalid Date

缘起

最近经常看到 Monorepo 和 MicroService 被提及这里做一下总结

What is it

Monorepo: 是指单一代码库

在版本控制系统的单个代码库里包含了多个项目之间的代码，项目之间可能是相关的，但通常在逻辑上是独立的，可以有单个或者多个不同的团队维护。

那既然有单一代码库与之对应的就是多代码库即：MultiRepos
MicroService：微服务架构

把一个大型的项目服务拆分成多个独立的单元，单元有独立的功能和模块承担不同的功能，相互之间可以通信建立连接

Monorepo

Monorepo Link

Monorepo 不是一个新的东西，在软件开发行业它已经存在很久了，许多开源项目已经成功使用了单一代码库 👇🏻

Larave：一个用于Web开发的PHP框架。
Babel：一个用户Web开发的流行的JavaScript编译器，其单一代码库包含了完整的项目及其所有插件。
React、Ember、Meteor 等前端框架都使用单一代码库。

它的优势

可见性（Visibility）：每个人都可以看到其他人的代码，这样可以带来更好的协作和跨团队贡献——不同团队的开发人员都可以修复代码中的bug，而你甚至都不知道这个bug的存在。
更简单的依赖关系管理（Simpler dependency management）：共享依赖关系很简单，因为所有模块都托管在同一个存储库中，因此都不需要包管理器。
一致性（Consistency）：当你把所有代码库放在一个地方时，执行代码质量标准和统一的风格会更容易。
共享时间线（Shared timeline）：API或共享库的变更会立即被暴露出来，迫使不同团队提前沟通合作，每个人都得努力跟上变化。
原子提交（Atomic commits）：原子提交使大规模重构更容易，开发人员可以在一次提交中更新多个包或项目。
隐式CI（Implicit CI）：因为所有代码已经统一维护在一个地方，因此可以保证持续集成。
统一的CI/CD（Unified CI/CD）：可以为代码库中的每个项目使用相同的CI/CD部署流程。
统一的构建流程（Unified build process）：代码库中的每个应用程序可以共享一致的构建流程。

在什么样的情况下使用 Monorepo ？

同一个相互关联的项目需要不同团队来维护。
同一个项目中不同模块需要组件/模块复用
- 在前端开发中通常用 lerna/pnpm 管理
单个模块的开发需要整个项目的配合和启动
团队之间需要统一 CI/CD 流程
经常要在多个模块/项目之间调试/开发

说着了这么多Monorepo 的优势那它有什么劣势呢？

无法管理某个、某些项目对于指定人员的权限
不同分支下的版本控制会显得较为混乱
对于发布构建的挑战，难度会比单个项目构建要大

MicroService

微服务是一种软件架构：通过微服务，可将大型应用分解成多个独立的组件，其中每个组件都有各自的责任领域。

当然于是对应的有 单体架构（monolithic software）

单体架构：微服务要解决的问题

所有功能耦合在一起，互相影响，最终难以管理。
哪怕只修改一行代码，整个软件就要重新构建和部署，成本非常高。
因为软件做成了一个整体，不可能每个功能单独开发和测试，只能整体开发和测试，导致必须采用瀑布式开发模型。

为了解决这👆🏻些问题从而出现了微服务，来对项目解耦和模块划分

微服务通过把一个大型项目按模块和功能划分成多个 “单元项目”，单元项目可独立部署、开发、测试，他可以运行在不同机器上面相互连接从而组成一个完整的网络应用

每种服务功能单一，相当于一个小型软件，便于开发和测试。
各个服务独立运行，简化了架构，提高了可靠性。
鼓励和支持代码重用，同一个服务可以用于多种目的。
不同服务可以单独开发和部署，便于升级。
扩展性好，可以容易地加机器、加功能，承受高负载。
不容易出现单点故障。即使一个服务失败了，不会影响到其他服务。

但是这样的架构也会有一些问题，例如：例如2个项目在一台服务器上依赖不同版本的模块。在没必要多加一台服务器的情况下。

Docker 的出现解决了整个问题。它让程序运行在容器中，每个容器可以分别设定运行环境，并且只占用很少的系统资源。这样就不需要多台服务器了，最简单的情况下，本机运行多个容器，只用一台服务器就实现了面向服务架构，这在以前是做不到的。这种实现方式就叫做微服务。

Micro-Frontends 微前端

有着类似于微服务的设计理念，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。

微前端架构的优势：

技术栈无关主框架不限制接入应用的技术栈，子应用具备完全自主权
独立开发、独立部署子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
独立运行时每个子应用之间状态隔离，运行时状态不共享

其实早在微前端这个概念出来之间就有一些类似的解决方案 —— iframe

iframe

完全隔离了css和js，避免了各个系统之间的样式和js污染。
子应用可以不做任何修改，也可以使用任何网站应用嵌入进来

iframe的缺点

路由状态丢失，刷新一下，iframe 的 url 状态就丢失了
dom 割裂严重，弹窗只能在 iframe 内部展示，无法覆盖全局
.通信非常困难，只能通过 postmessage 传递序列化的消息。
白屏时间太长，对于SPA 应用应用来说无法接受

从而衍生出来一些微前端框架👇🏻

Mooa：基于Angular的微前端服务框架
Single-Spa：最早的微前端框架，兼容多种前端技术栈。
Qiankun：基于Single-Spa，阿里系开源微前端框架。
Icestark：阿里飞冰微前端框架，兼容多种前端技术栈。
Ara Framework：由服务端渲染延伸出的微前端框架。

不同于iframe的微前端架构的特性

HTML Entry 的接入方式。
样式隔离，确保微应用之间样式互相不干扰。
JS 沙箱，确保微应用之间全局变量/事件不冲突。

小结

Monorepo 和 MicroService 的关系？

理论上 Monorepo 和 MicroService 本质上其实没什么关系，但是它们又有一些关系

Monorepo 来集成多个项目，MicroService 把一个项目拆成多个单元项目

？？？哈哈😄，这不是自相矛盾嘛，其实不然它们不是一码事。

Monorepo 是利开发阶段，MicroService是项目生产时。

并且 Monorepo 和 MicroService 可以共存相辅相成。

微服务把项目拆分成多个单元项目从而划分了项目职责；让项目更加清晰单一，Monorepo 通过对多个单元项目的集中管理，让项目保持一致性，清晰的依赖关系等

certbot申请泛域名

Ruoduan — Invalid Date

缘起

今天在找文档的时候翻看之前写的 blog，发现我的 blog chrome 显示不安全；

“ 我记得我的 SSL 证书续期是不是泛域名的顺势重新申请了个泛域名的 ”

步骤如下：👇🏻

certbot 之前的文章

1. 申请

sudo certbot certonly -d "*.ruoduan.cn" -d ruoduan.cn --manual --preferred-challenges dns-01 --server https://acme-v02.api.letsencrypt.org/directory

2. 操作

按照提示一直 Enter Enter ~

3. 设置 DNS TXT 记录

在操作第二部的时候会生成一个Txt 记录，去你的域名 DNS 添加一下哦
然后 Enter 验证就行了
替换nginx 中的 ssl 配置文件
nginx -s reload

完

flutter-route实践

Ruoduan — Invalid Date

Flutter中的路由和React很相似通常指一个页面跳转到另一个页面；在这里面我们称之为路由栈

flutter 路由通常有三种方式：👇🏻

Navigator.push

Navigator.push( context,
    MaterialPageRoute(builder: (context) {
        return Page1();
}));

这段代码用到了2个 API 分别是：

Navigator
MaterialPageRoute

Navigator

第一种方法 ✅

Navigator是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。Navigator提供了一系列方法来管理路由栈，在此我们只介绍其最常用的两个方法

Future push(BuildContext context, Route route)

将给定的路由入栈（即打开新的页面），返回值是一个Future对象，用以接收新路由出栈（即关闭）时的返回数据。

bool pop(BuildContext context, [ result ])

将栈顶路由出栈，result为页面关闭时返回给上一个页面的数据。

Navigator 还有很多其它方法，如Navigator.replace、Navigator.popUntil等，详情请参考API文档或SDK源码注释，在此不再赘述。下面我们还需要介绍一下路由相关的另一个概念“命名路由”。

MaterialPageRoute

MaterialPageRoute继承自PageRoute类，PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。MaterialPageRoute 是Material组件库提供的组件，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画：

入参

MaterialPageRoute({
    WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  })

builder 是一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。我们通常要实现此回调，返回新路由的实例。
settings 包含路由的配置信息，如路由名称、是否初始路由（首页）。
maintainState：默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置maintainState为false。
fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框，在iOS中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）。

RoutesMap

第二种方法 ✅

顾名思义 路由表的方式，和我们Vue`React很相似直接在MaterialApp中注册路由表, 我们给每一个路由定义一个路径，这种方式称之为命名路由`

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //注册路由表
  routes: {
    "/":(context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
    'page1': (context) => Page1(),
    'page2': (context) => Page2()
  },
);

打开方式：

onPressed: () {
  Navigator.pushNamed(context, "new_page");
  // 对比之前的方式
  //Navigator.push(context,
  //  MaterialPageRoute(builder: (context) {
  //  return NewRoute();
  //}));  
},

onGenerateRoute

第三种方法✅ 这个方式，我们称之为钩子路由，其实就是在执行页面跳转的时候执行一个方法来判断类似 拦截器的意思

MaterialApp有一个onGenerateRoute属性，它在打开命名路由时可能会被调用，之所以说可能，是因为当调用Navigator.pushNamed(...)打开命名路由时，如果指定的路由名在路由表中已注册，则会调用路由表中的builder函数来生成路由组件；如果路由表中没有注册，才会调用onGenerateRoute来生成路由。onGenerateRoute回调签名如下：

Route<dynamic> Function(RouteSettings settings)

很简单举个例子🌰

 MaterialApp(
    // ... 省略无关代码

    onGenerateRoute: (RouteSettings settings) {
      String routeName = settings.name;
      print(settings);
      switch (routeName) {
        case '/':
          return MaterialPageRoute(builder: (context) {
            return MyHomePage(title: 'Flutter Demo Home Page');
          });

        case 'page1':
          return MaterialPageRoute(builder: (context) {
            return Page1(ps: settings.arguments);
          });
        case 'page2':
          return MaterialPageRoute(builder: (context) {
            return Page2(text: settings.arguments);
          });
        // 路由不匹配默认返回首页
        default:
          return MaterialPageRoute(builder: (context) {
            return MyHomePage(title: 'Flutter Demo Home Page');
          });
      }
    });

有了这个方法我们可以有很选择，当然也可以和 RouteMap 结合起来做，因为只有路径匹配不到路由表的时候才会执行 onGenerateRoute 匹配

传参

有了路由跳转当然少不了传参 🤖

if

如果使用第一种方式的话，我们可以通过ModalRoute 直接拿到传递的参数

// 获取路由参数
var  params = ModalRoute.of(context).settings.arguments as Map;

else

否则的话,命名路由可以直接定义接收

举个例子🌰

class Page2 extends StatelessWidget {
  const Page2({Key key, this.text}) : super(key: key);
  final String text; // 定义接收 text 参数

  @override
  Widget build(BuildContext context) {
    // 获取路由参数
    var params = ModalRoute.of(context).settings.arguments;

    if (params == null) {
      // 当路由参数为空的时候，使用 props 参数
      params = text;
    }

    return Scaffold(
      appBar: AppBar(
        title: Text("page2"),
      ),
      body: Center(
        child: Text('page2 路由参数：$params'),
      ),
    );
  }

}

小结

上面三种方式，使用命名路由是最推荐的，因为:

语义明确
代码集中好维护、管理
可通过onGenerateRoute做一些拦截处理

demo code

完整的代码

main.dart

import "package:flutter/material.dart";

// 导入路由页面
import './Page/Page1.dart';
import './Page/Page2.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        initialRoute: '/',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),

        // 注册路由表
        // routes: {
        //   "/":(context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
        //   'page1': (context) => Page1(),
        //   'page2': (context) => Page2()
        // },
        onGenerateRoute: (RouteSettings settings) {
          String routeName = settings.name;
          print(settings);
          switch (routeName) {
            case '/':
              return MaterialPageRoute(builder: (context) {
                return MyHomePage(title: 'Flutter Demo Home Page');
              });

            case 'page1':
              return MaterialPageRoute(builder: (context) {
                return Page1(ps: settings.arguments);
              });
            case 'page2':
              return MaterialPageRoute(builder: (context) {
                return Page2(text: settings.arguments);
              });
            // 路由不匹配默认返回首页
            default:
              return MaterialPageRoute(builder: (context) {
                return MyHomePage(title: 'Flutter Demo Home Page');
              });
          }

          // return MaterialPageRoute(builder: (context) {
          //   return MyHomePage(title: 'Flutter Demo Home Page')
          // });
        });
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _ct = 1;

  void addCt() {
    setState(() {
      _ct++;
    });
  }

  void reCt() {
    setState(() {
      _ct = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              '这里是首页',
            ),
            new Text(
              '$_ct',
              style: Theme
                  .of(context)
                  .textTheme
                  .headline4,
            ),
            ElevatedButton(onPressed: reCt, child: Text('复位')),
            ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, 'page1',
                      arguments: {'index': _ct, 'add': addCt});
                },
                child: Text('打开页面1')),
            ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, 'page2',
                      arguments: '传给页面2的参数 嘻嘻嘻爱');
                },
                child: Text('打开页面2'))
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: this.addCt,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

Page1.dart

import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  const Page1({Key key, this.ps}) : super(key: key);
  final Map ps;

  @override
  Widget build(BuildContext context) {
    // 获取路由参数
    var  params = ModalRoute.of(context).settings.arguments as Map;

    if (params == null) {
      params = ps;
    }

    return Scaffold(
      appBar: AppBar(
        title: Text("page1"),
      ),
      body: Center(
       child: new Column(
         children: [
           new Text(params['index'].toString()),
           new ElevatedButton(onPressed: (){
             params['add']();
           }, child: Text('调用路由传递的方法-增加'))
         ],
       ),
      ),
    );
  }

}

Page2.dart

import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
  const Page2({Key key, this.text}) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    // 获取路由参数
    var params = ModalRoute.of(context).settings.arguments;

    if (params == null) {
      // 当路由参数为空的时候，使用 props 参数
      params = text;
    }

    return Scaffold(
      appBar: AppBar(
        title: Text("page2"),
      ),
      body: Center(
        child: Text('page2 路由参数：$params'),
      ),
    );
  }

}

LeetCode-三周攻克数据结构-栈-队列篇

Ruoduan — Invalid Date

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

本文题目全部来自 LeetCode

使用 Typescript

本篇文章全部收藏于专栏 3周攻克数据结构-LeetCode

本文所有代码和解题步骤将放置 GitHub仓库

DAY9

1. 有效的括号

给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。

有效字符串需满足：

左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。

示例 1：

输入：s = "()" 输出：true 示例 2：

输入：s = "()[]{}" 输出：true 示例 3：

输入：s = "(]" 输出：false 示例 4：

输入：s = "([)]" 输出：false 示例 5：

输入：s = "{[]}" 输出：true

方法1：栈匹配法

栈的特性：先进先出

建立一个括号的映射: 括号左边 => 匹配右边

遍历判断左边进栈

判断右边取栈- 判断是否匹配

function isValid(s: string): boolean {
   // 奇数直接 返回 false
   if (s.length % 2 !== 0) return false

   // 新建一个栈
   const stack = []
   // 映射 三个括号
   const map = {
       '(':')',
       '[':']',
       '{':'}',
   }

   for (let str of s) {
       // 是左括号的话 就进栈 判断
       if ( str in map ){
           stack.push(str)
           continue;
       }
       // 右括号的话，判断栈的最后一个是否匹配【完整的括号】
       if (map[stack.pop()] !== str) return false
   }

   return !stack.length
};

2. 用栈实现队列

你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作（push、pop、peek、empty）：

实现 MyQueue 类：

void push(int x) 将元素 x 推到队列的末尾 int pop() 从队列的开头移除并返回元素 int peek() 返回队列开头的元素 boolean empty() 如果队列为空，返回 true ；否则，返回 false

说明：

你只能使用标准的栈操作 —— 也就是只有 push to top, peek/pop from top, size, 和 is empty 操作是合法的。 你所使用的语言也许不支持栈。你可以使用 list 或者 deque（双端队列）来模拟一个栈，只要是标准的栈操作即可。

进阶：

你能否实现每个操作均摊时间复杂度为 O(1) 的队列？换句话说，执行 n 个操作的总时间复杂度为 O(n) ，即使其中一个操作可能花费较长时间。

示例：

输入：


["MyQueue", "push", "push", "peek", "pop", "empty"]
[[], [1], [2], [], [], []]
输出：
[null, null, null, 1, 1, false]

解释：
MyQueue myQueue = new MyQueue();
myQueue.push(1); // queue is: [1]
myQueue.push(2); // queue is: [1, 2] (leftmost is front of the queue)
myQueue.peek(); // return 1
myQueue.pop(); // return 1, queue is [2]
myQueue.empty(); // return false


提示：

1 <= x <= 9 最多调用 100 次 push、pop、peek 和 empty 假设所有操作都是有效的 （例如，一个空的队列不会调用 pop 或者 peek 操作

方法1：双栈实现

class MyQueue {
    // 进栈
    public stack: number[] = []
    // 出栈
    public stackOut: number[] = []

    // 吧进栈数据倒入到出栈
    inOut (): void {
        while (this.stack.length) {
            this.stackOut.push(this.stack.pop());
        }
    }

    push(x: number): void {
        this.stack.push(x)
    }

    pop(): number {
        if (!this.stackOut.length) {
            this.inOut();
        }
        return this.stackOut.pop();
    }

    peek(): number {
        if (!this.stackOut.length) {
            this.inOut();
        }
        return this.stackOut[this.stackOut.length - 1];
    }

    empty(): boolean {
        return this.stackOut.length === 0 && this.stack.length === 0;
    }
}

/**
 * Your MyQueue object will be instantiated and called as such:
 * var obj = new MyQueue()
 * obj.push(x)
 * var param_2 = obj.pop()
 * var param_3 = obj.peek()
 * var param_4 = obj.empty()
 */

科普篇

图片均来自网络

栈：后进先出（LIFO-last in first out）:最后插入的元素最先出来。

队列：先进先出（FIFO-first in first out）:最先插入的元素最先出来。

LeetCode-三周攻克数据结构-字符串篇

Ruoduan — Invalid Date

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

本文题目全部来自 LeetCode

使用 Typescript

本篇文章全部收藏于专栏 3周攻克数据结构-LeetCode

本文所有代码和解题步骤将放置 GitHub仓库

DAY6

1. 字符串中的第一个唯一字符

给定一个字符串，找到它的第一个不重复的字符，并返回它的索引。如果不存在，则返回 -1。



示例：

s = "leetcode"
返回 0

s = "loveleetcode"
返回 2

方法1：哈希表查询

比较简单不贴更多解法了

function firstUniqChar(s: string): number {
  let map = {}
  
  for (let i of s) {
      map[i] ? map[i] += 1 : map[i] = 1
  }
  
  for(let i = 0; i < s.length; i++) if(map[s[i]] === 1) return i;

  return -1
};

2. 赎金信

 给定一个赎金信 (ransom) 字符串和一个杂志(magazine)字符串，判断第一个字符串 ransom 能不能由第二个字符串 magazines 里面的字符构成。如果可以构成，返回 true ；否则返回 false。

(题目说明：为了不暴露赎金信字迹，要从杂志上搜索各个需要的字母，组成单词来表达意思。杂志字符串中的每个字符只能在赎金信字符串中使用一次。)



示例 1：

输入：ransomNote = "a", magazine = "b"
输出：false
示例 2：

输入：ransomNote = "aa", magazine = "ab"
输出：false
示例 3：

输入：ransomNote = "aa", magazine = "aab"
输出：true


提示：
 你可以假设两个字符串均只含有小写字母。

方法1：操作字符串

function canConstruct(ransomNote: string, magazine: string): boolean {
    for (let s of ransomNote) {
        // 杂志中不包含赎金信中的字直接返回 false 
        if(magazine.indexOf(s) === -1) return false
        // 移除包含的这个字符串
        magazine = magazine.replace(s, '')
    }

    return true
};

方法2：哈希表查询

function canConstruct(ransomNote: string, magazine: string): boolean {
    // 建立哈希表
    const map = new Map();
    // 写入赎金信的值
    for (let s of ransomNote) {
        map.has(s) ? map.set(s, map.get(s) + 1) : map.set(s, 1);
    }
    // 杂志的值填满 减去每个值
    for (let s of magazine) {
        if (map.get(s)) map.set(s, map.get(s) - 1);
    }

    // 没有填满返回 false
    for (let v of map.values()) {
        if (v) return false;
    }

    return true;
}

3. 有效的字母异位词

给定两个字符串 s 和 t ，编写一个函数来判断 t 是否是 s 的字母异位词。

注意：若 s 和 t 中每个字符出现的次数都相同，则称 s 和 t 互为字母异位词。



示例 1:

输入: s = "anagram", t = "nagaram"
输出: true
示例 2:

输入: s = "rat", t = "car"
输出: false


提示:

1 <= s.length, t.length <= 5 * 104
s 和 t 仅包含小写字母


进阶: 如果输入字符串包含 unicode 字符怎么办？你能否调整你的解法来应对这种情况？

方法1：排序

function isAnagram(s: string, t: string): boolean {
    // 转换成 -> 数组 -> 排序 -> 转换成字符串; 判断是否相等
    return s.length == t.length && [...s].sort().join('') === [...t].sort().join('')
};

方法2：哈希表[unicode 编码]

进阶：处理 unicode 字符

这个方法比较 hack，利用的是 unicode表的码位值计算

function isAnagram(s: string, t: string): boolean {
    // 长度不相等直接 返回 false
    if (s.length !== t.length) {
        return false;
    }

    // 初始化一个26个字母的数组
    const arr = new Array(26).fill(0);

    /**
     * 填入 unicode 码点 减去第一个 英文字母的码点
     * 例如 字母 'a' -> 97; 'b' -> 98 = 1; 不会出现负数
     */
    for (let i = 0; i < s.length; ++i) {
        arr[s.codePointAt(i) - 'a'.codePointAt(0)]++;
    }

    // 用 t 的剩余 unicode 码点 来清空；出现 负数说明不一致 返回 false
    for (let i = 0; i < t.length; ++i) {
        arr[t.codePointAt(i) - 'a'.codePointAt(0)]--;
        if (arr[t.codePointAt(i) - 'a'.codePointAt(0)] < 0) {
            return false;
        }
    }

    return true
};

本期的题目都比较简单，主要是对前面哈希表，队列方法放到字符串上处理

下期就开始比较复杂一点点的 链表 & 递归方法了哦

LeetCode-三周攻克数据结构-链表篇-2

Ruoduan — Invalid Date

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

本文题目全部来自 LeetCode

使用 Typescript

本篇文章全部收藏于专栏 3周攻克数据结构-LeetCode

本文所有代码和解题步骤将放置 GitHub仓库

DAY8

1. 反转链表

给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。

输入：head = [1,2,3,4,5]
输出：[5,4,3,2,1]

通用的解题思路：链表的题目通常情况下都是用递归去解决，这道题可以用递归和双指针来解决，其实思路都是一样的看图 👇🏻

方法1：递归

递归理解起来可能有些难理解，其实他和双指针的做法是一样的，都是把下一指针向后指

function reverseList(head: ListNode | null): ListNode | null {
    // 如果当前链表和下一个链表不存在返回当前 head
    if (head == null || head.next == null) {
        return head;
    }
    // 递归
    const newHead = reverseList(head.next);
    // 让链表指针向后指
    head.next.next = head;
    head.next = null;

    return newHead;
};

方法2：双指针

双指针的代码比较清晰了。

定义2个指针和寄存器

让第一个头部指向 null，代表最后一个

每次移动2个指针的位置

tmp ：寄存器储蓄下一个链表

2个链表交换位置

function reverseList(head: ListNode | null): ListNode | null {
    if(!head || !head.next) return head;

    // 指针 pre 【上一个】
    let pre = null
    // 定义寄存器
    let tmp = null
    // 指针 cur 【下一个】
    let cur = head

    // 移动指针
    while(cur) {
        tmp = cur.next;
        cur.next = pre;
        pre = cur;
        cur = tmp;
    }
    return pre;
};

2. 删除排序链表中的重复元素

示例1：

存在一个按升序排列的链表，给你这个链表的头节点 `head` ，请你删除所有重复的元素，使每个元素 **只出现一次** 。

返回同样按升序排列的结果链表。

输入：head = [1,1,2]
输出：[1,2]

示例2：

输入：head = [1,1,2,3,3]
输出：[1,2,3]

方法1：一次遍历

注意📢：链表是排序好的!

我们只需要遍历一次，不断地和后面的元素做比较，发现相等跳过即可

function deleteDuplicates(head: ListNode | null): ListNode | null {
    if (!head) return head

    let item = head
    
    // 因为是升序的我们可以拿当前的链表不断的和下一个比较，发现重复就跳过
    while (item.next) {
        if (item.val === item.next.val) {
            // 重复，跳过
            item.next = item.next.next;
        } else {
            item = item.next
        }
    }

    return head
};

科普篇

图片文字，均来自网络

链表

线性的顺序存储数据，而是在每一个节点里存到下一个节点的指针(Pointer)。由于不必须按顺序存储，链表的插入和删除操作可以达到O(1)的复杂度。本文将讲解单向链表和双向链表，其中双向链表会给出部分关键代码实现。

单向链表

单向链表(单链表)是链表的一种，它由节点组成，每个节点都包含下一个节点的指针，下图就是一个单链表，表头为空，表头的后继节点是”结点10”(数据为10的结点)，“节点10”的后继结点是”节点20”(数据为10的结点)，…

双向链表

双向链表(双链表)是链表的一种。和单链表一样，双链表也是由节点组成，它的每个数据结点中都有两个指针，分别指向直接后继和直接前驱。所以，从双向链表中的任意一个结点开始，都可以很方便地访问它的前驱结点和后继结点。一般我们都构造双向循环链表。

LeetCode-三周攻克数据结构-链表篇-1

Ruoduan — Invalid Date

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

本文题目全部来自 LeetCode

使用 Typescript

本篇文章全部收藏于专栏 3周攻克数据结构-LeetCode

本文所有代码和解题步骤将放置 GitHub仓库

DAY7

1. 环形链表

给定一个链表，判断链表中是否有环。

如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。 为了表示给定链表中的环，我们使用整数 pos 来表示链表尾连接到链表中的位置（索引从 0 开始）。 如果 pos 是 -1，则在该链表中没有环。注意：pos 不作为参数进行传递，仅仅是为了标识链表的实际情况。

如果链表中存在环，则返回 true 。 否则，返回 false 。

输入：head = [3,2,0,-4], pos = 1

输出：true

解释：链表中有一个环，其尾部连接到第二个节点。

输入：head = [1], pos = -1

输出：false

解释：链表中没有环。

单链表的构造方法：👇🏻

class ListNode {
      val: number
      next: ListNode | null
      constructor(val?: number, next?: ListNode | null) {
          this.val = (val===undefined ? 0 : val)
          this.next = (next===undefined ? null : next)
      }
  }

方法1：哈希表查询

建一个哈希表储存已经处理过的值

遍历链表；当前值内链表包含则表示有换

function hasCycle(head: ListNode | null): boolean {
    // 建表记录
    const MAP = []

    while(head) {
        // 存即有环
        if(MAP.includes(head)){
            return true
        }
        // 判断过的计入哈希表
        MAP.push(head)
        // 判断下一个 链路
        head = head.next
    }

    // 无环
    return false
};

方法1-1：哈希表延升法：链表记录法，也叫污链表法

找过的链路增加一个 flag 标识符

遇到标识符说明有环

缺点：会改变原有数据结构

优点：不需要单独展位一个内存

function hasCycle(head: any): boolean {
    while (head) {
        if(head.flag) {
            return true
        }
        head.flag = true;
        head = head.next;
    }

    return false
};

方法2：快慢指针

快慢指针和我们之前做的双指针的题原理大致是一样的：

一个是用2个指针缩短路径，一个是用2个指针减少占用内存（对比哈希表解法）

快慢指针的原理很简单就是遍历一次链表，快指针比慢指针快一步，指针重叠则说明有环

function hasCycle(head: ListNode | null): boolean {
    if (!head) return false

    // 初始化 快指针和慢指针
    let slow_p = head
    let fast_p = head

    while (fast_p.next !== null && fast_p.next.next !== null) {
        // 快指针比慢指针快一步
        slow_p = slow_p.next
        fast_p = fast_p.next.next
        // 如果快指针追上了慢指针则证明有环
        if (slow_p === fast_p) return true
    }

    return false
};

方法3：JS语言特性

JSON.stringify方法会自动检测传入的对象是否为环，如果JSON.stringify成功执行，那说明传入的对象一定不是环

function hasCycle(head: ListNode | null): boolean {
    try {
        JSON.stringify(head)
        return false
    } catch {
        return true
    }
};

2. 合并两个有序链表

将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。

输入：l1 = [1,2,4], l2 = [1,3,4]
输出：[1,1,2,3,4,4]
示例 2：

输入：l1 = [], l2 = []
输出：[]
示例 3：

输入：l1 = [], l2 = [0]
输出：[0]


提示：

两个链表的节点数目范围是 [0, 50]
-100 <= Node.val <= 100
l1 和 l2 均按 非递减顺序 排列

方法1：递归

function mergeTwoLists(l1: ListNode | null, l2: ListNode | null): ListNode | null {
    
    // 其中一个空了证明排序 排完了
    if (!l1 || !l2) {
        return l1 || l2
    } 

    if (l1.val < l2.val) {
        l1.next = mergeTwoLists(l1.next, l2);
        return l1;
    } else {
        l2.next = mergeTwoLists(l1, l2.next);
        return l2;
    }
};

方法2：迭代

function mergeTwoLists(l1: ListNode | null, l2: ListNode | null): ListNode | null {
    // 已知范围最小的是 0，nwe 一个出来做比较
    const newList = new ListNode(0);
    let cur = newList;

    while (l1 && l2) {
        if (l1.val <= l2.val) {
            cur.next = l1;
            l1 = l1.next;
        } else {
            cur.next = l2;
            l2 = l2.next;
        }
        cur = cur.next;
    }

    // 合并后 l1 和 l2 最多只有一个还未被合并完，我们直接将链表末尾指向未合并完的链表即可
    cur.next = l1 ? l1 : l2;
    return newList.next;
};

3. 移除链表元素

方法1：递归

function removeElements(head: ListNode | null, val: number): ListNode | null {
    if (head === null) return head

    head.next = removeElements(head.next, val); 
    // 满足条件跳过当前 链表
    return head.val === val ? head.next : head;

};

方法2：迭代

function removeElements(head: ListNode | null, val: number): ListNode | null {
   const preHead = new ListNode(0);
    preHead.next = head;

    let cur = preHead;

    while (cur.next !== null) {
        if (cur.next.val == val) {
            cur.next = cur.next.next;
        } else {
            cur = cur.next;
        }
    }
    return preHead.next;
};

总结

链表数据结构，大都是使用递归来处理

LeetCode-三周攻克数据结构-矩阵Matrix

Ruoduan — Invalid Date

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

本文题目全部来自 LeetCode

使用 Typescript

本篇文章全部收藏于专栏 3周攻克数据结构-LeetCode

本文所有代码和解题步骤将放置 GitHub仓库

DAY5

1. 有效的数独

请你判断一个 9x9 的数独是否有效。只需要 根据以下规则 ，验证已经填入的数字是否有效即可。

数字 1-9 在每一行只能出现一次。
数字 1-9 在每一列只能出现一次。
数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。（请参考示例图）
数独部分空格内已填入了数字，空白格用 '.' 表示。

注意：

一个有效的数独（部分已被填充）不一定是可解的。
只需要根据以上规则，验证已经填入的数字是否有效即可。

示例：

输入：board = 
[["5","3",".",".","7",".",".",".","."]
,["6",".",".","1","9","5",".",".","."]
,[".","9","8",".",".",".",".","6","."]
,["8",".",".",".","6",".",".",".","3"]
,["4",".",".","8",".","3",".",".","1"]
,["7",".",".",".","2",".",".",".","6"]
,[".","6",".",".",".",".","2","8","."]
,[".",".",".","4","1","9",".",".","5"]
,[".",".",".",".","8",".",".","7","9"]]
输出：true
示例 2：

输入：board = 
[["8","3",".",".","7",".",".",".","."]
,["6",".",".","1","9","5",".",".","."]
,[".","9","8",".",".",".",".","6","."]
,["8",".",".",".","6",".",".",".","3"]
,["4",".",".","8",".","3",".",".","1"]
,["7",".",".",".","2",".",".",".","6"]
,[".","6",".",".",".",".","2","8","."]
,[".",".",".","4","1","9",".",".","5"]
,[".",".",".",".","8",".",".","7","9"]]
输出：false

解释：除了第一行的第一个数字从 5 改为 8 以外，空格内其他数字均与 示例1 相同。 但由于位于左上角的 3x3 宫内有两个 8 存在, 因此这个数独是无效的。

方法1：双层遍历-[哈希表]; 【空间换时间】

解法：
1. 行和列都比较简单直接`遍历`就可以了
2.主要是 `3x3宫格` 我们分析下 `3x3宫格`宫格的规律 👇🏻
boxIndex = Math.floor(row/3) * 3 + Math.floor(columns/3)

接下来就比较简单了：
3. 既然是空间换时间 我们开三个`哈希表`来储存 行、列、9宫格 
4. 遍历的时候每次储存当前值，用哈希表查询判断是否重复

时间 & 空间: O(1)

function isValidSudoku(board: string[][]): boolean {
    /** 初始化横、纵、小九宫格
     *  每个元素 用 0 表示未被使用,再赋值为一个 map 哈希表
     */
    
    // 每行
    let rows = new Array(9).fill(0).map(() => new Map())
    // 每列
    let columns = new Array(9).fill(0).map(() => new Map())
    // 每个九宫格
    let boxes = new Array(9).fill(0).map(() => new Map())

    for(let i = 0; i<9; i++) {
        for(let j = 0; j<9; j++) {
            // 遇到 . 跳过
            if(board[i][j] === '.')continue
            // 当前元素
            let num = board[i][j]
            // 九宫格下标
            let box_idx = Math.floor(i/3)*3 + Math.floor(j/3)

            // 判断重复直接 false
            if(rows[i].has(num)) return false
            if(columns[j].has(num)) return false
            if(boxes[box_idx].has(num)) return false

            // 每次填充当前元素，1表示为 true； 被使用过了
            rows[i].set(num, 1)
            columns[j].set(num, 1)
            boxes[box_idx].set(num, 1)
        }
    }

    return true

}

2. 矩阵置零

给定一个 m x n 的矩阵，如果一个元素为 0 ，则将其所在行和列的所有元素都设为 0 。请使用原地算法。

进阶：

一个直观的解决方案是使用 O(mn) 的额外空间，但这并不是一个好的解决方案。一个简单的改进方案是使用 O(m + n) 的额外空间，但这仍然不是最好的解决方案。你能想出一个仅使用常量空间的解决方案吗？

示例1：

输入：matrix = [[1,1,1],[1,0,1],[1,1,1]] 
输出：[[1,0,1],[0,0,0],[1,0,1]]

示例2：

输入：matrix = [[0,1,2,0],[3,4,5,2],[1,3,1,5]] 
输出：[[0,0,0,0],[0,4,5,0],[0,3,1,0]]

方法1：数组标记法

空间换时间
时间复杂度：O(mn)O(mn)
空间复杂度：O(m+n)O(m+n)

思路还是一样的：
1. 遍历数组记录行、列 出现的下标，也就是 x,y 轴的坐标
2. 根据距离下来的坐标遍历对 矩阵置 0

/**
 Do not return anything, modify matrix in-place instead.
 */
function setZeroes(matrix: number[][]): void {
    // 储存 行、列 出现过0的位置 并且去重 
    const rowsIndex = new Set()
    const columnsIndex = new Set()

    // 矩阵 长、宽
    const m = matrix.length
    const n = matrix[0].length

    // 筛选出 x,y 坐标出现过 0 的位置
    for (let i = 0; i < m; i++) {
        for (let j = 0; j < n; j++) {
            if(!matrix[i][j]) {
                rowsIndex.add(i)
                columnsIndex.add(j)
            }
        }
    } 

    // 置为 0 
    for (let i = 0; i < m; i++) {
        for (let j = 0; j < n; j++) {
            if(Array.from(rowsIndex).includes(i) || Array.from(columnsIndex).includes(j)) {
                matrix[i][j] = 0
            }
        }
    } 

};

LeetCode-三周攻克数据结构-数组篇-3

Ruoduan — Invalid Date

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

本文题目全部来自 LeetCode

使用 Typescript

本篇文章全部收藏于专栏 3周攻克数据结构-LeetCode

本文所有代码和解题步骤将放置 GitHub仓库

DAY4

1. 重塑矩阵

在MATLAB中，有一个非常有用的函数 reshape，它可以将一个矩阵重塑为另一个大小不同的新矩阵，但保留其原始数据。

给出一个由二维数组表示的矩阵，以及两个正整数r和c，分别表示想要的重构的矩阵的行数和列数。

重构后的矩阵需要将原始矩阵的所有元素以相同的行遍历顺序填充。

如果具有给定参数的reshape操作是可行且合理的，则输出新的重塑矩阵；否则，输出原始矩阵。

示例 1:

输入: 
nums = 
[[1,2],
 [3,4]]
r = 1, c = 4
输出: 
[[1,2,3,4]]
解释:
行遍历nums的结果是 [1,2,3,4]。新的矩阵是 1 * 4 矩阵, 用之前的元素值一行一行填充新矩阵。
示例 2:

输入: 
nums = 
[[1,2],
 [3,4]]
r = 2, c = 4
输出: 
[[1,2],
 [3,4]]
解释:
没有办法将 2 * 2 矩阵转化为 2 * 4 矩阵。 所以输出原矩阵。
注意：

给定矩阵的宽和高范围在 [1, 100]。
给定的 r 和 c 都是正数。

方法1：双循环

拍平数组

按照行数r，列数c 重新排列

function matrixReshape(mat: number[][], r: number, c: number): number[][] {
    // 拍平二维数组
    let newMat: any = mat.flat()
    
    // 判断个数是否一致，一致才能重塑
    if (r * c !== newMat.length) return mat

    // r 行
    for (let i = 0; i < r; i++) {
        const item: number[] = []
        // 每行c个
        for (let j = 0; j < c; j ++){
            // 将c个元素从头部拿出，并放入暂存的item数组
            item.push(newMat.shift(newMat[i]))
        }
        // 当前行收集完毕，推入新数组的尾部
        newMat.push(item);
    }

    return newMat
};

方法2：二维数组一维表示

function matrixReshape(mat: number[][], r: number, c: number): number[][] {
    const m = mat.length;
    const n = mat[0].length;
    if (m * n != r * c) {
        return mat;
    }

    const ans = new Array(r).fill(0).map(() => new Array(c).fill(0));
    for (let x = 0; x < m * n; ++x) {
        ans[Math.floor(x / c)][x % c] = mat[Math.floor(x / n)][x % n];
    }
    return ans;
};

2. 杨辉三角

给定一个非负整数 numRows，生成杨辉三角的前 numRows 行。

示例:

输入: 5
输出:
[
     [1],
    [1,1],
   [1,2,1],
  [1,3,3,1],
 [1,4,6,4,1]
]

方法1：2层遍历求解

杨辉三角非常有意思，我们很容易就可以找到呀的规律

每行的第一个元素和最后一个元素永远不会是上一层的和，因为他永远都是1

下一层的值(x),位置(y) 取决上一层的和

得出公式：

x = 当前值
y = 层数
z = 位置

x = y - 1 [ z -1 ] + y - 1 [ z + 1 ]

function generate(numRows: number): number[][] {
    const ret = []
    for(let i = 0; i < numRows; i++) {
        // 创建行，用 1 填充
        const row = new Array(i + 1).fill(1);
        // 填充每一行数据，左右2边不填充, 从 1 开始，结束于倒数第二个
        for (let j = 1; j < row.length - 1; j++){
            // 当前的值 = (上一行的当前个 - 1 [上一个] 值  ) + ( 上一行的当前个数 [下一个] 值 )
            row[j] = ret[i - 1][j - 1] + ret[i - 1][j];
        }
        // 添加当前行
        ret.push(row);
    }

    return ret;
};

科普篇：杨辉三角

注：图片来自网络

要想画杨辉三角，先把 "1" 方在顶点，然后连续在下面按三角形的模式放上数字。
每个数是它上面两个数的和

规律

第一条对角线全是 "1"
下一条对角线是 [正整数]
第三条对角线是 [三角形数]
第四条对角线是 [四面体数]

对称

杨辉三角形左右2边是对称的

每行的和

每行的和是上一行的和的两倍 (2^2)

内容有很多就不一一列举了，感兴趣的朋友可以去了解下

LeetCode-三周攻克数据结构-数组篇-2

Ruoduan — Invalid Date

本文题目全部来自 LeetCode

使用 Typescript

本篇文章全部收藏于专栏 3周攻克数据结构-LeetCode

本文所有代码和解题步骤将放置 GitHub仓库

DAY3

1. 两个数组的交集 II

给定两个数组，编写一个函数来计算它们的交集。

示例 1：

输入：nums1 = [1,2,2,1], nums2 = [2,2]

输出：[2,2] 示例 2:

输入：nums1 = [4,9,5], nums2 = [9,4,9,8,4]

输出：[4,9]

说明：

输出结果中每个元素出现的次数，应与元素在两个数组中出现次数的最小值一致。我们可以不考虑输出结果的顺序。

进阶：

如果给定的数组已经排好序呢？你将如何优化你的算法？

如果 nums1 的大小比 nums2 小很多，哪种方法更优？

如果 nums2 的元素存储在磁盘上，内存是有限的，并且你不能一次加载所有的元素到内存中，你该怎么办？

方法1：哈希表查询

哈希表查询空间换时间 ——— O(n)

简历哈希表，值做key次数做value

查询哈希表，按次数判断交集

function intersect(nums1: number[], nums2: number[]): number[] {
    // 创建 哈希表
    let map = new Map()
    // 结果
    let res = []

    // 为nums1 建立 哈希表
    for (let v of nums1) {
        map.has(v) ? map.set(v, map.get(v) + 1) : map.set(v, 1)
    }

    // 遍历 nums2 查找nums1 的哈希表 找到交集
    for (let v2 of nums2) {
        if(map.has(v2)) {
            res.push(v2)
            // 找到了，次数大于 1 减一次，否则删除
            map.get(v2) > 1 ? map.set(v2, map.get(v2) - 1) : map.delete(v2)
        }
    }
    
    return res
};

方法2：双指针

function intersect(nums1: number[], nums2: number[]): number[] {
    // 创建2个数组指针
    let p1 = 0
    let p2 = 0
    // 排序2个数组
    nums1 = nums1.sort((a, b) => a - b)
    nums2 = nums2.sort((a, b) => a - b)

    let res = []
    // 取数组长度最小的一个数组做判断条件
    while (p1 < nums1.length && p2 < nums2.length ) {
        // 找到交集
        if(nums1[p1] === nums2[p2]){
            res.push(nums1[p1])
            p1 ++
            p2 ++
        // 数组1当前指针的值小于数组2的话，指针加一，用下一个数来比较
        } else if (nums1[p1] < nums2[p2]) {
            p1 ++
        // 数组2当前指针的值小于数组1的话，指针加一，用下一个数来比较
        } else {
            p2 ++
        }
    }

    return res
};

2. 买卖股票的最佳时机

给定一个数组 prices ，它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。

你只能选择 某一天 买入这只股票，并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。

返回你可以从这笔交易中获取的最大利润。如果你不能获取任何利润，返回 0 。

 

示例 1：

输入：[7,1,5,3,6,4]
输出：5
解释：在第 2 天（股票价格 = 1）的时候买入，在第 5 天（股票价格 = 6）的时候卖出，最大利润 = 6-1 = 5 。
     注意利润不能是 7-1 = 6, 因为卖出价格需要大于买入价格；同时，你不能在买入前卖出股票。
示例 2：

输入：prices = [7,6,4,3,1]
输出：0
解释：在这种情况下, 没有交易完成, 所以最大利润为 0。
 

提示：

1 <= prices.length <= 105
0 <= prices[i] <= 104

方法1：贪心算法

拟定一个最小值和当前利润

遍历更新最小值和利润

function maxProfit(prices: number[]): number {
    // 利润
    let profit = 0
    // 最小值
    let min = prices[0]

    for (let v of prices) {
        if(v < min){
            min = v

        // 如果出现比最大利润还要大的就进行重新赋值
        }else if(v  - min > profit){ 
            profit = v  - min
        }
    }

    return profit
};

方法2：动态规划

function maxProfit(prices: number[]): number {
    // 存放最小的值
    let minprice = Number.MAX_VALUE
    // 存放差值
    let maxprofit = 0
    
    for (let v of prices) {
        // 每次更新最小的值
        minprice = Math.min(v, minprice)
        // 每次计算差值
        maxprofit = Math.max(v - minprice, maxprofit)
    }

    return maxprofit
};

科普篇

贪心算法：（Greedy Algorithm）

贪心算法即经典的 —— “背包问题”

贪心算法，又名贪婪法，是寻找最优解问题的常用方法，这种方法模式一般将求解过程分成若干个步骤，但每个步骤都应用贪心原则，选取当前状态下最好/最优的选择（局部最有利的选择），并以此希望最后堆叠出的结果也是最好/最优的解。

—— 贪心算法可能拿到的不一定是最优解，但一定是趋向于最优解。

动态规划（# Dynamic Programming）

动态规划也适用于 “背包问题” ，如果说 “贪心算法”是趋向最优解，那么动态规划就是找到动最优解。通过分解找出各个商品的排列组合，筛选组合的时候不断的调整策略即是动态规划

推荐一本算法科普书 —— 算法图解

第八章和第九章中会通过背包问题介绍 “贪心算法” 和 “动态规划”

小尾巴~

本文持续更新专栏 ———— 3周攻克数据结构-LeetCode

LeetCode-三周攻克数据结构-数组篇-1

Ruoduan — Invalid Date

本文题目全部来自 LeetCode

使用 Typescript

本篇文章全部收藏于专栏 3周攻克数据结构-LeetCode

本文所有代码和解题步骤将放置 GitHub仓库

Day1

1. 存在重复元素

给定一个整数数组，判断是否存在重复元素。如果存在一值在数组中出现至少两次，函数返回 true 。如果数组中每个元素都不相同，则返回 false 。

示例 👇🏻

示例 1:

输入: [1,2,3,1]
输出: true
示例 2:

输入: [1,2,3,4]
输出: false
示例 3:

输入: [1,1,1,3,3,4,3,2,4,2]
输出: true

方法1：Set结构

利用Set结构一行解决

function containsDuplicate(nums: number[]): boolean {
    const setNums: Array<any> = [...new Set(nums)]
    return setNums.length !== nums.length
};

方法2：优化版暴力解法

function containsDuplicate(nums: number[]): boolean {
    let newArr: Array<any> = [...nums]
    let res: boolean = false
    for(let i = 0; i <nums.length; i++){
        const item: any = newArr.splice(0, 1)[0]
        res = newArr.includes(item)
        if(res)break
    }
    return res
};

2. 最大子序和

给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。

示例 1：

输入：nums = [-2,1,-3,4,-1,2,1,-5,4]
输出：6
解释：连续子数组 [4,-1,2,1] 的和最大，为 6 。
示例 2：

输入：nums = [1]
输出：1
示例 3：

输入：nums = [0]
输出：0
示例 4：

输入：nums = [-1]
输出：-1
示例 5：

输入：nums = [-100000]
输出：-100000

方法1：动态规划

function maxSubArray(nums: number[]): number {
    let sum = 0;
    let ans = nums[0]
    for(const num of nums) {
        if(sum > 0) {
            sum += num
        } else {
            sum = num
        }
        ans = Math.max(ans, sum)

    }
    return ans
};

DAY2

1. 两数之和

给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。

你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。

你可以按任意顺序返回答案。

 

示例 1：

输入：nums = [2,7,11,15], target = 9
输出：[0,1]
解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。
示例 2：

输入：nums = [3,2,4], target = 6
输出：[1,2]
示例 3：

输入：nums = [3,3], target = 6
输出：[0,1]

方法1：爆破

2 个 for 循环直接暴力解法

  function twoSum(nums: number[], target: number): number[] {
      for (let i = 0; i < nums.length - 1; i++) {
          for (let j = i + 1; j < nums.length; j++) {
              if (target === nums[j] + nums[i]) {
                  return [i, j];
              }
          }
      }
  }

方法2：哈希表查询

建立一个值与下标的哈希表

遍历一次数组用 target - 数组的value = 结果，结果在我们的哈希表里面执行 .has找得到就返回下标


function twoSum(nums: number[], target: number): number[] {
   let map = new Map<number, number>()
   for (let i = 0; i < nums.length; i++) {
      if(map.has(target - nums[i])){
          // 返回建立的哈希表的下标的值，和当前的下标
          return [map.get(target - nums[i]), i];
      } else {
          // 储存值为 key 下标为 index
          map.set(nums[i], i);
      }
   }
   return []
}

2. 合并两个有序数组

给你两个有序整数数组 nums1 和 nums2，请你将 nums2 合并到 nums1 中，使 nums1 成为一个有序数组。

初始化 nums1 和 nums2 的元素数量分别为 m 和 n 。你可以假设 nums1 的空间大小等于 m + n，这样它就> 有足够的空间保存来自 nums2 的元素。

示例 1：

输入：nums1 = [1,2,3,0,0,0], m = 3, nums2 = [2,5,6], n = 3 输出：[1,2,2,3,5,6] 示例 2：

输入：nums1 = [1], m = 1, nums2 = [], n = 0 输出：[1]

方法1：合并数组排序

直接使用 API

function merge(nums1: number[], m: number, nums2: number[], n: number): void {
    nums1.splice(m, nums1.length - m, ...nums2);
    nums1.sort((a, b) => a - b);
};

方法2：双指针

双指针的步骤为了方便查看全写在代码里面了

可以根据官方这张图结合代码来理解 👇

/**
 Do not return anything, modify nums1 in-place instead.
 */
function merge(nums1: number[], m: number, nums2: number[], n: number): void {
   // 定义2个从0 开始的指针，分别用来遍历 nums1 和 nums2
   let p1 = 0, p2 = 0;
   // 空数组储存排序后的值
    const sorted = new Array(m + n).fill(0);
    // 当次排序的值
    var cur: number;
    
    // 开始遍历2个数组
    while (p1 < m || p2 < n) {
        if (p1 === m) {
            cur = nums2[p2++];
        } else if (p2 === n) {
            cur = nums1[p1++];
        } else if (nums1[p1] < nums2[p2]) {
            cur = nums1[p1++];
        } else {
            cur = nums2[p2++];
        }

        sorted[p1 + p2 - 1] = cur;
    }
    for (let i = 0; i != m + n; ++i) {
        nums1[i] = sorted[i];
    }
};

方法3：逆向双指针

方法2的优化版，节省一个内存空间的位置，我们已知mums1 的长度 = m + n，后半部分的元素都是空的所有nums和 nums2 永远不会相交所有从尾部可以直接给nums1赋值

/**
 Do not return anything, modify nums1 in-place instead.
 */
function merge(nums1: number[], m: number, nums2: number[], n: number): void {
    // 指针从尾部开始
    let p1 = m - 1
    let p2 = n - 1
    // 总长度
    let tail = m + n - 1;
    // 当次排序的值
    let cur: number;

    while (p1 >= 0 || p2 >= 0) {
        if (p1 === -1) {
            cur = nums2[p2--];
        } else if (p2 === -1) {
            cur = nums1[p1--];
        } else if (nums1[p1] > nums2[p2]) {
            cur = nums1[p1--];
        } else {
            cur = nums2[p2--];
        }
        nums1[tail--] = cur;
    }
};

小尾巴~

本文持续更新专栏 ———— 3周攻克数据结构-LeetCode

2020-summary

Ruoduan — Invalid Date

启示

前方的路，未来世界的幸存者

本该是 2021年年初，就该写的一篇文章；硬是到年中才写下这篇文章；

原文链接

# 关于技术

# 关于社会

# 关于理财

# 关于生活

关于技术

近年来客户端开发技术涌喷，各种框架、语言、概念层出不穷；但是基本上可以分为一下几个方面👇🏻

前端微服务（微前端）：

微服务不是一个新的概念可以说是一个老生常谈的东西，在服务端或许都玩烂了；比较优秀的解决方案也比较多例如：single-spa、qiankun 等；
- 技术栈无关
- 独立开发、独立部署
- 增量升级
- 独立运行时
- 我们在今年也完成了后台的微服务化,因为组织架构的调整前期虽然前期有所调研，但是还是没有参与进去；确实解决了很多开发中的痛点：例如不团队的风格是不一样，你们的设计喜欢echarts,他们的设计喜欢 antdV 总不能在一套系统中用2套图表，而且目前管理后台已经很重了。还有就是一些开发方式啊，代码风格啊什么；其实这些东西本身和业务本来就没太大关系；诉求本身就是合理；微前端就很好的解决了这个问题。
vite 等新一代构建工具 :
vite 是由我们的网红程序员Evan You. 利用浏览器新特性native ES Module来导入代码；搭建了一个demo；因为是直接在浏览器端进行导入的确实快很多；目前就会生态不太完善有待发展。看了一下他的配置文件是我比较喜欢的遵循一贯作风简单直接，不像webpack 那样有太多的配置和定制，心智负担比较大

跨平台解决方案：
今年是神奇的一年华为发布鸿蒙、Google 的 flutter& Fuchsia 等、万物互联的时代可能马上在逼近。
- 鸿蒙: 网上吵到的沸沸扬扬，具体他是AOSP还是华为所说的微内核咱不关心，这种事情交给科学家，但是我稍微看了下他们的文档，发现还是走的小程序那一套；开发很快但是痛点也差不多。
- flutter从体验来看还是不错的，也是跑了一个demo和找了一些开源的项目跑了一下，说起 flutter就不得不提他的开发语言Dart，Dart这门语言是一门比较新的强类型语言；他有个神奇的特性就是他的编译 —— 既支持JIT又支持AOT 属于混合编译;（其实混合编译在Android 早就有展露）；我个人初步使用的感觉：
  - 1. 声明式UI有点（React的味道），整体使用起来还是比较舒服的心智模型也没有传统 oc |java 那么大
    2. Dart语言还是比较有趣的感觉集众家之所长（C、TS、JS、Py、Java）的味道都有一点，语法糖也比较甜，可以看得出这门语言就是为了 web开发而设计的；面向对象和函数式编程都有点问道，但是又好像缺了点什么。—— 缺了点自己的风格。
全端 App 的时代

今年推出Windows 11 ，可以运行安卓APP了链接

苹果推出M1芯片的mac，所有的 ios - app也可以在电脑上运行了

手机APP可以运行在桌面端！，万物互联一定是未来的趋势；对于用户来说体验完全一致不会有功能的缺失；对于公司来说培养一支开发团队要比在各个平台培养一支团队无论在质量还是成本都是利好的。

关于社会

疫情&疫苗

席卷而来的疫情，真的是打的人们措手不及；首先是医疗板块的飞涨，传统工业的致残打击。不得不说祖国强大了；从疫情控制到疫苗的研发。目前我也是完成第一针的疫苗接种

疫情期间真的是比较难，面临工作上的压力，心理上的压力，经济上的压力；而我也是重新换了工作
显卡&挖矿
- 疫情后的怠工导致半导体等产业收紧，加上矿潮 硬是把显卡价格拉到了第五层。当然也有人在这里面发了财；（几家欢喜，几家忧）身边有好多同事、朋友挖矿、炒币；赚的盆满钵满短短一个月差不多 10w确实很诱人，百倍杠杆千倍杠杆让人疯狂。我对此还是保持比较保守的。因为对区块链了解不多 —— （人永远赚不到自己认知以外的钱）；我的理解来说股票`基金或许还有国家管控，那炒币完全就是资本收割的麦田;无论从交易机制还是运作方式都是大玩家`开挂的；你怎么玩得过氪金的大佬. 当然这都是本人的主观愚见；可以反驳但不必争执。
房产&贷款
- 关于房子，在杭州这个地界房价堪比一线；身边的人也纷纷买房；自己心理也是非常焦灼的。一方面是房子对于中国人而言的稳定 一方面的巨款和贷款压力不知何去何从；就目前而言不是刚需的话还是可以选择性的挑一挑，找准机会再下手。
AI&智能化

从事开发行业，其实AI人工智能，对于我们来说并不是那么的神秘确又特别深奥。

科技正在改变各行各业，我们去饭店吃饭；我看到了收银使用图像识别算法识别菜品来收费，各大厂争相发布各种智能化产品，或者对领域的研究；GitHub 推出的 Copilot,阿里巴巴的低代码开发平台宜搭、imgcook 等

新能源
- 特斯拉再度降价用足球解说那句话留给中国队的时间不多了
- 国产汽车在今年来也是有崛起的趋势，互联网车企：蔚来、小鹏、小米、理想、传统车企：比亚迪、长城；等都在飞速成长；电车的成熟也逐渐走进家庭、社会；

关于理财

今年去接触一些证券，也看了一些书籍，前期投入了一点，有一点小小的收获，也在积极积累理财知识；

养成存钱记账的好习惯，合理分配收入和支出

关于生活

胖了不少，曾经也是天真的以为我是一个怎么吃都吃不胖的一个人；还是我太天真。需要适当减肥控制体重。

频繁打游戏：喜欢打游戏应该适当控制一下时间，留出一些时间独立思考🤔、写作、学习。
吃零食：这个是胖了的主要原因，适当控制一下。
睡太晚：睡得的比较晚，基本上都到12点；一方面原因可能是我们上班晚一个小时的吧；好歹还是睡满了8小时；适当睡早一点。多运动

🎧 🎧 🎧

最近喜欢梁博的歌分享一首 👇🏻

记-vite2-react-初探

Ruoduan — Invalid Date

This Vite

Vite 以原生 ESM 方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

原文链接

参考文档

老规矩脚手架

yarn create @vitejs/app

根据提示操作我这边选择的是 react-ts 模板

支持的模板预设包括：

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts

查看 @vitejs/create-app 获取每个模板的更多细节

完成这一步后会生成一个项目 yarn 装一下包
yarn dev
这时候可以看到我们的 demo 已经跑起来了

配置文件

vite.config.ts

首先我们要配置下 less 安装一下 antd

yarn add antd

在app.tsx 中放一个按钮看看效果

import { DatePicker } from ‘antd’;

自动导入组件库样式插件

安装 less

yarn add -D less

这时候是没有样式的，我们得和webpack 一样，引入一下~
vite 更简洁一点只需要一个插件就搞定了

yarn add -D @vitejs/plugin-react-refresh

import reactRefresh from '@vitejs/plugin-react-refresh'

vite.config.ts


plugins: [
    reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/lib/${name}/style/index.less`,
        },
      ],
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      }
    }
  },

alias 别名设置

import path from 'path

resolve: {
    alias: [
      {
        find: /^~/,
        replacement: path.resolve(__dirname, "src"),
      },
    ],
  },

ts alias 设置

配置 baseUrl & paths

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "~/*": ["src/*"]
    },
    
   ...
   
  },
  "include": ["./src"]
}

这时候页面上的按钮就有样式了

安装 react-router

接下来我们安装一下 react-router 和配置下 Layout，跑一个小小的 demo

yarn add react-router-dom

touch index.tsx

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Layout from "./Layout/Layout";

import App from "~/views/App";
import Home from "~/views/Home";

interface Props {}

const Index: React.FC<Props> = () => {
  return (
    <Router>
      <Layout>
        <Switch>
          <Route path="/app">
            <App />
          </Route>
          <Route path="/home">
            <Home />
          </Route>
        </Switch>
      </Layout>
    </Router>
  );
};

export default Index;

touch Layout.tsx

import React from "react";
import { Menu } from "antd";
import { Link } from "react-router-dom";

interface Props {}

const Layout: React.FC<Props> = ({ children }) => {
  console.log();
  return (
    <div>
      <Menu mode="horizontal">
        <Menu.Item key="App">
          <Link to="/app">App</Link>
        </Menu.Item>
        <Menu.Item key="Home">
          <Link to="/home">Home</Link>
        </Menu.Item>
      </Menu>

      <div style={{ margin: "20px 0" }}>{children}</div>
    </div>
  );
};

export default Layout;

到这里 demo 就完成了

demo-源码

Nginx 开启 HTTP/2

Ruoduan — Invalid Date

记、Nginx 开启 HTTP/2

HTTP 2.0即超文本传输协议 2.0，是下一代HTTP协议。是由互联网工程任务组（IETF）的Hypertext Transfer Protocol Bis (httpbis)工作小组进行开发。是自1999年http1.1发布后的首个更新。 HTTP/2 协议是从 SPDY 演变而来，SPDY 已经完成了使命并很快就会退出历史舞台（例如 Chrome 将在「2016 年初结束对 SPDY 的支持」；Nginx、Apache 也已经全面支持 HTTP/2 ，并也不再支持 SPDY）。一般的大家把 HTTP2 简称为 h2，尽管有些朋友可能不怎么愿意，但是这个简称已经默认化了，特别是体现在浏览器对 HTTP2 都是这个简写的。普通的 HTTPS 网站浏览会比 HTTP 网站稍微慢一些，因为需要处理加密任务，而配置了 h2 的 HTTPS，在低延时的情况下速度会比 HTTP 更快更稳定！

配置Nginx开启http 2.0特别简单，只要在Nginx配置文件中找到你要开启http2.0的域名server模块，然后将 listen 443 ssl;改成 listen 443 ssl http2; 即可。

  server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name www.ruoduan.cn; 
    
    .... 此处其他省略配置
		
    ssl_prefer_server_ciphers on;
    
    location / {
      root /root/www/;
      index index.html;
    }
  }

保存配置文件之后，重启或重载Nginx即可生效：nginx -s reload

服务器配置生成优化网站

推荐个不错的服务器配置生成网站 👇

服务器配置生成优化网站

验证

验证的方式有许多种：插件、network、网站 …

我这里举例 🌰 ，最方便的（code 验证）👇

在浏览器的Console中输入： window.chrome.loadTimes()

set before

set after

sitemap

Ruoduan — Invalid Date

sitemap

Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的 Sitemap 形式，就是XML 文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能地抓取网站。

百度提交

百度搜索资源平台

Google提交

谷歌搜索平台

sitemap.xml

gatsby 中生成

npm install gatsby-plugin-sitemap 安装网站地图插件

Config 配置一下

// In your gatsby-config.js
siteMetadata: {
  siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`]

然后在你的public/ 文件夹下面就会有一个网站地图sitemap.xml文件
之后在百度和Google提交就可以了

其他技术栈可以通过爬虫网站生成 sitemap | 路由生成等，提交

读书笔记 -《你不知道的js-下》

Ruoduan — Invalid Date

深入编程

回忆闭包

function makeAdder(x) {
  // 参数x是一个内层变量
  // 内层函数add()使用x，所以它外围有一个“闭包”
  function add(y) {
    return y + x;
  }
  return add;
}

// plusOne获得指向内层add(..)的一个引用
// 带有闭包的函数在外层makeAdder(..)的x参数上
var plusOne = makeAdder(1);
// plusTen获得指向内层add(..)的一个引用
// 带有闭包的函数在外层makeAdder(..)的x参数上
var plusTen = makeAdder(10);
plusOne(3);
plusOne(41);
plusTen(13);
// 4 <-- 1 + 3
// 42 <-- 1 + 41
// 23 <-- 10 + 13

This

this 并不指向这个函数本身，意识到这一点非常重要，因为这是最常见的误解

function foo() {
  console.log(this.bar);
}
var bar = "global";
var obj1 = {
  bar: "obj1",
  foo: foo,
};
var obj2 = {
  bar: "obj2",
};
// --------
foo(); // “全局的”
obj1.foo(); // "obj1"
foo.call(obj2); // "obj2"
new foo(); // undefined

关于如何设置 this 有 4 条规则，上述代码中的最后 4 行展示了这 4 条规则

在非严格模式下，foo() 最后会将 this 设置为全局对象。在严格模式下，这是未定义的行为，在访问 bar 属性时会出错——因此 “global” 是为 this.bar 创建的值。
obj1.foo() 将 this 设置为对象 obj1。
foo.call(obj2) 将 this 设置为对象 obj2。
new foo() 将 this 设置为一个全新的空对象。

底线:为了搞清楚 this 指向什么，你必须检查相关的函数是如何被调用的。调用方式会是以上 4 种之一，这也会回答“this 是什么”这个问题。

旧与新

polyfilling
transpiling

非 JavaScript

到目前为止，我们介绍的内容都局限于 JavaScript 语言本身。而现实情况是，大多数的 JavaScript 都是编写用于在浏览器这样的环境中运行并与之交互的。严格来说，你编写的代码很大一部分并不直接由 JavaScript 控制。这听起来有点奇怪。

你将遇到的最常见的非 JavaScript 就是 DOM API。举例来说:

var el = document.getElementById( "foo" );

它是一个特殊的对象，通常被称为”宿主对象”

Map

var m = new Map();
var x = { id: 1 },
    y = { id: 2 };
m.set( x, "foo" );
m.set( y, "bar" );
var vals = [ ...m.entries() ];

vals[0][0] === x; // true
vals[0][1]; // "foo"
vals[1][0] === y; // true
vals[1][1]; // "bar"

WeakMap

WeakMap 是 map 的变体，二者的多数外部行为特性都是一样的，区别在于内部内存分配

(特别是其 GC)的工作方式。

WeakMap(只)接受对象作为键。这些对象是被弱持有的，也就是说如果对象本身被垃圾回收的话，在 WeakMap 中的这个项目也会被移除。然而我们无法观测到这一点，因为对象被垃圾回收的唯一方式是没有对它的引用了。但是一旦不再有引用，你也就没有对象引用来查看它是否还存在于这个 WeakMap 中了。

元编程

元编程是指操作目标是程序本身的行为特性的编程。换句话说，它是对程序的编程的编程。

读书笔记 -《你不知道的js-中》

Ruoduan — Invalid Date

类型

JavaScript 有七种内置类型:

空值(null)
未定义(undefined)
布尔值( boolean)
数字(number)
字符串(string)
对象(object)
符号(symbol，ES6 中新增)

ypeof null === "object"; // true

值

数组

arr = [1,2,3]
delete arr[1] // [1, empty, 3]

类数组

有时需要将类数组(一组通过数字索引的值)转换为真正的数组，这一般通过数组工具函数(如 indexOf(..)、concat(..)、forEach(..) 等)来实现。

function foo() {
  var arr = Array.prototype.slice.call(arguments);
  arr.push("bam");
  console.log(arr);
}

foo( "bar", "baz" ); // ["bar","baz","bam"]

用 ES6 中的内置工具函数 Array.from(..) 也能实现同样的功能:

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

生成器（Generator）

var x = 1
function * foo () {
  x++
  yield // 暂停!
  console.log('x:', x)
}
function bar () {
  x++
}
var it = foo()
// 这里启动foo()! it.next();
x // 2 bar();
x // 3 it.next(); // x: 3

迭代消息传递

function* foo(x) {
  var y = x * (yield);
  return y;
}
var it = foo(6);
// 启动foo(..) it.next();
var res = it.next(7);
res.value; // 42

function *foo() {
    var x = yield 2;
    z++;
    var y = yield (x * z);
    console.log( x, y, z );
}
var z = 1;
var it1 = foo();
var it2 = foo();
var val1 = it1.next().value;
var val2 = it2.next().value;
val1 = it1.next( val2 * 10 ).value;
val2 = it2.next( val1 * 5 ).value;
it1.next( val2 / 2 );
it2.next( val1 / 4 );
// 2 <-- yield 2
// 2 <-- yield 2
// 40   <-- x:20,  z:2
// 600  <-- x:200, z:3
// y:300
// 20 300 3
// y:10
// 200 10 3

我们简单梳理一下执行流程

(1) *foo() 的两个实例同时启动，两个 next() 分别从 yield 2 语句得到值 2。 (2)val2 * 10也就是2 * 10，发送到第一个生成器实例it1，因此x得到值20。z从1增

加到 2，然后 20 * 2 通过 yield 发出，将 val1 设置为 40。 (3) val1 * 5 也就是 40 * 5，发送到第二个生成器实例 it2，因此 x 得到值 200。z 再次从 2

递增到 3，然后 200 * 3 通过 yield 发出，将 val2 设置为 600。 (4) val2 / 2 也就是 600 / 2，发送到第一个生成器实例 it1，因此 y 得到值 300，然后打印

出x y z的值分别是20 300 3。 (5) val1 / 4 也就是 40 / 4，发送到第二个生成器实例 it2，因此 y 得到值 10，然后打印出

x y z的值分别为200 10 3。

生产者与迭代器

假定你要产生一系列值，其中每个值都与前面一个有特定的关系。要实现这一点，需要一个有状态的生产者能够记住其生成的最后一个值。

var gimmeSomething = (function () {
  var nextVal
  return function () {
    if (nextVal === undefined) {
      nextVal = 1
    } else {
      nextVal = (3 * nextVal) + 6
    }
    return nextVal
  }
})()

gimmeSomething(); // 1
gimmeSomething(); // 9
gimmeSomething(); // 33
gimmeSomething(); // 105

程序性能

Web Worker

设想一下，把你的程序分为两个部分:一部分运行在主 UI 线程下，另外一部分运行在另一个完全独立的线程中。

一个就是，你会想要知道在独立的线程运行是否意味着它可以并行运行(在多 CPU/ 核心的系统上)，这样第二个线程的长时间运行就不会阻塞程序主线程。否则，相比于 JavaScript 中已有的异步并发，“虚拟多线程”并不会带来多少好处。

从 JavaScript 主程序(或另一个 Worker)中，可以这样实例化一个 Worker:

var w1 = new Worker( "http://some.url.1/mycoolworker.js" );

这个 URL 应该指向一个 JavaScript 文件的位置(而不是一个 HTML 页面!)，这个文件将被加载到一个 Worker 中。然后浏览器启动一个独立的线程，让这个文件在这个线程中作为独立的程序运行。

以下是如何侦听事件(其实就是固定的 “message” 事件):

w1.addEventListener("message", function (evt) {
  // evt.data
});
// 也可以发送 "message" 事件给这个 Worker:
w1.postMessage("something cool to say");
// 在这个 Worker 内部，收发消息是完全对称的:

// "mycoolworker.js"
addEventListener("message", function (evt) {
  // evt.data
});
postMessage("a really cool reply");

注意，专用 Worker 和创建它的程序之间是一对一的关系。也就是说，“message” 事件没有任何歧义需要消除，因为我们确定它只能来自这个一对一的关系:它要么来自这个 Worker，要么来自主页面。

通常由主页面应用程序创建 Worker，但若是需要的话，Worker 也可以实例化它自己的子 Worker，称为 subworker。有时候，把这样的细节委托给一个“主”Worker，由它来创建其他 Worker 处理部分任务，这样很有用。不幸的是，到写作本书时为止，Chrome 还不支持 subworker，不过 Firefox 支持。

要在创建 Worker 的程序中终止 Worker，可以调用 Worker 对象(就像前面代码中的 w1) 上的 terminate()。突然终止 Worker 线程不会给它任何机会完成它的工作或者清理任何资源。这就类似于通过关闭浏览器标签页来关闭页面。

Worker 环境

在 Worker 内部是无法访问主程序的任何资源的。这意味着你不能访问它的任何全局变量，

也不能访问页面的 DOM 或者其他资源。记住，这是一个完全独立的线程。

但是，你可以执行网络操作(Ajax、WebSockets)以及设定定时器。还有，Worker 可以访问几个重要的全局变量和功能的本地复本，包括 navigator、location、JSON 和 applicationCache。

你还可以通过 importScripts(..) 向 Worker 加载额外的 JavaScript 脚本:

// 在Worker内部
importScripts( "foo.js", "bar.js" );

这些脚本加载是同步的。也就是说，importScripts(..) 调用会阻塞余下 Worker 的执行.

共享 Worker

如果你的站点或 app 允许加载同一个页面的多个 tab(一个常见的功能)，那你可能非常希望通过防止重复专用 Worker 来降低系统的资源使用。在这一方面最常见的有限资源就是 socket 网络连接，因为浏览器限制了到同一个主机的同时连接数目。当然，限制来自于同一客户端的连接数也减轻了你的资源压力。

在这种情况下，创建一个整个站点或 app 的所有页面实例都可以共享的中心 Worker 就非常有用了。

这称为 SharedWorker，可通过下面的方式创建(只有 Firefox 和 Chrome 支持这一功能):

var w1 = new SharedWorker( "http://some.url.1/mycoolworker.js" );

因为共享 Worker 可以与站点的多个程序实例或多个页面连接，所以这个 Worker 需要通过某种方式来得知消息来自于哪个程序。这个唯一标识符称为端口(port)，可以类比网络 socket 的端口。因此，调用程序必须使用 Worker 的 port 对象用于通信:

w1.port.addEventListener( "message", handleMessages );
// ..
w1.port.postMessage( "something cool" );
// 初始化端口
w1.port.start();

在共享 Worker 内部，必须要处理额外的一个事件:“connect”。这个事件为这个特定的连

接提供了端口对象。保持多个连接独立的最简单办法就是使用 port 上的闭包(参见本系列《你不知道的 JavaScript(上卷)》的“作用域和闭包”部分)，就像下面的代码一样，把这

个链接上的事件侦听和传递定义在 “connect” 事件的处理函数内部:

// 在共享Worker内部
addEventListener("connect", function (evt) {
  // 这个连接分配的端口
  var port = evt.ports[0];
  port.addEventListener("message", function (evt) {
    // ..
    port.postMessage("...1123");
    // ..
  });
  // 初始化端口连接
  port.start();
});

SIMD

单指令多数据(SIMD)是一种数据并行(data parallelism)方式，与 Web Worker 的任务并行(task parallelism)相对，因为这里的重点实际上不再是把程序逻辑分成并行的块，而是并行处理数据的多个位。

asm.js

asm.js(http://asmjs.org)这个标签是指 JavaScript 语言中可以高度优化的一个子集。通过小心避免某些难以优化的机制和模式(垃圾收集、类型强制转换，等等)，asm.js 风格的代码可以被 JavaScript 引擎识别并进行特别激进的底层优化。

记-use-fish-shell

Ruoduan — Invalid Date

Works Out Of The Box

fish-shel 是一个简洁的 shell，内置功能强大省去很多配置

安装fish-shell

brew install fish

查看当前shell列表

cat /etc/shells

# 类似这样
/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh

将fish-shell添加到列表中

/usr/local/bin/fish

替换shell

chsh -s /usr/local/bin/fish

重启终端 => fish_config

配置主题,在浏览器里面配置保存

fish_config

macOS下蓝牙键盘(Keychron K2)连接失败的解决办法

Ruoduan — Invalid Date

macOS下蓝牙键盘(Keychron K2)连接失败的解决办法

缘起

被种草入手了一个Keychron K2，使用起来感觉不错。后面又买了一个；给我的小老哥也安排了一个

但是使用的食用遇到了一点问题
1. 长时间不使用键盘进入省电模式后，输入会断断续续不稳定
2. 点击蓝牙配对后，mac经过漫长时间的连接，最终显示配对失败。

解决方案

打开Finder，按command+shift+G组合键弹出地址输入框后，输入/Library/Preferences，进入到preferences文件夹里，然后找到com.apple.Bluetooth.plist文件，直接删除掉。系统会让你输入密码，输入即可。（这个是mac连接过的蓝牙设备保存文件，如果觉得不放心可以备份一下）然后关闭蓝牙，重启mac，打开键盘蓝牙配对模式，打开mac蓝牙设置界面，选择你的蓝牙键盘设备，应该就可以配对成功了。

但是这只是一个暂时的解决方案，应该是 macOS 系统问题

读书笔记 -《你不知道的js-上》

Ruoduan — Invalid Date

js 编译原理

分词/词法分析(Tokenizing/Lexing)
解析/语法分析(Parsing)
代码生成（ATS）

LHS & RHS

LHS 赋值

RHS 查询变量等

作用域

欺骗词法

eval

function foo(str, a) {
  eval(str) // 欺骗! console.log( a, b );
}
var b = 2
foo("var b = 3;", 1) // 1, 3

with

var obj = {
  a: 1,
  b: 2,
  c: 3
};
// 单调乏味的重复 "obj" obj.a = 2;
obj.b = 3;
obj.c = 4;
// 简单的快捷方式 with (obj) {
         a = 3;
         b = 4;
         c = 5;
}

p s: 目前这 2 个方法已被 MDN 不推荐使用，with更是在一些开发环境下是不被识别的语句

小结

法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本能够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它们进行查找。

JavaScript 中有两个机制可以“欺骗”词法作用域:eval(..) 和 with。前者可以对一段包含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域(在运行时)。后者本质上是通过将一个对象的引用当作作用域来处理，将对象的属性当作作用域中的标识符来处理，从而创建了一个新的词法作用域(同样是在运行时)。

变量提升 & 编译器

结论：变量和函数在内的所有声明都会在任何代码被执行前首先被处理。

var a = 2
console.log(a)

--- 👇

var a
a = 2
console.log(a) // undefind

过程就好像变量和函数声明从它们在代码中出现的位置被“移动” 到了最上面。这个过程就叫作提升。

函数优先

函数声明和变量声明都会被提升。但是一个值得注意的细节(这个细节可以出现在有多个

“重复”声明的代码中)是函数会首先被提升，然后才是变量。

foo() // 1
var foo
function foo() {
  console.log(1)
}
foo = function() {
  console.log(2)
}

小结

我们习惯将 var a = 2;看作一个声明，而实际上 JavaScript 引擎并不这么认为。它将 var a

和 a = 2 当作两个单独的声明，第一个是编译阶段的任务，而第二个则是执行阶段的任务。

这意味着无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理。可以将这个过程形象地想象成所有的声明(变量和函数)都会被“移动”到各自作用域的最顶端，这个过程被称为提升。

闭包

老生常谈，看代码

function foo() {
  var a = 2
  function bar() {
    console.log(a)
  }
  return bar
}
var baz = foo()
baz() // 2 —— 朋友，这就是闭包的效果。

---function wait(message) {
  setTimeout(function timer() {
    console.log(message)
  }, 1000)
}
wait("Hello, closure!")

将一个内部函数(名为 timer)传递给 setTimeout(..)。timer 具有涵盖 wait(..) 作用域的闭包，因此还保有对变量 message 的引用。
wait(..) 执行 1000 毫秒后，它的内部作用域并不会消失，timer 函数依然保有 wait(..) 作用域的闭包。

循环&闭包

这可能是一个老掉牙的面试题，但也是我们值得思考的问题

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}

// 我们给函数一个自己的作用域
for (var i = 1; i <= 5; i++) {
  ;(function() {
    setTimeout(function timer() {
      console.log(i)
    }, i * 1000)
  })()
} // 这样不行，还需要一个值来储存 当前的值 👇

for (var i = 1; i <= 5; i++) {
  ;(function() {
    var j = i
    setTimeout(function timer() {
      console.log(j)
    }, j * 1000)
  })()
} // 可以了

// 改进一下
for (var i = 1; i <= 5; i++) {
  ;(function(j) {
    setTimeout(function timer() {
      console.log(j)
    }, j * 1000)
  })(i)
}

重返作用域块

for (var i = 0; i <= 5; i++) {
  let j = i // // 是的，闭包的块作用域!
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}

模块

var foo = (function CoolModule() {
  var something = "cool"
  var another = [1, 2, 3]
  function doSomething() {
    console.log(something)
  }
  function doAnother() {
    console.log(another.join(" ! "))
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother,
  }
})()
foo.doSomething() // cool
foo.doAnother() // 1 ! 2 ! 3

现代的模块机制

大多数模块依赖加载器 / 管理器本质上都是将这种模块定义封装进一个友好的 API。这里

并不会研究某个具体的库，为了宏观了解我会简单地介绍一些核心概念

var MyModules = (function Manager() {
  var modules = {}
  function define(name, deps, impl) {
    for (var i = 0; i < deps.length; i++) {
      deps[i] = modules[deps[i]]
    }
    modules[name] = impl.apply(impl, deps)
  }
  function get(name) {
    return modules[name]
  }
  return {
    define: define,
    get: get,
  }
})()

ES6

ES6 中为模块增加了一级语法支持。但通过模块系统进行加载时，ES6 会将文件当作独立的模块来处理。每个模块都可以导入其他模块或特定的 API 成员，同样也可以导出自己的 API 成员。

this

人们很容易把 this 理解成指向函数自身，这个推断从英语的语法角度来说是说得通的

不过现在我们先来分析一下这个模式，让大家看到 this 并不像我们所想的那样指向函数本身。

function foo(num) {
  console.log("foo: " + num)
  // 记录 foo 被调用的次数
  this.count++
}
foo.count = 0
var i
for (i = 0; i < 10; i++) {
  if (i > 5) {
    foo(i)
  }
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9
// foo 被调用了多少次?
console.log(foo.count) // 0 -- WTF?

这段代码在无意中创建了一个全局变量 count, 它的值为 NaN

// 解决1: 回避this
function foo(num) {
  console.log("foo: " + num)
  // 记录 foo 被调用的次数
  foo.count++
}

// 解决2: foo.call 强制绑定
for (i = 0; i < 10; i++) {
  if (i > 5) {
    // 使用 call(..) 可以确保 this 指向函数对象 foo 本身
    foo.call(foo, i)
  }
}

function foo() {
  var a = 2
  this.bar()
}
function bar() {
  console.log(this.a)
}
foo() // ReferenceError: a is not defined

this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。
当一个函数被调用时，会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性，会在函数执行的过程中用到。

调用位置

寻找调用位置就是寻找“函数被调用的位置”，但是做起来并没有这么简单，因为某些编程模式可能会隐藏真正的调用位置。
重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。我们关心的调用位置就在当前正在执行的函数的前一个调用中。

function baz() {
  // 当前调用栈是:baz
  // 因此，当前调用位置是全局作用域
  console.log("baz")
  bar() // <-- bar 的调用位置
}
function bar() {
  // 当前调用栈是 baz -> bar
  // 因此，当前调用位置在 baz 中
  console.log("bar")
  foo() // <-- foo 的调用位置
}
function foo() {
  // 当前调用栈是 baz -> bar -> foo // 因此，当前调用位置在 bar 中
  console.log("foo")
}
baz() // <-- baz 的调用位置

this 词法

箭头函数
箭头函数可以像 bind(..) 一样确保函数的 this 被绑定到指定对象，此外，其重要性还体现在它用更常见的词法作用域取代了传统的 this 机制。

小结

如果要判断一个运行中函数的 this 绑定，就需要找到这个函数的直接调用位置。找到之后

就可以顺序应用下面这四条规则来判断 this 的绑定对象。

由 new 调用?绑定到新创建的对象。
由 call 或者 apply(或者 bind)调用?绑定到指定的对象。
由上下文对象调用?绑定到那个上下文对象。
默认:在严格模式下绑定到 undefined，否则绑定到全局对象。

一定要注意，有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略 this 绑定，你可以使用一个 DMZ 对象，比如 ø = Object.create(null)，以保护全局对象。

ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定 this，具体来说，箭头函数会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。这其实和 ES6 之前代码中的 self = this 机制一样。

对象

typeof null // object

原理是这样的，不同的对象在底层都表示为二进制，在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型，null 的二进制表示是全 0，自然前三位也是 0，所以执行 typeof 时会返回“object”。

myArray = ["foo", 42, "bar"]
myArray.baz = "baz"
myArray.length // 3
myArray.baz // "baz"
myArray[3] // undefind

属性描述符

p s: 和 typescript 比起来感觉写起来有些麻烦

var myObject = { a: 2 }
// 获取
Object.getOwnPropertyDescriptor(myObject, "a")
// {
// value: 2,
// writable: true,
// enumerable: true,
// configurable: true
// }

// 配置 严格模式下

;("use strict")
var myObject = {}
Object.defineProperty(myObject, "a", {
  value: 2,
  writable: false, // 不可写!
  configurable: true,
  enumerable: true,
})
myObject.a = 3 // TypeError

遍历

- 迭代器

var myArray = [1, 2, 3]
var it = myArray[Symbol.iterator]()
it.next() // { value:1, done:false }
it.next() // { value:2, done:false }
it.next() // { value:3, done:false }
it.next() // { done:true }

for..of 循环首先会向被访问对象请求一个迭代器对象，然后通过调用迭代器对象的 next() 方法来遍历所有返回值。

我们使用 ES6 中的符号 Symbol.iterator 来获取对象的 @@iterator 内部属性。之前我们简单介绍过符号(Symbol，参见 es6 Symbol)，跟这里的原理是相同的。引用类似 iterator 的特殊属性时要使用符号名，而不是符号包含的值。此外，虽然看起来很像一个对象，但是 @@iterator 本身并不是一个迭代器对象，而是一个返回迭代器对象的函数——这点非常精妙并且非常重要。

和数组不同，普通的对象没有内置的 @@iterator，所以无法自动完成 for..of 遍历。之所以要这样做，有许多非常复杂的原因，不过简单来说，这样做是为了避免影响未来的对象类型。
当然，你可以给任何想遍历的对象定义 @@iterator，举例来说:

var myObject = { a: 2, b: 3 }
Object.defineProperty(myObject, Symbol.iterator, {
  enumerable: false,
  writable: false,
  configurable: true,
  value: function() {
    var o = this
    var idx = 0
    var ks = Object.keys(o)
    return {
      next: function() {
        return {
          value: o[ks[idx++]],
          done: idx > ks.length,
        }
      },
    }
  },
})
// 手动遍历 myObject
var it = myObject[Symbol.iterator]()
it.next() // { value:2, done:false }
it.next() // { value:3, done:false }
it.next() // { value:undefined, done:true }
// 用 for..of 遍历 myObject
for (var v of myObject) {
  console.log(v)
}
// 2
// 3

实际上，你甚至可以定义一个“无限”迭代器，它永远不会“结束”并且总会返回一个新值(比如随机数、递增值、唯一标识符，等等)。你可能永远不会在 for..of 循环中使用这样的迭代器，因为它永远不会结束，你的程序会被挂起:

var randoms = {
  [Symbol.iterator]: function() {
    return {
      next: function() {
        return { value: Math.random() }
      },
    }
  },
}
var randoms_pool = []
for (var n of randoms) {
  randoms_pool.push(n)
  // 防止无限运行!
  if (randoms_pool.length === 100) break
}

类

在继承或者实例化时，JavaScript 的对象机制并不会自动执行复制行为。简单来说， JavaScript 中只有对象，并不存在可以被实例化的“类”。一个对象并不会被复制到其他对象，它们会被关联起来

显式混入

首先我们来回顾一下之前提到的 Vehicle 和 Car。由于 JavaScript 不会自动实现 Vehicle 到 Car 的复制行为，所以我们需要手动实现复制功能。这个功能在许多库和框架中被称为 extend(..)，但是为了方便理解我们称之为 mixin(..)。

// 非常简单的 mixin(..) 例子 :
function mixin(sourceObj, targetObj) {
  for (var key in sourceObj) {
    // 只会在不存在的情况下复制
    if (!(key in targetObj)) {
      targetObj[key] = sourceObj[key]
    }
  }
  return targetObj
}
var Vehicle = {
  engines: 1,
  ignition: function() {
    console.log("Turning on my engine.")
  },
  drive: function() {
    this.ignition()
    console.log("Steering and moving forward!")
  },
}
var Car = mixin(Vehicle, {
  wheels: 4,
  drive: function() {
    Vehicle.drive.call(this)
    console.log("Rolling on all " + this.wheels + " wheels!")
  },
})

混合复制

// 另一种混入函数，可能有重写风险
function mixin(sourceObj, targetObj) {
  for (var key in sourceObj) {
    targetObj[key] = sourceObj[key]
  }
  return targetObj
}
var Vehicle = {
  // ...
}
// 首先创建一个空对象并把 Vehicle 的内容复制进去
var Car = mixin(Vehicle, {})
// 然后把新内容复制到 Car 中
mixin(
  {
    wheels: 4,
    drive: function() {
      // ...
    },
  },
  Car
)

这两种方法都可以把不重叠的内容从 Vehicle 中显性复制到 Car 中。“混入”这个名字来源于这个过程的另一种解释:Car 中混合了 Vehicle 的内容，就像你把巧克力片混合到你最喜欢的饼干面团中一样。
复制操作完成后，Car 就和 Vehicle 分离了，向 Car 中添加属性不会影响 Vehicle，反之亦然。

隐式混入

隐式混入和之前提到的显式伪多态很像，因此也具备同样的问题。

var Something = {
  cool: function () {
    this.greeting = "Hello World";
    this.count = this.count ? this.count + 1 : 1;
  },
};

Something.cool();
Something.greeting; // "Hello World"
Something.count; // 1

var Another = {
  cool: function () {
    // 隐式把 Something 混入 Another
    Something.cool.call(this);
  },
};
Another.cool();
Another.greeting; // "Hello World"
Another.count; // 1(count 不是共享状态)

小结

类是一种设计模式。许多语言提供了对于面向类软件设计的原生语法。JavaScript 也有类

似的语法，但是和其他语言中的类完全不同。类意味着复制。

传统的类被实例化时，它的行为会被复制到实例中。类被继承时，行为也会被复制到子类中。

多态(在继承链的不同层次名称相同但是功能不同的函数)看起来似乎是从子类引用父类，但是本质上引用的其实是复制的结果。

JavaScript 并不会(像类那样)自动创建对象的副本。

混入模式(无论显式还是隐式)可以用来模拟类的复制行为，但是通常会产生丑陋并且脆弱的语法，比如显式伪多态(OtherObj.methodName.call(this, …))，这会让代码更加难懂并且难以维护。

此外，显式混入实际上无法完全模拟类的复制行为，因为对象(和函数!别忘了函数也是对象)只能复制引用，无法复制被引用的对象或者函数本身。忽视这一点会导致许多问题。

总地来说，在 JavaScript 中模拟类是得不偿失的，虽然能解决当前的问题，但是可能会埋下更多的隐患。

原型

var anotherObject = { a: 2 }
// 创建一个关联到 anotherObject 的对象
var myObject = Object.create(anotherObject)
myObject.a // 2

现在 myObject 对象的 [[Prototype]] 关联到了 anotherObject。显然 myObject.a 并不存在，但是尽管如此，属性访问仍然成功地(在 anotherObject 中)找到了值 2。

Object.prototype

所有普通的 [[Prototype]] 链最终都会指向内置的 Object.prototype。由于所有的“普通” (内置，不是特定主机的扩展)对象都“源于”(或者说把 [[Prototype]] 链的顶端设置为)

这个 Object.prototype 对象，所以它包含 JavaScript 中许多通用的功能。

在于原型链上层时 myObject.foo = “bar” 会出现的三种情况。

如果在[[Prototype]]链上层存在名为 foo 的普通数据访问属性并且没有被标记为只读(writable:false)，那就会直接在 myObject 中添加一个名为 foo 的新属性，它是屏蔽属性。
如果在[[Prototype]]链上层存在 foo，但是它被标记为只读(writable:false)，那么无法修改已有属性或者在 myObject 上创建屏蔽属性。如果运行在严格模式下，代码会抛出一个错误。否则，这条赋值语句会被忽略。总之，不会发生屏蔽。
如果在[[Prototype]]链上层存在 foo 并且它是一个 setter(参见第 3 章)，那就一定会调用这个 setter。foo 不会被添加到(或者说屏蔽于)myObject，也不会重新定义 foo 这个 setter。

大多数开发者都认为如果向 [[Prototype]] 链上层已经存在的属性([[Put]])赋值，就一定会触发屏蔽，但是如你所见，三种情况中只有一种(第一种)是这样的。

如果你希望在第二种和第三种情况下也屏蔽 foo，那就不能使用 = 操作符来赋值，而是使用 Object.defineProperty(..)(参见第 3 章)来向 myObject 添加 foo。

var anotherObject = { a: 2 }
var myObject = Object.create(anotherObject)
anotherObject.a // 2
myObject.a // 2

anotherObject.hasOwnProperty("a") // true
myObject.hasOwnProperty("a") // false
myObject.a++ // 隐式屏蔽!
anotherObject.a // 2
myObject.a // 3
myObject.hasOwnProperty("a") // true

划重点

尽管 myObject.a++ 看起来应该(通过委托)查找并增加 anotherObject.a 属性，但是别忘了 ++ 操作相当于 myObject.a = myObject.a + 1。因此 ++ 操作首先会通过 [[Prototype]] 查找属性 a 并从 anotherObject.a 获取当前属性值 2，然后给这个值加 1，接着用 [[Put]] 将值 3 赋给 myObject 中新建的屏蔽属性 a，天呐!

修改委托属性时一定要小心。如果想让 anotherObject.a 的值增加，唯一的办法是 anotherObject.a++。

实际上，JavaScript 才是真正应该被称为“面向对象”的语言，因为它是少有的可以不通过类，直接创建对象的语言。
在 JavaScript 中，类无法描述对象的行，(因为根本就不存在类!)对象直接定义自己的行为。再说一遍，JavaScript 中只有对象。

“类”函数

多年以来，JavaScript 中有一种奇怪的行为一直在被无耻地滥用，那就是模仿类。我们会仔细分析这种方法。

创建关联

var foo = {
  something: function() {
    console.log("Tell me something good...")
  },
}
var bar = Object.create(foo)
bar.something() // Tell me something good...

Object.create(..) 会创建一个新对象(bar)并把它关联到我们指定的对象(foo)，这样我们就可以充分发挥 [[Prototype]] 机制的威力(委托)并且避免不必要的麻烦(比如使用 new 的构造函数调用会生成 .prototype 和 .constructor 引用)。

小结

如果要访问对象中并不存在的一个属性，[[Get]] 操作就会查找对象内部

[[Prototype]] 关联的对象。这个关联关系实际上定义了一条“原型链”(有点像嵌套的作用域链)，在查找属性时会对它进行遍历。

所有普通对象都有内置的 Object.prototype，指向原型链的顶端(比如说全局作用域)，如果在原型链中找不到指定的属性就会停止。toString()、valueOf() 和其他一些通用的功能都存在于 Object.prototype 对象上，因此语言中所有的对象都可以使用它们。

关联两个对象最常用的方法是使用 new 关键词进行函数调用，在调用的 4 个步骤(第 2 章)中会创建一个关联其他对象的新对象。

使用 new 调用函数时会把新对象的 .prototype 属性关联到“其他对象”。带 new 的函数调用通常被称为“构造函数调用”，尽管它们实际上和传统面向类语言中的类构造函数不一样。

虽然这些 JavaScript 机制和传统面向类语言中的“类初始化”和“类继承”很相似，但是 JavaScript 中的机制有一个核心区别，那就是不会进行复制，对象之间是通过内部的 [[Prototype]] 链关联的。

出于各种原因，以“继承”结尾的术语(包括“原型继承”)和其他面向对象的术语都无法帮助你理解 JavaScript 的真实机制(不仅仅是限制我们的思维模式)。

相比之下，“委托”是一个更合适的术语，因为对象之间的关系不是复制而是委托。

行为委托

比较思维模型

// 模仿类
function Foo(who) {
  this.me = who
}
Foo.prototype.identify = function() {
  return "I am " + this.me
}
function Bar(who) {
  Foo.call(this, who)
}
Bar.prototype = Object.create(Foo.prototype)
Bar.prototype.speak = function() {
  alert("Hello, " + this.identify() + ".")
}
var b1 = new Bar("b1")
var b2 = new Bar("b2")
b1.speak()
b2.speak()

// 面向委托
Foo = {
  init: function(who) {
    this.me = who
  },
  identify: function() {
    return "I am " + this.me
  },
}
Bar = Object.create(Foo)
Bar.speak = function() {
  alert("Hello, " + this.identify() + ".")
}
var b1 = Object.create(Bar)
b1.init("b1")
var b2 = Object.create(Bar)
b2.init("b2")
b1.speak()
b2.speak()

这段代码中我们同样利用 [[Prototype]] 把 b1 委托给 Bar 并把 Bar 委托给 Foo，和上一段代码一模一样。我们仍然实现了三个对象之间的关联。
但是非常重要的一点是，这段代码简洁了许多，我们只是把对象关联起来，并不需要那些既复杂又令人困惑的模仿类的行为(构造函数、原型以及 new)。

class 陷阱

首先，你可能会认为 ES6 的 class 语法是向 JavaScript 中引入了一种新的“类”机制，其

实不是这样。class 基本上只是现有 [[Prototype]](委托!)机制的一种语法糖。

也就是说，class 并不会像传统面向类的语言一样在声明时静态复制所有行为。如果你 (有意或无意)修改或者替换了父“类”中的一个方法，那子“类”和所有实例都会受到

影响，因为它们在定义时并没有进行复制，只是使用基于 [[Prototype]] 的实时委托:

class C {
  constructor() {
    this.num = Math.random()
  }
  rand() {
    console.log("Random: " + this.num)
  }
}
var c1 = new C()
c1.rand() // "Random: 0.4324299..."
C.prototype.rand = function() {
  console.log("Random: " + Math.round(this.num * 1000))
}
var c2 = new C()

c2.rand() // "Random: 867"

c1.rand() // "Random: 432" 影响到了之前的实例

此外，class 语法仍然面临意外屏蔽的问题:

class C {
  constructor(id) {
    // 噢，郁闷，我们的 id 属性屏蔽了 id() 方法
    this.id = id
  }
  id() {
    console.log("Id: " + id)
  }
}
var c1 = new C("c1")
c1.id() // TypeError -- c1.id 现在是字符串 "c1"

小结

class 很好地伪装成 JavaScript 中类和继承设计模式的解决方案，但是它实际上起到了反作

用:它隐藏了许多问题并且带来了更多更细小但是危险的问题。 class 加深了过去 20 年中对于 JavaScript 中“类”的误解，在某些方面，它产生了一些问题

ECMA2020(ES11)

Ruoduan — Invalid Date

ES2020(ES11)新特性：

matchAll [String的方法]
import() [动态导入语句]
import.meta
export * as ns from 'module'
Promise.allSettled
BigInt [一种新的数据类型]
GlobalThis
Nullish coalescing Operator
Optional Chaining

matchAll

matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]

输出

> Array [“test1”, “e”, “st1”, “1”]

> Array [“test2”, “e”, “st2”, “2”]

Dynamic import

标准用法的 import 导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。有些场景中，你可能希望根据条件导入模块或者按需导入模块，这时你可以使用动态导入代替静态导入。

在 import() 之前，当我们需要根据条件导入模块时，不得不使用 require()。

if(XXX) {
    const menu = require('./menu');
}

---

if(XXX) {
    const menu = import('./menu');
}

import.meta

import.meta 会返回一个对象，有一个 url 属性，返回当前模块的url路径，只能在模块内部使用。

//src/index.js
import React from 'react';
console.log(import.meta);//{index.js:38 {url: "http://127.0.0.1:3000/src/index.js"}}

export * as ns from ‘module’

ES2020新增了 export * as XX from 'module'，和 import * as XX from 'module'

//menu.js
export * as ns from './info';

// 可以理解为：

import * as ns from './info';
export { ns };

Promise.allSettled

Promise.all 或者 Promise.race 有的时候并不能满足我们的需求。比如，我们需要在所有的 promise 都结束的时候做一些操作，而并不在乎它们是成功还是失败。在没有 Promise.allSettled 之前，我们需要自己去写实现。

Promise.allSettled() 方法返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise ，并带有一个对象数组，每个对象表示对应的 promise 结果。

const promise1 = Promise.resolve(100);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'info'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'name'))

Promise.allSettled([promise1, promise2, promise3]).
    then((results) => console.log(result));
/* 
    [
        { status: 'fulfilled', value: 100 },
        { status: 'rejected', reason: 'info' },
        { status: 'fulfilled', value: 'name' }
    ]
*/

可以看到，Promise.allSettled() 的成功的结果是一个数组，该数组的每一项是一个对象，每个对象都有一个 status 属性，值为 fulfilled 或 rejected，如果status 的值是 fulfilled，那么该对象还有一个 value 属性，其属性值是对应的 promise 成功的结果；如果 status 的值是 rejected，那么该对象有一个 reason 属性，其属性值是对应的 promise 失败的原因。

BigInt

BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数。在此之前，JS 中安全的最大数字是 9009199254740991，即2^53-1，在控制台中输入 Number.MAX_SAFE_INTEGER 即可查看。超过这个值，JS 没有办法精确表示。另外，大于或等于2的1024次方的数值，JS 无法表示，会返回 Infinity。

BigInt 即解决了这两个问题。BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。为了和 Number 类型进行区分，BigInt 类型的数据必须添加后缀 n.

//Number类型在超过9009199254740991后，计算结果即出现问题
const num1 = 90091992547409910;
console.log(num1 + 1); //90091992547409900

//BigInt 计算结果正确
const num2 = 90091992547409910n;
console.log(num2 + 1n); //90091992547409911n
// ---
console.log(BigInt(999)); // 999n 注意：没有 new 关键字！！！

GlobalThis

JS 中存在一个顶层对象，但是，顶层对象在各种实现里是不统一的。

从不同的 JavaScript 环境中获取全局对象需要不同的语句。在 Web 中，可以通过 window、self 取到全局对象，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它们都无法获取，必须使用 global。

ES2020 中引入 globalThis 作为顶层对象，在任何环境下，都可以简单的通过 globalThis 拿到顶层对象。

Nullish coalescing Operator

ES2020 新增了一个运算符 ??。当左侧的操作数为 null 或者 undefined时，返回其右侧操作数，否则返回左侧操作数。

const defaultValue = 100;
let value = someValue || defaultValue;
//当 someValue 转成 boolean 值为 false 时，value 的值都是 defaultValue


const defaultValue = 100;
let value = someValue ?? defaultValue;//someValue 为 0 ，value 的值是 0

Optional Chaining

可选链操作符 ?. 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish, 即 null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。

const tortoise = info.animal && info.animal.reptile && info.animal.reptile.tortoise;

// --

const tortoise = info.animal?.reptile?.tortoise;

参考-ECMAScript® 2020 Language Specification

了不起的certbot申请免费SSL证书

Ruoduan — Invalid Date

缘起

最近阿里云的SSL 到期了。需要重新申请一个，调研后目前免费的就是certbot比较好用，特此记录流程和坑

官网地址

certbot是基于letsencrypt.org的一个自动化工具🔧

话不多说直接开始

start

1. 去官网选择你的操作系统和静态资源服务器

2. 安装依赖包

sudo yum install certbot python2-certbot-nginx

这个地方你可能会安装失败，我们可以把二进制包下载下来然后在安装

ImportError: No module named 'requests.packages.urllib3'

有这么一个报错，不要慌

yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

然后执行上面👆步骤

3. 执行certbot安装SSL证书

# 一键配置
sudo certbot --nginx
or
# 只获取证书手动来配置nginx
sudo certbot certonly --nginx

ps：这个地方有几个坑

one、可能会遇到 `urllib3` 报错你需要 👇 重新安装一下

pip uninstall urllib3
pip install urllib3

tow、他是基于python2的，如果你电脑里面像我一样同时安装了 py2 和py3，你需要用python2 来执行

python2 -m pip urllib3

three、到这里你可能还是有问题，还有一个坑他是👇

trypip install --upgrade --force-reinstall 'requests==2.6.0' urllib3 , I've had the same problem https://niuhp.com/other/https-certbot.html

你需要锁定🔒版本 2.6.0

然后会让你输入你的邮箱账号当然你可以选择跳过，然后是否同意协议和接受他们的推送 y就行了

自动续签

echo "0 0,12 * * * root python -c 'import random; import time; time.sleep(random.random() * 3600)' && certbot renew -q" | sudo tee -a /etc/crontab > /dev/null

之后你就该配置nginx的配置nginx就好了

直接以 https 访问你的网站就可以了。

更新内容：

更新续签

certbot certonly --cert-name xxx.com

忘了证书名的话

certbot certificates // 查看已安装的证书

或者

certbot --nginx certonly -n -d domain

certbot renew

证书增加新域名

certbot --cert-name xxx.com -d aa.xx.com,bb.xxx.com,www.xxx.com

记-react-connect中使用forwardRef问题

Ruoduan — Invalid Date

记-react-connect中使用forwardRef问题。

最近在dvajs中使用onRef的过程中，需要给绑定connect 的组件透传 forwardRef

类似这样的形式：

import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import { connect } from 'dva'

const C2 = forwardRef((props, ref) => {

  const h2 = () => {
    alert('c2方法')
    setText('onRef 改变了')
  }

  const [text, setText] = useState('C2')

  useImperativeHandle(ref, () => ({
    h2: h2,
  }))

  return <div >
      {text}
    </div>

})

export default connect((state) => {
  return {
    list: state.list,
  }
})(C2)

给传进来的onRef绑定上自己的方法h2

直接这样写的话是不行🙅的因为ref被Hoc 高阶组件{connect} “隔离了”
Error

Unhandled Rejection (Invariant Violation): You must pass a component to the function returned by connect. Instead received {}

通过查看 redux-connect文档 connect 是有4个参数的

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

最后一个参数传入：forwardRef

export default connect((state) => {
  return {
    list: state.list,
  }
}, null, null, { forwardRef: true })(C2)

// 老版本 4以下

export default connect((state) => {
  return {
    list: state.list,
  }
}, null, null, { withRef: true })(C2)

这里有的坑，以上是针对我使用Umi3，如果你使用的是Umi2，以上配置就会无效，尽管 node_modules中react | react-redux 版本差不多
Umi要这样写：

import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import { connect } from 'dva'

const C2 = (props) => {
  const { refInstance } = props


  const h2 = () => {
    alert('c2方法')
    setText('onRef 改变了')
  }

  const [text, setText] = useState('C2')

  useImperativeHandle(refInstance, () => ({
    h2: h2,
  }))

  return <div >
      {text}
    </div>

}


const Tc =  connect((state) => {
  return {
    list: state.list,
  }
})(C2)

// 使用Hoc 透传 ref 为 refInstance 主要不要使用 red 换个name
export default forwardRef((props, ref) => <Tc {...props} refInstance={ref} />);

connect 参数

[mapStateToProps(state, [ownProps]): stateProps] (Function)

这个方法允许我们将store中的数据作为props绑定到组件中，只要store发生了bianh就会调用mapStateToProps方法，mapStateToProps返回的结果必须是一个纯对象，这个对象会与组件的 props 合并

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

允许我们将 action 作为 props 绑定到组件中，

如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，函数中 dispatch 方法会将 action creator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。实际上 mapDispatchToProps 就是用于建立组件跟store.dispatch的映射关系,可以是一个object，也可以传入函数如果 mapDispatchToProps 是一个函数，它可以传入dispatch,ownProps, 定义UI组件如何发出 action，实际上就是要调用 dispatch 这个方法

[mergeProps(stateProps, dispatchProps, ownProps): props] (Function)

如果指定了这个参数，mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数，根据组件的 props 来筛选部分的 state 数据，或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数，默认情况下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

[options] (Object)

如果指定这个参数，可以定制 connector 的行为。

我们一开是那个抛错就是mergeProps默认的返回，所以导致这个错误

Web开发5种设计模式

Ruoduan — Invalid Date

What’s this?

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题，毕竟这是前人无数经验总结成的最佳实践，而代码实现则是对加深理解的辅助。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。

单例设计模式

单例模式仅允许类或对象具有单个实例，并且它使用全局变量来存储该实例。

实现方法是判断是否存在该对象的实例，如果已存在则不再创建
使用场景适用于业务场景中只能存在一个的实例，比如弹窗，购物车

单例模式分为懒汉式和饿汉式:

懒汉式

let ShopCar = (function() {
  let instance
  function init() {
    /*这里定义单例代码*/

    return {
      buy(good) {
        this.goods.push(good)
      },
      goods: [],
    }
  }
  return {
    getInstance: function() {
      if (!instance) {
        instance = init()
      }
      return instance
    },
  }
})()
let car1 = ShopCar.getInstance()
let car2 = ShopCar.getInstance()
car1.buy("橘子")
car2.buy("苹果")
console.log(car1.goods) //[ '橘子', '苹果' ]console.log(car1 === car2); // true

饿汉式

var ShopCar = (function() {
  var instance = init()
  function init() {
    /*这里定义单例代码*/ return {
      buy(good) {
        this.goods.push(good)
      },
      goods: [],
    }
  }
  return {
    getInstance: function() {
      return instance
    },
  }
})()
let car1 = ShopCar.getInstance()
let car2 = ShopCar.getInstance()
car1.buy("橘子")
car2.buy("苹果") //[ '橘子', '苹果' ]console.log(car1.goods);console.log(car1 === car2); // true

懒汉式在类加载时，不创建实例，因此类加载速度快，但运行时获取对象的速度慢；饿汉式在类加载时就完成了初始化，所以类加载较慢，但获取对象的速度快

策略模式

策略模式定义一系列的算法，将每一个算法封装起来，并让他们可以相互替换。

实现方法定义一组可变的策略类封装具体算法，定义一组不变的环境类将请求委托给某一个策略类
使用场景适用于业务场景中需要判断多种条件，甚至包含复杂条件嵌套的，可以使用策略模式来提升代码的可维护性和可读性。比如支付，博客权限校验

// 定义几个策略类var
PaymentMethodStrategy = {
  BankAccount: function(money) {
    return money > 50 ? money * 0.7 : money
  },
  CreditCard: function(money) {
    return money * 0.8
  },
  Alipay: function(money) {
    return money
  },
}
// 环境类
var userPay = function(selectedStrategy, money) {
  return PaymentMethodStrategy[selectedStrategy](money)
}
console.log("银行卡支付价格为：" + userPay("BankAccount", 100)) //70console.log('支付宝支付价格为：' + userPay('Alipay', 100)); //100console.log('信用卡支付价格为：' + userPay('CreditCard', 100)); //80

观察者模式

观察者模式，也叫订阅-发布模式，是对象的行为模式，在对象之间定义了一对多的依赖关系，就是多个观察者和一个被观察者之间的关系，当被观察者发生变化的时候，会通知所有的观察者对象，他们做出相对应的操作。

实现方法定义一组可变的策略类封装具体算法，定义一组不变的环境类将请求委托给某一个策略类
使用场景适用于业务场景中当一个对象的状态发生变化时，需要自动通知其他关联对象，自动刷新对象状态，或者说执行对应对象的方法，比如你是一个老师，需要通知班里家长的时候，你可以建一个群（列表）。每次通知事件的时候只要循环执行这个列表就好了（群发），而不用关心这个列表里有谁。

// 创建一个群，保存通知，通知变化之后通知每个家长（触发所有观察者对象）
class Group {
  constructor() {
    this.message = "暂无通知"
    this.parents = []
  }
  getMessage() {
    return this.message
  }
  setMassage(message) {
    this.message = message
    this.notifyAllObservers()
  }
  notifyAllObservers() {
    this.parents.forEach(parent => {
      parent.update()
    })
  }
  attach(parent) {
    this.parents.push(parent)
  }
}
// 观察者，每个家长
class Parent {
  constructor(name, group) {
    this.name = name
    this.group = group
    this.group.attach(this)
  }
  update() {
    console.log(`${this.name} 收到通知: ${this.group.getMessage()}`)
  }
}
let group = new Group()
let t1 = new Parent("李妈妈", group)
let t2 = new Parent("王爸爸", group)
let t3 = new Parent("张爷爷", group)
group.setMassage("开家长会")
group.setMassage("开运动会")

/*
李妈妈 收到通知: 开家长会
王爸爸 收到通知: 开家长会
张爷爷 收到通知: 开家长会

李妈妈 收到通知: 开运动会
王爸爸 收到通知: 开运动会
张爷爷 收到通知: 开运动会
*/

装饰器模式

在不改变原来的结构和功能基础上，动态装饰一些针对特别场景所适用的方法或属性，即添加一些新功能以增强它的某种能力

实现方法定义一组可变的策略类封装具体算法，定义一组不变的环境类将请求委托给某一个策略类
使用场景原有方法维持不变，在原有方法上再挂载其他方法来满足现有需求；函数的解耦，将函数拆分成多个可复用的函数，再将拆分出来的函数挂载到某个函数上，实现相同的效果但增强了复用性。比如多孔插座，机车改装

const Man = function() {
  this.run = function() {
    console.log("跑步")
  }
}
const Decorator = function(old) {
  this.oldAbility = old.run
  this.fly = function() {
    console.log("具备飞行能力")
  }
  this.newAbility = function() {
    this.oldAbility()
    this.fly()
  }
}
const man = new Man()
const superMan = new Decorator(man)
superMan.fly() // 具备飞行能力

代理模式

代理模式给某一个对象提供一个代理对象，并由代理对象控制对原对象的引用。通俗的来讲代理模式就是我们生活中常见的中介。

实现方法定义一个委托者和一个代理，需要委托的事情在代理中完成
使用场景在某些情况下，一个客户类不想或者不能直接引用一个委托对象，而代理类对象可以在客户类和委托对象之间起到中介的作用。代理可以帮客户过滤掉一些请求并且把一些开销大的对象，延迟到真正需要它时才创建。中介购车、代购、课代表替老师收作业

class Letter {
  constructor(name) {
    this.name = name
  }
} 
// 暗恋人小明
let XiaoMing = {
  name: "小明",
  sendLetter(target) {
    target.receiveLetter(this.name)
  },
} 
// 代理小华
let xiaoHua = {
  receiveLetter(customer) {
    // 当然要等小红好心情时才送情书，也在送情书也才创建情书
    XiaoHong.listenGoodMood(() => {
      XiaoHong.receiveLetter(new Letter(customer + "的情书"))
    })
  },
} 
// 心仪对象小红
let XiaoHong = {
  name: "小红",
  receiveLetter(letter) {
    console.log(this.name + "收到：" + letter.name)
  },
  listenGoodMood(fn) {
    setTimeout(() => {
      fn()
    }, 1000)
  },
}
XiaoMing.sendLetter(xiaoHua) //小红收到：小明的情书

Proxy 是 ES6 提供的专门以代理角色出现的代理器,Vue 3.0 的响应式数据部分弃用了 Object.defineProperty，使用 Proxy 来代替它。

var proxy = new Proxy(target, handler);

现在用Proxy模拟一下另一种场景:为了保护不及格的同学，课代表拿到全班成绩单后只会公示及格人的成绩。对考分有疑问的考生，复议后新分数比以前大10分才有权利去更新成绩

const scoreList = {
  wang: 90,
  li: 60,
  wu: 100,
}

const yyProxy = new Proxy(scoreList, {
  get: function(scoreList, name) {
    if (scoreList[name] > 69) {
      console.log("输出成绩")
      return scoreList[name]
    } else {
      console.log("不及格的成绩无法公示")
    }
  },
  set: function(scoreList, name, val) {
    if (val - scoreList[name] > 10) {
      console.log("修改成绩")
      scoreList[name] = val
    } else {
      console.log("无法修改成绩")
    }
  },
})

yyProxy["wang"] = 98 //无法修改成绩
yyProxy["li"] = 80 //修改成绩

总结

我曾经以为设计模式是疯狂的，遥远的软件开发指南。然后我发现我一直在使用它们！

我介绍的一些模式已在许多应用程序中使用。但归根结底，它们只是理论而已。作为开发人员，是否使用取决于使用后是否使代码逻辑更易于实现和维护。

转自掘金：https://juejin.im/post/6859506910652006414#heading-13

Gatsby-layout插件全局配置路由过渡动画

Ruoduan — Invalid Date

缘起

在Gatsby 中我们想加入路由过渡动画，不能像React那样，直接给路由封装高阶组件

我们可以使用 Layout 布局组件来实现

他的原理就是在所有静态页面中套一个你的 Layout 组件

🚀 👇

npm install --save gatsby-plugin-layout
创建src/Layouts/index.html 这是默认位置你还可以修改位置详情参考Github
gatsby-config.js中添加插件

module.exports = {
  plugins: ["gatsby-plugin-layout"]
};

安装 yarn add gatsby-plugin-transitions gatsby-plugin-layout react-spring
Layout 配置

import React from "react";
import { TransitionProvider, TransitionViews } from "gatsby-plugin-transitions";


const Layout = ({ location, children }) => {
  return (
    <TransitionProvider
      location={location}
      mode="immediate"
      // 进入
      enter={{
        opacity: 1,
        transform: "translate3d(50vh,0vh,0) scale3d(1, 1, 1) rotate(0deg)",
        config: {
            duration: 700
          }
      }}
      // 正常
      usual={{
        opacity: 1,
        transform: "translate3d(0vh,0vh,0) scale3d(1, 1, 1) rotate(0deg)"
      }}
      // 切出
      leave={{
        opacity: 0,
        transform: "translate3d(0vh,0vh,0vh) scale3d(0.5, 0.5, 0.5) rotate(0deg)",
        config: {
            duration: 1000
          }
      }}
    >
      <TransitionViews>
        {children}
      </TransitionViews>
    </TransitionProvider>
  );
};

export default Layout;

完

读-代码整洁之道-笔记(有感)

Ruoduan — Invalid Date

缘起

最近想这阅读一本书，一本不是code工具书，又对编程有所提升的书籍，决定读一读收藏已久的《代码的整洁之道》 —— Robert C.Martin

看书笔记和观后感记于此 📖

军规

我们接到一个需求｜一个功能，首先 reveiew 代码可行性而不是在以前的代码上堆积

然而目前大多数公司遵循他们自以为是的 “敏捷式开发” 需求压力大导致这一点很难落地实现，包括我自己，个人觉得这就是社区开源项目的质量普遍比公司内部项目质量高的原因之一

命名

避免映射思维如 i和k 这种的变量很容易和 for 循环中的 k j i 混淆
有义意的命名

类名

类名和对象应该是名词或者名词短语如：Customer、WikiPage、Account 等避免使用 Manager、Data、Info 这样类似的类名，类名不应是动词

方法名

函数

以上是一个示例代码片段，一个糟糕的示例

重构之后

你大概能明白重构之前的代码，但是你应该不会了解其细节，而下面的重构后的代码我们就可以一目了然很容易获取到其信息

我们不难发现良好的代码具备以下特点
- 短小，函数的第一条规则就是要短小函数每行不应该有150个字符串那么长，函数也不应该有100行那么长，20行最佳
- 代码块和缩进，诸如 if switch while 之类的语句其中的代码块只应该有一行，改行是一个函数语句的调用，函数的嵌套层级不应该多于一层或者两层
  
  JavaScript ES5 之前在这个方面就有这样子非常糟糕写法，也被大家所诟病充斥着大量的回调地狱、多层闭包、等
- 只做一件事，我们在写一个函数的时候要遵循低耦合的的特点，一个函数只做一件事，也就是单一职责的性质
- switch 语句，写出短小的 switch 语句很难，哪怕只有2个条件的switch 判断的代码块也要大的多，switch 天生就要做多个事，不过我们可以保证每个switch 都埋藏着较低的抽象层级而且永不重复
- 使用描述性名称
- 函数参数，最理想的函数参数是0参数、其次是1参数、再其次是2参数、尽量避免出现3参数（多参数）的情况，如果看起来函数确实需要多个参数我就可以考虑吧把参数封装对象｜类
- 结构化编程，每个函数、函数中的每个代码块都应该只有一个入口、一个出口，意味着每个函数中只能有一个return 语句, 循环中不能有 break continue 语句。但是对于小函数偶尔出现 return、break、continue语句没有坏处，所以我们要保持函数短小精悍
小结：

每个系统都是使用某种领域特定的语言来搭建，而这种语言是吃宵夜设计来描述那个系统的；

注释

用名称代替过于明了的注释

// Format matched kk:mm EEE, MM, dd, yyyy 

Pattern timeMatcger = PAatern.compile(

这类注释有时候会管用，但我们更推荐使用函数名称来传达信息 responderBeingTested

对于意图的解释
阐述解释：有些地方过于抽象描述起来太冗长，我可以清楚的描述参数、返回值
警示：用于警告他其他程序员会出现某种后果
TODO 注释用计划的方式放在代码中也有助于IDE定位
归属署名有助于找到对应的人
注释掉掉掉代码：这是非常糟糕的做法尽量避免

浅谈前端架构自动化-cdn刷新预热自动化脚本

Ruoduan — Invalid Date

缘起

在每次 master bulid 后都要去阿里云后台手动刷新｜预热，此文章旨在优化发包繁琐步骤

流程

实现

1. pip install aliyun-python-sdk-cdn

ps：这个SDK 和下面的代码是基于 python2 推荐2.7.16

Mac 的话默认版本就是 python2

Refresh.py 实现

阿里云官方文档

#!/usr/bin/env python
# coding=utf-8
# __author__ = 'hanli.zyb'

'''Check Package'''

try:
    import os, sys, getopt, time, json
    from aliyunsdkcore.client import AcsClient
    from aliyunsdkcore.acs_exception.exceptions import ClientException
    from aliyunsdkcore.acs_exception.exceptions import ServerException
    from aliyunsdkcdn.request.v20180510.RefreshObjectCachesRequest import RefreshObjectCachesRequest
    from aliyunsdkcdn.request.v20180510.PushObjectCacheRequest import PushObjectCacheRequest
    from aliyunsdkcdn.request.v20180510.DescribeRefreshTasksRequest import DescribeRefreshTasksRequest
    from aliyunsdkcdn.request.v20180510.DescribeRefreshQuotaRequest import DescribeRefreshQuotaRequest
except:
    sys.exit("[Error] Please pip install aliyun-python-sdk-cdn and aliyun-java-sdk-core ，please install now......")


class Refresh(object):
    '''init func'''

    def __init__(self):

        self.lists = []
        self.param = {}

    '''
  描述：调度的主函数
  resP：检测入参结果，如果类型不是 bool 说明有报错
  '''

    def main(self, argv):
        if len(argv) < 1:
            sys.exit("\nusage: " + sys.argv[0] + " -h ")
        try:
            opts, args = getopt.getopt(argv, "hi:k:n:r:t:a:o:")
        except Exception as e:
            sys.exit("\nusage: " + sys.argv[0] + " -h ")

        for opt, arg in opts:
            if opt == '-h':
                self.helps()
                sys.exit()
            elif opt == '-i':
                self.param['-i'] = arg
            elif opt == '-k':
                self.param['-k'] = arg
            elif opt == '-r':
                self.param['-r'] = arg
            elif opt == '-t':
                self.param['-t'] = arg
            elif opt == '-a':
                self.param['-a'] = arg
            elif opt == '-o':
                self.param['-o'] = arg
            elif opt == '-n':
                self.param['-n'] = arg
            else:
                sys.exit("\nusage: " + sys.argv[0] + " -h ")

        resP = self.doCheck(self.param)
        if not isinstance(resP, bool): sys.exit(resP)

        try:
            client = AcsClient(self.param['-i'], self.param['-k'], 'cn-hangzhou')
        except NameError:
            sys.exit("[Error]: SDK module not detected")

        for g in self.doProd(self.param):
            self.lists = []
            self.doRefresh(''.join(g), self.param['-t'], client)

    '''
  描述：检测入参数
  '''

    def doCheck(self, param):

        try:
            for key1 in ('-i', '-k', '-r', '-t'):
                if not key1 in param.keys():
                    return "[Error]: {0} Must be by parameter".format(key1)

            try:
                if not param.has_key('-n'):
                    self.param['-n'] = 50
                if not (abs(int(param['-n'])) <= 100 and abs(int(param['-n'])) > 0):
                    return "[Error]: 0 < -n <= 100"
                else:
                    self.param['-n'] = int(param['-n'])
            except ValueError as e:
                return "[Error]: -n Must be int Type ,{0}".format(str(e))

            if not param['-t'] in ("push", "clear"): return "[Error]: taskType Error"
            if param.has_key('-a') and param.has_key('-o'): return "[Error]: -a and -o cannot exist at same time"

            if param.has_key('-a'):
                if not param['-a'] in ("domestic", "overseas"):
                    return "[Error]: Area value Error"
                if param['-t'] == 'clear':
                    return "[Error]: -t must be push and 'clear' -o use together"

            if param.has_key('-o'):
                if not param['-o'] in ("File", "Directory"):
                    return "[Error]: ObjectType value Error"
                if param['-t'] == 'push':
                    return "[Error]: -t must be clear and 'push' -a use together"

        except KeyError as e:
            return "[Error]: Parameter {0} error".format(str(e))
        return True

    '''
  描述：生成器切分文件，对每行文件进行处理 '\n'
  gop：每次读取 URL 数量
  '''

    def doProd(self, params):
        gop = params['-n']
        mins = 1
        maxs = 7

        with open(params['-r'], "r") as f:
            for line in f.readlines():
                if mins != maxs:
                    line = line.strip("\n") + "\n"
                else:
                    line = line.strip("\n")
                self.lists.append(line)
                if mins >= maxs:
                    yield self.lists
                    mins = maxs
                    maxs = gop + maxs - 1
                else:
                    mins += 1
            if len(self.lists) > 0: yield self.lists

    '''
  描述：刷新/预热任务
  '''

    def doRefresh(self, lists, types, client):
        try:
            if types == 'clear':
                taskID = 'RefreshTaskId'
                request = RefreshObjectCachesRequest()
                if self.param.has_key('-o'):
                    request.set_ObjectType(self.param['-o'])
            elif types == 'push':
                taskID = 'PushTaskId'
                request = PushObjectCacheRequest()
                if self.param.has_key('-a'):
                    request.set_Area(self.param['-a'])

            taskreq = DescribeRefreshTasksRequest()
            request.set_accept_format('json')
            request.set_ObjectPath(lists)
            response = json.loads(client.do_action_with_exception(request))
            print(response)

            while True:
                count = 0
                taskreq.set_accept_format('json')
                print ('------')
                print (type(response[taskID]))
                print ('------')
                taskreq.set_TaskId(int(response[taskID]))
                taskresp = json.loads(client.do_action_with_exception(taskreq))
                print("[" + response[taskID] + "]" + "is doing... ...")
                for t in taskresp['Tasks']['CDNTask']:
                    if t['Status'] != 'Complete':
                        count += 1
                if count == 0:
                    break
                else:
                    continue
                time.sleep(5)
        except Exception as e:
            sys.exit("[Error]" + str(e))

    '''
  描述：帮助信息
  '''

    def helps(self):
        print("\nscript options explain: \
            \n\t -i <AccessKey>                  访问阿里云凭证，访问控制台上可以获得； \
            \n\t -k <AccessKeySecret>            访问阿里云密钥，访问控制台上可以获得； \
            \n\t -r <filename>                   文件名称，每行一条 URL，有特殊字符先做 URLencode，以 http/https 开头； \
            \n\t -t <taskType>                   任务类型 clear 刷新，push 预热； \
            \n\t -n [int,[..100]]                可选项，每次操作文件数量，做多 100 条； \
            \n\t -a [String,<domestic|overseas>  可选项，预热范围，不传是默认是全球；\
            \n\t    domestic                     仅中国大陆； \
            \n\t    overseas                     全球（不包含中国大陆）； \
            \n\t -o [String,<File|Directory>]    可选项，刷新的类型； \
            \n\t    File                         文件刷新（默认值）； \
            \n\t    Directory                    目录刷新")


# TODO 入口

if __name__ == '__main__':
    fun = Refresh()
    fun.main(sys.argv[1:])

2. 同级目录准备 `cnd.lst` 地址文件

例如：

https://xx.xxxxx.xx/

3. 编写`Shell`脚本 `re_cdn.sh`

 #!/bin/bash\
AccessKey="<***AccessKey***>"
AccessKeySecret="***AccessKeySecret***"
# clear | push
action="clear"


echo "开始执行cdn预热刷新"
# python2 Refresh.py -i AccessKey -k AccessKeySecret -r ./cdn.lst -t action
python2 Refresh.py -i $AccessKey -k $AccessKeySecret -r ./cdn.lst -t $action
echo "刷新完成"

这只是个基本版可以根据SDK参数来增加更多选项参数如下⬇️

\n\t -i <AccessKey>                  访问阿里云凭证，访问控制台上可以获得； \
            \n\t -k <AccessKeySecret>            访问阿里云密钥，访问控制台上可以获得； \
            \n\t -r <filename>                   文件名称，每行一条 URL，有特殊字符先做 URLencode，以 http/https 开头； \
            \n\t -t <taskType>                   任务类型 clear 刷新，push 预热； \
            \n\t -n [int,[..100]]                可选项，每次操作文件数量，做多 100 条； \
            \n\t -a [String,<domestic|overseas>  可选项，预热范围，不传是默认是全球；\
            \n\t    domestic                     仅中国大陆； \
            \n\t    overseas                     全球（不包含中国大陆）； \
            \n\t -o [String,<File|Directory>]    可选项，刷新的类型； \
            \n\t    File                         文件刷新（默认值）； \
            \n\t    Directory                    目录刷新")

4. 修改 `package.json`来执行脚本

在 script 中增加 recdn

  "scripts": {
    "serve": "vue-cli-service serve --port 8888 ",
    "build": "vue-cli-service build",
    "oss": "echo \"开始上传...\n正在上传请稍后...\" && node app.js && echo \"成功\"",
    "recdn": "bash ./re_cdn.sh"
  },

当然也可以直接把脚本写在oss后面

"oss": "echo \"开始上传...\n正在上传请稍后...\" && node app.js && echo \"成功\"bash ./re_cdn.sh",

这样在我们每次构建后都会自动执行 oss 和 cdn 刷新任务

完

如何写好 Changelog

Ruoduan — Invalid Date

如何写好 Changelog

在工作中需要写很多项目文档，随着不断的迭代，内容也会不断的变化，时间一长，就很可能忘记之前在什么时候做过什么改动了，所以这个时候就需要文档的写作者保持更新 Changelog 来确保每一个协作者都在同一个步伐。

很多人认为更新日志好像是只有「写代码」才需要的一个文档，但是只要涉及到文档协同、对1个文档进行长期的迭代，我们都需要一个更新文档来记录历史变动，这样新的人进来就可以对整个来龙去脉有一个非常直观的了解。

什么是更新日志

那什么是更新日志呢？更新日志（Change Log）是一个由人工编辑，以时间为倒叙的列表。这个列表记录所有版本的重大变动。

一个非常直观的案例我们可以看下社区比较优秀的框架 [ant-design](https://github.com/ant-design/ant-design) 他们是如何写的 Antd-Changelog链接

可以看到在大型开源项目中一个简洁明了、层次清晰的 Changelog 是非常重要的，还有一些 Emoji ～更加生动哈哈～

总结一下：

一份优秀的Changelog，应具备：

ISTORY.txt, HISTORY.md, History.md, NEWS.txt, NEWS.md, News.txt, RELEASES.txt, RELEASE.md, releases.md

这么多文件name 太不统一了 ⬆️
也有专门那么一群人定义了一份Changelog标准参考 keepachangelog.com是一个致力于规范更新日志的项目.

完

本文部分参考网络侵删 Author：ruoduan 同步Blog

记-vue vue.config.js 配置webpack全局变量

Ruoduan — Invalid Date

缘起

vue-cli3 以来是不会暴露 webpack.config.js 的需要我们手动来配置因为近期接手的一个项目我需要从 package.josn 拿参数然后在其他 js文件拿到配置

大致步骤如下：

项目根目录创建文件 vue.config.js
添加配置 =》配置全局变量
其他js 拿到全局变量

配置大致和 webpack 差不多

for example

我们通过 process 来获取参数

process.env config 参数
process.env 自定义参数参数

VUE 平台配置内容

我们在这里的配置都会被合并到配置文件中 use webpack-merge

我们当前需求使用chainWebpack

类似这样

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

我们需要到配置业比较简单如下：⬇️

// VUE 平台配置内容
module.exports = {
  // 配置自定义环境变量
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => { 
          args[0].BUILD_REF = JSON.stringify(ref)
          return args
      })

}}

可以看到我们自定义来一个 BUILD_REF 全局变量接下来就可以在任何地方引用它来

vue-cli 参考文档

完

记-Git 设置全局 ".gitignore"

Ruoduan — Invalid Date

缘起

每次换 IDE 编辑器或者电脑系统都会生成一些需要Git忽略的文件每次去改项目的.gitignore 太麻烦去设置一些公共的配置放在全局

流程

git config —global core.excludesfile ’~/.gitignore’

生成全局~/.gitignore

vim .gitignore

小栗子 🌰

.idea
.sonar
.DS_Store

删除库的冗余

git rm --cached -r .idea/

Ps: https://www.gitignore.io/ 生成gitignore

React-mode[进阶] React模式梳理

Ruoduan — Invalid Date

缘起

在这个 find a job 地狱难度的时间，整理一份 React 核心指南，共勉之

p s：本文章属进阶知识点如还不了解React 基本知识可参考官方文档

目录结构

[toc]

壹、Context

Context 提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。

for example

组件A —— time 数据 需要向下传递，我们可以通过 props 来传递，但是那样过于耦合
    组件B
        组件C
            组件D
                ...

典型解决方案就是Context

创建 context ：

const ThemeContext = React.createContext('C_data'); hook 写法

const value = useContext(MyContext);

API
- React.createContext
  - const MyContext = React.createContext(defaultValue);
- Context.Provider
  - <MyContext.Provider value={/* 某个值 */}>

// 创建context
const DataContext = React.createContext('123');
class App extends React.Component {
  render() {
    return (
    // 使用 Provider 将当前值传递下去
      <DataContext.Provider value="abc">
        <A />
      </DataContext.Provider>
    );
  }
}

// 中间的组件再也不必指明往下传递 theme 了。
function A() {
  return (
    <div>
      <B />
    </div>
  );
}

class B extends React.Component {
  // 当前值为 abc
  // React 会往上找到最近的 theme Provider，然后使用它的值
  static contextType = DataContext;
  render() {
    return <p/>this.context</p>;
  }

贰、Refs & DOM

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素

创建 Refs

React.createRef()
// hook 写法
const refContainer = useRef(initialValue)

for example

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  render() {
    return <div ref={this.myRef} />
  }
}

// 访问 ref
const node = this.myRef.current

叁、Refs 转发 forwardRef

如果要在函数组件中使用 ref，你可以使用 forwardRef（可与 useImperativeHandle 结合使用），或者可以将该组件转化为 class 组件。

有了上面 Refs 操作 Dom 的认识，下面跑抛出一个问题，现在我要在父组件 <F_component /> 中获取子组件的ref

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.ref = React.createRef()
  }
  // 我可以在这里访问 被转发的 `button` 的`ref`
  render() {
    return <F_component ref={this.ref} />
  }
}

const F_component = React.forwardRef((props, ref) => (
  <button ref={ref} className="F_component">
    {props.children}
  </button>
))

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef()
;<F_component ref={ref}>Click me!</F_component>

1.我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。

2.我们通过指定 ref 为 JSX 属性，将其向下传递给。

3.React 传递 ref 给 forwardRef 内函数 (props, ref) =>…，作为其第二个参数。

4.我们向下转发该 ref 参数到 <button ref={ref}>，将其指定为 JSX 属性。

5.当 ref 挂载完成，ref.current 将指向 <button> DOM 节点。

肆、 Fragments

Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

Fragments = jsx: <> … </>

<React.Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</React.Fragment>

短语法 <></> 不支持 key

伍、高阶组件（HOC）

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

上面👆是官方短解释以下我通俗一点解释吧：

想必大家都知道 JavaScript 的高阶函数吧。其实高阶组件就相当于一个高阶函数。即：高阶函数，就是函数中可以传入另一个函数作为参数的函数。

在 React 中 => JSX 函数即组件 = 高阶组件是将组件转换为另一个组并返回

for example

假设有一个组件 MyComponent，需要从 LocalStorage 中获取数据，然后渲染数据到界面。我们可以这样写组件代码：

import React, { Component } from "react"

class MyComponent extends Component {
  componentWillMount() {
    let data = localStorage.getItem("data")
    this.setState({ data })
  }

  render() {
    return <div>{this.state.data}</div>
  }
}

现在我们要封装一个高阶组件withPersistentData来达到上述代码逻辑的复用

import React, { Component } from "react"

function withPersistentData(WrappedComponent, key) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key)
      this.setState({ data })
    }

    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

class MyComponent2 extends Component {
  render() {
    return <div>{this.props.data}</div>
  }

  //省略其他逻辑...
}

class MyComponent3 extends Component {
  render() {
    return <div>{this.props.data}</div>
  }

  //省略其他逻辑...
}

const MyComponent2WithPersistentData = withPersistentData(MyComponent2, "data")
const MyComponent3WithPersistentData = withPersistentData(MyComponent3, "name")

请注意，HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有副作用。

HOC 高阶组件 => 高阶函数

在我们的使用过程中，我们可以在这个过程中对传入的组件进行更多的 React 模式的处理，例如我们想在 componentWillMount 中来获取数据.

也是高阶组件最常见的函数签名形式 HOC([param])([WrappedComponent])

import React, { Component } from "react"

const withPersistentData = key => WrappedComponent => {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key)
      this.setState({ data })
    }

    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

class MyComponent2 extends Component {
  render() {
    return <div>{this.props.data}</div>
  }

  //省略其他逻辑...
}

class MyComponent3 extends Component {
  render() {
    return <div>{this.props.data}</div>
  }

  //省略其他逻辑...
}

const MyComponent2WithPersistentData = withPersistentData("data")(MyComponent2)
const MyComponent3WithPersistentData = withPersistentData("name")(MyComponent3)

这种形式的高阶组件因其特有的便利性——结构清晰（普通参数和被包裹组件分离）、易于组合，大量出现在第三方库中 react-redux中的connect就是一个典型
注意事项
不要在 render 方法中使用 HOC

React 的 diff 算法（称为协调）使用组件标识来确定它是应该更新现有子树还是将其丢弃并挂载新子树。如果从 render 返回的组件与前一个渲染中的组件相同（===），则 React 通过将子树与新子树进行区分来递归更新子树。如果它们不相等，则完全卸载前一个子树。
错误示例

render() {
  // 每次调用 render 函数都会创建一个新的 EnhancedComponent
  // EnhancedComponent1 !== EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // 这将导致子树每次渲染都会进行卸载，和重新挂载的操作！
  return <EnhancedComponent />;
}

务必复制静态方法

如果需要使用被包装组件的静态方法，那么必须手动拷贝这些静态方法。因为高阶组件返回的新组件，是不包含被包装组件的静态方法。

ps: 我们可以使用 hoist-non-react-statics 这个库来解决这个问题

当然你也可以手动拷贝

function enhance(WrappedComponent) {
  class Enhance extends React.Component {
    /*...*/
  }
  // 必须准确知道应该拷贝哪些方法 :(
  Enhance.staticMethod = WrappedComponent.staticMethod
  return Enhance
}

除了导出组件，另一个可行的方案是再额外导出这个静态方法。

// 使用这种方式代替...
MyComponent.someFunction = someFunction
export default MyComponent

// ...单独导出该方法...
export { someFunction }

// ...并在要使用的组件中，import 它们
import MyComponent, { someFunction } from "./MyComponent.js"

陆、Portals (插槽)

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

ReactDOM.createPortal(child, container)

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。

ps: 一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框

参考这个示例: codepen

HTML 和 CSS 属性我就不展示了参照如上 ⬆️ 链接 🔗，把 JS 拿出来讲一下

// 根节点
const appRoot = document.getElementById('app-root');
// 被插入Dom 节点元素
const modalRoot = document.getElementById('modal-root');

// 创建模态框组件
class Modal extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个Dom元素容器
    this.el = document.createElement('div');
  }

  componentDidMount() {
    // 将被插入节点放到dom容器中作为它的子元素
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    // 组件卸载的时候删除这个容器
    modalRoot.removeChild(this.el);
  }

  render() {
    // 使用 Portal 来把需要展示的元素放到其他节点
    return ReactDOM.createPortal(
      // 可以是任何有效的React子代：JSX，字符串，数组等。
      this.props.children,
      // 一个DOM 元素
      this.el,
    );
  }
}

.
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showModal: false};

    this.handleShow = this.handleShow.bind(this);
    this.handleHide = this.handleHide.bind(this);
  }

  handleShow() {
    this.setState({showModal: true});
  }

  handleHide() {
    this.setState({showModal: false});
  }

  render() {
    // 处理 逻辑
    const modal = this.state.showModal ? (
      <Modal>
        <div className="modal">
          <div>
            With a portal, we can render content into a different
            part of the DOM, as if it were any other React child.
          </div>
          This is being rendered inside the #modal-container div.
          <button onClick={this.handleHide}>Hide modal</button>
        </div>
      </Modal>
    ) : null;

    return (
      <div className="app">
        This div has overflow: hidden.
        <button onClick={this.handleShow}>Show modal</button>
        {modal}
      </div>
    );
  }
}

ReactDOM.render(<App />, appRoot);

柒、Profiler & Profiler API 性能监控

Profiler 分为 2 个方面一个是浏览器插件 Profiler 一个是 React 提供给我们的 Profiler API

他们都是用来做性能分析的

Profiler API 具体参考官方文档就好了

简单介绍下：

Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销。它需要两个 prop ：一个是 id(string)，一个是当组件树中的组件“提交”更新的时候被 React 调用的回调函数 onRender(function)。

for example

例如，为了分析 Navigation 组件和它的子代：

render(
  <App>
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
    <Main {...props} />
  </App>
)

onRender 回调

function onRenderCallback(
  id, // 发生提交的 Profiler 树的 “id”
  phase, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一
  actualDuration, // 本次更新 committed 花费的渲染时间
  baseDuration, // 估计不使用 memoization 的情况下渲染整颗子树需要的时间
  startTime, // 本次更新中 React 开始渲染的时间
  commitTime, // 本次更新中 React committed 的时间
  interactions // 属于本次更新的 interactions 的集合
) {
  // 合计或记录渲染时间。。。
}

Profiler 插件

Profiler 插件参考这篇文章

捌、Diffing 算法

该算法的复杂程度为 O(n 3 )，其中 n 是树中元素的数量。

算法细则请参考

如果在 React 中使用了该算法，那么展示 1000 个元素所需要执行的计算量将在十亿的量级范围。这个开销实在是太过高昂。于是 React 在以下两个假设的基础之上提出了一套 O(n) 的启发式算法：

1.两个不同类型的元素会产生出不同的树；

2.开发者可以通过 key prop 来暗示哪些子元素在不同的渲染下能保持稳定；

这也就是我们在 React 中遍历key对于性能的重要性了，了解过 tree 算法我们都知道在树的子节点中我们只要能确定 child tree 的 key（相当于权值我就可以进行大幅优化）

元素对比
```
分为：
```

比对不同类型的元素
1. 比对同一类型的元素
```
-  在根节点以下的组件也会被卸载，它们的状态会被销毁。比如，当比对以下更变时：
```js
 <div>
   <Counter />
 </div>

 <span>
   <Counter />
 </span>
```
React 会销毁 Counter 组件并且重新装载一个新的组件。
- 当比对两个相同类型的 React 元素时，React 会保留 DOM 节点，仅比对及更新有改变的属性。比如：
```
<div className="before" title="stuff" />

<div className="after" title="stuff" />
```
通过比对这两个元素，React 知道只需要修改 DOM 元素上的 className 属性。

React 继续对子节点进行递归。

Keys [敲黑板面试问烂了的题目下面我来解析下原理]

在默认条件下，当递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表；当产生差异时，生成一个 mutation。

<ul>
  <li>first</li>
  <li>second</li>
</ul>
########################################## 添加 => `<li>third</li>`
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

这样子是在列表头部添加元素这样子开销较小

但是如果是在头部增加的话

<ul>
  <li>first</li>
  <li>second</li>
</ul>
########################################## 添加 => `<li>third</li>`
<ul>
  <li>top third</li>
  <li>first</li>
  <li>second</li>

</ul>

如果简单实现的话，那么在列表头部插入会很影响性能，那么更变开销会比较大.

为了解决以上问题，React 支持 key 属性。当子元素拥有 key 时，React 使用 key 来匹配原有树上的子元素以及最新树上的子元素。以下例子在新增 key 之后使得之前的低效转换变得高效：

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

现在 React 知道只有带着 ‘2014’ key 的元素是新元素，带着 ‘2015’ 以及 ‘2016’ key 的元素仅仅移动了。

玖、Render Props

术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术

ps: 我在这个地方吃过亏，一下子没反应过来. 比较简单：其实 Render Props 就是 Render 这个 API Render Props是一种模式

划重点：任何被用于告知组件需要渲染什么内容的函数 prop 在技术上都可以被称为 “render prop”.

for example

具有 render prop 的组件接受一个函数，该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。

<DataProvider render={data => <h1>Hello {data.target}</h1>} />

使用 render prop 的库有 React Router、Downshift 以及 Formik。

我们来看这样一个示例：👇

// 创建一个需要被传入的props
class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse
    return (
      <img
        src="/cat.jpg"
        style={{ position: "absolute", left: mouse.x, top: mouse.y }}
      />
    )
  }
}
//封装接受 Render props 的方法
class Mouse extends React.Component {
  constructor(props) {
    super(props)
    this.handleMouseMove = this.handleMouseMove.bind(this)
    this.state = { x: 0, y: 0 }
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    })
  }

  render() {
    return (
      <div style={{ height: "100vh" }} onMouseMove={this.handleMouseMove}>
        // Mouse组件的静态展示 // 使用`render` 动态确定要渲染的内容
        {this.props.render(this.state)}
      </div>
    )
  }
}

// 在组件中灵活的 复用Mouse的数据
class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>移动鼠标!</h1>
        <Mouse render={mouse => <Cat mouse={mouse} />} />
      </div>
    )
  }
}

拾、深入理解 JSX（口水文记一下冷不丁被问到）

ps：这个篇幅比较容易理解只是例举不做详解

JSX 仅仅只是 React.createElement(component, props, …children) 函数的语法糖

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

会编译为：

React.createElement(MyButton, { color: "blue", shadowSize: 2 }, "Click Me")

如果没有子节点，你还可以使用自闭合的标签形式，如：

;<div className="sidebar" />
// 会编译为:
React.createElement("div", { className: "sidebar" })

React 必须在作用域内

// 例如，在如下代码中，虽然 React 和 CustomButton 并没有被直接使用，但还是需要导入：
import React from "react"
import CustomButton from "./CustomButton"
function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />
}

在 JSX 类型中使用点语法

import React from "react"
const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>
  },
}
function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />
}

用户定义的组件必须以大写字母开头

不必多说六吧基本常识

JavaScript 表达式作为 Props

<MyComponent foo={1 + 2 + 3 + 4} />

if 语句以及 for 循环不是 JavaScript 表达式，所以不能在 JSX 中直接使用

所以我们要在 jsx 外来判断条件和遍历数据

function NumberDescriber(props) {
  let description
  if (props.number % 2 == 0) {
    description = <strong>even</strong>
  } else {
    description = <i>odd</i>
  }
  return (
    <div>
      {props.number} is an {description} number
    </div>
  )
}

字符串字面量

//  你可以将字符串字面量赋值给 prop. 如下两个 JSX 表达式是等价的：
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

Props 默认值为 “True”

// 如果你没给 prop 赋值，它的默认值是 true。以下两个 JSX 表达式是等价的：
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />

属性展开

// 如果你已经有了一个 props 对象，你可以使用展开运算符 ... 来在 JSX 中传递整个 props 对象。以下两个组件是等价的：
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />
}
function App2() {
  const props = { firstName: "Ben", lastName: "Hector" }
  return <Greeting {...props} />
}
// 你还可以选择只保留当前组件需要接收的 props，并使用展开运算符将其他 props 传递下去。
const Button = props => {
  const { kind, ...other } = props
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton"
  return <button className={className} {...other} />
}
const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  )
}

布尔类型、Null 以及 Undefined 将会忽略

记-Win10WIFI频繁断开显示“需要执行操作”的解决方法

Ruoduan — Invalid Date

缘起

朋友 Windows 电脑，老是出现 Wifi 网络断开需要执行操作的问题，来找我，刚开始以为是 dns 和 DHCP 的问题释放重新获取来一下发现没有，后台发现没那么简单

原因

这是微软更新协议导致连接外网需要与服务商重新签订 ISP，不影响上网，只是可能对微软的产品或服务会弹出提醒、警示，待微软协议更新完成，服务商重新签订后就好了，据悉，只有移动宽带用户受到了影响，电信没有问题。

以通过注册表解决这个问题

按下 WIN+R，然后输入 regedit 回车打开注册表编辑器；
定位到注册表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControSet\servicces\NlaSvc\Parameters\Internet
找到 EnableActiveProbing，将其值改为 0 就可以了。

完

Antdv4 升级指北

Ruoduan — Invalid Date

最近 antd 更新到 v4 到大版本了, 顺手更新了一波记于此

此次 antdv4 更新细则就不谈，可移步官网查看

几个注意点：

IE 最低支持版本为 IE 11
React 最低支持版本为 React 16.9，部分组件开始使用 hooks 进行重构
升级项目 React 16.12.0 以上

Start upgrading

更新依赖包

上面也说了，此次更新版本较新我索性就更新最新版了

yarn upgrade –latest [pkg-name] && yarn upgrade –latest

更新指定依赖或者更新全部 …

使用yarn更新完后只有 yarn.lock 变了, 同步更新下 package.json： yarn upgrade-interactive --latest

空格键选择，a 键切换所有，i 键反选选择

开始升级

# 通过 npx 直接运行
npx -p @ant-design/codemod-v4 antd4-codemod src
# 或者全局安装
# 使用 npm
npm i -g @ant-design/codemod-v4
# 或者使用 yarn
yarn global add @ant-design/codemod-v4
# 运行
antd4-codemod src

OK 👌

codemod-v4 这个工具会在终端显示格式化到代码片段和文件 and 格式化失败提示

create-react-app 没有[src] 文件夹（记一次问题）

Ruoduan — Invalid Date

缘起

在使用 npx create-react-app xx-app 的时候创建项目后没有scr 文件夹,看了一下package.json也不对

然后顺势检查来一下 nodejs npm yarn 什么的都是正常的, 非常疑惑，然后去github 翻了翻

问题原因

是因为官方已经弃用了独立安装包 create-react-app 这个 cli 脚手架，如果没有及时卸载就会出现这个问题。

解决

卸载全局安装包

npm uninstall -g create-react-app

yarn global remove create-react-app

然后使用 旧的cli 测试一下 => sudo create-react-app my-test，如果执行了就说明安装包还存在。—— 卸载就好

如果返回了一个路径如/ usr / local / bin / create-react-ap 就使用 rm -rf / usr / local / bin / create-react-app 手动删除

ojbk ～

ps

还有一种解决方案带上参数忽略本地的 cli

npx --ignore-existing create-react-app my-app

Shell基本指南

Ruoduan — Invalid Date

缘起

病毒肆掠在家来无事，想着吧shell的知识整理一下

源码地址 github 求点个 star ⭐️

shell 环境

shell是一门脚本语言，Shell 是一个用 C 语言编写的程序，它是用户使用 Linux 的桥梁。Shell 既是一种命令语言，又是一种程序设计语言。

我们常见的操作系统如 mac 的 OSX 系统，打开终端就可以执行我们的shell(Bash shell)。windows 系统中我们的cmd终端也可以执行，Linux系统一等公民的shell环境

无论什么开发者，或多或少都会运用到一些shell的知识，这篇文章旨在帮助你完整的整理shell的基本知识

话不多说让我们开始吧！

start

作为一门脚本语言，和其他语言一样shell中也存在：

变量
数据结构
运算符
流程控制
函数
内置函数

变量

    my_var='new.ruoduan.cn'

语句给变量赋值

for file in `ls /etc`
# 以上语句将 /etc 下目录的文件名循环出来

只读变量

redVar="abc"
readonly redVar
redVar="213"

This variable is read only.

删除变量

del_var='待会要删除'
unset del_var
echo $del_var

输出为空

拼接字符串

name='ruoduan'
echo "my name is ${name} !"
echo 'my name is $name !'

引号里可以有变量，双引号里可以出现转义字符

获取字符串长度 echo ${#name}
截取字符串和 python 类似 echo ${name:3:1}
查找字符串 echoexpr index “$name” r# 输出1

传递参数

arguments.sh

echo "Shell 传递参数实例！";
echo "执行的文件名：$0";
echo "第一个参数为：$1";
echo "第二个参数为：$2";
echo "第三个参数为：$3";

终端执行 bash arguments.sh 1 2 3

输出：

Shell 传递参数实例！
执行的文件名：arguments.sh
第一个参数为：1
第二个参数为：2
第三个参数为：3

转义符：

符号	解释
$#	传递到脚本的参数个数
$*	以一个单字符串显示所有向脚本传递的参数。如”$*“用「“」括起来的情况、以”$1 $2 … $n”的形式输出所有参数。
$$	脚本运行的当前进程 ID 号
$!	后台运行的最后一个进程的 ID 号
$@	与`$*`相同，但是使用时加引号，并在引号中返回每个参数。如”$@“用「“」括起来的情况、以`"$1" "$2" … "$n"`的形式输出所有参数。
$-	显示 Shell 使用的当前选项，与 set 命令功能相同。
$?	显示最后命令的退出状态。0 表示没有错误，其他任何值表明有错误。

栗子 🌰

echo -e "\n Shell 传递参数实例！";
echo "第一个参数为：$1";

echo "参数个数为：$#";
echo "传递的参数作为一个字符串显示：$*";

输出：

Shell 传递参数实例！
第一个参数为：1
参数个数为：3
传递的参数作为一个字符串显示：1 2 3

数组

比较容易理解，一个文本带过

arr.sh

my_array=(A B "C" D)

array_name[0]=value0
array_name[1]=value1
array_name[2]=value2

echo $array_name[1]

# 获取数组中的所有元素
# 使用@ 或 * 可以获取数组中的所有元素

echo "数组中的所有元素为${array_name[*]} "

# 获取数组的长度å
echo "数组中的长度${#array_name[*]} "

输出：

value0[1]
数组中的所有元素为value0 value1 value2
数组中的长度3

运算符

shell 运算符分为如下几类

算数运算符
关系运算符
布尔运算符
字符串运算符
文件测试运算符

原生 bash 不支持简单的数学运算，但是可以通过其他命令来实现，例如 awk 和 expr，expr 最常用。

val=`expr 3 + 3`
echo "两数之和为 : $val"

两数之和为 : 6

算术运算

a=30
b=60

val=`expr $a + $b`
echo "a + b : $val"

val=`expr $a - $b`
echo "a - b : $val"

val=`expr $a \* $b`
echo "a * b : $val"

val=`expr $b / $a`
echo "b / a : $val"

val=`expr $b % $a`
echo "b % a : $val"

if [ $a == $b ]
then
   echo "a 等于 b"
fi
if [ $a != $b ]
then
   echo "a 不等于 b"
fi

输出：

两数之和为 : 6
a + b : 90
a - b : -30
a * b : 1800
b / a : 2
b % a : 0
a 不等于 b

其他的运算符就不给出实例了详情源码

shell echo

echo '啦啦啦～ 哈哈哈'

# 显示转义字符
echo -e '啦啦啦～ \n 哈哈哈'

# 显示变量
# 有点类似于 python 中的 input
read name
echo "$name It is a test"

# 显示结果定向至文件
echo -e "显示结果定向至文件的内容\n" > myfile.log

# 显示命令执行结果
echo `date`

比较简单

shell printf

语法： printf format-string [arguments…]

format-string: 为格式控制字符串
arguments: 为参数列表。

echo "Hello, Shell"
printf "Hello, Shell\n"

# 格式化打印
printf "%-10s %-8s %-4s\n" 姓名 性别 体重kg
printf "%-10s %-8s %-4.2f\n" 小米 男 66.1234
printf "%-10s %-8s %-4.2f\n" 小红 男 48.6543
printf "%-10s %-8s %-4.2f\n" 小康 女 47.9876

输出：

Hello, Shell
Hello, Shell
姓名     性别   体重kg
小米     男      66.12
小红     男      48.65
小康     女      47.99

%s %c %d %f都是格式替代符
%-10s 指一个宽度为 10 个字符（-表示左对齐，没有则表示右对齐），任何字符都会被显示在 10 个字符宽的字符内，如果不足则自动以空格填充，超过也会将内容全部显示出来。
%-4.2f 指格式化为小数，其中.2 指保留 2 位小数。

流程控制

if elif

if [ $a == $b ]
then
   echo "a 等于 b"
elif [ $a -gt $b ]
then
   echo "a 大于 b"
elif [ $a -lt $b ]
then
   echo "a 小于 b"
else
   echo "没有符合的条件"
fi

shell 中流程控制以if开始fi结尾

if else if else 语句经常与 test 命令结合

num1=$[2*3]
num2=$[1+5]
if test $[num1] -eq $[num2]
then
    echo '两个数字相等!'
else
    echo '两个数字不相等!'
fi

# for 循环
for loop in 1 2 3 4 5
do
    echo "The value is: $loop"
done

输出：

The value is 1
The value is 2
The value is 3
The value is 4
The value is 5

while 语句

int=1
while(( $int<=6 ))
do
    echo $int
    let "int++"
done

输出：

无限循环

while true
do
    command
done

for (( ; ; ))

until 循环

until [ ! $a -lt 10 ]
do
   echo $a
   a=`expr $a + 1`
done

case

echo '输入 1 到 4 之间的数字:'
echo '你输入的数字为:'
read aNum
case $aNum in
    1)  echo '你选择了 1'
    ;;
    2)  echo '你选择了 2'
    ;;
    3)  echo '你选择了 3'
    ;;
    4)  echo '你选择了 4'
    ;;
    *)  echo '你没有输入 1 到 4 之间的数字'
    ;;
esac

break continue continue 命令与 break 命令类似，只有一点差别，它不会跳出所有循环，仅仅跳出当前循

case … esac

site="a"
case "$site" in
   "a") echo "is a"
   ;;
   "b") echo "is b"
   ;;
   "c") echo "is c"
   ;;
esac

函数

demoFun () {
    echo "函数执行"
}
demoFun

函数返回值

returnFun () {
    echo '返回2数相加'
    echo '输入第一个数字'
    read aNum
    echo '输入第二个数字'
    read bNum
    echo "$aNum 加 $bNum"
    return $(($aNum+$bNum))
}

returnFun
echo "输入的两个数字之和为 $? !"

函数返回值在调用该函数后通过 $? 来获得注意：所有函数在使用前必须定义。这意味着必须将函数放在脚本开始部分，直至 shell 解释器首次发现它时，才可以

函数参数

和前面的传递参数大致相同

funWithParam(){
    echo "第一个参数为 $1 !"
    echo "第二个参数为 $2 !"
    echo "err：第十个参数为 $10 !"
    echo "第十个参数为 ${10} !"
    echo "第十一个参数为 ${11} !"
    echo "参数总数有 $# 个!"
    echo "作为一个字符串输出所有参数 $* !"
}

funWithParam 1 2 3 4 5 6 7 8 9 66 99

输出:

第一个参数为 1 !
第二个参数为 2 !
err：第十个参数为 10 !
第十个参数为 66 !
第十一个参数为 99 !
参数总数有 11 个!
作为一个字符串输出所有参数 1 2 3 4 5 6 7 8 9 66 99 !

当 n>=10 时，需要使用${n}来获取参数

参数符

符号	说明
$#	传递到脚本或函数的参数个数
$*	以一个单字符串显示所有向脚本传递的参数
$$	脚本运行的当前进程 ID 号
$!	后台运行的最后一个进程的 ID 号
$@	与$*相同，但是使用时加引号，并在引号中返回每个参数。
$-	显示 Shell 使用的当前选项，与 set 命令功能相同。
$?	显示最后命令的退出状态。0 表示没有错误，其他任何值表明有错误。

shell 文件模块

和 JavaScript ECma5 差不多

test1.sh

file_name='test1文件数据'

test2.sh

. ./test1.sh
# or
# source ./test1.sh

echo $file_name

输出: test1文件数据

到这里 shell 的基本知识也差不多了本指南源码

码字不易求点个 star ⭐️

vim 图

webhooks自动化部署

Ruoduan — Invalid Date

缘起

最近用 Gatsby 写了一个个人 blog，link => http://new.ruoduan.cn/

Github 🙏🙏🙏 Star

发现 build 后体积太大，FTP 发文件都要 10 几分钟，挑选来下自动化部署工具 🔧，本打算用jenkins 感觉有点重，而且学习成本较高。看了一下觉得使用 github 的 webHooks 是最合适的

Graph

大致流程是这样的：👇

话不多说直接上代码代码分为三个部分

Nodejs => Server
Shell 脚本
插件

install

我的环境是 CentOS

服务器应具备 nodejs && git

首先先安装 github-webhooks 的插件和 pm2 服务器上 npm install -g github-webhook-handler pm2

nodejs 服务

webhooks.js

var http = require("http")
// github-webhook-handler 的绝对路径
var createHandler = require("/usr/lib/node_modules/github-webhook-handler")
var handler = createHandler({ path: "/", secret: "xxx" })
// 上面的 secret 保持和 GitHub 后台设置的一致

function run_cmd(cmd, args, callback) {
  var spawn = require("child_process").spawn
  var child = spawn(cmd, args)
  var resp = ""

  child.stdout.on("data", function(buffer) {
    resp += buffer.toString()
  })
  child.stdout.on("end", function() {
    callback(resp)
  })
}

http
  .createServer(function(req, res) {
    handler(req, res, function(err) {
      res.statusCode = 404
      res.end("no such location")
    })
  })
  .listen(7777) // 启动服务的端口，需要开放安全组

handler.on("error", function(err) {
  console.error("Error:", err.message)
})

handler.on("push", function(event) {
  console.log(
    "Received a push event for %s to %s",
    event.payload.repository.name,
    event.payload.ref
  )
  run_cmd("sh", ["./webhooks.sh", event.payload.repository.name], function(
    text
  ) {
    console.log(text)
  })
})

shell

webhooks.sh

 #!/bin/bash
WEB_PATH='/root/githubWebhook/warehouse/my-Gatsby-Blog'


echo "开始执行shell"
cd $WEB_PATH
echo "pulling source code..."
git pull
echo "changing permissions..."
#chown -R $WEB_USER:$WEB_USERGROUP $WEB_PATH
echo " git pull 完成. 开始 build"
yarn run gatsby build
echo "build 完成"

到这里我们服务端需要准备的东西就差不多了 Nginx 就不放出来

Github Settings

放一张图吧

start

接下来 pm2 启动服务

pm2 start webhooks.js -o ./webhooks.log

pm2 的一些基本命令

写在最后

接下来我还会更新一篇长文 Gatsby 的文章详细指出其中的利弊，无论你是新手还是想使用现代框架 ——— React 来维护我自己的 blog 的老手都非常适合

我的 New Blog => http://new.ruoduan.cn/

年后想换个工作，求内推！求内推！求内推！ Live：杭州

我的一些信息可查看我的 Blog about 部分 http://new.ruoduan.cn/about

我的BLOG_V-2.0发布了

Ruoduan — Invalid Date

V1 是 hexo 搭建，从 hexo ==> Gatsby

🚀🚀🚀

V1 链接 🔗. https://ruoduan.cn

README

Gatsby（Raact + GraphQL）的静态博客

GraphQL 是 Facebook 研发的新型中间件数据结构，非常优秀～ React 不用多说了吧～
具有现代框架特性和工具链条
Doc

Gatsby : https://www.gatsbyjs.org/docs/ GraphQL: https://graphql.cn/learn/queries/#variables

插件 🔥

gatsby-remark-vscode // 代码高亮插件
antd // 蚂蚁金服框架
typography-theme-github // Typography.js 主题
office-ui-fabric-react // 微软的极简 UI 框架
gitalk //基于 github 开源评论系统
react-cplayer // react 音乐播放器
spark-md5 // 十六进制 md5 为 comment 系统提供不超过 50 位的主键
netlify-cms-app // netlify 自动化发布部署

reactHook+Typescript从入门到实践

Ruoduan — Invalid Date

@本文章作者 Ruoduan.cn 转载请注明出处

缘起

> 公司中台系统要新增公司项目 —— IM即时聊天 的后台管理，由本人全程负责，前端技术选型 想采用目前比较新比较hot的技术 —— reactHook + react-Router5 + Typescript + （mobx | useContext + useState）,

至于括号内的稍后解答，个人觉得可以一定程度上替代 mobx 和 redux 的状态管理

本文将会从 Typescript，React-Hook，reactHook.TSX（实践）这三个方面来叙述
- Typescript
  - 项目搭建
  - 类型定义
  - 应用分析
  - …
- React-Hook ⭐️
  - useState
  - useEffect
  - useContext
  - …
- Hook 与 mobx redux 等，实现自己状态管理
- React 全家桶的东西不详细讲解带过 …

好了，下面让我们开始吧

Typescript

React-Typescript 项目搭建

nodejs环境需具备 Not 下载链接

我们采用脚手架 create-react-app 直接搭建 react-typescript 项目环境

版本要求 nodejs 8+ ， Yarn 0.25+

npx create-react-app my-app --typescript

npm init react-app my-app --typescript

yarn create react-app my-app --typescript

Typescript 项目文件

这里讲解一下 typescript 的一些文件定义

./
/src
    ./react-app-env.d.ts // 全局声明文件

tsconfig.json // typescript 配置文件

tsconfig.json 详解这里例举 🌰 几个：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "es5", //语言编译目标
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react" // 组件语法环境
  },
  "include": [
    //编译目标目录
    "src"
  ]
}

react-app-env.d.ts 是 TypeScript 声明文件 🌰 例如：你引入了jQuery 在 typescript 中：

$("#dom")
// or
jQuery("#dom")

// ERROR: Cannot find name ‘jQuery’. 报错了，因为 ts 编译器并不认识$() or jQuery

我们需要全局定义一下这个变量用 declare 修饰符 🌰

declare var jQuery: (selector: string) => any

jQuery("#foo")

这样我们就可以快乐的使用 jquery 了

但是前人种树后人乘凉很多库社区已经给我定义好了我们至于要安装就可以了

yarn add @types/jquery --save-dev

我们在后期项目中还会使用到 @types 类型安装

可以在 TypeSearch 搜索我们需要的库类型

到这里我们已经初步了解 Typescript 的项目结构了正如它官网说的它是 js 的超集，渐进式语言，我们可以直接撸，它兼容 js 目前大部分新语法，并且对其增加类型

安装 antd， react-router-dom，。。。

yarn add antd react-router-dom 这里就不一一例举 🌰 了

注意 ⚠️： react-router-dom 需要安装@types 哦 yarn add @types/react-router-dom --save-dev

antd 工程参考

下面让我的步入重点～

React-hook

我们知道 react 中分为 2 中组件，一种为类组件，一种为函数组件

区别

区别	class	func
定义方式	class	func
状态	有（state）	无
this	有	无
声明周期	有	无
简洁度	普通	较为简洁

通过比较我们可以看到传统的函数组件没有state and 生命周期

所以在之前的开发中函数式组件通常作为一些简单的组件补充

而 react-hook 可以让我们在函数式组件中使用 state 组件状态管理，还可以实现声明周期 —— 副作用，而且还极大的简化了代码，让代码更加简洁明了易于理解

userState

我们看下面 2 段代码

import React, { useState } from "react"

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

等价于

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    )
  }
}

可以看到我们导入了 useState 使用数组的解构语法来定义了 2 个变量count, setCount 并且传入了一个初始值 0，而且在下面的使用中我们摆脱了恶心的this直接可以使用
conut 是我们的 hook 变量相当于 state
setCount 是我们针对count 的赋值函数相当于this.setState()

Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作

看下面的代码

import React, { useState, useEffect } from "react"

function Example() {
  const [count, setCount] = useState(0)

  // 在组件中更新页面的title
  useEffect(() => {
    // 设置页面title
    document.title = `数字 ${count} `
  })

  return (
    <div>
      <p>数字 {count}</p>
      <button onClick={() => setCount(count + 1)}>+ 1</button>
    </div>
  )
}

等价于 class

lass Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `数字 ${this.state.count} `;
  }

  componentDidUpdate() {
    document.title = `数字 ${this.state.count} `;
  }

  render() {
    return (
      <div>
        <p>数字 {this.state.count} </p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          + 1
        </button>
      </div>
    );
  }
}

我们可以看到其中的区别，在 class 组件中我们重复的定义了生命周期 componentDidUpdate,componentDidMount

稍微分析下我们使用 class 的 state 中的数据是为了什么？
- 我们知道定义在class 组件中state中的数据我们会在数据更新后重新渲染dom树
- useEffect 在执行 DOM 更新之后调用它。在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。
- 注意 ⚠️：默认情况下，它在第一次渲染之后和每次更新之后都会执行。（我们稍后会谈到如何控制它。）
- 其实useEffect做的很简单就是告诉 React 组件需要在渲染后执行某些操作，然后每次渲染后都会执行

下面我们介绍用useEffect实现声明周期的 componentDidMount 和 componentDidUpdate

首先在我们的函数组件中是可以定义多个 useState 和 useEffect 的他们会依顺序执行的`

写在前面 useEffect 的返回值决定这个副作用的类型和销毁

return 函数：遇到清除的副作用
- return [] 空数组：只运行一次的 effect（仅在组件挂载和卸载时执行）
- 避免死循环

useEffect === componentDidMount 🌰

// 例如我们要在页面挂载是时请求数据且渲染到页面上

```js
let [list, setList] = useEffect([])

// 获取数据
const getList = async () => {
    let res = await axios('xxx')
}

// 只挂载一次的副作用函数
useEffect(() => {
    getList()
}, [])


### useEffect === componentDidUpdate 🌰
还是上面那个栗子 我们需要实时更新mobx中订阅的store中的数据到页面上

```js
 let [list, setList] = useEffect([])
 let [data, setData] = useEffect(store.rows)

 // 获取数据
 const getList = async () => {
     let res = await axios('xxx')
 }

 // 获取store中数据
 const getStore = () => {
     @observer
     let res = store.getxxxxx
     ... 此处省略若干字

     setData(res)
 }

 // 只挂载一次的副作用函数
 useEffect(() => {
     getList()
 }, [])

 // 需清除的副作用函数
 useEffect(() =>
     (()=>
         getStore
     )()
 )

到这里我们已经基本了解 reactHook 的基本使用。下面将介绍一个基于 ReactHook-useContext 来实现一个简单的 Redux 状态管理

Other ReactHook 实现 basic `Redux`

基于前面的 useReducer,和 createContext, useContext

我们先来看下额外 hook useReducer:

```js
const [state, dispatch] = useReducer(reducer, initialArg, init);
```

它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（是不是有点熟悉，用过 redux 的童鞋～）

import * as React from "react"
const { useContext, useReducer, createContext } = React

// 根据action.reduce返回状态
function reducerInAction(state, action) {
  if (typeof action.reducer == "function") {
    return action.reducer(state)
  }
  return state
}
// 处理store数据
export default function createStore(params) {
  const { _State = {}, reducer } = {
    ...params,
    reducer: reducerInAction,
  }

  // 由createContext 来进行状态管理数据分发
  const Appcontext = createContext()

  const upReducer = (lastState, action) => {
    //更新数据
    let netxState = reducer(lastState, action)
    store._state = netxState
    return netxState
  }
  const store = {
    _state: _State,
    dispatch: undefined,
    getState: () => {
      return store._state
    },
    useContext: () => {
      return useContext(Appcontext)
    },
  }
  // 处理数据后有返回
  const Provider = props => {
    const [state, dispatch] = useReducer(upReducer, _State)
    if (!store.dispatch) {
      store.dispatch = async action => {
        if (typeof action === "function") {
          await action(dispatch, store.getState())
        } else {
          dispatch(action)
        }
      }
    }
    return <Appcontext.Provider {...props} value={state} />
  }

  return {
    Provider,
    store,
  }
}

use ⬆️

import * as React from 'react'
import HooksRedux from '@/HooksRedux'
const {
    Provider,
    store
} = _HooksRedux({
    State: { name: '小明', age: '18' }

// 请求
const Add_action = () => {
    return {
        type: 'ADD',
        reducer(state) {
            return {
                ...state,
                age: state.age + 1
            }
        }
    }

@ 参考文档

ps：以上就是basic of redux，但是在我的实际项目中使用的还是mobx，他的设计模式，和面向对象的写法也比较舒服. 可参考

实践（TSX + Hook）

- 遇事不决 `Any` —— anyscript

ps: 这当然是不可取的咯～，但是我们在快速开发过程中我们有时候一个泛型｜ interface 是不确定的我们可以暂时先用any 然后后期更改

小栗子 🌰

例如我们要通过 props 向子组件传递一个对象，但是这个对象是接口数据，且现在还不能确定对象里面的数据类型和属性我们可以暂时用 any 代替，我一般会在这个地方，打上TODO any Type，方便以后处理。

- React.FC

我们可以看到这样的代码：

const app: React.FC = () => {
    ...
}

FC = Functional Component SFC = Stateless Functional Component (已弃用)

它是对函数组件的声明，我们看一下的 Type type React.FC<P = {}> = React.FunctionComponent<P>

在有的时候你不加也没什么问题，建议是加上，这样方便告诉 Typescript 你的函数组件

- jsDoc and interface

jsDoc 是一个插件它用于在编辑器｜ IDE 中给 func 添加格式化的注释，在 Typescript 中我们使用强大的 vscode interface 是非常重要的，它用于描述我的接口，对象 …

这里我们要注意的是 jsDoc !== interface

必选属性 => ”：” 带冒号的属性是必须存在的，不可以多也不能少
可选属性 => ” ? ” 表示有选择的选项，可有可无
只读属性 => ” readonly “：
任意属性 [ propName : 类型 ] : any 表示定义了任意属性取 string 类型的值

interface 写得好让我们的代码很健壮

- 泛型 and type

例如下面这段代码

let _userList: Array<object> = []
let [userList, setUserList] = useState(_userList)

let _userList: object[] = []
let [userList, setUserList] = useState(_userList)

使用这 2 种方式都可以，但并不代编它们 ===

泛型有着更为强大的用法

function createArray<T>(length: number, value: T): Array<any>
    ...

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

- 联合类型 and 返回值

function getLength(something: string | number): number {
  return something.length
}

我们应该严格遵循此语法，来进行书写 ✍️，没有返回 void

- 插件

使用 ESlite 来规范我们书写的代码

公司项目Private 不便贴代码和项目地址

小程序云开发服务端(云函数-函数式编程)数据库取出数据突破限制

Ruoduan — Invalid Date

获取集合中的所有待办事项清单：因为有默认 limit 100 条的限制，因此很可能一个请求无法取出所有数据，需要分批次取：

步骤

定义最大条数也就是下面 👇 示 🌰 中的 MAX_LIMIT
获取数据总条数 countResult.total
总条数 / MAX_LIMIT 想上取整计算出要取几次 batchTimes
关键步骤：
- 遍历batchTimes 利用skip() 向数据库取对应次数的数据
- 返回的若干的Promise 储存在 tasks数组中
创建储存数据的列表 data
组合数据
- Promise.all(tasks)
- reduce((acc, cur) 组合数据

注意 ⚠️：数据操作大部分都是异步操作；小程序的云开发目前也是基于 nodejs8

小栗子 🌰

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 初始化云数据库
const db = cloud.database()
const MAX_LIMIT = 100

exports.main = async (event, context) => {
  // 数据库对象
  const playCollection = await db.collection("playlist")
  // 数据库集合总数
  const countResult = await db.collection('playlist').count()
  const total = countResult.total
  // 计算需分几次取
  const batchTimes = Math.ceil(total / 100)
  // 承载所有读操作的 promise 的数组
  const tasks = []
  for (let i = 0; i < batchTimes; i++) {
    const promise = db.collection('playlist').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
    tasks.push(promise)
  }

  let data = {
    data: []
  }
  // 组合数据
  if (tasks.length > 0) {
    (await Promise.all(tasks)).reduce((acc, cur) => {
      return {
        data: acc.data.concat(cur.data),
      }
    })
  }

小程序数据监听(observers),避免赋值死循环

Ruoduan — Invalid Date

在小程序开发过程中，我们通过 observers 监听处理 properties 组件数学列表的过程中，免不了对当前数据进行处理在我们对监听的数据进行赋值时候，会造成死循环，其实这个问题在大多数框架中都有这个问题。

小栗子 🌰[错误示范]

   properties: {
    playlist: {
      type: Object
    }
  },
  // 数据监听
  observers: {
    ['playlist.playCount'] (count) {
      this.setData({
        ['playlist.playCount']: this._tranNumber(count, 2)
      })
    }
  },

小栗子 🌰[正确示范]


data: {

  // 数据监听
  observers: {
    ['playlist.playCount'] (count) {
      this.setData({
        _count: this._tranNumber(count, 2)
      })
    }
  },
    // 避免监听器 赋值死循环
    _count: 0
  },

原因就是 playlist.playCount 这个数据是监听状态如果 playlist.playCount 改变就会触发这个方法，如果在 setData 中给原数据赋值他就会不断的触发这个方法，从而导致死循环
所以解决方案就是在组件 data 中定义一个变量接受这个新的值，然后在页面中使用 data 中的值在这里也就是 _count

Mac-osx-Capitan关闭Rootlees

Ruoduan — Invalid Date

全新的 OS X El Capitan 10.11 系统上已经使用了 Rootlees , 可以理解为一个更高等级的系统的内核保护措施，系统默认将会锁定 /system /sbin /usr 这三个目录. 但是这个保护也是可以关闭的。关闭来 OSX 10.11 关闭 rootless 内核保护如下

1.重启电脑开后按住 Command-R 进入恢复分区. 然后在实用工具栏找到终端启动运行.

输入: csrutil disable; reboot

2.你会看到系统保护被关闭的字样并且系统自动重启. 这样你就可以修改系统级别的文件了.

3.但是系统还有一个保护叫做 Gatekeeper , 这个是防止第三方应用访问你的隐私信息的. 如果你也想关掉在终端里

输入:sudo spctl --master-disable 即可

4.激活 GateKeeper 的方法也很简单

输入:sudo spctl --master-enable

5.还可以通过

csrutil status来查询 Rootless 保护的状态

Python-Class(类)生命周期和魔法方法

Ruoduan — Invalid Date

内置属性和方法

方法名	类型-	作用
`__init__`	方法	类实例化时自动调用这个函数
`__del__`	方法	对象被内存中销毁前，会被自动调用
`__str__`	方法	类的实例打印时调用这个函数(返回)用户看到的
`__repr__`	方法	和上面的 str 函数一样,只是这个时返回开发者看到的
`__ getattr __`	方法	当调用不存在的属性时访问这个方法
`__call__`	方法	如果类实现了这个方法，相当于把这个类型的对象当作函数来使用，相当于重载了括号运算符

具体参考 Python3 标准库

生命周期

一个对象从调用类名（）开始创建，生命周期开始
一个对象 __del__ 方法一旦被调用，生命周期结束
在对象生命周期内可以访问，对象属性，或者让对象调用方法

例如：

class Cat:
    def __init__(self, name):
        self.name = name
        print('他来了 他来了')

    def __del__(self):
        print('他走了 他走了')

#  Tom 是一个全局变量
tom = Cat('Tom')
print(tom.name)
print('-' * 50)

执行如下

他来了 他来了
Tom
--------------------------------------------------
他走了 他走了

现在我们调用 del 删除 tom

-- omit --

#  Tom 是一个全局变量
tom = Cat('Tom')
print(tom.name)
del tom
print('-' * 50)

他来了 他来了
Tom
他走了 他走了
--------------------------------------------------

Class 魔法方法

上面的表格以及描述的差不多了，贴一段代码来例举

class Cat:
    #  类实例化时自动调用这个函数
    def __init__(self, name):
        self.name = name
        print('%s他来了 他来了' % self.name)

    #  对象被内存中销毁前，会被自动调用
    def __del__(self):
        print('他走了 他走了')

    #  类的实例打印时调用这个函数(返回)用户看到的
    def __str__(self):
        return '我是Cat的类'

    #  和上面的str函数一样,只是这个时返回开发者看到的
    def __repr__(self):
        return '__repr__'

    #  当调用不存在的属性时访问这个方法
    def __getattr__(self, item):
        item = 'A'
        print('属性不存在，默认为 %s' % item)

    #  如果类实现了这个方法，相当于把这个类型的对象当作函数来使用，相当于 重载了括号运算符
    def __call__(self, *args, **kwargs):
        print('我是 %s 通过__call__转函数实例化的' % args)


#  Tom 是一个全局变量
tom = Cat('Tom')
print(tom.name)
# del tom
print('-' * 50)
print(tom)
tom.sex
print('*' * 50)
tom('Tim')

懒的同学看下面执行结果

Tom他来了 他来了
Tom
--------------------------------------------------
我是Cat的类
属性不存在，默认为 A
**************************************************
我是 Tim 通过__call__转函数实例化的
他走了 他走了

__call__ 如果没有定义的话就 tom('Tim') 就用实例直接调用类的话会保持哟~

ES2018(ES9)

Ruoduan — Invalid Date

ES2018

原文链接

异步迭代
在 async/await 的某些时刻，你可能尝试在同步循环中调用异步函数。例如：

async function process(array) {
  for (let i of array) {
    await doSomething(i)
  }
}

这段代码是不会正常执行的，循环本身依旧保持同步，并在在内部异步函数之前全部调用完成。

ES2018 引入异步迭代器（asynchronous iterators），这就像常规迭代器，除了next()方法返回一个Promise。因此await可以和for...of循环一起使用，以串行的方式运行异步操作。例如：

async function process(array) {
  for await (let i of array) {
    doSomething(i)
  }
}

Promise.finally()
一个Promise调用链要么成功到达最后一个.then()，要么失败触发.catch()。在某些情况下，你想要在无论 Promise 运行成功还是失败，运行相同的代码，例如清除，删除对话，关闭数据库连接等。

.finally()允许你指定最终的逻辑：

function doSomething() {
  doSomething1()
    .then(doSomething2)
    .then(doSomething3)
    .catch(err => {
      console.log(err)
    })
    .finally(() => {
      // finish here!
    })
}

Rest/Spread 属性
ES2015 引入了 Rest 参数和扩展运算符。三个点（…）仅用于数组。Rest 参数语法允许我们将一个布丁数量的参数表示为一个数组。

restParam(1, 2, 3, 4, 5)

function restParam(p1, p2, ...p3) {
  // p1 = 1
  // p2 = 2
  // p3 = [3, 4, 5]
}

展开操作符以相反的方式工作，将数组转换成可传递给函数的单独参数。例如Math.max()返回给定数字中的最大值：

const values = [99, 100, -1, 48, 16]
console.log(Math.max(...values)) // 100

ES2018 为对象解构提供了和数组一样的 Rest 参数（）和展开操作符，一个简单的例子：

const myObject = {
  a: 1,
  b: 2,
  c: 3,
}

const { a, ...x } = myObject
// a = 1
// x = { b: 2, c: 3 }

或者你可以使用它给函数传递参数：

restParam({
  a: 1,
  b: 2,
  c: 3,
})

function restParam({ a, ...x }) {
  // a = 1
  // x = { b: 2, c: 3 }
}

跟数组一样，Rest 参数只能在声明的结尾处使用。此外，它只适用于每个对象的顶层，如果对象中嵌套对象则无法适用。

扩展运算符可以在其他对象内使用，例如

const obj1 = { a: 1, b: 2, c: 3 }
const obj2 = { ...obj1, z: 26 }
// obj2 is { a: 1, b: 2, c: 3, z: 26 }

可以使用扩展运算符拷贝一个对象，像是这样obj2 = {...obj1}，但是这只是一个对象的浅拷贝。另外，如果一个对象 A 的属性是对象 B，那么在克隆后的对象 cloneB 中，该属性指向对象 B。

正则表达式命名捕获组（Regular Expression Named Capture Groups）
JavaScript 正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组，例如：以 YYYY-MM-DD 的格式解析日期:

const reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
  match = reDate.exec("2018-04-30"),
  year = match[1], // 2018
  month = match[2], // 04
  day = match[3] // 30

这样的代码很难读懂，并且改变正则表达式的结构有可能改变匹配对象的索引。

ES2018 允许命名捕获组使用符号?<name>，在打开捕获括号(后立即命名，示例如下：

const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  match = reDate.exec("2018-04-30"),
  year = match.groups.year, // 2018
  month = match.groups.month, // 04
  day = match.groups.day // 30

任何匹配失败的命名组都将返回 undefined。命名捕获也可以使用在 replace()方法中。例如将日期转换为美国的 MM-DD-YYYY 格式：

const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  d = "2018-04-30",
  usDate = d.replace(reDate, "$<month>-$<day>-$<year>")

任何匹配失败的命名组都将返回undefined。

命名捕获也可以使用在replace()方法中。例如将日期转换为美国的 MM-DD-YYYY 格式：

const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  d = "2018-04-30",
  usDate = d.replace(reDate, "$<month>-$<day>-$<year>")

正则表达式反向断言（lookbehind）

目前 JavaScript 在正则表达式中支持先行断言（lookahead）。这意味着匹配会发生，但不会有任何捕获，并且断言没有包含在整个匹配字段中。例如从价格中捕获货币符号：

const reLookahead = /\D(?=\d+)/,
  match = reLookahead.exec("$123.89")

console.log(match[0]) // $

ES2018 引入以相同方式工作但是匹配前面的反向断言（lookbehind），这样我就可以忽略货币符号，单纯的捕获价格的数字：

const reLookbehind = /(?<=\D)\d+/,
  match = reLookbehind.exec("$123.89")

console.log(match[0]) // 123.89

以上是肯定反向断言，非数字\D必须存在。同样的，还存在否定反向断言，表示一个值必须不存在，例如：

const reLookbehindNeg = /(?<!\D)\d+/,
  match = reLookbehind.exec("$123.89")

console.log(match[0]) // null

正则表达式 dotAll 模式

正则表达式中点.匹配除回车外的任何单字符，标记s改变这种行为，允许行终止符的出现，例如

;/hello.world/.test("hello\nworld") // false
;/hello.world/s.test("hello\nworld") // true

正则表达式 Unicode 转义

到目前为止，在正则表达式中本地访问 Unicode 字符属性是不被允许的。ES2018 添加了 Unicode 属性转义——形式为\p{...}和\P{...}，在正则表达式中使用标记 u (unicode)设置，在\p块儿内，可以以键值对的方式设置需要匹配的属性而非具体内容。例如：

const reGreekSymbol = /\p{Script=Greek}/u
reGreekSymbol.test("π") // true

非转义序列的模板字符串

最后，ES2018 移除对 ECMAScript 在带标签的模版字符串中转义序列的语法限制。之前，\u开始一个 unicode 转义，\x开始一个十六进制转义，\后跟一个数字开始一个八进制转义。这使得创建特定的字符串变得不可能，例如 Windows 文件路径 C:\uuu\xxx\111。更多细节参考模板字符串。

localForage离线缓存技术(兼容低版本浏览器)

Ruoduan — Invalid Date

localforag 离线缓存技术

ocalForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。 localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。 LOCALFORAGE 文档；

起因是，在一个比较老旧的.NET项目中要实现页面传值(传递大量的订单信息，且对数据结构有一定要求),考虑后决定使用 HTML5 离线缓存技术，但是这个项目有一些用户任在使用一些低版本浏览器，决定使用LOCALFORAGE他是 firefox 推出的一个改进后的 JavaScript 库

最重要的是他支持复杂的数据类型，而不是简单的字符串和链表,使用起来也比较简单

可以储存的数据类型

Array
ArrayBuffer
Blob
Float32Array
Float64Array
Int8Array
Int16Array
Int32Array
Number
Object
Uint8Array
Uint8ClampedArray
Uint16Array
Uint32Array
String

当使用 localStorage 和 WebSQL 作为后端时，二进制数据在保存（和检索）之前会被序列化。在保存二进制数据时，序列化会导致大小增大。

SETITEM- 储存

localforage
  .setItem("somekey", "some value")
  .then(function(value) {
    // 当值被存储后，可执行其他操作
    console.log(value)
  })
  .catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err)
  })

// 不同于 localStorage，你可以存储非字符串类型
localforage
  .setItem("my array", [1, 2, "three"])
  .then(function(value) {
    // 如下输出 `1`
    console.log(value[0])
  })
  .catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err)
  })

// 你甚至可以存储 AJAX 响应返回的二进制数据
req = new XMLHttpRequest()
req.open("GET", "/photo.jpg", true)
req.responseType = "arraybuffer"

req.addEventListener("readystatechange", function() {
  if (req.readyState === 4) {
    // readyState 完成
    localforage
      .setItem("photo", req.response)
      .then(function(image) {
        // 如下为一个合法的 ![在这里插入图片描述]() 标签的 blob URI
        var blob = new Blob([image])
        var imageURI = window.URL.createObjectURL(blob)
      })
      .catch(function(err) {
        // 当出错时，此处代码运行
        console.log(err)
      })
  }
})

GETITEM- 取值

localforage
  .getItem("somekey")
  .then(function(value) {
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value)
  })
  .catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err)
  })

// 回调版本：
localforage.getItem("somekey", function(err, value) {
  // 当离线仓库中的值被载入时，此处代码运行
  console.log(value)
})

REMOVEITEM - 删除

localforage
  .removeItem("somekey")
  .then(function() {
    // 当值被移除后，此处代码运行
    console.log("Key is cleared!")
  })
  .catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err)
  })

ALLREMOVEITEM - 删除所有

localforage
  .clear()
  .then(function() {
    // 当数据库被全部删除后，此处代码运行
    console.log("Database is now empty.")
  })
  .catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err)
  })

LENGTH - 获取仓库 KEY 长度

localforage
  .length()
  .then(function(numberOfKeys) {
    // 输出数据库的大小
    console.log(numberOfKeys)
  })
  .catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err)
  })

KEY - 获取 KEY 值

localforage
  .key(2)
  .then(function(keyName) {
    // key 名
    console.log(keyName)
  })
  .catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err)
  })

KEYS - 获取所有 KEY 值

localforage
  .keys()
  .then(function(keys) {
    // 包含所有 key 名的数组
    console.log(keys)
  })
  .catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err)
  })

完

具体以官方文档为主

mobx-basic

Ruoduan — Invalid Date

Mobx-basic(快速上手)莞式教程

之前写过一篇 redux 的教程可以参考redux 的教程

本篇讲通过通俗易懂的方式让你快速上手 mobx 的基本使用，虽然已经可以满足大部分开发中的需求但是详细请参考中文官方文档

本篇配教程代码 https://github.com/Chad97/mobx-basic

如果对想要快速入门的你有所帮助请给点个小小的 start 吧~

概述

本篇采用的是 mobx5 和 react 16.8, 均才用最新版本库所做示范在有的 API 和其他版本可能有所差异，如严格模式
本篇纯属原创转载请注明出处

我们先来简单的看下官网的介绍

MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX 背后的哲学很简单:

其实你可以简单的理解成 mobx 是一个 excel 的计算表格

你将要了解到：

observable, autorun, computed, action, configure —— mobx
observer —— mobx-react

准备工作

因为本篇通篇使用 ES7 中的修饰器语法@，所以需要配置 bable，推荐使用当然你也可以使用 decorators 为参考

安装 yarn add mobx mobx-react
启用修饰器 babel 支持 ES7 中的修饰器语法@
- yarn eject 打开配置
- 安装 babel 依赖 yarn add babel-plugin-transform-decorators-legacy --dev yarn add @babel/plugin-proposal-decorators
配置 webpack

"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  }

start

实例化对象容器

在全局文件下创建一个state.js ps 别问我为啥不叫 store 因为我喜欢如下

import { observable, autorun, computed, action, configure } from "mobx"
configure(true) //开启严格模式

class MyState {
  @observable num1 = 0
  @observable num2 = 100

  @action addNum1 = () => {
    this.num1++
  }

  @action addNum2 = () => {
    this.num2++
  }

  @action empty = () => {
    this.num1 = 0
    this.num2 = 0
  }

  @computed get total() {
    return this.num1 + this.num2
  }
}

const newState = new MyState()

export default newState

我们可以看到我们使用 observable 观察了 num1 和 num2
写了三个触发行为 action 分别是 addNum1 addNum2 empty
一个计算 computed total
然后实例化一个对象 newState 并且导出了

如果你用过 redux 那这里对应你来说简直不要太简单，只不过 mobx 更加面向对象

组件中触发状态

创建一个父组件 Mobx.jsx

import React from "react"
import { observer } from "mobx-react"

import newState from "./state"

import AllNum from "./child/AllNum"
import Main from "./child/Main"

@observer
class Mobx extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return (
      <>
        <AllNum store={newState} />
        <br />
        <hr />
        <Main store={newState} />
        <br />
        <hr />
        <button onClick={newState.empty}>清零</button>
      </>
    )
  }
}

export default Mobx

我们可以看到这里导入了 newState 通过 empty 触发 action
而子组件通过 props 把 newState 传递过去了

2 个子组件

AllNum.jsx

import React from "react"
import { observer } from "mobx-react"

const AllNum = observer(props => <div>num1 + num2 = {props.store.total}</div>)

export default AllNum

Main.jsx

import React from "react"
import { observer } from "mobx-react"

const Main = observer(props => (
  <div>
    <p>num1 = {props.store.num1}</p>
    <p>num2 = {props.store.num2}</p>
    <div>
      <button style={{ marginRight: "5em" }} onClick={props.store.addNum1}>
        num1 + 1
      </button>
      <button onClick={props.store.addNum2}>num2 + 1</button>
    </div>
  </div>
))

export default Main

props 接收父组件传过来的 newState

当然如果你的组件签到太深，觉得上面 2 中方式太麻烦你也可以使用 react Context来传递 newState，这里就不多做概述，具体参考

运行机制

贴一张官方的图可以发现对比 redux mobx 的方式人更容易理解是使用面向对象的方式也让人用起来不用写许多许多 render 感觉恶心

redux 教程链接 https://blog.csdn.net/ruoduan-hub/article/details/89522403

最后大家可以 clone 我的 deom 教程作为参考哦~ https://github.com/ruoduan-hub/mobx-basic 喜欢的大爷点个 star 哦~

JavaScript 二叉树算法，二叉树创建实现，中序排序，前序排序，后序排序

Ruoduan — Invalid Date

二叉树

在计算机科学中，二叉树是每个结点最多有两个子树的树结构。通常子树被称作“左子树”（left subtree）和“右子树”（right subtree）。二叉树常被用于实现二叉查找树和二叉堆。一棵深度为 k，且有 2^k-1 个节点的二叉树，称为满二叉树。这种树的特点是每一层上的节点数都是最大节点数。而在一棵二叉树中，除最后一层外，若其余层都是满的，并且最后一层或者是满的，或者是在右边缺少连续若干节点，则此二叉树为完全二叉树。具有 n 个节点的完全二叉树的深度为 floor(log2n)+1。深度为 k 的完全二叉树，至少有 2k-1 个叶子节点，至多有 2k-1 个节点。。

以上是书面解答 —— 下面我总结一下

结构

二叉树分为：根节点 —— 中间节点 ——叶子节点

根节点是没有子节点的
中间节点有子节点也有父节点
叶子节点只有父节点没有子节点

执行方式

小于父节点的节点放在左边大于的放在右边以此类推不断的递归

function BinaryTree() {
  //创建对象
  class Node {
    constructor(key) {
      this.key = key
      this.left = null
      this.right = null
    }
  }
  //初始化root
  let root = null

  const insertNode = (node, newNode) => {
    if (newNode.key < node.key) {
      if (node.left === null) {
        node.left = newNode
      } else {
        insertNode(node.left, newNode)
      }
    } else {
      if (node.right === null) {
        node.right = newNode
      } else {
        insertNode(node.right, newNode)
      }
    }
  }

  this.insert = item => {
    let newNode = new Node(item)
    if (root === null) {
      //判断是否有根节点
      root = newNode
    } else {
      insertNode(root, newNode) //调用二叉处理方法
    }
  }

  //中序排序
  const inOrderTraverseNode = (node, callback) => {
    if (node !== null) {
      inOrderTraverseNode(node.left, callback)
      callback(node.key)
      inOrderTraverseNode(node.right, callback)
    }
  }

  //前序遍历
  const preOrderTraverseNode = (node, callback) => {
    if (node !== null) {
      callback(node.key)
      preOrderTraverseNode(node.left, callback)
      preOrderTraverseNode(node.right, callback)
    }
  }

  //后序遍历
  const postOrderTraverseNode = (node, callback) => {
    if (node !== null) {
      postOrderTraverseNode(node.left, callback)
      postOrderTraverseNode(node.right, callback)
      callback(node.key)
    }
  }

  this.allOrderTraverse = (callback, FuncName) => {
    //入口函数
    switch (FuncName) {
      case "inOrderTraverseNode":
        inOrderTraverseNode(root, callback)
        break
      case "preOrderTraverseNode":
        preOrderTraverseNode(root, callback)
        break
      case "postOrderTraverseNode":
        postOrderTraverseNode(root, callback)
        break
      default:
        alert(
          "输入错误,请输入：inOrderTraverseNode，preOrderTraverseNode，postOrderTraverseNode 中的一种 "
        )
        break
    }
  }
}

let nodes = [8, 3, 10, 1, 6, 14, 4, 7, 13]

var BinaryTree = new BinaryTree()
nodes.forEach(function(key) {
  BinaryTree.insert(key)
})
BinaryTree.allOrderTraverse(key => {
  console.log(key)
}, "postOrderTraverseNode")

复制这段代码到页面的script标签中断点调试

代码分析

Node 初始化的节点对象它包含 left right 属性
insert 判断是否有根节点，没有的话初始化当前的 key 为根节点
insterNode 执行二叉法

判断新节点的 left 和 right是否为空为空的话让其赋值
小于的放 left 大于的放 right
如果出现既小于 || 大于 又不为空的情况那就递归执行 insterNode（newNode.left || right , newNode） 置到能给子节点赋值为止

中序排序

代码实现

//中序排序
const inOrderTraverseNode = (node, callback) => {
  if (node !== null) {
    inOrderTraverseNode(node.left, callback)
    callback(node.key)
    inOrderTraverseNode(node.right, callback)
  }
}

图片演示

前序排序

代码实现

//前序遍历
const preOrderTraverseNode = (node, callback) => {
  if (node !== null) {
    callback(node.key)
    preOrderTraverseNode(node.left, callback)
    preOrderTraverseNode(node.right, callback)
  }
}

图片演示

后序排序

代码实现

//后序遍历
const postOrderTraverseNode = (node, callback) => {
  if (node !== null) {
    postOrderTraverseNode(node.left, callback)
    postOrderTraverseNode(node.right, callback)
    callback(node.key)
  }
}

图片演示

总结

二叉树的算法在海量数据的排序上相比于其他排序算法效率要高很多，

中序遍历相当于数组的升序排列，
前序遍历是对相同二叉树的赋值，但是对于重新排列一个相同结构二叉树来说，效率也要高很多，
后序遍历相当于对数组的降序排列

React-Native 打包Android.APK

Ruoduan — Invalid Date

React-Native 打包 Android.APK

1. 生成签名秘钥

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

输入一些必要信息
name
password …

1.1 直接使用 Android studio 进行签名

傻瓜式 next 不做赘述

2、设置 gradle 变量：

修改 android/gradle.properties 文件，增加如下

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=xx
MYAPP_RELEASE_KEY_PASSWORD=xx
[注意替换xx为你自己设置的密钥和存储密码]

3、添加签名到应用的 gradle 配置中：

编辑你项目目录下的 android/app/build.gradle，添加如下的签名配置：

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

4.打包离线 Bundle

参数

h, --help                   输出如何使用的信息
    --entry-file <path>          RN入口文件的路径, 绝对路径或相对路径
    --platform [string]          ios 或 andorid
    --transformer [string]       Specify a custom transformer to be used
    --dev [boolean]              如果为false, 警告会不显示并且打出的包的大小会变小
    --prepack                    当通过时, 打包输出将使用Prepack格式化
    --bridge-config [string]     使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
    --bundle-output <string>     打包后的文件输出目录, 例: /tmp/groups.bundle
    --bundle-encoding [string]   打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
    --sourcemap-output [string]  生成Source Map，但0.14之后不再自动生成source map，需要手动指定这个参数。例: /tmp/groups.map
    --assets-dest [string]       打包时图片资源的存储路径
    --verbose                    显示打包过程
    --reset-cache                移除缓存文件
    --config [string]            命令行的配置文件路径

react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/

安卓的

react-native unbundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/

5.打包

然后进入 android 目录执行如下： gradlew assembleRelease —生成包 gradlew assembleDebug —测试包

React中使用Mockjs进行接口数据模拟

Ruoduan — Invalid Date

React 中使用 Mockjs 进行接口数据模拟

引子

每个改进都是为了解决问题。现在我在开发中碰到了问题，我先描述下问题：我们现在做前后端完全分离的应用，前端写前端的，后端写后端的，他们通过 API 接口连接。前端同学心理路程：“后端同学接口写的好慢，我都没法调试了。” 是不是有这个问题呢？一般我们怎么解决？第一种：自己这边随便造点数据，等后端接口写好了之后，再小修改,再调试。第二种：想想我们之前获得用户信息的 dist/api/user.json，我们可以用这种方式来调试。但是想象下，我们要模拟一个文章列表，就要手动写几十列。oh~no! 并且，后端接口一般都不带.json，到时候对接，是不是还得改代码？好了，下面介绍下今天的主角 Mock.js。他会做一件事情：拦截 AJAX 请求，返回需要的数据！我们写 AJAX 请求的时候，正常写，Mock.js 会自动拦截的。

1.mock 是什么？

官方文档

话不多说直接开始
我这里有一个通俗易懂的 Demo 小伙伴们可以 download 一下
通俗易懂的小 Demo
https://github.com/ruoduan-hub/React-Mock-Demo.git

Start

1. 装包

yarn add mockjs yarn add axios 这个是测试用你也可以使用 ajax、fetch 等

2. 在 src 目录下创建我们的 mock 文件夹用于存放我们的 mock 数据

3.写入 mock 数据

创建一个data2.js 内容如下

// 使用 Mock
import Mock from "mockjs"

export default Mock.mock("/postdata1", "post", {
  success: true,
  message: "@cparagraph",
  // 属性 list 的值是一个数组，其中含有 1 到 5 个元素
  "list|1-5": [
    {
      // 属性 sid 是一个自增数，起始值为 1，每次增 1
      "sid|+1": 1,
      // 属性 userId 是一个5位的随机码
      "userId|5": "",
    },
  ],
})

4. 关联 Mock

模拟数据完成后，我们得在 app.js 里面挂载我们的数据来进行中间件拦截

import React from "react"
import Mock from "./components/Mock"
//挂载 Mock
import "./mock/data1.js"
import "./mock/data2.js"

5. attempt

现在我们写一个组件来展示我们的数据

import React from "react"
import axios from "axios"

class Mock extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      gData: null,
      pData: null,
    }
  }

  getDate1 = () => {
    axios
      .get("/getdata1", {
        params: {
          id: "123",
        },
      })
      .then(res => {
        console.log(res.data)
        this.setState({
          gData: res.data.message,
        })
      })
      .catch(err => {
        console.log(err)
      })
  }

  getDate2 = () => {
    axios
      .post("/postdata1", {
        params: {
          name: "jack",
        },
      })
      .then(res => {
        console.log(res.data)
        this.setState({
          pData: res.data.message,
        })
      })
      .catch(err => {
        console.log(err)
      })
  }

  render() {
    return (
      <React.Fragment>
        <h3>数据展示</h3>
        <p>get：{this.state.gData == null ? "无" : this.state.gData}</p>
        <p>post: {this.state.pData == null ? "无" : this.state.pData} </p>

        <button onClick={this.getDate1}>点击获取(Get)Mock数据</button>
        <br />
        <br />
        <button onClick={this.getDate2}>点击获取(Post)Mock数据</button>
      </React.Fragment>
    )
  }
}

export default Mock

6. 展示

你必须知道的,async/await 实现异步流程控制

Ruoduan — Invalid Date

async/await

async 其实是 ES7 的才有的关键字，放在这里说，其实是和我们前面所说的 Promise，Generator 有很大关联的。async 的意思是”异步”，顾名思义是有关异步操作有关的关键字。而且 async/await 是 Generator yield 的语法糖具体参考阮老师的 es6 入门

我们这里就展示一下 async/await 的实际作用

async

const helloFn = async () => {
  return "helloAsync"
}
console.log(helloFn) //Promise {<resolved>: "helloAsync"}

可以看到经过 async 包装后的函数返回一个 promise 对象既然是返回的 Promise 对象，我们就是用 then 方法来处理。

const helloFn = async () => {
  return "helloAsync"
}
helloFn().then(s => {
  console.log(s) //helloAsync
})

是不是很简单，就是一个 promise 而已是如何实现异步控制的呢？

await

在 Generator 中 yield 关键字，yield 关键字只能使用在 Generator 函数中，同样，await 关键字也不能单独使用，是需要使用在 async 方法中。 await 字面意思是”等待”，那它是在等什么呢？它是在等待后面表达式的执行结果。

请看下面这段示例代码，我们用定时器来模拟异步的情况

function testAwait() {
  return new Promise(resolve => {
    setTimeout(function() {
      console.log("testAwait")
      resolve()
    }, 1000)
  })
}
async function helloAsync() {
  await testAwait()
  console.log("helloAsync")
}
helloAsync()
//testAwait
//helloAsync

我们来分析下这段代码

1、testAwait()方法中 new 一个 Promise 对象返回，promise 对象中用 setTimeout 模拟一个异步过程，即 1s 后打印”testAwait”。

2、helloAsync()方法中，await testAwait(),表示将阻塞这里，等待 testAwait 这个异步方法执行并返回结果后，才继续下面的代码。

执行下，1s 后打印了下面的日志。 testAwait helloAsync 到此，是不是理解了 await 的作用，就是阻塞主函数的执行，直到后面的 Promise 函数返回结果。

await 后面只能是 Promise 对象么？答案是否定的，可以是字符串，布尔值，数值以及普通函数。

function testAwait() {
  setTimeout(function() {
    console.log("testAwait")
  }, 1000)
}
async function helloAsync() {
  await testAwait()
  console.log("helloAsync")
}
helloAsync()

得到的结果是 helloAsync testAwait
方法没有报错，说明 await 后面是支持非 Promise 函数的，但是执行的结果是不一样的，所以 await 针对所跟的表达式不同，有两种处理方式：

1、对于 Promise 对象，await 会阻塞主函数的执行，等待 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果，然后继续执行主函数接下来的代码。

2、对于非 Promise 对象，await 等待函数或者直接量的返回，而不是等待其执行结果。

小栗子

const aa = (resolve, reject) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(1)
      resolve("ok")
    }, 2000)
  })

const bb = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(2)
      resolve("ok")
    }, 1000)
  })

const cc = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(3)
      resolve("ok")
    }, 500)
  })

const mm = async () => {
  await aa().then(s => {
    console.log(s)
  })
  await bb().then(s => {
    console.log(s)
  })
  await cc().then(s => {
    console.log(s)
  })
}

mm()

这个栗子我们可以看出定时器的时间依次是 3 2 1，但是我们想要对他们做异步控制，执行 1 2 3

1、首先每个制作异步过程封装成 Promise 对象。

2、利用 await 阻塞原理，实现每个制作的顺序执行。

React-Redux

Ruoduan — Invalid Date

Redux and React-redux 莞式教程（新手必看）

为了方便使用者使用，这里就 redux 和 react-redux 一并讲究使用了，会了 react-redux，redux 也就没问题了，只不过稍微封装了一下

教程方式

我们先讲理论，先明白 render、action、 store 、connect 、 dispatch 、{ mapStateToProps mapDispatchToProps },是什么东西。
看完你可能有点懵，没关系我有个简单直接的涨工资的 dom，跟着做一遍你就懂了

先 download 莞式教程 https://github.com/ruoduan-hub/My-notes/tree/master/react-redux%E4%B9%8B%E6%B6%A8%E5%B7%A5%E8%B5%84 —— 看了它你就一目了然了

一、

介绍（有一定了解的自己跳二开始我的莞式教程）

对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。为了解决这个问题，2014 年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015 年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。

首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。曾经有人说过这样一句话。 "如果你不知道是否需要 Redux，那就是不需要它。" —— Redux 的创造者 Dan Abramov

简单说，如果你的 UI 层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。用户的使用方式非常简单用户之间没有协作不需要与服务器大量交互，也没有使用 WebSocket 视图层（View）只从单一来源获取数据

Store

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。 Redux 提供 createStore 这个函数，用来生成 Store。

import { createStore } from "redux"
const store = createStore(fn)

Action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action 是一个对象。其中的 type 属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。

const action = {
  type: "ADD_TODO",
  payload: "Learn Redux",
}

上面代码中，Action 的名称是 ADD_TODO，它携带的信息是字符串 Learn Redux。可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。

Action Creator

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。

const ADD_TODO = "添加 TODO"

function addTodo(text) {
  return {
    type: ADD_TODO,
    text,
  }
}

const action = addTodo(‘Learn Redux’); 上面代码中，addTodo 函数就是一个 Action Creator。

store.dispatch()

store.dispatch()是 View 发出 Action 的唯一方法。

import { createStore } from "redux"
const store = createStore(fn)

store.dispatch({
  type: "ADD_TODO",
  payload: "Learn Redux",
})

上面代码中，store.dispatch 接受一个 Action 对象作为参数，将它发送出去。结合 Action Creator，这段代码可以改写如下。

store.dispatch(addTodo('Learn Redux'));

Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

const reducer = function(state, action) {
  // ...
  return new_state
}

整个应用的初始状态，可以作为 State 的默认值。下面是一个实际的例子。

const defaultState = 0
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case "ADD":
      return state + action.payload
    default:
      return state
  }
}

const state = reducer(1, {
  type: "ADD",
  payload: 2,
})

上面代码中，reducer 函数收到名为 ADD 的 Action 以后，就返回一个新的 State，作为加法的计算结果。其他运算的逻辑（比如减法），也可以根据 Action 的不同来实现。

实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch 方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入 createStore 方法。

import { createStore } from "redux"
const store = createStore(reducer)

上面代码中，createStore 接受 Reducer 作为参数，生成一个新的 Store。以后每当 store.dispatch 发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。

为什么这个函数叫做 Reducer 呢？因为它可以作为数组的 reduce 方法的参数。请看下面的例子，一系列 Action 对象按照顺序作为一个数组。

const actions = [
  { type: "ADD", payload: 0 },
  { type: "ADD", payload: 1 },
  { type: "ADD", payload: 2 },
]

const total = actions.reduce(reducer, 0); // 3 上面代码中，数组 actions 表示依次有三个 Action，分别是加 0、加 1 和加 2。数组的 reduce 方法接受 Reducer 函数作为参数，就可以直接得到最终的状态 3。

store.subscribe()

Store 允许使用 store.subscribe 方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

import { createStore } from "redux"
const store = createStore(reducer)
store.subscribe(listener)

显然，只要把 View 的更新函数（对于 React 项目，就是组件的 render 方法或 setState 方法）放入 listen，就会实现 View 的自动渲染。

store.subscribe 方法返回一个函数，调用这个函数就可以解除监听。

let unsubscribe = store.subscribe(() => console.log(store.getState()))

unsubscribe()

Store 的实现

上一节介绍了 Redux 涉及的基本概念，可以发现 Store 提供了三个方法。

store.getState()
store.dispatch()
store.subscribe()

import { createStore } from 'redux'; let { subscribe, dispatch, getState } = createStore(reducer); createStore 方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。

let store = createStore(todoApp, window.STATE_FROM_SERVER) 上面代码中，window.STATE_FROM_SERVER 就是整个应用的状态初始值。注意，如果提供了这个参数，它会覆盖 Reducer 函数的默认初始值。

下面是 createStore 方法的一个简单实现，可以了解一下 Store 是怎么生成的。

const createStore = reducer => {
  let state
  let listeners = []

  const getState = () => state

  const dispatch = action => {
    state = reducer(state, action)
    listeners.forEach(listener => listener())
  }

  const subscribe = listener => {
    listeners.push(listener)
    return () => {
      listeners = listeners.filter(l => l !== listener)
    }
  }

  dispatch({})

  return { getState, dispatch, subscribe }
}

放一个简单的计数器案例

const Counter = ({ value, onIncrement, onDecrement }) => (
  <div>
    <h1>{value}</h1>
    <button onClick={onIncrement}>+</button>
    <button onClick={onDecrement}>-</button>
  </div>
)

const reducer = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1
    case "DECREMENT":
      return state - 1
    default:
      return state
  }
}

const store = createStore(reducer)

const render = () => {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() => store.dispatch({ type: "INCREMENT" })}
      onDecrement={() => store.dispatch({ type: "DECREMENT" })}
    />,
    document.getElementById("root")
  )
}

render()
store.subscribe(render)

二、

先 download 莞式教程 https://github.com/Chad97/My-notes/tree/master/react-redux%E4%B9%8B%E6%B6%A8%E5%B7%A5%E8%B5%84 —— 看了它你就一目了然了

这一章我们简单的讲一下 react-redux ，就开始我的莞试教程

我们的 react-redux 为方便我们使用，内置了几个组件，非常简单，非常好用 —— connect() mapStateToProps mapDispatchToProps <Provider></Provider>

好下面让我们来单刀直入~

reacr-redux 之涨工资

npx redux-dom 新建一个 react 项目低版本 nodejs 用create-app也可以

在src文件夹下面创建一个 store ，store 里面创建一个reducer.js 如下：

import React from "react"
import { connect } from "react-redux"

const tiger = 30000 //创建工资state

//这是action
const increase = {
  type: "涨工资",
}
const decrease = {
  type: "扣工资",
}

const taxes = {
  type: "缴税",
}

//这是reducer
const reducer = (state = tiger, action) => {
  switch (action.type) {
    case "涨工资":
      return (state += 100)
    case "扣工资":
      return (state -= 100)
    case "缴税":
      return state - (state - 5000) * 0.01
    default:
      return state
  }
}

export default reducer

然后进入我们的 index.js

import React, { Component } from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { createStore } from "redux"
import { Provider } from "react-redux"
import reducer from "./store/reducer"

//创建store
const store = createStore(reducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
)

讲一下 Provider 这个组件，他是 react-redux 中提供的一个组件

connect 方法生成容器组件以后，需要让容器组件拿到 state 对象，才能生成 UI 组件的参数。一种解决方法是将 state 对象作为参数，传入容器组件。但是，这样做比较麻烦，尤其是容器组件可能在很深的层级，一级级将 state 传下去就很麻烦。 React-Redux 提供 Provider 组件，可以让容器组件拿到 state

记住他就是通过 class 的 connect 实现的，能让 Provider 的组件的子孙组件都拿到挂载的 store，莞式教程简单粗暴，要看实现原理去看 es6 去

好了现在让我去 app.js 里面，去实现涨工资吧哈哈~~~

import React, { Component } from "react"
import { connect } from "react-redux"
import Home from "./components/Home"

class App extends Component {
  componentDidMount() {
    // console.log(this.props)
  }

  render() {
    const { PayIncrease, PayDecrease } = this.props
    return (
      <div className="App">
        <h2>当月工资为{this.props.tiger}</h2>
        <button onClick={PayIncrease}>升职加薪</button>
        <button onClick={PayDecrease}>迟到罚款</button>

        <Home />
      </div>
    )
  }
}

//需要渲染什么数据
function mapStateToProps(state) {
  return {
    tiger: state,
  }
}
//需要触发什么行为
function mapDispatchToProps(dispatch) {
  return {
    PayIncrease: () => dispatch({ type: "涨工资" }),
    PayDecrease: () => dispatch({ type: "扣工资" }),
  }
}

export default App = connect(mapStateToProps, mapDispatchToProps)(App)

connect

React-Redux 提供 connect 方法，用于从 UI 组件生成容器组件。connect 的意思，就是将这两种组件连起来。

记住，要想让组件拿到 store 就得用 connect （）这个方法来链接，你可以理解架桥，别想太多，简单粗暴用多了你就知道原理了。

打印工资

好现在让我在 src/components 羡慕新建一个 Home.jsx 组件 ,涨完工资是不是要打印工资

import React from "react"
import { connect } from "react-redux"
import Counter from "./Counter "

class Home extends React.Component {
  constructor(props, context) {
    super()
    this.state = {}
  }

  mycl = () => {
    alert(this.props.tiger)
  }

  render() {
    return (
      <div>
        <hr /> <br />
        <h1>home 组件</h1>
        <button onClick={this.mycl}>打印目前工资</button>
        <hr /> <br />
        <Counter />
      </div>
    )
  }

  componentDidMount() {
    console.log(this.props)
  }
}

//需要渲染什么数据
function mapStateToProps(state) {
  return {
    tiger: state,
  }
}
//需要触发什么行为
function mapDispatchToProps(dispatch) {
  return {
    PayIncrease: () => dispatch({ type: "涨工资" }),
    PayDecrease: () => dispatch({ type: "扣工资" }),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

缴税

涨完工资，工资那么高是不是要缴税拉~~

import React from "react"
import { connect } from "react-redux"

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    const { Paytaxes } = this.props
    return (
      <div>
        <h2>税后计算</h2>
        <button onClick={Paytaxes}>缴税</button>
        <p>{this.props.tiger}</p>
      </div>
    )
  }
}

//需要渲染什么数据
function mapStateToProps(state) {
  return {
    tiger: state,
  }
}
//需要触发什么行为
function mapDispatchToProps(dispatch) {
  return {
    PayIncrease: () => dispatch({ type: "涨工资" }),
    PayDecrease: () => dispatch({ type: "扣工资" }),
    Paytaxes: () => dispatch({ type: "缴税" }),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

完

莞式教程，做完就走~~ 手动 /斜眼

React-router嵌套路由传值(render和children)

Ruoduan — Invalid Date

小栗子：

例如：我们的路由格式如下:

let router = [
  {
    path: "/",
    component: Rhome,
    exact: true,
  },
  {
    path: "/user",
    component: User,
    routes: [
      //嵌套路由
      {
        type: Route,
        path: "/user/",
        component: Main,
      },
      {
        type: Route,
        path: "/user/info/",
        component: UserInfo,
      },
    ],
  },
  {
    path: "/shop",
    component: Shop,
  },
  {
    path: "/news",
    component: NewsInfo,
  },
]

我们想在渲染通过组件传值的方式父组件吧子组件的路由传过去从而实现渲染，传统的父子组件传值是用不了的

错误示范：
```
<Route childRoutes="{val.routes}" />
```
正确示范：
传值：

return (
  <Route
    exact
    key={key}
    path={route.path}
    render={props => <route.component {...props} routes={route.routes} />}
  />
)

接收：

this.props.childrenRoute.map( (route, key) =>
<Route key="{key}" exact path="{route.path}" component="{route.component}" />
)

阐述：

编程式导航，可以在一个组件中用 this.props.history.push(“/path”,{name:“hellow”})，来进行传参，传过去的值在 props.location.state 中
Route 里面还有两个属性，render 和 children

-render是一个函数，语法：render={()=>{return <div></div>}}，只要你的路由匹配了，这个函数才会执行
-children也是一个函数，不管匹配不匹配，这个函数都会执行
-他们两个有个优先级关系，render的优先级总是高于children，是会覆盖children的

 <Fragment>
    <h1>header</h1>
    <Link to="/wiki/wikiList/">gogogo</Link>
    <Route
        path="/wiki/wikiList"
        render={
            ()=>{
                return <div>wikilist-children</div>
            }
        } //这个是只有当你路由匹配到了/wiki/wikiList才会执行
        // children={() => {
        //     return <div>wikilist-children</div>
        //   }
        // }    //这个是只要你的路由跳到wiki了，那children就会执行
    >
    </Route>
</Fragment>

完

vue-animation

Ruoduan — Invalid Date

为什么要有动画？
- 就是要有不解释
- 比较简单记录一下，方便找

1. 过渡类名动画

1. html 结构

<div id="app">
    <input type="button" value="动起来" @click="myAnimate">
    <!-- 使用 transition 将需要过渡的元素包裹起来 -->
    <transition name="fade">
      <div v-show="isshow">动画哦</div>
    </transition>
  </div>

2. VM 实例：

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: "#app",
  data: {
    isshow: false,
  },
  methods: {
    myAnimate() {
      this.isshow = !this.isshow
    },
  },
})

3. 定义两组类样式：

/* 定义进入和离开时候的过渡状态 */
/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.v-enter,
.v-leave-to {
  transform: translateX(100px);
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.8s ease;
}

2. 第三方类实现动画

1. 引包

<link rel="stylesheet" type="text/css" href="./lib/animate.css">

2. 定义 transition 及属性

<div id="app">
  <input type="button" value="toggle" @click="flag=!flag" />
  <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
  <transition
    enter-active-class="bounceInRight"
    leave-active-class="fadeOut"
    :duration="{enter: 500, leave: 400}"
  >
    <!-- 使用  :duration="{ enter: 200, leave: 400 }"  来分别设置 入场的时长 和 离场的时长  -->
    <h3 v-if="flag" class="animated">这是一个H3</h3>
  </transition>
</div>

3. 钩子函数动画

1. 定义 transition 组件以及三个钩子函数：

<div id="app">
  <input type="button" value="切换动画" @click="isshow = !isshow" />
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
  >
    <div v-if="isshow" class="show">OK</div>
  </transition>
</div>

2. 定义三个 methods 钩子方法：

methods: {
        beforeEnter(el) { // 动画进入之前的回调
          el.style.transform = 'translateX(500px)';
        },
        enter(el, done) { // 动画进入完成时候的回调
          el.offsetWidth;
          el.style.transform = 'translateX(0px)';
          done();
        },
        afterEnter(el) { // 动画进入完成之后的回调
          this.isshow = !this.isshow;
        }
      }

3. 定义动画过渡时长和样式：

.show{
      transition: all 0.4s ease;
    }

4. 列表动画

1. 定义过渡样式：

<style>
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(10px);
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 0.3s ease;
    }
</style>

2. 定义 DOM 结构，其中，需要使用 transition-group 组件把 v-for 循环的列表包裹起来：

<div id="app">
  <input type="text" v-model="txt" @keyup.enter="add" />

  <transition-group tag="ul" name="list">
    <li v-for="(item, i) in list" :key="i">{{item}}</li>
  </transition-group>
</div>

3. 定义 VM 中的结构：

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: "#app",
  data: {
    txt: "",
    list: [1, 2, 3, 4],
  },
  methods: {
    add() {
      this.list.push(this.txt)
      this.txt = ""
    },
  },
})

列表的排序过渡

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。

v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：

.v-move{
  transition: all 0.8s ease;
}
.v-leave-active{
  position: absolute;
}

结束

动画的应用场景有很多，例如：组件切换、事件、交互、updated …
自行体会，活用

中间件:express-session

Ruoduan — Invalid Date

express-session

github 仓库

session 介绍：

session 是另一种记录客户状态的机制，不同的是 Cookie 保存在客户端浏览器中，而 session 保存在服务器上。
Session 的用途：
- session 运行在服务器端，当客户端第一次访问服务器时，可以将客户的登录信息保存。当客户访问其他页面时，可以判断客户的登录状态，做出提示，相当于登录拦截。 session 可以和 Redis 或者数据库等结合做持久化操作，当服务器挂掉时也不会导致某些客户信息（购物车）丢失。

session 的工作流程

当浏览器访问服务器并发送第一次请求时，服务器端会创建一个 session 对象，生成一个类似于 key,value 的键值对，然后将 key(cookie)返回到浏览器(客户)端，浏览器下次再访问时，携带 key(cookie)，找到对应的 session(value)。客户的信息都保存在 session 中

安装

$ npm install express-session

API

var session = require(‘express-session’)

配置

app.use(
  session({
    secret: "my key", //配置加密字符串,他会在原有加密基础上凭据上自己定义的字符串加密信息，防止客户端恶意伪造
    resave: false,
    saveUninitialized: true, //强制将为初始化的session 储存，无论是否使用session 都默认分配一个秘钥
  })
)

使用

官方案例

var express = require("express")
var parseurl = require("parseurl")
var session = require("express-session")

var app = express()

app.use(
  session({
    secret: "keyboard cat",
    resave: false,
    saveUninitialized: true,
  })
)

app.use(function(req, res, next) {
  if (!req.session.views) {
    req.session.views = {}
  }

  // get the url pathname
  var pathname = parseurl(req).pathname

  // count the views
  req.session.views[pathname] = (req.session.views[pathname] || 0) + 1

  next()
})

app.get("/foo", function(req, res, next) {
  res.send("you viewed this page " + req.session.views["/foo"] + " times")
})

app.get("/bar", function(req, res, next) {
  res.send("you viewed this page " + req.session.views["/bar"] + " times")
})

简单调用

req.session.foo = "bar" //添加

req.session.foo //获取

ps：默认 session 是存储在内存中的，需要进行持久化存储，到数据库中

path模块的dirname和filename

Ruoduan — Invalid Date

nodejs ——path 模块的dirname 和 filename

我们在使用 nodejs，可能需要对 node_modules 开放一些目录，fs 取的是绝对路径，而我们在不同的环境下，node_modules 可能存在于不同的根目录中，这个时候我们就要用到 join（）方法来吧绝对路径进行一个转换，来获取一个动态的绝对路径

app.use("/public/", express.static(path.join(__dirname, "./public/")))
app.use(
  "/node_modules/",
  express.static(path.join(__dirname, "./node_modules/"))
)

这里我们开放了 public 和 node_modules 这 2 个目录文件夹
**dirname 和 **filename
- 动态的 获取当前文件或者文件所处目录的绝对路径
- 用来解决文件操作路劲的相对路径问题
- 因为在文件操作中，相对路径相对于执行 node 命令所处的目录
- 所以为了尽量避免这个问题，都建议文件操作的相对路径都转为：动态的绝对路径
- 方式：path.join(__dirname, '文件名')
**dirname 和 **filename 是模块中的一个内置成员，他们分别是：

__dirname 是当前文件夹的绝对路径
__filename 是当前文件的绝对路径

一般情况下都是配合 join 方法使用的，把当前相对路径转换为动态的绝对路径

canvas穿透pointer-events属性

Ruoduan — Invalid Date

遇到这个问题这里记录一下，解决方案也非常简单

在我们把 canvas 作为网站的 body 背景的时候，如果 z-index 的层级没注意设计，默认情况下，canvas 会遮挡网站上的 a 链接和一些按钮的
- 遇到这个问题我们只需要在 canvas 背景中添加一个 css 属性：pointer-events: none
- 你可以选择后期用 js 添加，也可以在创建的时候直接写上，如果是 canvas 在本地可以直接写上，如果是请求而来的，可以用 js 给相应的 canvas 添加这一条属性

语法

pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默认值：auto
取值
- auto：与 pointer-events 属性未指定时的表现效果相同。在 svg 内容上与 visiblepainted 值相同
- none：元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。其他值只能应用在 SVG 上。

说明：设置或检索在何时成为属性事件的 target。使用 pointer-events 来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了 pointer-events 属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。对应的脚本特性为 pointerEvents。

小栗子

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8" />
    <title>pointer-events_CSS参考手册_web前端开发参考手册系列</title>
    <style>
      a[href="http://example.com"] {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="https://developer.mozilla.org/">MDN</a></li>
      <li><a href="http://example.com">一个不能点击的链接</a></li>
    </ul>
  </body>
</html>

参考链接

结束啦~

promise解决回调地狱(callback-hell)

Ruoduan — Invalid Date

具体参考阮一峰,ES6 标准入门
在我们需要对一个异步操作进行频繁的调用的时候，且要保证一步操作的顺序，可能会出现
回调地狱（callback）的情况例如：

嵌套方式

var fs = require("fs")

fs.readFile("../data/a.txt", "utf8", function(err, data) {
  if (err) {
    throw err
  }
  console.log(data)

  fs.readFile("../data/b.txt", "utf8", function(err, data) {
    if (err) {
      throw err
    }
    console.log(data)

    fs.readFile("../data/c.txt", "utf8", function(err, data) {
      if (err) {
        throw err
      }
      console.log(data)
    })
  })
})

promise 方式

解决这个问题让我们的代码看起来更加直观，我们可以用 promise 解决这个问题

var p1 = new Promise(function(resolve, reject) {
  fs.readFile("../data/a.txt", "utf8", function(err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})

var p2 = new Promise(function(resolve, reject) {
  fs.readFile("../data/b.txt", "utf8", function(err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})

var p3 = new Promise(function(resolve, reject) {
  fs.readFile("../data/c.txt", "utf8", function(err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})

//console.log(p1)  //Promise { <pending> }

p1.then(
  function(data) {
    console.log(data) //读取成功
    return p2 //把下一个要读取的promise返回
  },
  function(err) {
    //第二个参数表示读取失败 reject 拒绝了
    console.log(err + "p1失败")
  }
)

  .then(
    function(data) {
      console.log(data)
      return p2
    },
    function(err) {
      console.log(err + "p2失败")
    }
  )

  .then(
    function(data) {
      console.log(data)
    },
    function(err) {
      console.log(err + "p3失败")
    }
  )

// 这样子就实现了promise 链式编程，但是重复的代码太多，
//下面稍微改造一下封装一个方法

但是这样子的代码复用太多，我们可以给他稍微封装一下

var fs = require("fs")

function PreadFile(filePath) {
  return new Promise(function(resolve, reject) {
    fs.readFile(filePath, "utf8", function(err, data) {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}

PreadFile("../data/a.txt")
  .then(
    function(data) {
      console.log(data)
      return PreadFile("../data/b.txt")
    },
    function(err) {
      console.log(err + "a文件失败")
    }
  )

  .then(
    function(data) {
      console.log(data)
      return PreadFile("../data/c.txt")
    },
    function(err) {
      console.log(err + "b文件失败")
    }
  )

  .then(
    function(data) {
      console.log(data)
    },
    function(err) {
      console.log(err + "c文件失败")
    }
  )

输出：a b c ，当然这里的 function 用箭头函数代替更简洁，但涉及我书写 blog 的前后顺序和结构进性，在写 es6 前就尽量不使用 es6 语法糖

Promise.all 和 Promise.race

Promise.all

Promise.all 可以将多个 Promise 实例包装成一个新的 Promise 实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被 reject 失败状态的值。具体代码如下：

let p1 = new Promise((resolve, reject) => {
  resolve("成功了")
})

let p2 = new Promise((resolve, reject) => {
  resolve("success")
})

let p3 = Promse.reject("失败")

Promise.all([p1, p2])
  .then(result => {
    console.log(result) //['成功了', 'success']
  })
  .catch(error => {
    console.log(error)
  })

Promise.all([p1, p3, p2])
  .then(result => {
    console.log(result)
  })
  .catch(error => {
    console.log(error) // 失败了，打出 '失败'
  })

Promse.all 在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个 ajax 的数据回来以后才正常显示，在此之前只显示 loading 图标。代码模拟：

let wake = time => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2])
  .then(result => {
    console.log(result) // [ '3秒后醒来', '2秒后醒来' ]
  })
  .catch(error => {
    console.log(error)
  })

需要特别注意的是，Promise.all 获得的成功结果的数组里面的数据顺序和 Promise.all 接收到的数组顺序是一致的，即 p1 的结果在前，即便 p1 的结果获取的比 p2 要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用 Promise.all 毫无疑问可以解决这个问题。

Promise.race

顾名思义，Promse.race 就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success")
  }, 1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("failed")
  }, 500)
})

Promise.race([p1, p2])
  .then(result => {
    console.log(result)
  })
  .catch(error => {
    console.log(error) // 打开的是 'failed'
  })

原理是挺简单的，但是在实际运用中还没有想到什么的使用场景会使用到。

总结

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。
所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
Promise 对象有以下两个特点。
- （1）对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
- （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
注意，为了行文方便，本章后面的 resolved 统一只指 fulfilled 状态，不包含 rejected 状态。
有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。如果某些事件不断地反复发生，一般来说，使用 Stream 模式是比部署 Promise 更好的选择。

nosql数据库-mongodb使用gongoos的CRUD

Ruoduan — Invalid Date

简介

NoSQL，指的是非关系型的数据库。NoSQL 有时也称作 Not Only SQL 的缩写，是对不同于传统的关系型数据库的数据库管理系统的统称。 NoSQL 用于超大规模数据的存储。（例如谷歌或 Facebook 每天为他们的用户收集万亿比特的数据）。这些类型的数据存储不需要固定的模式，无需多余操作就可以横向扩展。

具体链接：菜鸟教程

第一步下载：【下载地址】：https://www.mongodb.com/download-center/community

根据自己的操作系统和需求下载：我这里选择的是社区版的

下载完成后点击安装：

完成安装顾名思义 next 就完了

我这里选择的自定义安装看看有哪些东西

next

选择相应的安装文件夹，这里的安装路径在后面配置环境变量的时候要用到

一直 next 安装完成后我们用命令行看一下有没有安装成功

用 mongod — vesrion

可以看到并没有显示版本号，因为我们还没有配置环境变量，下面来配置一下环境变量

配置环境变量

打开安装路径找到 bin 的路径复制

找到系统-环境变量

现在我们再来 mongod -version

好了到这一步就说明我们的 mongodb 安装成功了

开启和停止

mongodb 数据库和其他 sql 系列数据库有些不同，他在安装成功后，在我我们的服务列表是没有的，需要我们去手动安装，已达到点击完成启动和停止的效果安装服务的方法具体参考菜鸟教程：http://www.runoob.com/mongodb/mongodb-window-install.html

我这里就是一把梭 /手动狗头~

但是：这边并不影响我们的使用我们可以通过命令行来启动和停止他 —— 非常简单服务启动命令：mongod 停止：直接 Ctrl+C or 关闭窗口 ps： 这里有个注意点：

mongodb 默认使用 mongod 命令所在的盘符的磁盘更目录作为自己的数据存储目录也就是目录盘符/data/db

第一次启动

所以在第一次启动的时候要去手动创建一个 data/db 这样的数据存储目录

当然我们也可以手动修改默认数据储存目录

mongod --dbpath=数据储存目录

连接和退出数据库

#先启动数据库
mongod

#再开启一个控制台
mongo

退出：exit 就可以了

基本命令

show dbs
- 查看显示所有数据库默认有一个 admin 和 local 系统自带的
db
- 查看当前操作的数据库
use 数据库名字
- 切换到指定数据库（如果没有会新建）
  
  ps：如果数据库里面没有数据 show db 是看不到这个数据库的
插入数据

# 插入一条 集为students的数据
db.students.insertOne({"id":"1","name":"Tom"}).students.insert

#查看当前集
 show collections
#查看当前集下面对 所有数据
> db.students.find()
> 如下：
{ "_id" : ObjectId("5c2e19bf5d2f7705c12fcb62"), "id" : "1", "name" : "Tom" }

当然这边的操作只是一个初体验，我们在真正使用的时候是不会用这种方式去使用的，用一些语言例如 nodejs Ruby 等一些语言来实现 CRUD 的操作

下面我们使用 mongoose 进行一些简单的 CRUD

Nodejs-mongodb，mongoose 的 CRUD

前言

设计集合结构（表结构）
字段名称就是表结构的属性名称
约束的目的就是为了保证字段的完整性，不要有脏数据
- 接上一篇 https://blog.csdn.net/Chad97/article/details/85720537
- 官方 API

官方案例

var mongoose = require("mongoose") //官方案例
var Schema = mongoose.Schema
var blogSchema = new Schema({
  title: String,
  author: String,
  body: String,
  comments: [{ body: String, date: Date }],
  date: { type: Date, default: Date.now },
  hidden: Boolean,
  meta: {
    votes: Number,
    favs: Number,
  },
})

小栗子

var mongoose = require("mongoose")
var Schema = mongoose.Schema
//连接数据库
//指定链接的的数据库不需要存在，当你插入第一条数据后就会被自动创建出来
mongoose.connect("mongodb://localhost:27017/itcast")

//设计文档结构（表结构）
var userSchema = new Schema({
  username: {
    type: String,
    require: true, //表示必须有
  },
  password: {
    type: String,
    require: true,
  },
  email: {
    type: String,
  },
})

将文档结构发布为模型
- mongoose.model() 是用来讲一个架构发布为 model 的
  - 第一个参数：传入一个大写名词单数字符串用来表示你的数据库名称，mongoose 会自动将大写单数名词字符串
- 生成小写复数的集合名称例如这里的 User => users 集合名称
- 第二个参数：架构的名称
  - 返回值模型构造函数
  var User = mongoose.model(‘User’, userSchema)

增加数据
- 先 new 一个数据对象
- 使用模型.save（）添加

var admin = new User({
  username: "zx",
  password: "321",
  email: "zx@ad.com",
})
admin.save(function(err, ret) {
  if (err) {
    console.log("保存失败")
  } else {
    console.log("保存成功")
    console.log(ret)
  }
})

查询

		User.find(function (err,ret) { //查询所有
		    if (err) {
		        console.log('查询失败');
		    } else {
		        console.log(ret)
		    }
		})

		User.find({ //按条件查询  第一个参数 放入一个 对象 "条件" 即可
		        username: 'zx'
		    },
		    function (err, ret) {
		        if (err) {
		            console.log('查询失败');
		        } else {
		            console.log(ret)
		        }
		    })
		ps ：find() 无论 怎样都会返回一个数组

		User.findOne({ //插入条件后 只会返回一个对象，如果没有条件默认返回第一条数据
		    username: 'zx'
		    },
		    function (err,ret) {
		        if (err) {
		            console.log('查询失败');
		        } else {
		            console.log(ret);
		        }
		    }
		)

更新数据

User.findByIdAndUpdate(
  "5c2f01c67677e410308a223a",
  {
    username: "updata后的admin",
    password: "666666",
  },
  function(err, ret) {
    if (err) {
      console.log("更新失败")
    } else {
      console.log("更新成功")
      console.log(ret) // 这里是返回更新前的对象内容
    }
  }
)

删除数据

User.remove(
  {
    username: "zx",
  },
  function(err, ret) {
    if (err) {
      console.log("失败")
    } else {
      console.log("成功")
      console.log(ret)
    }
  }
)

附赠 mysql

npm i —S mysql //下载包

var mysql = require("mysql")

// 1. 创建连接
var connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "root",
  database: "users", // 数据库名字
})

// 2. 连接数据库 打开冰箱门
connection.connect()

// 3. 执行数据操作 把大象放到冰箱
connection.query("SELECT * FROM `users`", function(error, results, fields) {
  if (error) throw error
  console.log("The solution is: ", results)
})

// connection.query('INSERT INTO users VALUES(NULL, "admin", "123456")', function (error, results, fields) {
//   if (error) throw error;
//   console.log('The solution is: ', results);
// });

// 4. 关闭连接 关闭冰箱门
connection.end()

若端的博客网站 - Ruoduan's blog site

Volta 对每个项目的Node版本管理

缘起

微信小程序WebView在IOS中回退刷新问题

缘起

Solve

React项目使用 Web Worker

缘起

webpack5^

worker-loader

why import worker file ？

blobUrl

Nest Validator 校验参数

缘起

示例

class-validator

class-transformer

记-Docker服务器时间之ENV环境变量

记-Docker 服务器时间之ENV环境变量

缘起

Nest 使用SSE 服务端推送实现"协同"

缘起

Why SSE ？

协议

场景

正文

server

Client

Shell-字符串替换生成模板文件

缘起

代码

完

2022-summary

Flutter web bridge 通信总结

缘起

通信方式

APP 中 JS & dart call

Flutter web 中 JS & dart call

dart 调用 js

js 调用 dart

summary

记-WindowsServer2019-IIS 权限问题

缘起

解决方案

Why IUSR ？

记 chmod -R 权限变更导致git大量变更

缘起

Flutter 处理 webview IOS bounce 弹簧效果

缘起

NPM包魔改利器 patch-package 给包打补丁

NPM包魔改利器 patch-package 给包打补丁

缘起

安装

生成源码

other

游泳与“禅”

游泳与“禅”

缘起

后疫情时代下年轻人的焦虑

是否是我们的错觉 ？

引子

蛙泳

观察我和别人的不一样

期间

魔鬼训练与体重

自由泳

“打腿” 累和停止不前

避重就轻方法论

程序员的路 ？

训练模型？

进阶：仰泳、蝶泳 ？

完

Docker 部署 Flask

Docker 部署 Flask

WSGI Server

Gunicorn \ Gevent

Docker

安装使用 Gunicorn + Gevent

制作镜像

requirements.txt

是否是我们的错觉？

程序员的路？

进阶：仰泳、蝶泳？