最近公司 iOS 项目不忙,我也就加入了一个前端 Vue 项目帮帮忙,顺便学习 js 和 Vue。
这里不得不说,Element
组件库相当好用,对于我这样刚接触前端的上手也很快,轻轻松松搭起一个漂亮界面。本以为是国外团队开发,后来到 Github 查源码,才发现是饿了么出品,也是蛮佩服。
bug 就出在一个 Pagination
分页控件,设置 current-page
后,current-change
事件会偶然实效,回调函数得不到执行。经多次调试,确认问题一定是出在 Element
的 Pagination
分页控件内部。
于是乎开始调试源码,Element 的源码在 node_modules
中 element-ui 文件夹中。起初修改 node_modules/element-ui/packages/pagination/src/pagination.js
,无效。搜索一番得知,webpack
引入的是 lib 目录下的编译打包后的 js。遂修改 node_modules/element-ui/lib/pagination.js
,还是无效,Excuse me?后经过调试发现element相关代码都整合进了 lib 下的一个 element-ui.common.js
文件。修改这个文件中的 Pagination 部分即可正常调试了。
调试过程就不细展开了,只是确认源码确实存在 bug 而已,可以自行修复。这时突然想到,Element 可能不是最新,也许可以升级一下看看?抱着试试看的心情,买了一个疗程,哦不对,打开本项目的 package.json
,发现 "element-ui": "2.3.3"
,为什么是写死的2.3.3。。。。。。一查,最新的版本都到2.4.1了,而就在我 debug 过程中,2.4.2也出了。。。
element 版本改为"element-ui": "^2.4.2"
, 再执行更新
npm update element-ui
那个 bug 果然已经得到修复。想想要是我早一点升级 element-ui,也许就不会耽误这几个小时,但是,也不会学到后面的调试方法,不会接触到 Element 源码。对比一下,还是利大于弊的。
通过这次调试 bug,了解了组件源码是如何执行的,了解到了.sync 修饰符和双向绑定
this.$emit('update:title', newTitle)
最后,总结这2个多星期的前端学习,就3点:
- 做项目,可以接触很多前端技术点和框架,加快新技术上手速度
- 看官方文档,可以知道语言或框架的规范用法
- 看源码,能加深对技术和原理的理解。
附带两个有意思的 npm 命令
列出所有可升级版本的 package
npm outdated
输出当前项目中所有安装的 package
及其结构
npm ls