源码阅读

如何阅读源码

了解熟悉

了解熟悉项目的背景功能以及响应的 API。这步为了理解整个项目的功能做准备,也是为了后面重点看哪些模块做准备。

查看项目的 README.md 文件,有些项目会将设计文档和架构图放到 md 文件上。

查看项目整体的文件结构。比如

package.json:整个项目的入口文件、开发/测试/发布编译的各种命令,了解项目的依赖库,工具以及框架等。

webpack/gulp/rollup 配置文件:项目的工具配置入口文件以及编译之后的代码文件

知道一些默认命名的文件规则,比如

dist:表示编译后的源文件

src:源代码

static:静态文件

test:测试文件

上手

写写你对这个项目的一些疑虑,带着问题去看代码。

入口文件

以模块为单位开始阅读,阅读过程中带上之前的问题,加上自己的注释和理解。

读到某一块源码不理解,先试着网上找找相关的资料学习一下,实在找不到先标记放着回头再看。

技巧

在你阅读的过程中,代码片段很精巧的可以记录一下,或者尝试下有没有更好的方式去实现。

当不了解某个模块的作用时,看看测试用例。

学会给项目打断点。

知乎上推荐读的 js 库

组件库:Ant Designelement: Vue.js 2.0vant

日常开发用到的库:lodashunderscoredayjs

模板、集合:JHipstervue-element-admin

纯语言层面:JavaScript | MDN (mozilla.org)

不错的代码片段

vue-h5-template过滤器这块写的不错,但是vue-element-admin也是这样写的,但是在 main.js中 对 filter 文件进行处理,而vue-h5-template 则是在 filters 文件夹下,新建一个index.js 文件对 filters.js 进行处理 然后再 main.js 直接引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// src/filters/filter.js
/**
*格式化时间
*yyyy-MM-dd hh:mm:ss
*/
export function formatDate(time, fmt) {
if (time === undefined || '') {
return
}
const date = new Date(time)
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
const o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (const k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
const str = o[k] + ''
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
}
}
return fmt
}

function padLeftZero(str) {
return ('00' + str).substr(str.length)
}
/*
* 隐藏用户手机号中间四位
*/
export function hidePhone(phone) {
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}
1
2
3
4
5
6
7
8
// src/filters/index.js
import Vue from 'vue'
import * as filter from './filter'

Object.keys(filter).forEach(k => Vue.filter(k, filter[k])) // 这块是我看到我喜欢的

Vue.prototype.$formatDate = Vue.filter('formatDate')
Vue.prototype.$hidePhone = Vue.filter('hidePhone')
1
2
// src/main.js 
import './filters' // 最后再在 main.js 中引入

相关资料
阅读前端项目源码的正确姿势
作为一名前端开发人员,有哪些值得一读的js代码?
如何阅读大型前端开源项目的源码
经典万字长文前端面试题集锦+源码阅读

immer.js 实战讲解文档

精读《Immer.js》源码 - 知乎 (zhihu.com)

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.