js 带笔锋 签字版_重构转型前端——笔锋很朴实的入门随记

导语大前端时代来势如潮，给本来岗位就存在一些局限的重构们提供了很强的顺势而转的动力和环境。 这几个月，从js知识只会皮毛的幼儿园初识字母水平，到现在总算会自己提笔造句的一年级水平吧。当然还是需要老师review和帮忙修改代码。

基础概览：

(工作日常只负责纯静态页面的还原)

只有‘变量，数组，click,touch,if else,for’这些简单的知识储备；

对‘三目，正则，对象，参数’等了解，用的不熟悉；

‘闭包，cgi,ajax,http协议，网络安全知识’ 等只闻其名。

实践经历：

1. 上车前准备：

请组里的元老级前端开发——帅气身材好又nice且仅从名字就感到满满学识的——清华老师，系统地讲解了前端常用知识范围概况。(每天一个半小时，连续讲了三天)

包括有：

框架知识： zepto，seajs，requireJS普及；

内部资源：理财通前端的学习/规范/工具资源库；

底层介绍：理财通底层基础库的概览；

案例讲解：一个页面从头到尾的布局结构；

工具使用：登录态/上报/代理配置使用，bug调试等。

2. 拦车

(做重构时，看下该需求逻辑是否简单，即使已安排了js，也可自己揽下来，自己先尝试—— 其间可能会出现跟刚来的js小鲜肉抢活干的事情，因为他也想多做需求锻炼锻炼)：

开端是理财通话费充值中一个简单的优化(来自设计提的日常bug单中——把蓝色的‘确认修改’按钮默认置灰，有改动则恢复可点蓝色，感觉已经很难找到更简单的了，于是想着不管怎样都一定要做出来)。

step1 找到文件: 打开相应的shtml和js文件

分析——默认不可点，只要有一个信息变更，按钮就变蓝色

(即：变更前后页面中的各项可变信息对比)；

step2 先易后难: 找到对应的按钮, 给按钮默认加上一个‘不可点’状态(这步真是最轻松了)；

step3 看注释: 跟看岛国文差不多，只有汉字能看得懂，其它的大写小写一堆堆的字母看起来陌生而神秘，完全不知道是做什么用的，所以只能看到看得懂的中文注释和一些看得懂的英文单词，连蒙带猜的感觉一下大概这段是做什么的；

step4 找相关，思考: 刚好看到一段有 'day,plan_fee,plan_name'(像是日期，名称，金额等)等字眼好像跟我要的东西相关，但是这段里面有个‘varStorage’的词不是很懂(通篇下来有类似 varStorage.day,varStorage.plan_fee等大量这个单词开头的点) 实在看不懂了,先把 'if else' 的条件框架写了把，这是我所有能做的了；

step5 狂问模式: 这个阶段的我，百度,google根本是无用，把通篇js放上去搜索也无济于事。清华老师讲解详细特别有耐心而且知无不尽。但是他日常也特别忙，于是组里十几个js同事几乎全问遍了，谁有空，谁出没在位置附近就问谁。特别是欧阳老师，就这个需求有次给我讲到了晚上十 一点多钟(真的是讲需求)，每次讲知识点也是让人醍醐灌顶。

step6 量变到质变：经过几天举步维艰的痛苦，前后零零散散地知道了，全局对象的用途(比如 varStorage)，cgi的调用查看取值，函数封装等(不理解什么就问什么)。尤其是(对象.属性)的获知，让我对通篇js有了突破性的半理解(通常就是什么条件下，某对象的某属性要干什么，比如：varStorage.day：就是把某时间存在全局对象里面，什么时候用再取出来就好)。

首需求小结(基本不会走): 这个需求的完成，‘原计划’和‘更改计划’的对比原来就基本已经有了，于是照着原来的思路，封装了一个信息变化函数(这个是老师帮忙做的)，再套进条件语句函数中，再把这个函数分别加到已有的对应的触发函数里面，就完成了(这个过程可能描述的有点简陋，就讲了大概)。然后再请老师帮忙review代码和验证。做下来，其实还有很多知识点是一知半解的。

需求进阶(老师架着走): 接下来做了一个分类展示的需求(基金按‘货基’，‘保险’，‘指数’等分类展示，最多展示4条，超过收起，点击展开现已下线。大致步骤是 取出数据 — 筛选数据 — 按照需展示)。从而把调取cgi,得到cgi中数据,切割,数组,条件判断,模版渲染 等知识点连贯地运用了一遍。(有些方法，理财通底层已经定义好了，可以直接拿来用，所以写某个方法之前，都会问问有没有现成的，当然后期理解也是要兼顾)

需求再进阶(老师扶着走)：有了上个需求的一些基础和信心，于是接下来，拦截了一个更难点的 —— 把会员的礼物推荐根据一定的规则( 去领取>已领取>已抢光>等级不足 ) 展示在这个位置。大致也是 数据拉取 — 按条件筛选 — 模版渲染。期间会涉及异常处理，兜底处理，代码质量等逻辑严谨度的问题(这个感觉现在也还是做的不是太好)。

需求进一步进阶(老师引导着走)：接到需求，自己过一遍觉得应该做什么，然后再请教老师，自己先按思路写，实在不懂再问。这个需求开始接触后台(以前的都是现成的cgi)，跟后台讨论需要什么数据。目前还没上线。

到目前感觉自己刚上了个道，刚学会拿起方向盘，还有很多很多需要学习和练习。

总结：

找个一对一的好老师第一重要：在这里给清华老师和所有其它的老师终身点赞；

先易后难：找合适的切入点，然后模仿；

边写边学：过程中，会有声音不断跟你说，你还是先去把犀牛书看一遍吧...可是这么厚，边看边写比较现实把(泪两行)；

多投入：再难也要坚持，告诉自己，一定要完成，前期既要花很多时间也要掉很多头发；

佛性：有自己总是get不到的点，写着写着，突然就会开窍(比如我直到最近才get到打断点这个事情，尽管老师讲了很多遍...)；

本篇完，感谢观看。下篇酝酿中...