放牧的风

vue中涉及的字符串模板与dom模板

Fri, 01 Apr 2022 20:17:23 +0800

最近看到vue官方文档的时候，多次提及字符串模板和dom模板，对这个概念比较模糊，经查阅后记录供日后参考。

1. 字符串模板

字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。

Vue.component('MyComponentA', {
    template: '<div MyId="123"><MyComponentB>hello, world</MyComponentB></div>'
})
<div id="app">
    <MyComponentA></MyComponentA>
</div>

2. dom模板(或者称为Html模板)

dom模板就是写在html文件中，一打开就会被浏览器进行解析渲染的，所以要遵循html结构和标签的命名，否则浏览器不解析也就不能获取内容了。

下面的例子不会被正确渲染, 会被解析成mycomponent,但是注册的vue的组件是MyComponent，因此无法渲染。

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app"> 
            Hello Vue            
            <MyComponent></MyComponent>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script >
        //全局注册
        Vue.component('MyComponent', {
            template: '<div>组件类容</div>'
        });
        new Vue ({
            el: '#app'
        });    
    </script>
    </body>
</html>

所以，下面的例子就可以正常显示了：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app"> 
            Hello Vue            
            <my-component></my-component>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script >
        //全局注册
        Vue.component('my-component', {
            template: '<div>组件类容</div>'
        });
        new Vue ({
            el: '#app'
        });    
    </script>
    </body>
</html>

因为html对大小写不敏感，所以在DOM模板中使用组件必须使用kebab-case命名法(短横线命名)。

因此,对于组件名称的命名，可参考如下实现：

/*-- 在单文件组件、JSX和字符串模板中 --*/
<MyComponent/>

/*-- 在 DOM 模板中 --*/
<my-component></my-component>

/*-- 在所有地方 --*/
<my-component></my-component>

CentOS下文件/文件夹的压缩和解压命令用法详解

Wed, 23 Feb 2022 15:02:27 +0800

tar功能：文件的压缩或解压

语法：tar 命令

-c 建立一个压缩文件的参数指令（create） –压缩
-x 解开一个压缩文件的参数指令（extract） –解压
-z 是否需要gzip压缩
-v 显示压缩的过程（verbose）
-f 使用档名，在f之后要立即接档名（file）

压缩：

tar -zcvf 文件名 压缩路径

解压：

tar -zxvf 文件名

示例：

tar -zcvf 文件名.tar.gz 要压缩文件路径

解压缩

tar -zxvf 要解压的文件.tar.gz

这个命令是解压到当前文件夹

解压到指定目录中（该目录需要存在）需要添加-C参数

tar -zxvf 要解压的文件.tar.gz -C 指定目录路径

vscode中的jsconfig.json文件首行无故报错

Tue, 08 Feb 2022 17:35:29 +0800

问题

在vscode中，我们配置完jsconfig.json文件后可能会报错。

分析

vscode会自动进行JavaScript文件的语义检查。因为自定义的jsconfig.json文件无法覆盖vscode自带的配置，所以会报错。

解决方法

打开配置settings.json文件，让自定义的jsconfig.js文件覆盖vscode默认选项

tsconfig.json配置说明

Thu, 20 Jan 2022 14:24:04 +0800

在 TypeScript 开发中，tsconfig.json 是个不可或缺的配置文件，它是我们在 TS 项目中最常见的配置文件，那么你真的了解这个文件吗？它里面都有哪些优秀配置？如何配置一个合理的 tsconfig.json 文件？本文将全面带大家一起详细了解 tsconfig.json 的各项配置。

本文将从以下几个方面全面介绍 tsconfig.json 文件：

水平有限，欢迎各位大佬指点~~

一、tsconfig.json 简介

1. 什么是 tsconfig.json

TypeScript 使用 tsconfig.json 文件作为其配置文件，当一个目录中存在 tsconfig.json 文件，则认为该目录为 TypeScript 项目的根目录。

通常 tsconfig.json 文件主要包含两部分内容：指定待编译文件和定义编译选项。

从《TypeScript编译器的配置文件的JSON模式》可知，目前 tsconfig.json 文件有以下几个顶层属性：

compileOnSave
compilerOptions
exclude
extends
files
include
references
typeAcquisition

文章后面会详细介绍一些常用属性配置。

2. 为什么使用 tsconfig.json

通常我们可以使用 tsc 命令来编译少量 TypeScript 文件：

/*
  参数介绍：
  --outFile // 编译后生成的文件名称
  --target  // 指定ECMAScript目标版本
  --module  // 指定生成哪个模块系统代码
  index.ts  // 源文件
*/
$ tsc --outFile leo.js --target es3 --module amd index.ts

但如果实际开发的项目，很少是只有单个文件，当我们需要编译整个项目时，就可以使用 tsconfig.json 文件，将需要使用到的配置都写进 tsconfig.json 文件，这样就不用每次编译都手动输入配置，另外也方便团队协作开发。

二、使用 tsconfig.json

目前使用 tsconfig.json 有2种操作：

1. 初始化 tsconfig.json

在初始化操作，也有 2 种方式：

手动在项目根目录（或其他）创建 tsconfig.json 文件并填写配置；
通过 tsc --init 初始化 tsconfig.json 文件。

2. 指定需要编译的目录

在不指定输入文件的情况下执行 tsc 命令，默认从当前目录开始编译，编译所有 .ts 文件，并且从当前目录开始查找 tsconfig.json 文件，并逐级向上级目录搜索。

$ tsc

另外也可以为 tsc 命令指定参数 --project 或 -p 指定需要编译的目录，该目录需要包含一个 tsconfig.json 文件，如：

/*
  文件目录：
  ├─src/
  │  ├─index.ts
  │  └─tsconfig.json
  ├─package.json
*/
$ tsc --project src

注意，tsc 的命令行选项具有优先级，会覆盖 tsconfig.json 中的同名选项。

更多 tsc 编译选项，可查看《编译选项》章节。

三、使用示例

这个章节，我们将通过本地一个小项目 learnTsconfig 来学着实现一个简单配置。

当前开发环境：windows / node 10.15.1 / TypeScript3.9

1. 初始化 learnTsconfig 项目

执行下面命令：

$ mkdir learnTsconfig
$ cd .\learnTsconfig\
$ mkdir src
$ new-item index.ts

并且我们为 index.ts 文件写一些简单代码：

// 返回当前版本号
function getVersion(version:string = "1.0.0"): string{
    return version;
}

console.log(getVersion("1.0.1"))

我们将获得这么一个目录结构：

  └─src/
     └─index.ts

2. 初始化 tsconfig.json 文件

在 learnTsconfig 根目录执行：

$ tsc --init

3. 修改 tsconfig.json 文件

我们设置几个常见配置项：

{
  "compilerOptions": {
    "target": "ES5",             // 目标语言的版本
    "module": "commonjs",        // 指定生成代码的模板标准
    "noImplicitAny": true,       // 不允许隐式的 any 类型
    "removeComments": true,      // 删除注释 
    "preserveConstEnums": true,  // 保留 const 和 enum 声明
    "sourceMap": true            // 生成目标文件的sourceMap文件
  },
  "files": [   // 指定待编译文件
    "./src/index.ts"  
  ]
}

其中需要注意一点： files 配置项值是一个数组，用来指定了待编译文件，即入口文件。
当入口文件依赖其他文件时，不需要将被依赖文件也指定到 files 中，因为编译器会自动将所有的依赖文件归纳为编译对象，即 index.ts 依赖 user.ts 时，不需要在 files 中指定 user.ts ， user.ts 会自动纳入待编译文件。

4. 执行编译

配置完成后，我们可以在命令行执行 tsc 命令，执行编译完成后，我们可以得到一个 index.js 文件和一个 index.js.map 文件，证明我们编译成功，其中 index.js 文件内容如下：

function getVersion(version) {
    if (version === void 0) { version = "1.0.0"; }
    return version;
}
console.log(getVersion("1.0.1"));
//# sourceMappingURL=index.js.map

可以看出，tsconfig.json 中的 removeComments 配置生效了，将我们添加的注释代码移除了。

到这一步，就完成了这个简单的示例，接下来会基于这个示例代码，讲解《七、常见配置示例》。

四、tsconfig.json 文件结构介绍

1. 按顶层属性分类

在 tsconfig.json 文件中按照顶层属性，分为以下几类：

2. 按功能分类

五、tsconfig.json 配置介绍

1. compileOnSave

compileOnSave 属性作用是设置保存文件的时候自动编译，但需要编译器支持。

{
	// ...
  "compileOnSave": false,
}

2. compilerOptions

compilerOptions 属性作用是配置编译选项。

若 compilerOptions 属性被忽略，则编译器会使用默认值，可以查看《官方完整的编译选项列表》。

编译选项配置非常繁杂，有很多配置，这里只列出常用的配置。

{
  // ...
  "compilerOptions": {
    "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度
    "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置
    "diagnostics": true, // 打印诊断信息 
    "target": "ES5", // 目标语言的版本
    "module": "CommonJS", // 生成代码的模板标准
    "outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD",
    "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array",
    "allowJS": true, // 允许编译器编译JS，JSX文件
    "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
    "outDir": "./dist", // 指定输出目录
    "rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构
    "declaration": true, // 生成声明文件，开启后会自动生成声明文件
    "declarationDir": "./file", // 指定生成声明文件存放目录
    "emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件
    "sourceMap": true, // 生成目标文件的sourceMap文件
    "inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中
    "declarationMap": true, // 为声明文件生成sourceMap
    "typeRoots": [], // 声明文件目录，默认时node_modules/@types
    "types": [], // 加载的声明文件包
    "removeComments":true, // 删除注释 
    "noEmit": true, // 不输出文件,即编译后不会生成任何js文件
    "noEmitOnError": true, // 发送错误时不输出任何文件
    "noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用
    "importHelpers": true, // 通过tslib引入helper函数，文件必须是模块
    "downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现
    "strict": true, // 开启所有严格的类型检查
    "alwaysStrict": true, // 在代码中注入'use strict'
    "noImplicitAny": true, // 不允许隐式的any类型
    "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量
    "strictFunctionTypes": true, // 不允许函数参数双向协变
    "strictPropertyInitialization": true, // 类的实例属性必须初始化
    "strictBindCallApply": true, // 严格的bind/call/apply检查
    "noImplicitThis": true, // 不允许this有隐式的any类型
    "noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)
    "noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错)
    "noFallthroughCasesInSwitch": true, // 防止switch语句贯穿(即如果没有break语句后面不会执行)
    "noImplicitReturns": true, //每个分支都会有返回值
    "esModuleInterop": true, // 允许export=导出，由import from 导入
    "allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块
    "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { // 路径映射，相对于baseUrl
      // 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置
      "jquery": ["node_modules/jquery/dist/jquery.min.js"]
    },
    "rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错
    "listEmittedFiles": true, // 打印输出文件
    "listFiles": true// 打印编译的文件(包括引用的声明文件)
  }
}

3. exclude

exclude 属性作用是指定编译器需要排除的文件或文件夹。

默认排除 node_modules 文件夹下文件。

{
	// ...
  "exclude": [
    "src/lib" // 排除src目录下的lib文件夹下的文件不会编译
  ]
}

和 include 属性一样，支持 glob 通配符：

* 匹配0或多个字符（不包括目录分隔符）
? 匹配一个任意字符（不包括目录分隔符）
**/ 递归匹配任意子目录

4. extends

extends 属性作用是引入其他配置文件，继承配置。

默认包含当前目录和子目录下所有 TypeScript 文件。

{
	// ...
  // 把基础配置抽离成tsconfig.base.json文件，然后引入
	"extends": "./tsconfig.base.json"
}

5. files

files 属性作用是指定需要编译的单个文件列表。

默认包含当前目录和子目录下所有 TypeScript 文件。

{
	// ...
  "files": [
    // 指定编译文件是src目录下的leo.ts文件
    "scr/leo.ts"
  ]
}

6. include

include 属性作用是指定编译需要编译的文件或目录。

{
	// ...
  "include": [
    // "scr" // 会编译src目录下的所有文件，包括子目录
    // "scr/*" // 只会编译scr一级目录下的文件
    "scr/*/*" // 只会编译scr二级目录下的文件
  ]
}

7. references

references 属性作用是指定工程引用依赖。 在项目开发中，有时候我们为了方便将前端项目和后端node项目放在同一个目录下开发，两个项目依赖同一个配置文件和通用文件，但我们希望前后端项目进行灵活的分别打包，那么我们可以进行如下配置：

{
	// ...
  "references": [ // 指定依赖的工程
     {"path": "./common"}
  ]
}

8. typeAcquisition

typeAcquisition 属性作用是设置自动引入库类型定义文件(.d.ts)相关。 包含 3 个子属性：

enable : 布尔类型，是否开启自动引入库类型定义文件(.d.ts)，默认为 false；
include : 数组类型，允许自动引入的库名，如：["jquery", "lodash"]；
exculde : 数组类型，排除的库名。

{
	// ...
  "references": [ // 指定依赖的工程
     {"path": "./common"}
  ]
}

六、常见配置示例

本部分内容中，我们找了几个实际开发中比较常见的配置，当然，还有很多配置需要自己摸索哟~~

1. 移除代码中注释

tsconfig.json：

{
  "compilerOptions": {
    "removeComments": true,
  }
}

编译前：

// 返回当前版本号
function getVersion(version:string = "1.0.0"): string{
    return version;
}
console.log(getVersion("1.0.1"))

编译结果：

function getVersion(version) {
    if (version === void 0) { version = "1.0.0"; }
    return version;
}
console.log(getVersion("1.0.1"));

2. 开启null、undefined检测

tsconfig.json：

{
    "compilerOptions": {
        "strictNullChecks": true
    },
}

修改 index.ts 文件内容：

const leo;
leo = new Pingan('leo','hello');

这时候编辑器也会提示错误信息，执行 tsc 后，控制台报错：

src/index.ts:9:11 - error TS2304: Cannot find name 'Pingan'.

9 leo = new Pingan('leo','hello');

Found 1 error.

3. 配置复用

通过 extends 属性实现配置复用，即一个配置文件可以继承另一个文件的配置属性。

比如，建立一个基础的配置文件 configs/base.json ：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

在tsconfig.json 就可以引用这个文件的配置了：

{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

4. 生成枚举的映射代码

在默认情况下，使用 const 修饰符后，枚举不会生成映射代码。

如下，我们可以看出：使用 const 修饰符后，编译器不会生成任何 RequestMethod 枚举的任何映射代码，在其他地方使用时，内联每个成员的值，节省很大开销。

const enum RequestMethod {
  Get,
  Post,
  Put,
  Delete
}

let methods = [
  RequestMethod.Get,
  RequestMethod.Post
]

编译结果：

"use strict";
let methods = [
    0 /* Get */,
    1 /* Post */
];

当然，我们希望生成映射代码时，也可以设置 tsconfig.json 中的配置，设置 preserveConstEnums 编译器选项为 true ：

{
  "compilerOptions": {
    "target": "es5",
    "preserveConstEnums": true
  }
}

最后编译结果变成：

"use strict";
var RequestMethod;
(function (RequestMethod) {
    RequestMethod[RequestMethod["Get"] = 0] = "Get";
    RequestMethod[RequestMethod["Post"] = 1] = "Post";
    RequestMethod[RequestMethod["Put"] = 2] = "Put";
    RequestMethod[RequestMethod["Delete"] = 3] = "Delete";
})(RequestMethod || (RequestMethod = {}));
let methods = [
    0 /* Get */,
    1 /* Post */
];

5. 关闭 this 类型注解提示

通过下面代码编译后会报错：

const button = document.querySelector("button");
button?.addEventListener("click", handleClick);
function handleClick(this) {
 console.log("Clicked!");
 this.removeEventListener("click", handleClick);
}

报错内容：

src/index.ts:10:22 - error TS7006: Parameter 'this' implicitly has an 'any' type.
10 function handleClick(this) {
Found 1 error.

这是因为 this 隐式具有 any 类型，如果没有指定类型注解，编译器会提示“"this" 隐式具有类型 "any"，因为它没有类型注释。”。

解决方法有2种：

指定 this 类型，如本代码中为 HTMLElement 类型：

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了 HTMLElement 接口，其它的间接实现HTMLElement接口。关于 HTMLElement 可查看详细。

使用 --noImplicitThis 配置项：

在 TS2.0 还增加一个新的编译选项： --noImplicitThis，表示当 this 表达式值为 any 类型时生成一个错误信息。我们设置为 true 后就能正常编译。

{
  "compilerOptions": {
    "noImplicitThis": true
  }
}

七、Webpack/React 中使用示例

1. 配置编译 ES6 代码，JSX 文件

创建测试项目 webpack-demo，结构如下：

webpack-demo/
  |- package.json
  |- tsconfig.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
    |- index.js
    |- index.ts
  |- /node_modules

安装 TypeScript 和 ts-loader：

$ npm install --save-dev typescript ts-loader

配置 tsconfig.json，支持 JSX，并将 TypeScript 编译为 ES5：

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
+   "module": "es6",
+   "target": "es5",
+   "jsx": "react",
    "allowJs": true
  }
}

还需要配置 webpack.config.js，使其能够处理 TypeScript 代码，这里主要在 rules 中添加 ts-loader ：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

2. 配置 source map

想要启用 source map，我们必须配置 TypeScript，以将内联的 source map 输出到编译后的 JavaScript 文件中。

只需要在 tsconfig.json 中配置 sourceMap 属性：

  {
    "compilerOptions": {
      "outDir": "./dist/",
+     "sourceMap": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "es5",
      "jsx": "react",
      "allowJs": true
    }
  }

然后配置 webpack.config.js 文件，让 webpack 提取 source map，并内联到最终的 bundle 中：

  const path = require('path');

  module.exports = {
    entry: './src/index.ts',
+   devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

八、总结

本文较全面介绍了 tsconfig.json 文件的知识，从“什么是 tsconfig.js 文件”开始，一步步带领大家全面认识 tsconfig.json 文件。文中通过一个简单 learnTsconfig 项目，让大家知道项目中如何使用 tsconfig.json 文件。在后续文章中，我们将这么多的配置项进行分类学习。最后通过几个常见配置示例，解决我们开发中遇到的几个常见问题。

当然，本文篇幅有限，无法针对每个属性进行深入介绍，这就需要大家在实际开发中，多去尝试和使用啦~

九、学习和参考资料

1.《Intro to the TSConfig Reference》 2.《tsconfig.json》 3.《TypeScript编译器的配置文件的JSON模式》 4.《详解TypeScript项目中的tsconfig.json配置》 5.《官方完整的编译选项列表》

原文链接：https://juejin.cn/post/6844904178234458120

解决Chrome开启硬件加速后播放视频黑屏闪烁

Tue, 07 Dec 2021 11:24:43 +0800

最近在使用Chrome时遇到了一个比较头疼的问题，就是开启硬件加速后，播放视频黑屏闪烁，整个眼都要被晃瞎了。

终于找到了一个解决方案，在此记录一下。

硬件加速开启方法

硬件加速是指，应用程序使用计算机硬件的能力，比软件实现的功能能够更有效地执行某些操作。

在Chrome 浏览器中，硬件加速能够利用计算机的图形处理单元（GPU）来处理图形密集型任务，例如：播放视频、网页游戏或需要更快数学运算的任何内容。

硬件加速开启方法，浏览器输入 chrome://settings/system

解决方法

Chrome(包括Edge Chromium和其他Chromium浏览器)地址栏输入 chrome://flags/#use-angle

Windows机器建议把ANGLE调用的图形API阉割为D3D9。

Google Chrome的硬件渲染一言难尽，Linux平台直接把Mesa甚至DRM搞挂都屡见不鲜，然而Google的解决方案居然不是修好硬件渲染而是SwiftShader。

babel、vue编译，Prettier原理等离不开的AST技术

Mon, 22 Nov 2021 16:29:31 +0800

概要

本文将通过以下几个方面对AST进行学习

为什么要了解AST，简要说明AST在开发中的重要性
什么是AST，对AST有一个直观的认识
AST是如何生成的，分析将代码解析成AST的原理
AST的具体应用，通过解读babel原理、vue模板编译过程，Prettier实现原理，来分析AST在开发中的具体使用。
AST还能做什么，结合工作，思考AST能为我们做些什么

为什么要学习AST

AST（抽象语法树）在开发过程中扮演一个非常重要的角色，但是我们却很少去直接接触它。

无论是代码编译（babel），打包（webpack），代码压缩，css预处理，代码校验（eslint），代码美化（pretiier），Vue中对template的编译，这些的实现都离不开AST。

了解学习AST，能够帮助我们更好的对上面说的这些工具原理进行理解，同时，我们可以利用它去开发一些工具，来优化我们的开发流程，提高开发效率。

什么是AST

AST是对源代码的抽象语法结构的树状表现形式。

在不同的场景下，会有不同的解析器将源码解析成抽象语法树。

下面直观的看一下AST是什么样的

代码如下

let answer = 2 * 3;

对应的AST语法树

{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "answer"
                    },
                    "init": {
                        "type": "BinaryExpression",
                        "operator": "*",
                        "left": {
                            "type": "Literal",
                            "value": 2,
                            "raw": "2"
                        },
                        "right": {
                            "type": "Literal",
                            "value": 3,
                            "raw": "3"
                        }
                    }
                }
            ],
            "kind": "let"
        }
    ],
    "sourceType": "script"
}

那么AST是如何生成的呢？

AST是如何生成的

AST是通过JS Parser （解析器），将js源码转化为抽象语法树，主要分为两步

1. 分词

将整个的代码字符串，分割成语法单元数组（token）。 JS中的语法单元（token）指标识符（function，return），运算符，括号，数字，字符串等能解析的最小单元。主要有以下几种：

标识符
没有被引号括起来的连续字符，可以包含字母、数字、_、$，其中数字不能作为开头。
标识符可能是var，return，function等关键字，也可能是true，false这样的内置常量，或是一个变量。具体是哪种语义，分词阶段不区分，只要正确拆分即可。
数字十六进制，十进制，八进制以及科学表达式等都是最小单元
运算符： +、-、 *、/ 等
字符串对计算机而言，字符串只会参与计算和展示，具体里面细分没必要分析
注释不管是行注释还是块注释，对于计算机来说并不关心其内容，所以可以作为不可再拆分的最小单元
空格连续的空格，换行，缩进等，只要不在字符串中都没有实际的逻辑意义，所以连续的空格可以作为一个语法单元。
其他，大括号，中括号，小括号，冒号等等。

依然拿上面的代码作为例子，分词后生成的语法单元数组如下

[
    {
        "type": "Keyword",
        "value": "var",
        "range": [
            0,
            3
        ]
    },
    {
        "type": "Identifier",
        "value": "answer",
        "range": [
            4,
            10
        ]
    },
    {
        "type": "Punctuator",
        "value": "=",
        "range": [
            11,
            12
        ]
    },
    {
        "type": "Numeric",
        "value": "2",
        "range": [
            13,
            14
        ]
    },
    {
        "type": "Punctuator",
        "value": "*",
        "range": [
            15,
            16
        ]
    },
    {
        "type": "Numeric",
        "value": "3",
        "range": [
            17,
            18
        ]
    },
    {
        "type": "Punctuator",
        "value": ";",
        "range": [
            18,
            19
        ]
    }
]

2. 语义分析

语义分析的目的是将分词得到的语法单元进行一个整体的组合，分析确定语法单元之间的关系。

简单来说，语义分析可以理解成对语句（statement）和表达式（expression）的识别。

语句，一个具备边界的代码区域。相邻的两个语句之间从语法上讲互不影响。比如： var a = 1; if(xxx){xxx}
表达式，指最终会有一个结果的一小段代码，它可以嵌入到另一个表达式中，且包含在表达式中。比如：a++， i > 0 && i< 6

语义分析是一个递归的过程，它会将分词分析出来的数组转化成树形的表达形式。同时，会验证语法，语法如果存在错误的话，会抛出语法错误。

AST的具体应用

文章一开始就说到了，babel，webpack，css预处理，eslint等都应用到了AST树，那么AST到底做了一个什么样的角色呢！？下面我们就来看一下。

首先看一下babel工作原理的实现。

babel实现原理

babel是一个javascript编译器，用来将es6语法编译成es5

babel的工作可以分为3个阶段：

第1步解析（Parse）

通过解析器babylon将代码解析成抽象语法树

第2步转换（TransForm）
通过babel-traverse plugin对抽象语法树进行深度优先遍历，遇到需要转换的，就直接在AST对象上对节点进行添加、更新及移除操作，比如遇到箭头函数，就转换成普通函数，最后得到新的AST树。

第3步生成（Generate）
通过babel-generator将AST树生成es5代码

vue模板编译过程

Vue 提供了 2 个版本，一个是 Runtime + Compiler ，另一个是 Runtime only 的，前者是包含编译代码的，会把编译的过程放在运行时做，后者是不包含编译代码的，需要借助 webpack 的vue-loader把模板编译render函数。不管使用哪个版本，都有一个环节，就是将模板编译成render函数。

下面我们分析下vue模板的编译过程，这也是vue源码实现中非常重要的一个模块。 vue模板的编译过程分为3个阶段

第1步解析（Parse）

const ast = parse(template.trim(), options)

将模板字符串解析生成 AST,这里的解析器是vue自己实现的，解析过程中会使用正则表达式对模板顺序解析，当解析到开始标签、闭合标签、文本的时候都会有相对应的回调函数执行，来达到构造 AST 树的目的。

生成的AST 元素节点总共有 3 种类型，1 为普通元素， 2 为表达式，3为纯文本。下面看一个例子

<ul :class="bindCls" class="list" v-if="isShow">
    <li v-for="(item,index) in data" @click="clickItem(index)">{{item}}:{{index}}</li>
</ul>

上面模板解析生成的AST树如下：

ast = {
  'type': 1,
  'tag': 'ul',
  'attrsList': [],
  'attrsMap': {
    ':class': 'bindCls',
    'class': 'list',
    'v-if': 'isShow'
  },
  'if': 'isShow',
  'ifConditions': [{
    'exp': 'isShow',
    'block': // ul ast element
  }],
  'parent': undefined,
  'plain': false,
  'staticClass': 'list',
  'classBinding': 'bindCls',
  'children': [{
    'type': 1,
    'tag': 'li',
    'attrsList': [{
      'name': '@click',
      'value': 'clickItem(index)'
    }],
    'attrsMap': {
      '@click': 'clickItem(index)',
      'v-for': '(item,index) in data'
     },
    'parent': // ul ast element
    'plain': false,
    'events': {
      'click': {
        'value': 'clickItem(index)'
      }
    },
    'hasBindings': true,
    'for': 'data',
    'alias': 'item',
    'iterator1': 'index',
    'children': [
      'type': 2,
      'expression': '_s(item)+":"+_s(index)'
      'text': '{{item}}:{{index}}',
      'tokens': [
        {'@binding':'item'},
        ':',
        {'@binding':'index'}
      ]
    ]
  }]
}

第2步优化语法树（Optimize）

optimize(ast, options)

vue模板中并不是所有数据都是响应式的，有很多数据是首次渲染后就永远不会变化的，那么这部分数据生成的 DOM 也不会变化，我们可以在patch的过程跳过对他们的比对。
此阶段会深度遍历生成的 AST树，检测它的每一颗子树是不是静态节点，如果是静态节点则它们生成 DOM 永远不需要改变，这对运行时对模板的更新起到极大的优化作用。

遍历过程中，会对整个 AST 树中的每一个 AST 元素节点标记static和staticRoot（递归该节点的所有children，一旦子节点有不是static的情况，则为false，否则为true）。

经过该阶段，上面例子中的ast会变成

ast = {
  'type': 1,
  'tag': 'ul',
  'attrsList': [],
  'attrsMap': {
    ':class': 'bindCls',
    'class': 'list',
    'v-if': 'isShow'
  },
  'if': 'isShow',
  'ifConditions': [{
    'exp': 'isShow',
    'block': // ul ast element
  }],
  'parent': undefined,
  'plain': false,
  'staticClass': 'list',
  'classBinding': 'bindCls',
  'static': false,
  'staticRoot': false,
  'children': [{
    'type': 1,
    'tag': 'li',
    'attrsList': [{
      'name': '@click',
      'value': 'clickItem(index)'
    }],
    'attrsMap': {
      '@click': 'clickItem(index)',
      'v-for': '(item,index) in data'
     },
    'parent': // ul ast element
    'plain': false,
    'events': {
      'click': {
        'value': 'clickItem(index)'
      }
    },
    'hasBindings': true,
    'for': 'data',
    'alias': 'item',
    'iterator1': 'index',
    'static': false,
    'staticRoot': false,
    'children': [
      'type': 2,
      'expression': '_s(item)+":"+_s(index)'
      'text': '{{item}}:{{index}}',
      'tokens': [
        {'@binding':'item'},
        ':',
        {'@binding':'index'}
      ],
      'static': false
    ]
  }]
}

第3步生成代码

const code = generate(ast, options)

通过generate方法，将ast生成render函数

with(this){
  return (isShow) ?
    _c('ul', {
        staticClass: "list",
        class: bindCls
      },
      _l((data), function(item, index) {
        return _c('li', {
          on: {
            "click": function($event) {
              clickItem(index)
            }
          }
        },
        [_v(_s(item) + ":" + _s(index))])
      })
    ) : _e()
}

Prettier实现原理

通过上面对babel实现原理和vue模板的编译原理可以看出，他们的实现有很多相同之处，都是先将源码解析成AST树，然后对AST树就行处理，最后生成想要的东西。

Prettier的实现同样是这样，首先依然是将代码解析生成AST树，然后是对AST遍历，调整长句，整理空格，括号等，最后输出代码，这里就不赘述了。

小结

我们分析了Babel原理、vue模板编译过程、Prettier原理，这里我们简单总结一下。
如果把源码比作一个机器，那么分词过程就是将这台机器拆分成一个个零件，语义分析过程就是分析每个零件的位置以及作用，然后根据需要对零件进行加工处理，最后再组装成一个新的机器。

AST还能做什么

那么工作中我们能使用AST做些什么呢？！

这里就要发挥想象了，看看我们日常工作中有什么需求是可以通过AST开发个工具来解决。
比如，可以通过AST可以将代码自动转成流程图；
或者根据自定义的注释规范，通过工具自动生成文档；
或是通过工具自动生成骨架屏文件。

原文链接：https://juejin.cn/post/6844904019505184776

WSGI与ASGI的区别与联系

Tue, 12 Oct 2021 13:53:07 +0800

什么是WSGI

CGI（Common Gateway Interface，通用网关接口），定义客户端与Web服务器的交流方式的一个程序，例如正常情况下客户端发送过来一个请求，根据HTTP协议Web服务器将请求的内容解析出来，经过处理会后，再将返回的内容封装好。例如服务器返回一个HTML页面，并且根据HTTP协议构建返回内容的响应格式，涉及到TCP连接、HTTP原始请求和相应格式都是由一个软件来完成，这个程序就是CGI。

那么WSGI（Python Web Server Gateway Interface，WSGI）Web服务器网关接口，是为Python语言定义的Web服务器和Web应用程序或框架之间的一猴子那个简单而且通用的接口，从语义上理解，WSGI为了解决Web服务器与客户端之间的通信问题而产生的。并且WSGI是基于现存的CGI标准而设计的，同样是一种程序。

WSGI区分为两部分，一种为服务器或网关，另一种为应用程序或应用框架，所谓的WSGI中间件同时实现了API的两方，即在WSGI服务器和WSGI应用之间起调解作用：从WSGI服务器的角度来说，中间件扮演应用程序，而从应用程序的角度来说，中间件扮演服务器。中间件具有的功能有：

重写环境变量后，根据目标URL，将请求消息路由到不同的应用对象。
允许在一个进程中同时运行多个应用程序或应用框架。
负载均衡和远程处理，通过在网络上转发请求和相应消息。
进行内容后处理，例如应用样表。

WSGI就是基于Python的以CGI为标准做一些扩展。

什么是ASGI

WSGI 规范自诞生以来应用广泛，在作为 Python 框架和 web 服务的选择上拥有非常好的灵活性。但，因为是针对 HTTP 风格的请求响应模型做的设计，加上越来越多不遵循这种模式的协议逐渐成为 web 编程的标准之一，比如说，WebSocket。所以需要新的改变。

ASGI 尝试保持在一个简单的应用接口的前提下，提供允许数据能够在任意时候、被任意应用进程发送和接受的抽象。

它同样描绘了一个新的，兼容 HTTP 请求响应以及 WebSocket 数据帧的序列格式。允许这些协议能通过网络或本地 socket 进行传输，以及让不同的协议被分配到不同的进程进行处理。

目的

介于网络协议服务和 Python 应用之间的标准接口，能够处理多种通用协议类型，包括 HTTP、HTTP2 和 WebSocket。在 WSGI 上进行拓展，并最终取代它。在设计上还是包含了 WSGI 到 ASGI 以及 ASGI 到 WSGI 的转换器，目的是为了使 HTTP 协议的编写更为容易。

总览

SGI 由三个不同的组件构成：协议服务、频道层（channel layer）、应用代码。频道层是这个实现中最重要的部分，它能同时对协议服务和应用提供接口。

一个频道层对协议服务、应用服务提供一个 send 的可调用方法，该方法接受 channel name、message dict 以及一个 receive_many 方法作为参数。receive_many 方法接受 channel name 的 list 作为参数，返回指定频道的下一条可用的消息。

所以，相较于在 WSGI 上，我们将协议服务直接指向应用，在 ASGI 里，我们将协议服务和应用同时指向一个频道层的实例。它的目的是让应用服务和协议服务总是运行在不同的进程或者线程中，并通过频道层进行通信。

区别

总体来说就是ASGI对于WSGI原有的模式的支持和WebSocket的扩展，即ASGI是WSGI的扩展。

ubuntu下screen的使用

Fri, 17 Sep 2021 11:01:59 +0800

关掉xshell之后执行的脚本也随之停止，我们可以使用screen命令，来让保证退出ssh之后程序继续在后台跑。

利用SSH远程连接服务器，运行程序需要保证在此期间窗口不能关闭并且连接不能断开，否则当前窗口所运行的任务就被杀死。

参考GNU's Screen 官网：GNU's Screen

主要使用

1. 安装
首先可以先查看是否安装screen，通过命令

screen -ls

若出现：

The program 'screen' is currently not installed. You can install it by typing:
sudo apt install screen

说明尚未安装，安装提示，通过下面的命令安装screen

sudo apt install screen

2. 创建新建窗口

可直接通过命令screen新建一个窗口，并进入窗口。但通过这种方式新建的窗口没有名字，只有系统分配给它的一个id。当需要恢复窗口时，只能通过id号来恢复。
通过命令screen -S name，这样就可以新建一个名字为name的窗口，同样系统也会分配给它一个id，当恢复该窗口时既可以通过id号也可以通过窗口名。

3. 分离会话
退出当前新建的窗口，通过快键键Ctrl+A+D实现分离，此时窗口会跳出[detached]的提示，并回到主窗口。

4. 恢复会话窗口
首先查看当前有哪些screen窗口，通过命令：

screen -ls

将列出窗口列表。

由以上可知，当前有两个窗口，其中test窗口已经被杀死，test2窗口分离。可以通过以下命令恢复test2窗口：

screen -r test2

或

screen -r 27582

这样就返回了test2窗口

5. 通过命令杀死会话窗口：

kill -9 threadnum

注意此处只能通过id号来杀死窗口。

6. 通过命令清除死去窗口

screen -wipe

这个命令将自动清除所有处于dead状态的窗口

centos通过配置ssh-key实现github连接

Fri, 27 Aug 2021 09:41:34 +0800

最近github更新了策略，原来是用密码的方式进行代码push、pull的方法被禁掉了。

尝试git操作时，会有下面的提示：

remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.

所以，后面应该转向使用access token的方式进行代码管理。

1、生成ssh-key，填入自己的邮箱

ssh-keygen -t rsa -C "xxxxxx@126.com"

2、进入ssh目录

cd ~/.ssh

3、查看文件

ls

会看到列举出了有id_rsa、id_rsa.pub。

4、复制一下id_rsa.pub文件内容

cat id_rsa.pub

5、打开github中的SSH and GPS keys选项，新增SSH key，添加完成需要再次输入github密码验证。
6、在自己的终端测试一下吧，使用 ssh -T git@github.com

ssh -T git@github.com
Hi xxxxxx! You've successfully authenticated, but GitHub does not provide shell access.

这样就成功了~

JavaScript中undefined与null的区别

Thu, 19 Aug 2021 09:32:21 +0800

大多数计算机语言，有且仅有一个表示"无"的值，比如，C语言的NULL，Java语言的null，Python语言的None，Ruby语言的nil。

有点奇怪的是，JavaScript语言居然有两个表示"无"的值：undefined和null。这是为什么？

一、相似性

在JavaScript中，将一个变量赋值为undefined或null，老实说，几乎没区别。

var a = undefined;
var a = null;

上面代码中，a变量分别被赋值为undefined和null，这两种写法几乎等价。

undefined和null在if语句中，都会被自动转为false，相等运算符甚至直接报告两者相等。

if (!undefined) 
   console.log('undefined is false');
// undefined is false

if (!null) 
   console.log('null is false');
// null is false

undefined == null 
// true

上面代码说明，两者的行为是何等相似！

既然undefined和null的含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加JavaScript的复杂度，令初学者困扰吗？Google公司开发的JavaScript语言的替代品Dart语言，就明确规定只有null，没有undefined！

二、历史原因

最近，我在读新书《Speaking JavaScript》时，意外发现了这个问题的答案！

原来，这与JavaScript的历史有关。1995年JavaScript诞生时，最初像Java一样，只设置了null作为表示"无"的值。

根据C语言的传统，null被设计成可以自动转为0。

Number(null)
// 0

5 + null
// 5

但是，JavaScript的设计者Brendan Eich，觉得这样做还不够，有两个原因。

首先，null像在Java里一样，被当成一个对象。但是，JavaScript的数据类型分成原始类型（primitive）和合成类型（complex）两大类，Brendan Eich觉得表示"无"的值最好不是对象。

其次，JavaScript的最初版本没有包括错误处理机制，发生数据类型不匹配时，往往是自动转换类型或者默默地失败。Brendan Eich觉得，如果null自动转为0，很不容易发现错误。

因此，Brendan Eich又设计了一个undefined。

三、最初设计

JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

Number(undefined)
// NaN

5 + undefined 
// NaN

四、目前的用法

但是，上面这样的区分，在实践中很快就被证明不可行。目前，null和undefined基本是同义的，只有一些细微的差别。

null表示"没有对象"，即该处不应该有值。典型用法是：

（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。

Object.getPrototypeOf(Object.prototype)
// null

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

var i;
i // undefined

function f(x){console.log(x)}
f() // undefined

var o = new Object();
o.p // undefined

var x = f();
x // undefined

本文转载自：https://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html