sfsoul / personalblog Goto Github PK

• 把cookie聊清楚
• 聊一聊 cookie
• Cookie 的 SameSite属性

• 让CSS flex布局最后一行列表左对齐的N种方法
• 解决flex布局space-between最后一行左对齐

mkdir（make directory）

创建文件夹

• -p：创建中间目录，如 mkdir -p /zj/hahaha/demo，会帮你把 demo 之前的所有层级的目录都创建出来。
• -m：制定文件夹的权限。

rmdir（remove directory）

删除一个空白的文件夹，若文件夹非空还是要用 rm -r 来删除。

mv（move）

用于移动文件或者重命名文件。

• -f：强制覆盖不提醒
• -i：覆盖目标文件前提醒
• -n：不覆盖目标文件

将 n 个文件移动到某个目录下

mv file1 file2 file3 dir 若目录不存在会报错

重命名/移动文件

mv file1 file2 若 file2 不存在则重命名为 file2，若存在则覆盖。

移动目录

mv dir1 dir2 将 dir1 移动到 dir2 目录下，若dir2不存在则是一个重命名的效果。

rm（remove）

此命令用于删除文件和目录。普通的删除只是将文件从文件系统中移除，磁盘上的那块空间并不会去动它。所以误删的话，可以通过一些还原工具找回。

• -f：强制删除，没有提示
• -i：删除某个文件前请求确认
• -P：粉碎性删除。删除文件前重新复写整个文件，往文件里不停写入 0xff 和 0x00。这样删除的文件无法恢复
• -R：递归删除。如果指定的文件为目录，则删除目录下所有的文件及其子目录。

• 简单实现 babel-plugin-import 插件

参考文章

• 编写高质量可维护的代码：优化逻辑判断

• 敏感数据加密方案及实现

参考文章

• IOS的日期格式bug

• 聊聊Vue中title的动态修改
• 基于Vue CLI3 搭建五脏俱全的移动端H5应用

什么是状态管理模式？

• state：驱动应用的数据源；
• view：以声明方式将 state 映射到视图；
• actions：响应在 view 上的用户输入导致的状态变化。

使用 Vuex 的原因

当多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来着不同视图的行为需要变更同一状态。

调试工具

devtools extension

Mac 下可以使用 lsof（list open files）来查看端口占用情况。

使用 lsof 列举所有占用的端口列表：

lsof

使用 less 可以用于分页展示：

lsof | less

使用 -i 查看某个端口是否被占用：若端口被占用，则会返回相关信息；若没被占用，则不返回任何信息。

lsof -i:port

// 可通过增加过滤条件来展示本机监听的端口
lsof -i:port | grep LISTEN

nth-child()选择前几个元素

• CSS：nth-child()选择前几个元素

图床

自动把本地图片转换成链接的一款工具。

PicGo

• PicGo 配置文档

搭建图床方案

1. Github + PicGo 搭建图床

2. 七牛云 + PicGo搭建图床

查看基本配置

npm config list

查看所有配置

npm config list -l

npm 如何获取全局安装的默认目录？

npm config get prefix

npm 如何设置全局安装的默认目录？

npm config set prefix "directory"

• Babel 编译流程分析

单独将配置放到 app.config.js 文件中

查询和变更

指令（Directives）

一个指令可以附着在字段或者片段包含的字段上，然后以任何服务端期待的方式来改变查询的执行。

query Hero($episode: Episode, $withFriends: Boolean!) {
    hero(episode: $episode) {
        name
        friends @include(if: $withFriends) {
            name
        }
    }
}

{
    "episode": "JEDI",
    "withFriends": false
}

GraphQL 的核心规范包含两个指令：

• @include(if: Boolean) 仅在参数为 true 时，包含此字段。
• @skip(if: Boolean) 若参数为 true，跳过此字段。

变更（Mutations）

变更中的多个字段（Multiple fields in mutations）

查询和变更之间名称之外的一个重要区别是：查询字段时，是并行执行，而变更字段时，是线性执行，一个接着一个。

意味着若一个请求中发送了两个 incrementCredits 变更，第一个保证在第二个之前执行，以确保不会出现竞态。

应该在 React 组件的哪个生命周期函数中发起 Ajax 请求？

推荐在 componentDIdMount 这个生命周期函数中发起 Ajax 请求，这样可以拿到 Ajax 请求返回的数据并通过 setState 来更新组件。

// 示例 API 返回如下的 JSON 对象：
{
  "items": [
    { "id": 1, "name": "Apples",  "price": "$2" },
    { "id": 2, "name": "Peaches", "price": "$5" }
  ] 
}

import { useState, useEffect } from 'React'

function MyComponent() {
    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [items, setItems] = useState([]);

    useEffect(() => {
        fetch("https://api.example.com/items")
            .then(res => res.json())
            .then(result => {
                setIsLoaded(true);
                setItems(result);
            }, (error) => {
                setIsLoaded(true);
                setItems(error);
            })
    }, [])

    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return <div>Loading...</div>
    } else {
        return (
            <ul>
                {items.map(item => (
                    <li key={item.name}>
                        {item.name} {item.price}
                    </li>
                ))}
            </ul>
        );
    }
}

怎样阻止函数被调用太快或者太多次？

若有一个 onClick 或者 onScroll 这样的事件处理器，想要阻止回调被触发的太快，则可以限制执行回调的速度，可通过以下几种方式做到：

• 节流：基于时间的频率来进行抽样更改（如：_.throttle）
• 防抖：一段时间的不活动之后发布更改（如：_.debounce）
• requestAnimationFrame 节流：基于 requestAnimationFrame 的抽样更改（如：raf-schd）

_.debounce 、_.throttle 和 raf-schd 都提供了一个 cancel 方法来取消延迟回调。需要在 componentWillUnmount 中调用该方法，或者对代码进行检查来保证在延迟函数有效期间内组件始终挂载。

节流

节流阻止函数在给定时间窗口内被调不能超过一次。

import throttle from 'lodash.throttle';

class LoadMoreButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.handleClickThrottled = throttle(this.handleClick, 1000);
  }

  componentWillUnmount() {
    this.handleClickThrottled.cancel();
  }

  render() {
    return <button onClick={this.handleClickThrottled}>Load More</button>;
  }

  handleClick() {
    this.props.loadMore();
  }
}

devServer.allowedHosts

devServer.allowedHosts

安装插件

vscode-icons

GitLens

TODO Highlight

javascript console utils

快速生成 console.log()

HTML和静态资源

HTML

Index 文件

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中资源链接会被自动注入，此外 Vue CLI 还会自动注入 resource hint（preload/prefetch、mainfest 和图标链接）以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。

插值

因为 index 文件被用作模板，所以可以使用 lodash template 语法插入内容：

• <%= VALUE %> 用来做不转义插值；
• <%- VALUE%> 用来做 HTML 转义插值；
• <% expression %> 用来描述 JavaScript 流程控制。

除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。

// BASE_URL  用法
<link rel="icon" href="<%= BASE_URL %>favicon.ico">

Preload

<link rel="preload"> 是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，希望在浏览器开始主体渲染之前尽早 preload。

默认情况下，一个 Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示。

提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('preload') 进行修改和删除。

Prefetch

<link rel="prefetch"> 是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能访问的内容。

默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件（通过动态 import() 按需 code splitting 的产物）自动生成 prefetch 提示。

提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('prefetch') 进行修改和删除。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 或者
    // 修改它的选项：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

当 prefetch 插件被禁用时，可以通过 webpack 的内联注释手动选定要提前获取的代码区块：
import (/* webpackPrefetch: true*/ './someAsyncComponent.vue')

webpack 的运行时会在父级区块被加载之后注入 prefetch 链接。Prefetch 链接将会消耗带宽。若应用很大且有很多 async chunk，而用户主要使用的是对带宽较敏感的移动端，则可能需要关掉 prefetch 链接并手动选择要提前获取的代码区块。

构建一个多页应用

Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。构建好的应用将会在不同的入口之间高效共享通用的 chunk 以获得最佳的加载性能。

处理静态资源

静态资源科通过两种方式进行处理：

• 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
• 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

从相对路径导入

当在 JavaScript、CSS 或 *.vue 文件中使用相对路径（必须以 . 开头）引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

如：url(./image.png) 会被翻译为 require('./image.png')。

<img src="./image.png">

// 会被编译为
h('img', { attrs: { src: require('./image.png') }})

URL 转换规则

• 若 URL 是一个绝对路径（如 /images/foo.png），它将会被保留不变。
• 若 URL 以 . 开头，它作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
• 若 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析，意味着可以引用 Node 模块中的资源：
  <img src="~some-npm-package/foo.png">
• 若 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。（仅作用于模板中）

public 文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。需要通过绝对路径来引用它们。

推荐奖资源作为模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

• 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
• 文件丢失会直接在编译时报错，而不是到了用户端才产生404错误。
• 最终生成的文件名包含了内容哈希，因为不担心浏览器会缓存它们的老版本。

public 目录提供的是一个应急手段，当通过绝对路径引用它时，应留意应用将会部署到哪里？若应用没有部署在域名的根部，则需要为 URL 配置 publicPath 前缀：

• 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，需通过 <%= BASE_URL %> 设置链接前缀：
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
• 在模板中，首先需要向组件中传入基础 URL：

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

<img :src="`${publicPath}my-image.png`">

What's CIL?

Command Line Interface。

Hook 简介

Hook 可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook 产生的动机

• 在组件之间复用状态逻辑很难
• 复杂组件变得难以理解
• 难以理解的 class

使用 Effect Hook

可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate和componentWillUnmount 这三个函数的组合。

需要清除的 effect

如果 effect 返回一个函数，React 将会在执行 清除操作时调用它。

• 为什么要在 effect 中返回一个函数？： 这是 effect 可选的清除机制，每个 effect 都可以返回一个清除函数。
• React 何时清除 effect？： React 会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。

按时间列出一个可能会产生的订阅和取消订阅操作调用序列：

// Mount with { friend: { id: 100 } } props
ChatAPI.subscribeToFriendStatus(100, handleStatusChange);     // 运行第一个 effect

// Update with { friend: { id: 200 } } props
ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // 清除上一个 effect
ChatAPI.subscribeToFriendStatus(200, handleStatusChange);     // 运行下一个 effect

// Update with { friend: { id: 300 } } props
ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // 清除上一个 effect
ChatAPI.subscribeToFriendStatus(300, handleStatusChange);     // 运行下一个 effect

// Unmount
ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // 清除最后一个 effect

按需引入 Element UI

借助 babel-plugin-component 可实现按需引入，来达到减小项目体积的目的。

npm i babel-plugin-component -D

修改 .babelrc 文件：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

Mac 上下载 MongoDB

下载地址

下载地址

Copy the extracted archive to the target directory

Copy the extracted folder to the location from which MongoDB will run.

这里是将解压后的 MongoDB 文件放到将要运行的地方。推荐放在 /usr/local。

Ensure the location of the binaries is in the PATH variable.

The MongoDB binaries are in the bin/ directory of the archive. To ensure that the binaries are in your PATH, you can modify your PATH.

这里是要将 MongoDB 的二进制文件放入到环境变量中。由于我的终端是 Iterm + zsh，所以这边直接修改 .zshrc 文件

// 新增环境变量
export PATH="$PATH:/usr/local/mongodb/bin"

source ~/.zshrc

Run MongoDB

Create the data directory

Before you start MongoDB for the first time, create the directory to which the mongod process will write data. By default, the mongod process uses the /data/db directory. If you create a directory other than this one, you must specify that directory in the dbpath option when starting the mongod process later in this procedure.

The following example command creates the default /data/db directory:

// 创建 data/db 目录，存放 mongod 进程写入数据的目录
mkdir -p /data/db

Set permissions fro the data directory

Before running mongod for the first time, ensure that the user account running mongod has read and write permissions for the directory.

给 /data/db 设置读写权限

// 获取用户名
$ whoami
-> username

// 设置权限
$ sudo chown username /data/db

mkdir -p /data/db 报错

执行 mkdir -p /data/db 报错，报错信息为：mkdir: /data/db: Read-only file system。

因为mac电脑默认是开启安全模式的，不能在根目录下面随便创建、删除文件夹。所以会出现这个错误。

• Flutter Demo
• Flutter docs cn

参考文章

• Accessors are only available when targeting ECMAScript 5 and higher

如何高效获取 Token

通过后续编写 Node 脚本

git 提交时是否可以更规范化

业务逻辑上的梳理

部门页面接口请求过多，如何优化？

合并接口？懒加载？滑动加载？

熟悉 React Hooks

熟悉 Taro

• Mac 配置代理host方案总结
• 如何在 macOS 下设置 host？

Props 的只读性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

正确地使用 State

不要直接修改 State

// 此代码不会重新渲染组件
this.state.comment = 'Hello';

应该使用 setState()：

this.setState({
  comment: 'Hello'
})

State 的更新可能是异步的

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。 因为 this.props 和 this.state 可能会异步更新，所以不要依赖它们的值来更新下一个状态。

// 此代码无法更新计数器：
this.setState({
  counter: this.state.counter + this.props.increment
});

要解决这个问题，让 setState() 接收一个函数而不是一个对象。此函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 作为第二个参数：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}))

State 的更新会被合并

调用 setState() 时，React 会把你提供的对象合并到当前的 state。

向事件处理程序传递参数

在循环中通常会为事件处理函数传递额外的参数。

// 两种方式都可以向事件处理函数传递参数：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。若通过箭头函数的方式，事件对象必须显式的进行传递；而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

阻止组件渲染

希望能隐藏组件，即使它已经被其他组件渲染。可以让 render 方法直接返回 null，而不进行任何渲染。在组件的 render 方法中返回 null 并不会影响组件的生命周期。componentDidUpdate 依然会被调用。

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return (
    <div className="warning">
      Warning!
    </div>
  )
}

用 key 提取组件

元素的 key 只有放在就近的数组上下文中才有意义。

一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。

状态提升

在 React 应用中，任何可变数据应当只有一个相对应的唯一 "数据源"。通常，state 都是首先添加到需要渲染数据的组件中去。然后如果其他组件也需要这个 state，可以将它提升至这些组件的最近共同父组件中。应当依靠自上而下的数据流，而不是尝试在不同组件间同步 state。

node-sass 安装失败的原因

npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。

解决方案

使用淘宝镜像源

设置变量 sass_binary_site，指向淘宝镜像地址。

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

// 设置全局镜像源
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

参考文章

• 整理Mac系统 node-sass 安装失败的原因及解决办法
• 完美解决Cannot download "https://github.com/sass/node-sass/releases/download/binding.nod的问题