第十八期 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
请问您对于前端图形化趋势的看法
我现在在做可视化相关的东西, 所以去年设计了 https://github.com/spritejs/spritejs 开源框架, 正好上一次 D2 的时候 winter 大大去讲了一个 spritejs 的 topic, 基本上说出了我对图形化趋势的看法, 我觉得这个领域未来一定会有很大的空间, 不说其他相关的领域, 就大屏可视化展现这一块, 未来几年会有很大的市场.
怎么样才可以有效利用时间做好前端开发呢?-@, 子筠
团长大大好, 我是入行不久的前端小白. 想请教您, 学好前端的方法. 我们现在是前台, 中台, 后台这种开发模式, 我觉得自己每天加班可晚, 效率还可低, 业务比较复杂, 前端既要处理很多数据又要做好交互, 怎么样才可以有效利用时间做好前端开发呢? 另外, 还想请问您, 关于前端这十年来的变化, 您有何感悟? 未来你觉得会如何变呢, 作为小白, 我们又如何提升自己以不变应万变?
做好时间管理, 保证自己有一定的时间学习, 养成适合自己的知识沉淀习惯, 有的人适合写技术文章, 有的人关注和参与开源项目, 方法可以不一样, 要找到适合自己的. 过去十年的前端变化我认为是互联网产品和硬件与终端技术的发展使得前端不再是面向单一领域而成为一种通用技术, 对应地, 框架和工具发展成为特定领域的技术. 元编程思想是框架设计的主流, 工程化和质量提升是 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 使用的问题 , 但是, 因为这是一个 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, 然后再尝试前端, 这样会平稳一些
Node.JS 也算中高级前端必会的了, 一个牛逼的前端的技术方向是什么?-@疾风知劲草
大佬好, 现在前端框架层出不穷, Node.JS 也算中高级前端必会的了, 一个牛逼的前端的技术方向是什么? 是涉及后端做全栈还是选一个特定方向如数据可视化, 网页游戏深耕呢?
前端是一个职业发展方向, 但不应该是技术学习的限制, 我不建议前端工程师们把自己的技术和视野限制在前端领域. 各种技术是可以互相借鉴的, 我自己平时用的除了 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 大部分核心产品的前端研发. 我们的奇舞周刊是国内前端圈子里非常受欢迎的技术周刊. 我们还有自己的技术创新产品包括爆米兔, 声享, 众成翻译等.
我们是国内最优秀的前端团队之一, 有深厚的技术沉淀和完备的人才培养体系, 期待你的加盟, 为你提供良好的成长舞台.
简历投递: http://t.cn/EfoY4jY
由于篇幅原因, 本期只摘录了部分问题, 月影 也回答了很多其他的技术, 非技术问题, 欢迎去他的 AMA 下面交流技术哟, 传送门.
往期 AMA
掘金 AMA: 听《React 状态管理和同构实战》作者 --LucasHC 说 React 和前端那些事
2018 年掘金 AMA 年度总结: 16 位技术大牛他们的技术事
来源: https://juejin.im/post/5c8b1c156fb9a049b507b31c