前端實習日記——高新興科技集團

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的模態框傳參。