Taobao FED

分类:Web开发

从达标到卓越 —— API 设计之道

新技术层出不穷,长江后浪推前浪,而浪潮褪去后能留下来的,是一些经典的设计思想。 在前端界,以前有远近闻名的 jQuery,近来有声名鹊起的 Vue.js。这两者叫好又叫座的原因固然有很多,但是其中有一个共同特质不可忽视,那便是它们的 API 设计 非常优雅。 因此这次我想来谈个大课题 —— API 设计之道。 讨论内容的定义域本文并不是《jQuery API 赏析》,当我们谈论 API 的设计

编写「可读」代码的实践

编写可读的代码,对于以代码谋生的程序员而言,是一件极为重要的事。从某种角度来说,代码最重要的功能是能够被阅读,其次才是能够被正确执行。一段无法正确执行的代码,也许会使项目延期几天,但它造成的危害只是暂时和轻微的,毕竟这种代码无法通过测试并影响最终的产品;但是,一段能够正确执行,但缺乏条理、难以阅读的代码,它造成的危害却是深远和广泛的:这种代码会提高产品后续迭代和维护的成本,影响产品的稳定,破坏团

QCon San Francisco 2016 前端参会总结

11 月初有幸参加了在美国旧金山举行的 Qcon 会议,会议之余在小伙伴们的各路关系中拜访了一些美国的科技公司。此行受益颇多,这里谈一下自己的所见、所闻以及自己的感受。 会议内容会议内容覆盖了前端、设计、容器、微服务、devops、JAVA 等等,内容非常的丰富,这里选择几个前端相关的场做下分享。 Webpack: The One Build Step To Rule Them Allwebp

React 组件间通讯

React 组件间通讯说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系。假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父子:Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1 兄弟:Child_1 与 Child_2、Child_1_1 与 Child_2、e

聊一聊 JavaScript 中的错误隔离

接口请求失败、接口中部分数据缺失、运营数据不符合预期… 当我们的应用发布上线后,就开始面临这些风险。 而一旦这些问题导致了 JavaScript 报错(如空指针异常),并且没有被有效地隔离,就有可能引发页面的白屏、无法交互等线上问题。 在双 11 准备期间,我们收集了过往一年前端相关的线上问题,在收集的 21 个案例中,竟有一半的问题都与「数据异常触发页面显示异常」这个原因有些相关。 如何将错误

ES6 你可能不知道的事 - 进阶篇

前言这篇文章主要会针对上篇未涉及到的进阶特性展开;而与前一篇文章相同,本文主要介绍这些特性的一些容易忽略的部分,希望能对大家正确认识和使用 ES6 有帮助。 还是那句话,时间和能力有限,针对文章中的问题或不同意见,欢迎随时拍砖、指正! 正文Module模块化是个进行了很久的话题,发展历程中出现过很多模式,例如 AMD, CommonJS 等等。 Module 是 ES6 的新特性,是语言层面对模

Velocity NYC 2016 参会总结

就在刚刚过去的九月,作为 FED 团队的代表有幸参加了美国纽约的 Velocity Web 性能和敏捷运维大会。在大约一周的行程中,会议团队组织了十分丰富的行程,会议团队也在内部对于 Velocity 的演讲内容做了多次讨论。整个行程在我看来是十分圆满的。 Velocity @ NYCVelocity 作为 O’Reilly 旗下的老牌会议品牌,从 2008 年开始专著 Web 性能、DevOp

理解 Babel 插件

前言相信目前常与 ES6 代码打交道的同学对 Babel 应该不会陌生,在 ES6 代码被编译转化为 ES5 代码的过程中,Babel 插件显得尤为重要,我们最后经由 Babel 生成的代码取决于插件在这一层中做了什么事,在探索这其中的过程之前,我们先来了解下一些所需的基础知识。 抽象语法树Babel 的工作流可以用下面一张图来表示,代码首先经由 babylon 解析成抽象语法树(AST),后经

细说 webpack 之流程篇

引言目前,几乎所有业务的开发构建都会用到 webpack 。的确,作为模块加载和打包神器,只需配置几个文件,加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合,它的整体流程及思想对我们来说还是很透明的。那么接下来我会带你了解 webpack 这样一个构建黑盒,首先来谈谈它的流程。 准备工作1. webstorm 中配置 webpack-webs

React 实践心得:key 属性的原理和用法

我们知道,React 元素可以具有一个特殊的属性 key,这个属性不是给用户自己用的,而是给 React 自己用的。如果我们动态地创建 React 元素,而且 React 元素内包含数量或顺序不确定的子元素时,我们就需要提供 key 这个特殊的属性。 如果你有下面这样的代码: 123456const UserList = props => ( <div> <h3&