第十八期 AMA 掘金團隊請來了奇舞團團長，《JavaScript 王者歸來》作者，目前 360 技術委員會前端專家--月影做了為期三天的 Ask Me Anything (AMA) 活動（活動已結束）。 我們在此精選了一些來自使用者的提問及 月影 的回答。
關於月影
大家好，我是奇舞團團長月影，《JavaScript 王者歸來》作者，目前 360 技術委員會前端專家。過去曾就職於百度和盛大創新院，畢業於浙江大學。
2006 年接觸的前端，在此之前做過底層演算法、服務端開發甚至售前和售後技術支援。他進入前端行業源於偶然，但從 08 年開始在百度有啊帶前端團隊到現在，剛好經歷了前端行業快速發展的十年。就個人而言，從事技術管理的時間要多於做前端開發的時間，然而他本質上還是一名程式設計師，非常熱愛寫程式碼。儘管現在帶一個數十人的技術團隊，但每一年他都堅持親自參與一線專案和技術平臺。去年他在視覺化領域做了一點稍稍深入的研究，因此誕生了SpriteJS 專案和周邊工具。
月影一直堅信的一個管理理念是建立有效組織優於一切管理手段，因此他在奇舞團推動創立前端技術自媒體《奇舞週刊》、眾成翻譯、技術翻譯小組、泛前端分享會、奇舞學院、w3c 興趣小組等一系列組織並激勵和推動它們良性發展，這些組織為奇舞團全體小夥伴提供源源不斷的“能量輸入”，幫助大家共同成長。
社群小夥伴精選提問--技術直接相關
前端如何處理快取 ( 業務型問題 ) ？ ─ @JackieZhang
請問一下vue專案打包上線之後發版之後，瀏覽器開啟總是舊資源需要重新整理，重新整理之後是新資源，但是下次開啟又是舊資源需要重新整理，請問這種問題怎麼處理？我前端也沒有設定什麼快取策略
你看一下請求資源的HTTP請求頭，這種現象很有可能你們伺服器或者你們用的第三方CDN上返回了Cache-Control頭，如果有Cache-Control頭，要麼讓他們去掉，要麼你們發版的時候每次更新資源時換一個新的URL或者加一個隨機引數。
沒有Cache-Control頭，換一個新的URL或者加一個隨機引數 有相應的文章嗎？這個問題好久了，就我一個前端不知道怎麼搞?
不是看你網頁的HTTP請求，是看你的靜態資源裡面的Response Header裡面。一般來說如果你們的靜態資源走CDN的話肯定有這個響應頭。 你的vue專案打包用什麼？如果是Webpack的話，有對靜態資源進行hash的外掛，如果用別的打包工具也有類似的配置或者外掛。
伺服器或CDN設定 Cache-Control: max-age=xxxxxx 是為了減少瀏覽器對資源的請求，這種型別的快取是強快取，區別於etag/Last-Modified/Expires，這些是協商快取。只有從位址列或收藏夾輸入網址、通過連結引用資源等情況下，瀏覽器才會啟用強快取。所以我們才會輸入網址訪問頁面看到舊的資源，而重新整理頁面瀏覽器才請求新的資源。
我看了vendor.js,，請求頭如下，from memory cache；
你的響應頭沒有其他的了嗎？既沒有cache-control也沒有expires？那就奇怪了。。。如果有強快取from disk cache是正常的。我前面寫錯一個，cache-control和expires都是強快取的頭。
哦，還有一種可能，就像1樓說的，你是不是啟用了pwa資源被快取到ServiceWorker？
非技術相關-- 個人觀點
請問您對於前端圖形化趨勢的看法？ -@張優秀zz
請問您對於前端圖形化趨勢的看法
我現在在做視覺化相關的東西，所以去年設計了 github.com/spritejs/sp… 開源框架，正好上一次D2的時候 winter 大大去講了一個 spritejs 的 topic，www.yuque.com/preview/yuq… 基本上說出了我對圖形化趨勢的看法，我覺得這個領域未來一定會有很大的空間，不說其他相關的領域，就大屏視覺化展現這一塊，未來幾年會有很大的市場。
怎麼樣才可以有效利用時間做好前端開發呢？-@、子筠
團長大大好，我是入行不久的前端小白?。想請教您，學好前端的方法。我們現在是前臺，中臺，後臺這種開發模式，我覺得自己每天加班可晚，效率還可低，業務比較複雜，前端既要處理很多資料又要做好互動，怎麼樣才可以有效利用時間做好前端開發呢？另外，還想請問您，關於前端這十年來的變化，您有何感悟？未來你覺得會如何變呢，作為小白，我們又如何提升自己以不變應萬變？
做好時間管理，保證自己有一定的時間學習，養成適合自己的知識沉澱習慣，有的人適合寫技術文章，有的人關注和參與開源專案，方法可以不一樣，要找到適合自己的。過去十年的前端變化我認為是網際網路產品和硬體與終端技術的發展使得前端不再是面向單一領域而成為一種通用技術，對應地，框架和工具發展成為特定領域的技術。超程式設計思想是框架設計的主流，工程化和質量提升是web產品的規模化推動的。未來5G的普及一定會讓web產品更復雜，更具規模化，所以未來前端還會有更大的發展空間。現在還是應該關注JS標準本身的演變，打好程式和數學基礎，關注自己感興趣的前沿領域比如VRAR、AI、視覺化等等。
請問前端未來可預見的方向以及未來的趨勢。 -@幾何。
想請教一下關於前端未來可預見的方向以及未來的趨勢。
還有作為前端萌新，感覺前端的內容實在太多，學的多不容易精，類似資料視覺化，演算法，框架，打包工具，外掛，相容性，這裡邊的每一個都可以花大量精力去研究。
請問如何在這種情況下持續提升自身的價值。
大約10多年前，前端只有一個領域，就是PC的瀏覽器，所以那時候無論HTML、CSS還是JS都是領域語言（DSL），所以那時候大家感覺內容不多，天花板不高。但是現在，前端已經不是一個特定領域，而是一個比較通用的大領域，基本上可以說前端等於UI領域，甚至更大的領域（對於JS來說）。
JavaScript也從一個基本上算是DSL的語言成為一個通用的程式語言。如果我們回過頭來看這些年前端技術的發展，你就會發現其實其中的最主要脈絡，用一句話來概括就是“從通用到特定領域”，其實這也是其他程式語言和技術的發展路線。
其實這個趨勢從jQuery時代就開始了，jQuery就把原生的JS定義為“通用語言”，然後它自身是一種DSL，從JS到jQuery其實是一種“超程式設計（MetaProgramming）”，就是用一個通用領域的語言去實現DSL。jQuery的DSL就是它的鏈式呼叫語法和隱式迭代語義。在那個時代，JS還沒有那麼強大，很少超程式設計特性，但是jQuery通過巧妙的API設計實現了“超程式設計”。
而現在，JS遠比過去更強大，有很多超程式設計特性，比如屬性訪問器、內建Symbol、Proxy等等，然後我們還有Babel和Webpack這樣的工具，所以我們現在的前端框架可以在這之上通過超程式設計建立更強大的DSL，所以無論是React、Angular還是Vue，它們其實都是建立DSL，以DSL解決特定領域的問題，提升開發效率，這是框架設計（造輪子）的基本思路。
所以我們沿著這條路梳理下去，你會發現，未來隨著網際網路環境的進一步發展，比如5G，隨著網際網路產品的進一步發展，會有更多的專有領域，這些領域當然也會促生更多的DSL，所以我們說前端百花齊放。如果你把握了這個基本的脈絡，我想你應該知道如何去學習前端技術了，HTML/CSS/JavaScript是通用既能，需要牢牢打好基礎，其他的可以歸為領域相關的知識，在需要用到的時候去學習。學習這些領域知識，不僅僅是學習其API和如何使用，更應該理解其背後的“超程式設計”思想和原理，這樣如果你將來面對了新的領域，就知道如何站在前輩們的肩膀上造一個偉大的輪子了。
應該怎麼樣養成好的程式碼思路？ -@諍陽
我是剛入職一個月的實習生，我發現我做頁面沒有清晰的思路，最後做出來的東西很亂，效果有，老大說沒法上線，應該怎麼樣養成好的思路
寫頁面和寫程式碼一樣，可以用自頂向下的設計方法，先解析大的結構，完成框架的設計，然後逐層向下設計細節。根據產品需求和實際執行環境確定大的頁面結構，然後選擇佈局的方式，比如標準流佈局還是彈性佈局還是grid，之後對每個區域性遞迴進行次一級結構的設計。要學會運用BFC。良好的結構加上語義化標籤，就能寫好HTML。
就是採用自頂向下的設計，先設計整體佈局，然後對每塊再進行迭代做次一級的結構和佈局，標籤的話能用語義化儘量用語義化，但是也不強求。HTML程式碼也是可以減少耦合的，比如運用BFC之後，其中的元素就不會受到外界影響，那麼這個塊就具有比較好的複用性。我們通常用支援元件化的框架來做元件化開發，這樣開發複雜Web應用的時候程式碼複用性好，開發效率高，但是實際上就算不用元件化框架，純寫HTML，也是可以運用低耦合的元件化思路的。
請問js 轉ts是趨勢嗎，還是隻是web方面更適合Ts呢 -@一條沒有夢想的鹹魚
請問js 轉ts是趨勢嗎，還是隻是web方面更適合Ts呢
我覺得動態型別和靜態型別各有好處吧。除了大家都知道的靜態型別檢查有助於提前發現程式碼的問題之外，TS的一大優勢是靜態型別比較好用工具進行優化。舉個例子，我最近在做視覺化相關的研究，處理圖形需要矩陣運算，而矩陣運算的庫肯定效能越高越好，但有的時候執行時的高效能和易用的API是矛盾的，但是我們可以通過編譯來解決這個問題，所以我寫了一個babel外掛通過編譯來解決API使用的問題 github.com/akira-cn/ba… ，但是，因為這是一個JavaScript庫，所以我沒有辦法在執行時判定某個變數的型別，所以我就只能要求使用者在進行矩陣運算的地方額外宣告變數的型別，比如 p * q 是普通的運算，vec3(p) * vec3(q) 才是求向量外積的運算。
如果這個庫是TypeScript庫的話，那麼我們就不用這麼做了，完全可以使用 p * q，因為我們在編譯時就可以知道它們的型別。前面說的是TS的優勢，但靜態型別和動態型別相比，還是動態型別更加靈活，所以有些專案不需要太依賴於型別檢查的話，用動態型別完全沒有問題，大多數時候，我們用eslint來檢查一些規範和錯誤就夠了。
來前端會有哪些新技術可能會火？前端想學習後臺技術的話怎麼一個過程會比較好？-@RickFang
請問前端朝哪些方向努力能更快成長，讓自己比較突出，未來前端會有哪些新技術可能會火？前端想學習後臺技術的話怎麼一個過程會比較好？
朝自己喜歡和感興趣的方向努力。我個人認為5G時代會給前端帶來一些顛覆性的改變。
想學習後端技術可以從Node入手
當專案進入平穩期，進行日常維護的時候，怎樣才能創造更大的價值 -@吳俊毅
當專案進入平穩期，進行日常維護的時候，怎樣才能創造更大的價值
需要學會時間管理，自我學習和成長。好的團隊會搭建好平臺幫助成員成長，但再好的平臺也需要靠自己的自驅力才能利用好。
你自我成長了就是創造了更大價值，因為有新的挑戰來的時候你就可以做出更驚豔的作品來。
請問您是如何在工作中發現樂趣，從而轉換為繼續努力下去的動力的？-@半橙汁
大佬好，請問您是如何在工作中發現樂趣，從而轉換為繼續努力下去的動力的？自制力是個好東西，可是真正運用起來就很有難度了。
我可能天生就覺得程式設計有趣。自制力是用來幫助你跨過某個坎兒的，不是用來讓你成功的。我比較相信多巴胺驅動，要想達到一定高度，一定要找到自己真正的樂趣。就像長跑一樣，跑完之後會身心愉悅，但是過程中會有難受的時候，這就需要自制力來幫你邁過艱難時刻。如果那個終點不是你真正想要的，每一步都是痛苦，那麼靠自制力是沒用的，而結果如果是你想要的且樂在其中，那麼自制力可以幫你。要獲得更強的自制力和享受過程中更多樂趣，冥想可以幫助你。
大佬怎麼看待讀框架原始碼和設計模式的先後順序？-@廢柴阿蔚
大佬怎麼看待讀框架原始碼和設計模式的先後順序？
說實在我不怎麼讀框架原始碼，需要用的時候才去看。設計模式我覺得是基本功，不過其實不僅僅是設計模式了，更重要的是抽象能力，設計模式只是抽象的一些歸納，我的理解。我覺得還可以多花點時間在數學、資料結構、演算法等基本功上，對JS也花點時間深入學習，然後可以試著自己去設計框架。
原先做php開發，現在想轉前端，87年的，有什麼好的建議 -@巴喬同學
我想問下，大齡程式設計師公司會要嗎，原先做php開發。現在想轉前端，87年的，有什麼好的建議
你原先php這塊的技術級別是怎樣的？高階別工程師是跨界的。如果你本職能力很強，那麼不用擔心，轉前端應該是很輕鬆的事兒
2年多的php開發經驗，平時主要寫後端介面，寫業務。感覺現在自己遇到瓶頸了。不知道如何深入學習，自己想多接觸點前端。但現在比較迷茫。一個年齡大。一個技術上不知如何深入發展。
如果是這樣我建議可以從Node入手，你可以先嚐試php轉Node，熟悉了JS，然後再嘗試前端，這樣會平穩一些
nodejs也算中高階前端必會的了，一個牛逼的前端的技術方向是什麼？-@疾風知勁草
大佬好，現在前端框架層出不窮，nodejs也算中高階前端必會的了，一個牛逼的前端的技術方向是什麼？是涉及後端做全棧還是選一個特定方向如資料視覺化，網頁遊戲深耕呢？
前端是一個職業發展方向，但不應該是技術學習的限制，我不建議前端工程師們把自己的技術和視野限制在前端領域。各種技術是可以互相借鑑的，我自己平時用的除了JS外，像PHP、Python、C和C++都偶爾使用。像視覺化之類的領域也是值得深挖的，但深入研究下去技術邊界就會越過前端領域，比如說掌握glsl，理解gpu，底層繪製還涉及比較多的數學知識，如線性代數、分形幾何等等，這些都是可以深入學習的。
大佬如何看到層出不窮的框架? -@一隻大表哥
大佬如何看到層出不窮的框架?還是對具體問題用具體框架
現在的流行框架的本質是用超程式設計（MetaProgramming）技術實現的DSL。儘管技術本身進步很多，應用場景也豐富了很多，但是不管是React、Vue還是Angular本質和jQuery依然類似，就是用超程式設計思想改寫或建立新的語法和語義，用來高效率地解決某些領域問題。
那麼為什麼要這麼做呢？是因為隨著Web應用的發展，原先的領域邊界不斷被打破，前端的範疇越來越廣，JS也從一個原本瀏覽器端的領域語言(DSL)發展成為了一門通用語言，所以相應地前端技術從一個（PC瀏覽器）領域技術慢慢演變成一門通用技術。既然是通用技術，那麼對應出現的新的細分領域，當然有更適合的領域語言或技術取代原來的位置，因為這些技術在特定領域能產生更高的生產力。
所以不論是React、Vue、Angular還是其他框架，我們談論的時候都不應該脫離特定領域，我們理解和學習它們的時候也是一樣。我想這能回答你提的這兩個問題。
非技術相關-- 360 篇
360現在都有用vue/react/Angela開發嗎？ -@王覺
我想知道360現在都有用vue/react/Angela開發嗎？之前很喜歡你們，但是移動端你們掉隊了，加油鴨
我們對技術棧沒有偏好，我們支援的業務用vue/react/angluar的都有，不同的業務適合的技術棧不同。我們會在程式碼規範和CI方面來要求大家，但是在框架選擇層面上相對自由。
今年360的前端星選拔要求大概是怎麼樣的呀？ -@jiumi
團長好，想問一個訊息，今年360的前端星是已經開始了嗎？今年和往年是不是不一樣呀？北京一週學習沒有了？還有。。。。??這個的選拔要求大概是怎麼樣的呀
前端星應該快啟動了，選拔要求和標準我們正在緊張制定中。具體你關注我們360招聘微信公眾號，到時候我們會通知的。
大專或者大專自考了本科，能不能進360 -@愣錘
大專或者大專自考了本科，能不能進360，假如技術ok的話
我們社招並沒有一定要有學歷，如果你有能力，是可以投簡歷試一試的。
福利--和月影共事
可以同月影大大共事的機會，360 奇舞團找人 ing
360 前端工程師
- 負責公司資訊流、商業化業務的前端開發。
- 參與公司前端技術平臺的開發。
- 參與前端新技術的預研。
任職要求
- 具備2年以上Web前端工作經驗，熟練掌握HTML5/CSS3/JavaScript相關技能
- 有較強的JavaScript編寫能力，能夠使用原生JavaScript實現複雜功能和UI模組
充分了解Web標準，熟悉瀏覽器規範和相容性 - 視野開闊，心態開放，不排斥新技術
- 良好的溝通能力，較強的責任心
- 瞭解Node，有Node服務端開發經驗者優先
關於奇舞團
我們是 360 最大的前端團隊，由月影親自帶隊。我們團隊有 ThinkJS 的作者李成銀、趙文博、樑超等前端大牛，負責 360 整體前端平臺的搭建，並支援 360 大部分核心產品的前端研發。我們的奇舞週刊是國內前端圈子裡非常受歡迎的技術週刊。我們還有自己的技術創新產品包括爆米兔、聲享、眾成翻譯等。
我們是國內最優秀的前端團隊之一，有深厚的技術沉澱和完備的人才培養體系，期待你的加盟，為你提供良好的成長舞臺。
簡歷投遞：t.cn/EfoY4jY
由於篇幅原因，本期只摘錄了部分問題，月影 也回答了很多其他的技術、非技術問題，歡迎去他的 AMA 下面交流技術喲，傳送門。