7月16日(实习的第一天)
看公司前端的代码规范;了解AngularJS;了解Less;看项目代码。
项目“明镜”介绍:一两年前就开始做了,是做公安机关的生意,需求是实现公安执法办案的精细化、信息化。其中的前端部分要兼容IE8,所以要用AngularJS(1.2)。
7月17日
学菜鸟教程上的AngularJS教程;了解RequireJS;听上级讲解项目代码;看项目代码;了解Nginx等代理服务器。
7月18日
看项目代码;了解MVVM;看《JavaScript高级程序设计》(以下简称红宝书)。
7月19日
看红宝书;学菜鸟教程上的AngularJS教程;向庭哥(同事)请教AngularJs;听后端讲解需求,观摩学习庭哥根据需求写架构;了解Bootstrap;学习Less;了解(反向)代理服务器。
7月20日
学菜鸟教程上的AngularJS教程;看红宝书;做IFE(百度前端技术学院)的任务;了解设计模式,如工厂模式、构造函数模式、原型模式、构造函数和原型的组合模式、单例模式。
7月21日(周六 在校)
看红宝书;学习在VS Code中用Git。
7月23日
阅读项目代码;了解jQuery;了解CDN。
7月24日
在菜鸟教程学习jQuery;阅读项目代码;在AngularJs中文网学习AngularJs;学习JSON和Ajax(通过看红宝书)。
7月25日
在菜鸟教程学习jQuery;看红宝书;写案管运维系统的服务器管理的静态页面;学习在VS Code中用.less文件生成.css文件; 了解懒加载/按需加载(Load On Demand);阅读项目代码。
另外,被直接上级——雪连姐——训了一顿,感触良多,受益匪浅,现记录交谈内容以备忘:
姐:你负责的项目做得怎样了?
我:庭哥(雪连姐很忙,于是就让庭哥直接带我)说没有原型和接口,我们就做不了,我们要等产品经理和后端分别做好原型和接口后才能开始做。所以,我这些天都是在看项目代码(项目代码中用到了好多我不会的技术,于是我经常放下项目代码,而去专门学习那些技术,比如AngularJS、RequireJS、Less、JSON、jQuery、Ajax,既会通过看网上的教程也会通过看纸质书)。
姐:那你代码看得怎样了?
我:我现在把index.html文件看完了,然后看了一个demo(雪连姐写了几个demo帮助新人上手项目),而各个文件夹或文件之间的关系我还是搞不太懂(因为我总是放下项目代码去学项目用到的技术,所以看得慢)。
姐:你能独自完成一个模块了吗?
我:(我怀疑不能,但没好意思直接说)今天上午庭哥让我照着他写的一个模块,写一个几乎一模一样的出来,我觉得挺简单的,就是copycopycopy,十几二十分钟就写好了。
姐:你知道你做的这个项目的需求吗?
(当时后端在给庭哥讲需求时我也在旁边听了,但是他讲的只是其中一个模块的需求,不是整个项目的需求,我连这个项目到底是要做什么都不是很清楚,我把我知道的那一点说给了雪连姐听。)
(姐听了后,把整个项目给我介绍了一遍。)
姐:你对自己工作的期望是什么?
我:赶紧上手项目,多做项目,尽可能多地为公司创造价值以报知遇之恩。
姐:嗯。可是你连项目代码都没看懂,这样你真正做项目的时候就会做得很慢。另外,你在上班时间不要看书了,几个上级都跟我表达了对你上班时间看书的不满。
我:项目代码用到了我好多不会的技术,我经常要放下代码去学这些技术,所以看项目代码的进度慢。我看书是为了……(被打断,我是想说是为了能看懂项目代码)
姐:是为了你自己,但公司不是做慈善的,招你来的目的不是让你学习,更何况,公司还付你工资。公司招你是为了让你创造价值的。
我:我看书也是看项目中用到的技术,不看书我看不懂项目代码啊。
姐:你这样不行,在项目中遇到问题时应该去找直接的解决方案,事后再系统地巩固相关知识,否则项目交付就会因你被延后。就算你真的要看书,你也应该晚上看,而不是在上班时间看。
(我觉得有道理)
我:我看项目代码时遇到问题了会先自己想办法解决,实在不行了我就记下来,攒到一大堆后就去请教庭哥。
姐:你这样不对。
我:难道我要一遇到解决不了的问题就去请教庭哥吗?
姐:……
姐:除了刚才说到的你这些问题,还有一点就是,你太被动了,你只是坐在那等原型、等接口,等着别人告诉你该怎么做。
我:我也想赶紧做项目,可是庭哥都说了,没有原型和接口做不了。
姐:你不应该只是做技术的。没有原型,那你可以自己分析项目需求,自己想原型应该是怎样的,然后去找产品经理跟进;没有接口,那你可以去找后端协商接口是怎样的,然后前后端开发就可以同时进行,而不是等后端把接口写好给你后你才开始写前端。总之,你不应该等着别人告诉你该怎么做。
我:(沉吟了一会儿)也就是说人人都是产品经理咯?
姐:你能这么想很好。我觉得你之前在约束自己,我们这里很自由,你有想法就完全可以自己去找相关的人沟通。你的上升空间很大,公司招你进来是觉得你值得培养。我们希望你能从全局的角度来看一个项目,并且能提出自己的想法。否则会发生这种情况:如果产品经理给你的原型或者后端给你的接口不合理,而你不知道,结果你还是根据不合理的方案来做,做到最后才发现不对,然后全部推倒,重新做。
我:嗯……我之前确实只是想着我只要做好技术、完成好被分配到的任务就好了。
姐:那你觉得你今后该怎么做?
我:还是要看项目代码。
姐:为什么是看项目代码?
我:需求方面,我会再去问下庭哥,如果还不够,就叫庭哥和我一起去找后端。看项目代码不止要弄懂其中用到的技术,也要搞清楚整个项目的结构。
姐(起身走人):那就说到这里吧。
(这时,我其实很想问她我到底具体该怎么做,但担心会让她觉得我还是想别人告诉我该怎么做,就没问了)
7月26日
研究运维系统;看项目代码。
7月27日
学习angular-ui-router的用法。
7月28日(周六 在校)
看红宝书。
7月29日(周日 在校)
看红宝书;看《JavaScript语言精粹》(以下简称蝴蝶书)
7月30日
写运维管理系统的版本中心的区域服务列表。在这个过程中学到了:使用Bootstrap的弹框(Modal,模态框);使用Less(只用到了嵌套)。
7月31日
改运维管理系统的版本中心的区域服务列表。在这个过程中学到了:配置、重启nginx(命令行重启不行就用任务管理器结束再启动);使用restangular(实现Ajax);使用WdatePiker(日期插件);通过在代码中插入debugger来添加断点辅助调试;使用Layer插件实现“loading”提示。
和超哥(我的直接上级的直接上级)、超哥的朋友(也是同事,职位也比我高)进行了一次从火车站检票机设计开始的交谈,其中发生了两件令我非常震撼的事,再次让我坚定了“我要努力工作”的信念:
一、超哥对我说“你是来学习的,不管以什么方式,你都要尽可能多地学习”。而之前我听别人(包括HR和我的直接上级)说过不下一次,实习生不能抱着来学习的态度来实习,公司不是做慈善的,公司给实习生付工资是要实习生为公司创造价值的。而超哥竟然这么对我说,我非常感动。
二、超哥的朋友是在我和超哥刚开始交谈时来的,然后就在一旁听,时不时也参与讨论、发表自己的见解,这种情况持续了——保守估计,至少半小时,我怀疑可能有1小时。我当时也没多想超哥的朋友为什么这么做,直到我和超哥交谈完,他才表明了自己的来意——他是找超哥有事的!我震惊了——他竟然没有打断我一个实习生和我的直接上级的直接上级的交谈,而在旁边等我们交谈结束等了那么久!
8月1日
写运维管理系统的版本中心的区域服务列表。在这个过程中学到了:使用Postman测试前后端间的接口能不能调用;在浏览器的F12中查看XHR的情况;谷歌浏览器的F12中可设置自动清除缓存以实现刷新就能更新JS文件而不用重开新窗口(HTML和CSS文件有时可能还是需要手动清缓存才能更新);前后端联合开发(协商数据格式)。
写运维管理系统的版本中心的服务包管理列表、镜像管理列表、数据库脚本管理列表、区域服务注册。
8月2日
统计部门的网口信息(打杂)。
写区域服务注册;写系统服务自检;写终端控件自检。在这个过程中学到了:在F12中更改样式可以实时地看到效果。
8月3日
对新增区域服务注册的区域信息的接口;改平板状态测试并对接口;写新增区域服务注册的服务器及服务器注册。在这个过程中学到了:jQ对象用不了JS对象的方法和属性,反之亦然;AngularJS的表达式可以用在元素的属性中;AngularJS要使用原生JS的事件对象(常用e表示)是通过往在HTML里的事件监听器传入$event实现的;jQ对象的方法有:hasClass()、parent()、prev()、attr()、text()、val()、append()、addClass()、removeClass()、children()(参数可以是CSS选择器)、remove(),jQ对象的属性有length。
8月4日(周六 在校)
看蝴蝶书。
8月5日(周日 在校)
看蝴蝶书,计划秋招。
8月6日
新增区域服务注册的服务器及服务器注册的页面开发。在这个过程中学到了:动态生成的元素的事件不会被监听,要用$compile,但是应尽量避免用了AngularJS还要操纵DOM;$(JS对象)可以把原生JS对象转为jQ对象。
看完了蝴蝶书。
8月7日
新增区域服务注册的页面开发。在这个过程中学到了:有时不是没有跑进去函数,而是跑进去了但函数内的代码没有“明显”的效果(可用debugger判断);AngularJS的脏检查;虽然我是前端,但也要了解业务(页面的需求、作用和目的),否则就会像今天一样,花了大量时间写页面后才发现写错了、要大改。
8月8日
区域服务列表的页面开发和对接。在这个过程中学到了:如果有一行JS代码报错了,那之后的JS代码都不会执行;AngularJS页面传参的方法之一是用ui-router的$state.go接口,跳转后的页面获取传参要用$stateParams,注意同时要给路由的url添加上参数;刷新是重新请求当前页面,如果没有回到当前页面,那就是回到当前页面后立刻又跳转到了其它页面;别忘了Ajax一般是异步的,所以在一个用了Ajax的http请求的语句后立刻打印返回结果是打印不出东西的;$index是ng-repeat循环的序号;访问对象的属性时如果属性不存在,并不会自动创建;控制台的错误提示提供了跳转到错误代码的链接,虽然可能它可能隐藏在一堆链接之中;AngularJS关心的是数据而不是DOM,所以想要操纵DOM还是要通过原生JS或jQ;用谷歌浏览器的插件展示JSON;AngularJs的核心是数据模型(MVC的M或MVVM的M),所以无论做什么,都要想着通过数据模型实现,记住,M变了,则V就会自动更新(C中除了事件之类的东西,都只会在页面初始化的时候执行);在for循环中声明循环长度反而比不声明更慢,原因可能是现代浏览器已缓存了终止条件(指像arr.length这样的东西),因为相同的原因,循环的减值迭代对性能可能甚至有害无益。
另外,我还向后端提出了改善接口以优化性能的方法(把多个http请求改成了1个http请求)。
8月9日
区域服务列表的页面开发和对接。在这个过程中学到了:删除数组非头尾的元素用splice;||的左操作数如果为null(为undefined不行)则返回右操作数;AngularJS的表达式里不能空格;可用ipconfig命令在cmd查ip信息;ng-class;Edge浏览器的F12中有些神奇的标识符行为怪异,比如c(与b和d的行为都不同);利用JSON的两个方法可以实现深复制;跳出多重循环可通过多声明变量记录是否跳出内层循环来实现;由事件造成的两种状态之间的切换,可以通过设置一个变量,然后每次触发事件时根据这个变量的值执行对应的操作并更改变量。
服务中心的页面开发。
8月10日
区域服务列表的页面开发;服务自检的页面开发;公共组件的样式更新。
进一步了解模块化开发;进一步了解单页面应用(写代码时注意单页面应用的相对路径是相对什么)。
8月11日(在校)
进一步了解RequireJS。模块:将程序分解成离散功能块(discrete chunks of functionality),并称之为模块。每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。模块的优点:可维护性、避免命名冲突、代码复用。AMD(异步模块定义)规定模块必须采用特定的define()函数来定义。RequireJS可以避免加载js文件时网页失去响应(因为js文件阻塞浏览器渲染),还可以轻松实现依赖管理。我了解js模块是从立即执行函数开始的,但实际上业界采用的模块化方案,却并非是一个一个由IIFE+闭包形成的集群,而是用AMD或ES6模块等模块化实现。原因可能有这两个,一、闭包的性能问题。二、当模块增多的时候,需要解决模块间的依赖管理问题。requirejs和angular都有模块管理,但两个概念又不一致:requirejs模块管理,不单单是代码模块化,还提供了模块加载的功能;angular模块管理,更在乎的是代码逻辑上的模块化,避免全局变量污染,并不提供js文件层面的加载功能;作为逻辑模块管理,其实用requirejs的模块管理就够了,所以除了angular原生的controller、service外,业务相关的公用库,用requirejs吧。
了解webpack。webpack是一个构建工具(模块打包器),能做到requirejs能做到的模块化开发,而且webpack和requirejs一样,也支持AMD,但还能做更多,比如打包/优化性能(通过减少http请求来提高网页响应速度)。很难配置,但一劳永逸。
了解node.js。node.js是一个javascript运行环境,能让javascript脱离浏览器而在服务端运行,可以用来开发web服务端。node.js有非阻塞式 I/O、事件驱动的特性。前端开发和node.js开发, 两者间除了js是重合的以外, 其它技能互相之间完全没有关系。如果你要建一个社交网站,你的好友会随时推送新的状态,然后你的新鲜事会实时自动刷新。要达成这个需求,我们需要让用户一直与服务器保持一个有效连接。目前最简单的实现方法,就是让用户和服务器之间保持长轮询(long polling)。HTTP请求不是持续的连接,你请求一次,服务器响应一次,然后就完了。长轮训是一种利用HTTP模拟持续连接的技巧。具体来说,只要页面载入了,不管你需不需要服务器给你响应信息,你都会给服务器发一个Ajax请求。这个请求不同于一般的Ajax请求,服务器不会直接给你返回信息,而是它要等着,直到服务器觉得该给你发信息了,它才会响应。比如,你的好友发了一条新鲜事,服务器就会把这个新鲜事当做响应发给你的浏览器,然后你的浏览器就刷新页面了。浏览器收到响应刷新完之后,再发送一条新的请求给服务器,这个请求依然不会立即被响应。于是就开始重复以上步骤。利用这个方法,可以让浏览器始终保持等待响应的状态。虽然以上过程依然只有非持续的HTTP参与,但是我们模拟出了一个看似持续的连接状态。我们再看传统的服务器(比如Apache)。每次一个新用户连到你的网站上,你的服务器就得开一个连接。每个连接都需要占一个进程,这些进程大部分时间都是闲着的(比如等着你好友发新鲜事,等好友发完才给用户响应信息。或者等着数据库返回查询结果什么的)。虽然这些进程闲着,但是照样占用内存。这意味着,如果用户连接数的增长到一定规模,你服务器没准就要耗光内存直接瘫了。这种情况怎么解决?解决方法就是刚才上边说的:非阻塞和事件驱动。下一代浏览器很快就要采用WebSocket技术了,从而长轮询也会消失。在Web开发里,Node.js这种类型的技术只会变得越来越重要。
看IFE的阅读材料(Promise、适配器模式、桥接模式、观察者模式(发布订阅模式))。
8月13日
写路由;新增服务包的页面开发和对接。遇到的问题:一个有上传文件功能的表单,要实现用户点击表单的保存时,第一步先把文件上传到一个接口,并拿到返回的信息,第二步把返回的信息和表单的其余信息发给另一个接口。最初的设想是用一个