Attack on Life ⚔️

Chrome对普通用户仅仅个网页浏览器，但对开发者而言，称之为生产力工具也不为过。

最近出现的一次BUG，我无法复现，唯一判断出来的是用户在页面请求数据时，数据层面有问题，为印证这一点，需要知道当时用户的情况。于是，我委托业务对接人帮忙使用Chrome访问系统，下载下来了HAR文件，传给我，拿到文件后我很快进行了定位，并最终解决。

没错，划重点，HAR。这里就简单介绍下。

HAR

全称是HTTP Archive format, 一种文件格式，记录了网络请求信息。

HAR上传下载操作

开源虽免费，版本需谨慎。升级确实存在一定的风险，但如果清晰每次升级的点[fix/feat/breaking change]，这个风险也会随之降低，或者没有。同时长远来看技术始终要与时俱进的，尤其是在做产品迭代。

目前从事的WEB项目进入了一个新的迭代，于是借着周末的时间，进行下框架升级。

动机

升级本身不单单只是改变一些依赖模块的版本号，而是版本号背后的一些改变，功能或者性能，或者设计模式。

这里列举下我相对关注的一些地方

关心的几个点

在提交代码时会发现yarn.lock文件有这样的diff，多了一些integrity属性，有时又会删除一些。不明所以，这里就简单梳理下该属性。

作用

确保资源完整性[包版本，内容]，yarn down下来资源后，用计算出的integrity值与文件中的进行匹配，如果不一致，则安装失败。

最近参与部分后端开发，觉得后端的代码上有些乱，比如无用导入，无用变量，访问修饰符不合理等等，这类问题以前也吐槽了多次，但始终一直拖着没有去定标准，推进规范化。于是，趁着周末，下定决心搞一搞。

与Java不同的是，前端JS/TS部分，因为有Husky+Tslint控制，风格层面就可以有效保障，难道后端就不行吗？肯定也可以。

CheckStyle

用什么控制呢，关于技术选型，似乎毫无疑问，之前曾翻看ThoughtWorks的19年技术栈统计报告，对于代码风格控制这块，大多选择CheckStyle。

OK，随众

正如之前的文章所说，我很讨厌lodash,因为在明明可以原生高效实现的时候，用lodash表现出来的只是懒惰，不假思索与对JS基本功的不扎实。但是假如足够的清晰时，适当使用并没有问题，因为何必重复造轮子呢。

今天翻了下isEmpty这个函数的源码，因为对这个函数，之前存在一些误解。比如下面这样

1
2

console.log(_.isEmpty(1)); // true
console.log(_.isEmpty('1')); // false

isEmpty

官方文档这么写道

最近前端出现了性能问题，页面操作会越来越卡顿，最终导致内存溢出。元凶肯定就是开发人员-我们自己,而凶器呢-deepclone

比如有这样一个reducer

1
2
3
4

const updateDetailReducer = (state: IDetailState, action) => {
  const detail = _.cloneDeep(state);
  return { ... detail, ...action.params };
};

这个有问题吗？从结果来说确实没问题，因为它正常更新了状态。

一直对这三个概念，模糊不清，于是决定梳理下。

Method

A method is a function which is a property of an object. There are two kind of methods: Instance Methods which are built-in tasks performed by an object instance, or Static Methods which are tasks that are called directly on an object constructor.

一个方法就是一个函数，是对象的属性之一。有两种类型的方法：实例方法是由对象实例执行的内置任务，另一种是静态方法，在对象构造函数内直接调用的任务。

以上摘自MDN

今天花了点时间，研究了下Dash的使用，以前的使用还是不够系统和清晰，经过调整，打磨，进而提高效率和生产力。

注意，Dash Mac版付费，但iOS版免费。

功能点

1. 查询语言API

   作为一个前端er,经常查询HTML，JS的兼容性等，有了dash就可以很方便的查看。虽然只是简单的将MDN的文档爬了下来，但确实节约了大量的检索时间。

2. Annotation

   有时对于一些细节点，可以添加笔记加入自己的理解，写下来，就跟以前看书做笔记一样。

3. Snippet

   该功能，个人废弃不使用。

最近Team前端在合并代码中，出现了多次的代码丢失问题，于是，开始基于这个现象分析，最后制定了冲突处理流程

冲突处理流程

举个栗子

feat/xxx=>sprint出现了冲突。

断断续续才把这本书读完

这本书以菜谱的方式讲述了JS的关键点，学到了很多，Mark下

版本

1. ES是标准，JS是实现，我们网页中的JS是客户端执行，所以客户端即浏览器不同，对于JS，乃至HTML，CSS的支持也就不同。所以才有我们常说的兼容性问题，相同的JS在不同浏览器下的执行结果也不见得相同。
2. 因为现在有了TypeScript,Babel，我们在开发中实际上可以书写较新的ES，比如ES6，7，8，而利用TSC和Babel编译到目标JS版本，同时对于不支持的语法，加入polyfill

数字计算