源码阅读

如何阅读源码

了解熟悉

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

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

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

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

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

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

dist：表示编译后的源文件

src：源代码

static：静态文件

test：测试文件

上手

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

入口文件

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

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

技巧

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

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

学会给项目打断点。

知乎上推荐读的 js 库

组件库：Ant Design、element: Vue.js 2.0、vant

日常开发用到的库：lodash、underscore、dayjs

模板、集合：JHipster、vue-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 直接引入。

// 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')
 }

// 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')

// src/main.js 
import './filters'  // 最后再在 main.js 中引入

---

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

immer.js 实战讲解文档

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