Blog

一、必备知识点

通常有人说一个人一生最好经常去三个地方看看，人生感悟会提高一个档次，人生观，价值观乃至世界观，都会有一个质的飞跃。这三个地方就是：托儿所、殡仪馆、监狱。 常去托儿所，看到天真烂漫、童真无邪、活泼可爱的孩子们，会更加的体会到生命的重要和可爱，从而更加珍惜生命，热爱生活，激发出更多积极向上的人生志向。 常去殡仪馆，看到撒手人寰逝去的人们，会感受到，人赤条条来，赤条条去，人为财死，鸟为食亡，是多么的狭隘和自私，心胸会豁然开朗，，不会在为鸡毛蒜皮的小事斤斤计较，退一步海阔天空，让三分心平气和。会更加的领会人生的价值所在，让人生更具异彩。 常去监狱，看到无论是过去高官还是贫民百姓，进到监狱没有了姓名，只有号码，一律囚服，进出报告，极大的限制了人身自由，天高任鸟飞，海阔凭鱼跃的现实已经成为梦中的理想。自古就有人犯王法身无主，因此也就会更加的洁身自好，以人为镜，严于律己。守法度者为幸福，世上本没有绝对的自由，遵守了，习惯了，适应了也就自由了。

Proxy，代理，是ES6新增的功能，可以理解为代理器（即由它代理某些操作）。

Proxy 对象用于定义或修改某些操作的自定义行为，可以在外界对目标对象进行访问前，对外界的访问进行改写。

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。

安装依赖

1

yarn add react-i18next i18next i18next-browser-languagedetector

配置多语言JSON

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

// en-us.json
{
  "common": {
    "cancel": "Cancel"
  },
  "join": "join",
  "retry": "Retry after {{timer}}s",
  "choosePerson": "Selected <0>{{num}}</0> person"
}

// zh-cn.json
{
  "common": {
    "cancel": "取消"
  },
  "join": "加入",
  "retry": "{{timer}}秒后重试",
  "choosePerson": "选择人数<0>{{num}}</0>, 没选择人数<1>{{num1}}</1>"
}

// 变量需要通过{{}}格式包裹，组件需要通过<数字></数字>格式包裹

定义i18n.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import LanguageDetector from 'i18next-browser-languagedetector';
import i18n from "i18next";
import enUsTrans from "../public/locales/en-us.json";
import zhCnTrans from "../public/locales/zh-cn.json";
import {
  initReactI18next
} from 'react-i18next';

i18n.use(LanguageDetector) //嗅探当前浏览器语言
.use(initReactI18next) //init i18next
.init({
  //引入资源文件
  resources: {
    en: {
      translation: enUsTrans,
    },
    zh: {
      translation: zhCnTrans,
    },
  },
  //选择默认语言，选择内容为上述配置中的key，即en/zh
  fallbackLng: "en",
  debug: false,
  interpolation: {
    escapeValue: false, // not needed for react as it escapes by default
  },
})

export default i18n;

主文件引用

1
2
3
4
5
6
7
8
9
10
11
12

import React from 'react'
import App from 'next/app'
import '../config/i18n'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default MyApp

使用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import React from 'react'
import { NextPage } from 'next'
import { useTranslation, Trans, Translation } from 'react-i18next'
// import i18n from "i18next";

const Home: NextPage = () => {
  let { t , i18n } = useTranslation()

  return (
    <div >
      <div>
      <button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>{i18n.language=='en'?'zh':'en'}</button>
      </div>

      {/* 3种常用使用方式 */}
      <h1>{t('home')}</h1>
      <h2><Trans>home</Trans></h2>
      <Translation>{t => <h3>{t('home')}</h3>}</Translation>

      <h1>
        {i18n.t("common.cancel")}
        <div>{i18n.t("retry", {retry: 3})}</div>
        <Trans i18nKey={"choosePerson"} values={{num: 3, num1: 4}} components={[<div>content</div>, <span>content</span>]}></Trans>
      </h1>
    </div>
  )
}

export default Home

一. package.json 解读

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

{
	"name": "hello world", // 项目名称
	"version": "0.0.1", // 版本号：大版本.次要版本.小版本
	"author": "张三",
	"description": "第一个node.js程序",
	"keywords":["node.js","javascript"], // 关键词，有助于 npm search 发现
	"repository": { // 存储库，指定代码所在位置（如果git repo在GitHub上，那么该npm docs 命令将能够找到文件位置。）
		"type": "git",
		"url": "https://path/to/url"
	},
	"license":"MIT", // 指定包许可证，详细可见[SPDX许可证ID的完整列表](https://spdx.org/licenses/)
	"engines": {"node": "0.10.x"}, // 指定该模块运行的平台，可以指定 node 版本、npm 版本等
	"bugs":{"url":"http://path/to/bug","email":"bug@example.com"}, // 项目问题跟踪器的URL和应报告问题的电子邮件地址。
	"contributors":[{"name":"李四","email":"lisi@example.com"}],
    "bin": { // 指定内部命令对应的可执行文件的位置，在 scripts 中就可以简写
    	"webpack": "./bin/webpack.js"
  	},
    "main": "lib/webpack.js", // 指定加载的模块入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
    "config" : { "port" : "8080" }, // 用于添加命令行的环境变量（用户在运行 scripts 命令时，就默认在脚本文件中添加 process.env.npm_package_config_port，用户可以通过 npm config set foo:port 80 命令更改这个值）
	"scripts": { // 指定运行脚本的 npm 命令行缩写
		"start": "node index.js"
	},
    "peerDependencies": { // 指定项目安装必须一起安装的模块及其版本号，（注意：从 npm 3.0 开始，peerDependencies不会再默认安装）
    	"chai": "1.x"
  	},
	"dependencies": { // 指定项目运行所依赖的模块
		"express": "latest",
		"mongoose": "~3.8.3",
		"handlebars-runtime": "~1.0.12",
		"express3-handlebars": "~0.5.0",
		"MD5": "~1.2.0"
	},
	"devDependencies": { // 指定项目开发所需要的模块
		"bower": "~1.2.8",
		"grunt": "~0.4.1",
		"grunt-contrib-concat": "~0.3.0",
		"grunt-contrib-jshint": "~0.7.2",
		"grunt-contrib-uglify": "~0.2.7",
		"grunt-contrib-clean": "~0.5.0",
		"browserify": "2.36.1",
		"grunt-browserify": "~1.3.0",
	},
    "browser": { // 指定该模板供浏览器使用的版本
  		"tipso": "./node_modules/tipso/src/tipso.js"
	},
    "preferGlobal": true, // 表示当用户不将该模块安装为全局模块时（即不用–global参数），要不要显示警告，表示该模块的本意就是安装为全局模块。
}

package.json 在 node 和 npm 环节都要使用，node 在调用 require 的时候去查找模块，会按照一个次序去查找，package.json 会是查找中的一个环节。npm 用的就比较多，其中的 dependencies 字段就是本模块的依赖的模块清单。每次npm update的时候，npm会自动的把依赖到的模块也下载下来。当npm install 本模块的时候，会把这里提到的模块都一起下载下来。通过package.json,就可以管理好模块的依赖关系。

关于更多规范，请看官方npm-package.json

MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。

This page will collect some useful websets.

• ss free account
• v2ray free account
• awesome-github-profile-readme

probot

• probot
  • Auto-comment
  • pull
  • delete-merged-branch
  • stale

javascript-puzzlers

void

void其实是javascript中的一个函数，接受一个参数，返回值永远是undefined void expression

1
2
3
4
5
6
7

void 0  
void() // 报错
void (0)  
void "hello"  
void (new Date())  
// all will return undefined  
context === void 666

字符串扩展的方法

• includes()：返回布尔值，表示是否找到了参数字符串。数组也可以 a[1]=1 且能判断undefined

  1 2 3 4 5 6

  var a=[1,2,3] a[4]=5 // [1, 2, 3, undefined × 1, 5] empty // a[3]=undefined [1, 2, 3, undefined, 5] a.indexOf(undefined) // -1 a.includes(undefined) // true

• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

  1 2 3 4 5 6

  // polyfill if (String.prototype.startsWith) { String.prototype.startsWith = function (search, index) { return this.substr((!index || index < 0) ? 0 : index, search.length) === search; } }

• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 str | index
• repeat()：返回一个新字符串，表示将原字符串重复n次。参数如果是小数，会被取整(不四舍五入)。参数是负数或者Infinity，会报错。0/NaN返回空字符串,参数是字符串，则会先转换成数字，不传则为空字符串。
• padStart()：头部补全。
• padEnd()：尾部补全

  1 2 3 4 5

  'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'

  如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。默认使用空格

vue 双向绑定的原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，实现视图刷新。

具体流程： Vue中先遍历data选项中所有的属性（发布者）用Object.defineProperty劫持这些属性将其转为getter/setter。读取数据时候会触发getter。修改数据时会触发setter。

然后给每个属性对应new Dep()，Dep是专门收集依赖、删除依赖、向依赖发送消息的。先让每个依赖设置在Dep.target上，在Dep中创建一个依赖数组，先判断Dep.target是否已经在依赖中存在，不存在的话添加到依赖数组中完成依赖收集，随后将Dep.target置为上一个依赖。

组件在挂载过程中都会new一个Watcher实例。这个实例就是依赖（订阅者）。Watcher第二参数是一个函数，此函数作用是更新且渲染节点。在首次渲染过程，会自动调用Dep方法来收集依赖，收集完成后组件中每个数据都绑定上该依赖。当数据变化时就会在setter中通知对应的依赖进行更新。在更新过程中要先读取数据，就会触发Wacther的第二个函数参数。一触发就再次自动调用Dep方法收集依赖，同时在此函数中运行patch（diff运算)来更新对应的DOM节点，完成了双向绑定。

• 每一个组件默认都会创建一个 Watcher，自定义的 watch 和 computed 方法也会创建 Watcher

Object.defineProperty()实现双向绑定的缺点

1. 只能监听某个属性，不能监听整个对象
2. 需要使用for in遍历对象属性绑定监听
3. 不能监听数组，需要重写数组方法进行特异性操作
4. 会污染原对象