前端实习日记——高新兴科技集团

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”提示。

和超哥（个人直接上级的直接上级）、超哥的朋友（也是同事，职位也比我高）进行了一次从火车站检票机设计开始的交谈，其中发生了两件令我很是震撼的事，再次让我坚决了“我要努力工做”的信念：

1、超哥对我说“你是来学习的，无论以什么方式，你都要尽量多地学习”。而以前我听别人（包括HR和个人直接上级）说过不下一次，实习生不能抱着来学习的态度来实习，公司不是作慈善的，公司给实习生付工资是要实习生为公司创造价值的。而超哥居然这么对我说，我很是感动。

2、超哥的朋友是在我和超哥刚开始交谈时来的，而后就在一旁听，时不时也参与讨论、发表本身的看法，这种状况持续了——保守估计，至少半小时，我怀疑可能有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模块等模块化实现。缘由可能有这两个，1、闭包的性能问题。2、当模块增多的时候，须要解决模块间的依赖管理问题。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的模态框传参。