Coding-everyday

# 全量 eslint 检查

husky+lint-staged 的增量检查不会检测出变量冲突的问题，因为它只检查有变动的文件，不是全量，所以还要设置钩子全量检测

# echo "">tmp.js && node tmp.js

用BK插件执行nodejs脚本总是报错，可以用bash脚本echo "">tmp.js，然后node tmp.js来执行

BK插件中不要写太多js/bash脚本，因为不易管理，不够原子化，也无法复用。可以将核心方法发布成npm包，从npm包中导入方法并使用.

# 打印构建信息

之前逻辑：

  1. 发布时同时生成version.js，内容为window.igameVersion= {}
  2. index.html添加version.js请求

浏览器端

  1. index.html请求version.js
  2. vconsole获取version，并显示

改造第一版：

去掉version.js请求，直接将window.igameVersion= {}放到index.html中。

改造第二版：

直接在index.html中进行相关日志的打印，不用vconsole插件。 缺点是：打印信息人人可见，无区分性。

# registry

$ npm i @tencent/uni-plugin-light -D --registry=https://mirrors.tencent.com/npm/

# CI

持续集成强调开发人员提交了新代码之后，立刻进行构建、测试。根据测试结果，确定新代码和原有代码能否正确地集成在一起。

# vuex

vuex中的getters中不要引用外部不稳定的变量，getters有缓存，且只有依赖的state数据变化时才会更新。

# webpack生态中，推荐用ts-loader还是@babel/preset-typescript

推荐 @babel/preset-typescript

# 截图与总结思考

如果只是截了个图，而没有提炼出文字，那么是白截的。没有总结，更别提自己的思考了。没有自己的思考是记不住的，没法运用到实际的

# Vue的设计原则

  • 易用
  • 灵活
  • 高效
  • 渐进式的js框架

# @rollup/plugin-commonjs需要放在@rollup/plugin-babel插件前面

文档地址：https://github.com/rollup/plugins/tree/master/packages/babel#using-with-rollupplugin-commonjs

# 通用化、配置化是自动化的手段

# 高度自动化

# pageX/pageY

pageX 规定了事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量。进入 border 的时候，pageX 或 pageY 是负数。

pageY=clientY+滚动条距离（document.documentElement.scrollTop）,只有document.body滚动的距离会被加到pageY中，子元素的滚动距离不算，即子元素滚动了，但是document.documentElement.scrollTop=0，那么pageY和clientY还是相等的。

# sortable-chosen/sortable-ghost

h5的拖拽有两个特殊class

# 如何看待typescript使得前端开发变成强类型语言的开发，增加了大量工作量，改变了javascript的特性的言论？

首先，TypeScript 不是“强类型”语言，而是“弱类型”语言。同时 TypeScript 是“静态类型”语言。

# TypeScript 是静态类型

类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。

动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JavaScript 是一门解释型语言，没有编译阶段，所以它是动态类型，以下这段代码在运行时才会报错：

let foo = 1;
foo.split(' ');
// Uncaught TypeError: foo.split is not a function
// 运行时会报错（foo.split 不是一个函数），造成线上 bug

静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型，这段 TypeScript 代码在编译阶段就会报错了：

let foo = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错（数字没有 split 方法），无法通过编译

# TypeScript 是弱类型

类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型。

以下这段代码不管是在 JavaScript 中还是在 TypeScript 中都是可以正常运行的，运行时数字 1 会被隐式类型转换为字符串 '1'，加号 + 被识别为字符串拼接，所以打印出结果是字符串 '11'。

console.log(1 + '1');
// 打印出字符串 '11'

其次，“增加了大量工作量”也是不准确的。

ts 是 js 的超集。用 ts 开发相比于 js，增加了多少工作量完全是可选的。你完全可以配置一份很宽松的 tsconfig，使得 ts 开发不会增加工作量。当然此时从类型系统中获得的收益也就变少了。

而且即使你不用 ts 开发，也已经享受到了 ts 社区的贡献了——在你编写 js 时的语法提示全是 d.ts 的功劳。

最后，ts 和 js 不是势不两立的，而是各司其职。很多场景也没必要强行上 ts。

← 浅谈个人前端基建 →