一週工作總結·1.22-1.26

來到公司第二週了，開始接各種小需求，幾個聯運官網加一個4366官網，第一種公司有自主系統可以生成網頁，第二種雖然要手寫程式碼，但其實已經有模版一樣的頁面可以參考，所以實際上是用了別人的程式碼再加上修改樣式即可。
雖然是些重複的工作，但是還是能在工作中，包括一些跟同事的交流學到東西，學的東西目前零零碎碎，主要集中在webpack的配置，React的知識點和一些樣式問題和一些對程式設計師的思考。

第一個建大樓的人

每次上班的時候都會路過幾片工地，看到一座座大樓在慢慢建起，看著那些鋼筋都在好奇這些樓都是怎麼一步一步搭起來的，會很難嗎，看著公司旁邊那座大廈，想：建起第一座大樓一定是最難的，後面的都不是最難，因為已經有第一座的模版可以參考，照著搭一座，再考慮自身的問題加上一些配置就行。寫程式碼也是這樣，第一個寫出React的人絕對是最牛的，後人再造的都是走在前任的路上，如果寫業務程式碼應該也是如此，很多頁面都已經有人寫過了，只要照著寫都能寫出七七八八。如果只是考慮完成而不研究寫法的話。

“難”，“複雜”和“繁瑣”

再有就是接觸新東西的恐懼，這個東西其實才是困擾人學習新東西的最大障礙，實際上學新東西有分“難”，“複雜”和“繁瑣”，分清楚這三個狀況，其實學東西大部分都是在“複雜”和“繁瑣”上。
舉個例子，昨晚我寫一個React的音樂播放器，需要用到React-Router，弄了很久都不得其法，搞不懂怎麼用，但這是難嗎？實際上我只是搜尋不到，花了很多方式都搜尋不到怎麼用而已，這是繁瑣，這個過程消耗智力嗎？不消耗。後來，我在那個課程下面的評論下面早就有人給出了React-Router v4的寫法，我只要照著寫就實現了。再結合之前搜尋的時候看的幾個視訊，算是對React-Router有了很初步的瞭解。

要寫一個SPA難嗎？那麼多元件，狀態管理，路由...這麼多東西要搞，也只是有那麼多東西要搞，這是“複雜”，克服討厭複雜的情緒，要做的就是踏踏實實，一個一個元件寫，難嗎，不難，除了寫的過程中一些不注意導致出的BUG，根據提示解決或者Google解決。

拿來就是用

其實對新東西，要有老子不管，拿來就是用的心態，不要怕這個東西是自己沒見過的，想想自己用新手機的時候，總是會這裡試試那裡試試，難嗎？看你願不願意解除而已。這個感觸來源於教老媽用微信發朋友圈，對我們來說可能就是點幾個按鈕，看文字就能懂的過程，但是老媽就是學了幾次但是好像總是用不好，明明看文字就能用的功能，她不識字嗎，她識字，只是在要使用這些功能的時候，腦袋裡一團亂麻，總是覺得“好複雜好複雜”

所以所以，不要有這種抗拒心理，放輕鬆你的大腦，無論是在接觸新東西的時候，還是看到控制檯紅紅的Error的時候。
印象最深的還有一個是看到函數語言程式設計裡的“高階函式”這個詞的時候 —— WTF！什麼是高階函式！高階！好厲害！好複雜，頭好痛！而所謂高階函式的解釋是：

在數學和電腦科學中，高階函式是至少滿足下列一個條件的函式：

• 接受一個或多個函式作為輸入
• 輸出一個函式
  ——維基百科

就是這麼簡單！沒什麼大不了的！所以克服“新名詞恐懼症”吧！擁抱它！

說了這麼多心理上的想法，說點在工作上接觸到的東西吧。
一個就是終於接觸到真實的工作環境了，以前以為前端寫的網頁打包出來後要把原始檔交給後端的，讓後端去配配各種東西然後上線。來公司後才發現，原來有個叫釋出器的東西，拿遊戲官網來說，每個遊戲有一個專區，一個專區裡放這個遊戲的網站，JS、CSS、圖片放在專區的檔案管理中，上傳上去後馬上有一段地址，引用這段地址就引用到了相應的指令碼和靜態資源，所以要在打包時把圖片什麼的儲存路徑寫成網址的形式。
網頁寫好之後，還要分離各個部分，因為要讓運營的人去替換網站的圖片什麼的，而分離的各部分都可以在網站裡複用，比如分離出了頭部導航，頭部導航在首頁、新聞頁、文章頁都是用得上的。更改了獨立出來的頭部導航，其他頁面都會發生變化，避免重複修改。

然後就是各種工作流程，比如排期，要求網站在排期這段時間內搞定。需求系統，完成任務要提交任務進度...

還有就是跟同事的交流，跟ZW哥交流發現是個喜歡做底層的人啊，不想做重複勞動的程式設計師，擁抱新的東西，不想走jQuery那一套，跟他交流問他怎麼快速入門一個工具或者庫，他說他也喜歡看視訊，可以快速上手，或者在工具的Github上都有一個examples的資料夾，裡面的demo可以讓你快速上手。還有他的一手看測試用例學原始碼。這周開完會有技術分享，他分享了一個Redux的我也不知道什麼鬼，直接懟原始碼，看得我一愣一愣的。大家都是這個水平的！跟YH師兄討論說覺得會造輪子的人比會做業務的人牛逼，他說做業務的人才比造輪子的牛逼，因為造輪子的人有以前的輪子可以模仿。

最後說點實際的程式碼上的東西，這週上半段搞得最多的還是Webpack的配置，一週比一週理解的多，但其實還有一些理不清的。

• 首先就是知道了為什麼Webpack要分兩套配置，一份開發時配置檔案儲存在本地，一份生產配置儲存線上地址
• devtool只是在開始時有用，選擇要用什麼樣的sourcemap，越詳細的sourcemap要花的編譯時間更長
• entry為何要有多個入口，並不是之前理解的用來把SPA轉為多頁應用，而是當我們做網頁的時候，可能多個網頁可以用到同一套JS、CSS或者圖片，拿遊戲官網來說，他有一個首頁，也有一個列表頁和文章頁，這三個頁面用到的樣式什麼的會有交叉的部分，或者說我們需要同時開發這三個網頁，就開多個入口，同時開發三個網頁，只有一個webpack，然後在HtmlWebpackPlugin中，在chunks配置裡可以決定頁面要引入的是哪個chunks的js.
• development下編譯的檔案是不會存在本地的，而是放在記憶體中，在資料夾裡是找不到的，只有打包好後的才能在dist資料夾中找到。
• webpack2不支援IE8，所以開發環境下是不能在IE8下開啟檢視頁面效果的，這個覺得應該是跟JS的引入方式有關，webpack1支援IE8，所以他們那套官網模版用webpack1開發的就可以在開發環境下用IE8開啟。
• 還有一個搞了很久的圖片儲存路徑問題，在url-loader上，url-loader的name選項會修改檔案儲存路徑為name的值，但是修改後的值加上我自己寫的值組合起來後的地址很奇怪，並不能正確引用到，搞了很久，最後是在釋出區的檔案管理的Img裡又創了一個images資料夾，實在是不優雅..
• 入口檔案(index.js)是給webpack看的，所以要把scss引到index.js中，webpack才能把scss檔案打包進來

更多webpack支援IE8的資料可以看讓Webpack+Babel支援IE8

再有就是看同事的程式碼，jQuery的，發現他把部分程式碼放在一個物件中，這樣呼叫物件的屬性的方式呼叫函式，特別優雅，還有把onclick和onmouseover兩個事件函式整合在一個程式碼中，只能說6666.

• index.js可能大部分都只是用來引入其他模組的。

接著就是React的，看了文件，寫了個React的播放器，記下幾個坑

• setState()是非同步的，是一種“請求”，所以不能在一個函式中setState後在下面馬上獲取最新的那個值
• componentDidMount只在初次渲染時觸發
• 修改setState後觸發的是componentDidUpdate，這個生命週期不會在初次渲染時觸發
• React-Router v4的API和v2、v3的差很多

其實學了一個東西要麼有很多總結要麼有很多問題，像React的總結這麼少說明學得還不夠深，繼續把那個音樂播放器開發完，總結有什麼問題再回來補吧。