掘金 AMA：聽奇舞團團長--月影談論他對技術 & 我的成長見解

第十八期 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 下面交流技術喲，傳送門。

往期 AMA

• 掘金 AMA：聽《React 狀態管理和同構實戰》做者--LucasHC 說 React 和前端那些事
• 2018 年掘金 AMA 年度總結：16 位技術大牛他們的技術事