第十八期 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 位技术大牛他们的技术事