大前端学习–两个多月来的收获与进步 学习总结

时间:2020-7-29 作者:admin


两个多月来的收获与进步有多少

文章内容输出来源:拉勾教育大前端高薪训练营

作为拉钩大前端课程的第一期学员,我已经学了2个多月了,课程质量和教学水平如何不用再重复了,之前在拉勾教育大前端高薪训练营 心得体会+学习笔记这篇文章里已经说过了。这两个月来有很多人向我打听这个课程如何,我都给予推荐态度。市场上的前端网课那么多,然而真正有难度、有深度的课程,少之又少,拉勾教育的课程我是认可的。


2020年有件一直压抑着我的事情,这周末应该算是结束了吧,所以心情有点愉悦,下周准备加大马力学习了。
今晚来记录一下这两个多月来的收获与进步,好记性不如烂笔头,我习惯了隔段时间就随笔写一写自己的状态,也是为了以后复盘和回忆的时候,有迹可循。

我打算将最近学习的知识分为“内功”和“外功”两类,来对这两个月自己的学习收获与进步 进行总结。

一、外功

指肉眼可见的get,所见即所得的实用技能。

1. ES语法知识、特性

以前只会一些简单的JS也能写出大部分代码,但是最近学到了ES的新特性后,写程序时,就只想用越简单越新的语法,让自己成为一个走在时尚前沿的girl儿😛😛😛😛。比如说我现在都很少用三目运算符了,尽量用?.。数组处理时,大脑会迅速判断一下every/some/find/findIndex/map/forEach/filter哪家强。字符串相加也很少用了,都是反引号套起来,少的字符就pad一下。偶尔在写一些工具方法时,还会用到函数式编程秀一秀。写代码真是让人越来越快乐了😏

2. webpack的插件使用

我之前做的移动端项目中打包的时候,每次要在打包后将image文件夹和libs文件夹从public拷贝到dist目录中,而现在系统的学习了webpack之后,我知道原来使用copy-webpack-plugin插件就可以自动拷贝文件到dist目录了,而且用起来还贼简单,new CopyWebpackPlugin({ patterns: ['public']})一下就行了。CopyWebpackPlugin对我来说可是个大收获,要知道这半年里我打包后一直是手动拷贝的啊😭

当然Webpack功能之强大,不是我一个星期就能够全面掌握和运用自如的,但是我相信在以后遇到Webpack的项目时,不会再缩手缩脚不知所措了。

3. ESLint的使用

我们公司的项目一直就配有ESLint,刚来公司时,同事大佬们就让大家在电脑上编辑器里安装eslint插件,当时不懂,但听话,我的vscode安装了下图这个插件,写代码不规范会有红的黄的波浪线提示。
大前端学习--两个多月来的收获与进步 学习总结
上个月学了好几个Lint之后,我才知道eslint是可以在.eslintrc.js里面配置的,如果项目里没有安装eslint,就执行一下yarn eslint --init就好,我就给我新接手的项目安装了eslint,感觉自己so cool😌写代码都有安全感了~~
来了一位新同事,我打开看他提交的代码,一片红,有点吓人⊙﹏⊙|||我就去问他的编辑器是不是没有安装eslint插件,他说是的,我就让他去安装一下,他之后就发现了自己的代码里原来有那么多报红的不规范啦😅😅
之后我还向跟我联调的后端同事解释啥是eslint,说“lint就是检测代码的工具,eslint就是检测es代码的,es就是我们前端的js语法代码,还有csslint,就是检测css代码的,sasslint就是检测sass代码的。你们后端有没有Javalint啊?”,他说没有,嗯···好吧,也对,Java是编译型语言,而且语法又那么严,确实不需要lint,编译器本身就可以检测了。过了几天后,领导给我们开座谈会,就提到了前端的一些lint工具,让我们要善于使用这些工具来优化自己的编码,我看到我那位后端同事朝我会心一笑(~ ̄▽ ̄)~

4. Plop的使用

Plop是个自动化工具,当时还学了grunt、gulp,但是就plop在实际开发中用上了,可以用来根据模板创建组件,对我这个刚进入新的项目中的人来说,非常实用!因为我每周要开发3~5个相似结构的模块,如果总是复制粘贴替换,那要累死了,Plop拯救了我(:)~
具体细节我当时还特地为Plop写了篇博客记录了下来,看这儿:前端自动化构建工具–Plop


二、内功

指对编程思想、能力和态度的提升,是一种潜移默化的力量。

1. 拓宽边界 提高编码

学了函数式编程之后,才发现原来程序还可以这么写:)多层的函数调用,可以通过柯里化、组合,将函数降维,作为参数,作为返回值,代码更简洁了。以前写代码总是不注意细节,只要能完成功能即可,但这样是不好的,程序执行效率低,复用性低,自己都不想看第二遍。作为一个开发者,是有责任和义务将代码写好的。在未见识过好代码之前,写出丑陋的代码情有可原。但自从我见识到了函数式编程的写法,理解了组合的思想,意识到这种编程风格比我当下写的代码优秀太多,就不愿再保持原状了。可能短期内无法改变,但是每次写代码的时候,尽量去写出高效简洁的代码,长此以往,质变会引发量变。

2. 阅读源码 受益多多

最近两三个星期主要就是在看Snabbdom源码和Vue源码,Vue源码看的更多一点,并且也在浏览器上调试过几遍。刚开始看视频学习的时候,有点看不进去,感觉太枯燥了。但是看完视频后,用几个demo在浏览器上断点调试后,整个渲染流程跑通一遍,就大致知道Vue是怎么进行数据驱动视图更新的了,之后又调试了几遍,是有针对性的调试,比如响应式数据发生变化时是怎么更新视图的,set、delete是怎么执行的,nextTick内部做了什么,模板是怎么转化成render函数的···这些问题都在源码中找到了答案,并且对以前不太理解的概念有了更深刻的理解。比如说闭包,在调试Vue源码的时候,可以看到浏览器的开发人员工具里面的Scope中的Closure里面的那么多的变量,都是在运行过程中产生的闭包变量,这些变量一直活跃到某个模块或者函数里。还有就是之前想不通的模板明明是字符串,最终咋变成了函数的,看了源码后才知道原来是通过Function构造函数生成的。

上周二晚上帮同事看一个带增删改查的树组件,她进行树上的操作,请求了后端接口后,树的数据并没有更新,所以喊我过来帮她一起看看。她的代码都是已经写好了的,但是增删改接口请求后,树的数据没有正确更新,于是我就帮她打断点调试。
其实以前我很少用断点调试,因为不怎么会用,而且经常点着点着就进入了React源码里或者是没有SourceMap的文件里,就让人很郁闷。然而最近调试了一个多星期的Vue源码后,我发现Chrome的断点调试功能其实很好用啊:-)。
我帮她在添加请求接口后的函数中打上断点后,然后单步执行看看究竟是哪里没有把数据更新到树上,看到是树中的节点没有判断是否有子节点就把新添加的节点作为children给赋值上去了,这样当然不对了,就把原有的子节点丢失了。于是我分情况进行子节点处理,如果原有子节点,就将新增的节点push进children里去,如果没有子节点,就将新增的节点作为原节点的children。
没想到果然就可以了,此时明白了数据驱动视图真的是太赞了,我这边在代码里将数据更新进去,树上的节点马上就更新了,当时我的脑子里就联想到了Vue中的数据响应式更新的代码,当数据更新时,属性的set方法中的Observer对象会通知Watcher更新视图···
然后我继续调试时,不小心进入了React的源码中,突然发现这些React的源码我也能看得懂是在做什么了,以前工作看到时总是想回避这些东西,现在反而感觉清晰明了。呵呵,阅读Vue源码让我的视野更广阔了,对框架响应式的理解也更深刻了,更重要的是,读代码的能力变强了😏

3. 善于思考 求知若渴

上周一下班时在地铁上和微信群里的同学们讨论一个关于Promise的面试题,在手机上打一些变量名、方法名可真是痛苦哎。在快到站的时候,我准备起身下车了,结果群里有个同学居然私聊我问我他的想法对不对,然后我就继续打字回复他then、catch之类的东东,结果···我就坐过站了😭😭😭我都准备好下车了,结果居然因为打字忘记了下车,嘤嘤嘤~这还是我头一次在南京坐地铁坐过站😢

现在看到群里有提问的,如果自己知道,就会主动去回答,如果不知道,就会先去Google搜一搜问题,然后听听别人的回答,如果没懂,我就跟着问一问。如果别人问的是源码里的问题,我还会去源码里看看这一部分的代码,然后加入讨论。
最近同事找我帮忙我也特别有耐心了,我觉得靠自己的知识储备帮助别人解决问题,是一件特别自豪的事情。上周晚上花了俩小时帮我同事看那个树组件的问题,她第二天还请我喝饮料了,怪不好意思的😊😊😊

这种一起学习 一起交流讨论的学习状态,让我感觉我不是一个孤军奋战者,我有一群前端小伙伴共同面对着前端世界中的种种奇奇怪怪的问题。


大前端学习--两个多月来的收获与进步 学习总结

对待自己喜欢的事情:
如果你幸运的话,可以获得天赋
如果不幸运的话,可以获得快乐

保持无感,不计成败,放手一搏。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。