jingzhiMo

之前一段时间就大概把这个轮子弄好了，但是一直没有整理成文章。今天完善一下使用这个轮子的例子，顺便发现之前的几个bug，一同修复。看来后面还是需要把测试用例补充，否则很难避免使用起来遗漏的地方。目前这个工具托管在[friendly-query](https://github.com/jingzhiMo/friendly-query)，欢迎大家尝试使用并提issue。 ## 背景 通常路由库可以处理从：`/path1` => `path2`的跳转切换不同的页面；但是对`/path1?foo=1`切换到`/path2?foo=2`这种情况支持不是很好。如果页面对应的参数不增加到url中，用户在页面更改部分参数后，刷新页面，用户之前选择的这一部分参数就会被重置而不会选中后的页面处理。 在开发的过程中，想实现页面的部分表单参数同步到url的query参数； 1. 当用户在浏览器点击前进或者后退按钮，则需要监听`popstate`的事件，然后根据回调事件来监听参数发生变化，根据更改后的url参数，再进行处理；参数发生改变可能只影响一部分，通常只需要触发该部分的回调就可以了； 2. 而且url的参数都是字符串，而实际可能还需要把字符串转换为需要的复杂数据类型；异步请求数据的时候，可能也需要把复杂的数据类型转换为字符串类型。 总体来说，这个工具就是解决以上两个问题 ## 应用过程  上面图主要描述了三种情况： 1. 初始化进入页面 `enter page` 2. 页面数据发生改变`update data` 3. 用户点击浏览器前进/后退按钮`popstate` ### 初始化进入页面 * 初始化进入页面的时候，需要调用`friendly-query`的`init`方法生成实例 *...

这篇文章会先从最基础的vue组件的生命周期开始阐述，后续结合`keep-alive`与`vue-router`来梳理一下平常用到的生命周期hook，加强印象。 ## vue 组件 这是一个老生常谈的问题，有时候回顾一下，会有另外的收获；先引用官方的图：  *图片引用地址： https://cn.vuejs.org* vue的生命周期分几类： * create * mount * update * destroy * ... ### 整体初始化过程 图中简单描述了生命周期过程，我们从代码上面看一下初始化的过程 ```js // https://github.com/vuejs/vue/blob/dev/src/core/instance/init.js // 截一段相对关键的代码，加上简单的注释 // @function...

最近弄了一个轮子，是用来统计 git 代码行数还有文件数目的一些占比，把这部分数据可视化到图表。[仓库链接](https://github.com/jingzhiMo/visualize-commit) ## 背景 在造这个轮子之前，曾经在 gitlab 上面看到一部分统计的数据，发现只是统计了 commit 的提交数量、文件占比的比例；对于代码行数的纬度统计比较少。因此基本的需求就出来了。 ## 研发思路 1. 分析脚本：统计仓库的代码行数，分析所有文件的提交数据与文件类型 2. 呈现静态页面：可视化分析脚本的数据 3. 发布 npm 包：方便用于命令行执行生成分析数据 ## 分析脚本 因为需要分析到每个文件行数的修改细节，因此这一部分一定需要 git 相关命令进行统计，目的是统计文件的每一个用户的提交行数；面向谷歌编程的我，找到以下命令： ```bash $ git ls-files ${fileName}...

这篇文章主要是读 [ts 入门教程](https://ts.xcatliu.com/) 与 [ts 中文网](https://www.tslang.cn/docs/home.html) 所记下来的一些笔记，作为后面学习的一个参考点；看完文章后，对知识点做一定的提取；但是描述起来比较简单，主要针对部分关键知识点；如果需要系统的学习的话，就需要把教程看了。 ## 类型声明 * 声明基础数据带有类型： ```ts // 声明数字 let num: number num = 1 num = 'str' // error // 声明字符串 let str: string...

## 背景 最近项目组的的后端业务开始拆分，把部分用户与业务需求拆分；在原来的时候，用户的请求与业务请求都是由同一个后端项目支持；现在由于子项目不断扩充，不同的子项目之间的账号信息需要同步。 ## 分析 ### 更改前  步骤： 1. `request user`， 前端向后端请求用户信息（忽略登录过程） 2. `response token`，后端返回用户的token；前端拿到token存储到 **storage** 3. `req/res` 前后端进行业务数据的交流 ### 更改后  步骤： 1. `request user` 前端`a.example` 向`user.example`用户后端请求 用户信息（忽略登录过程）...

## 前言 自从工作之后就极少写文章了，因为空闲时间没这么多，到了周末又想轻松两天，但是周末其实并不轻松，或许归根到底最后就是一个字：**懒**！这周回家之后，感觉总算可以静下心来做点东西，把之前在项目用ng1.x按需加载的实现整理一下。 ## 需求背景 最近工作用到`angularJs`，也就是`ng1.x`版本开发一个网站，这个项目其中用[ui-router](https://ui-router.github.io/ng1/)来控制路由，[webpack](https://webpack.js.org/)来构建项目。**有个比较致命的痛点，ng1.x官方不支持懒加载！** 这个项目经过webpack打包之后主要形成两个js文件，一个是`vendor.js`，是引入的`node_modules`的公用文件，另外一个是`app.js`，是自己写的js文件。 处理之前项目的js入口文件大概是这样子的； ```js // 引入主要工具和框架 import angular from './angular' import 'angular-ui-router' // 引入一些工具库 import tool1 from './tool1' // 引入ng的一些指令，组件，service等等 import aComponent from './a.component' import...