Attack on Life ⚔️

前后端分离的今天，后台提供的API一般都是JSON格式数据，但要知道这只是一种格式选项，其它有很多，比如XML。并不是任何服务通讯，前后端通讯都会使用JSON，一些服务我们也会明确使用XML而非JSON。因此对于两种格式的区别需要明晰，这样才能按需采用。

定义

了解一个技术先从命名及发音开始，具体JSON，XML的介绍见WIKI

JSON：JavaScript Object Notation

Git越玩越喜欢，但有些底层的认识还不系统全面，比如快照是什么，Git又是如何存储这些快照的，关于这些机理，这里Mark下。

快照记录

• Git在每次commit时会对仓库中所有文件进行扫描，如果某文件发生变化，则会将新文件生成一个Blob二进制文件，记录当前Commit时文件的所有内容，如果文件没有变化，则记录一个链接指向之前存储的文件

• 对于单次commit本身有个索引存储，利用这个索引可以找到这些变化和没变化的文件

下图可以方便理解每个快照即版本的仓库情况

最近WEB遇到了两个问题，一个是JS报错SyntaxError: The URL must not contain a fragment，一个是window.btoa报错，经过调查都是编码问题，平时因为更多的使用框架从而折叠这部分的认知，因此这里Mark下。

错误截图

相关知识点

一直很喜欢Mac的Touch ID及Apple watch的解锁体验，但身为开发，日常还经常会使用到shell sudo，这时也会提示输入Mac密码，于是我在想是不是也可以用Touch ID及Apple watch实现授权呢，惊喜发现还真可以。

配置方式

注意：这里因为我要实现同时支持Touch ID及Apple watch，因此安装以下两个库，只需要一种的，安装目标库及配置即可。

1. 下载这两个仓库，推荐Git Clone方式

   • https://github.com/Reflejo/pam-touchID
   • https://github.com/biscuitehh/pam-watchid

2. install package

   在每个仓库目录下执行

   1 2	$ sudo make install

3. 编辑sudo配置，开启授权

1

$ sudo vi /etc/pam.d/sudo

SPA应用的优势本来是流畅化的类App体验，但是随着业务功能的增加，代码逐步变得臃肿，性能也会出现瓶颈，因此就进入一个课题-性能优化。

其中一个优化的手段就是降低渲染次数。

这里以React的实际代码为例，当然Angular，Vue类似。

无论是哪个JS框架，实际上都是动态渲染新Dom，而框架带来的组件化将整个页面切割为N个组件，因此渲染更新也就成了局部，但是如果使用不当就会出现重复渲染，多余渲染问题，所以对应就应该降低渲染次数，说白了就是只在该渲染时，该渲染的元素身上，执行渲染。

React下的具体优化措施

在玩Angular时候，会遇到这两个编译方式AOT，JIT，但是玩React时却不提及，难道是NG所独有的？当然No，玩java也会提及JIT。这里就聊下两者区别。

如有错误，欢迎斧正。

上定义

这里取Angular上的一段解释说明。

• JIT：just-in-time

  Just-in-Time (JIT), which compiles your app in the browser at runtime.

• AOT: ahead of time

  Ahead-of-Time (AOT), which compiles your app and libraries at build time.

随着围绕着Mac生态的外设越来越多，经常需要切换声音输入输出设备，GUI操作效率太低，于是借着周末时间，做个workflow来提升切换效率。

实现基础

调研了一番方案， 发现选择不多

• 命令行模块有个方案是switchaudio-osx，但不支持AirPlay，作者也不打算支持，改造的话需要C语言开发基础，为此放弃
• AppleScript+Shell，好处是环境Mac内置，无依赖，直接安装运行即可

最终选择了方案2，为此系统学习了下AppleScript，总算搞定，花费也就几个小时。

componentWillUnmount意味着组件即将销毁时触发该钩子，但假如用户直接关闭浏览器tab，则该钩子时是不会被触发的。

这个问题在特定的场景下需要考虑，比如我在做websocket相关开发时，场景是用户进入某详情页，即开启文章topic订阅，当用户切换到其它URL时，该文章订阅即取消，因此我将这个取消订阅的动作放在了componentWillUnmount中，但假如用户直接关闭TAB页，则程序无法知道，因此就会BUG。

Why?

直接关闭Tab意味着直接销毁该tab页的HTML，JS，CSS资源，因此react的lifecycle就更不会执行了，因此在实际开发中要意识到该钩子的局限性。

原生window beforeunload 事件

自己对于Alfred实在太爱，以至于一旦发现了自己的一个效率需求，就会研究Alfred的可行性，可行就立即寻找第三方的或者自己定制开发，直到今天，我也已经开发了16个workflow，经验贴也很多，给自己点个赞。

无论是自开发的还是第三方的，大部分我在日常会高频使用，这里share下，兴许可以帮到些朋友。

说明

点击workflow标题链接即可访问下载页面，下载页都会有介绍，因此这里不再赘述，仅以GIF动画展示主要功能。

Workflows

JS的基本数据类型在ES6到来时增加了Symbol基本类型，而ES6即ES2015发布也已经5年半时间。

但实际的开发中，我并没有使用过Symbol，因为在TS的语言环境下，我似乎更不考虑用它了，因为TS下有个枚举类型的存在。但认真学习调研后，结论是理解错了。

这里就mark下两者的区别，明晰区别，意义，才能更健康合理的使用。

TypeScript中的Enum

首先TS只是中间语言，开发语言，而TS最终还是要compile为JS，因此这个类型本身也只是一种包装。

比如我们定义这样一个枚举

1
2
3
4

enum Config {
  CSV,
  JSON
}