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日

写路由；新增服务包的页面开发和对接。遇到的问题：一个有上传文件功能的表单，要实现用户点击表单的保存时，第一步先把文件上传到一个接口，并拿到返回的信息，第二步把返回的信息和表单的其余信息发给另一个接口。最初的设想是用一个<form>专门上传文件，但这样做存在一个问题：上传文件后页面会跳转。为了解决这个问题，我引入一个对用户隐藏的<iframe>作为子页面，使跳转后的页面指向这个<iframe>，这样就避免了父页面的跳转。但这样又引入了一个新问题：子页面和父页面之间垮了域。所以，尽管在父页面能拿到子页面这“整个的东西”，但却几乎无法访问其中的属性和方法，这样我就难以取到上传文件后返回的数据（因为返回的数据在子页面里）。后来虽然我了解到或许可以使用HTML5的postMessage方法实现父子页面的跨域通信，但我还是决定换种思路，用插件。下班了，明天试试。

8月14日

新增服务包的页面开发和对接。遇到的问题：打算用jQuery.form解决昨天的问题。我本来以为jQuery.form可以解决跨域的问题，后来发现它只能解决上传文件后页面会跳转的问题（即实现异步上传文件），跨域的问题要用nginx来解决。nginx解决跨域的原理：既然浏览器不能跨域，那就让浏览器访问同源的url，然后让nginx拿着这个url去找要跨的域，即nginx相当于一个中介。

XSS利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。用JS在控制台打印特殊字符要用反斜杠转义。

8月15日

服务包管理列表的对接。

服务包版本管理列表（运维）的页面开发和对接。

镜像管理列表的对接。

新增镜像的页面开发和对接。

8月16日

服务包版本管理列表（运维）、镜像版本管理列表（运维）的页面开发和对接。

平板状态测试的页面开发和对接。

8月17日（实习的最后一天）

服务包版本管理列表（运维）、镜像版本管理列表（运维）的页面开发和对接。在这个过程中学到了：UI Bootstrap的模态框传参。