Taobao FED

分类:Web开发

理解 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&

React 实践心得:react-redux 之 connect 方法详解

Redux 是「React 全家桶」中极为重要的一员,它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单,除了 React,它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用,就还需要一些额外的工具,其中最重要的莫过于 react-redux 了。 react-redux 提供了两个重要的对象,Provider 和 connect,前

高性能 React 组件

前言组件的重新渲染说到 React 组件,肯定离不开组件的 props 和 state,我们可以在 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态。当 props 和 state 发生变化时,React 会重新渲染整个组件,组件重新渲染的过程可简化如下图: 当组件的 props 或 state 变化,React 将会构建新的 virt

论版本号的正确打开方式

版本号广泛运用于开发的各种场景:NPM 包的版本定义、对 NPM 包的特定版本的依赖指定、git 的 daily 版本号分支…… 面对如此多的场景,版本号的命名却存在很大问题。举些例子: 开始写一个新项目 / 模块时,不管三七二十一,都从 0.0.1 起版本,直到项目不再维护时,版本还停留在 0.0.48,前两位永远都是 0。 API 变化巨大,而版本号雷打不动一步一个脚印。一个二方包从 0.

ES6 你可能不知道的事 - 基础篇

序ES6,或许应该叫 ES2015(2015 年 6 月正式发布),对于大多数前端同学都不陌生。 首先这篇文章不是工具书,不会去过多谈概念,而是想聊聊关于每个特性 你可能不知道的事,希望能为各位同学 正确使用 ES6,提供一些指导。 对于 ES6,有些同学已经在项目中有过深入使用了,有些则刚刚开始认识他,但不论你是属于哪一类,相信这篇文章都有适合你的部分。针对文章中的问题或不同意见,欢迎随时拍砖

性能优化:memoization

memoization适用于递归计算场景,例如 fibonacci 数值 的计算。 12345678910111213141516171819'use strict';let n = process.env.N || 50;console.log('process $', process.pid);console.log('fibonacci recursive version with n =

聊一聊淘宝首页和它背后的一套

从 14 年双十二结束开始接手淘宝首页,到如今差不多 1 年半时间了,不久前完成了首页相关工作的交接。经历了两次改版和一次从 PHP 到 Node 的迁移,还是颇有感受,下面给大家分享下。 一、相关背景介绍淘宝首页是淘宝的门面,承载着几乎淘系所有业务的入口,流量很大,量级单位为亿。近几年无线端崛起,业务重点开始向无线终端偏移(目前不能叫偏移,基本以无线为主了),所以淘宝 PC 端首页的流量也有削

视频播放的那些事

视频作为淘宝教育业务的基础服务,本文根据自身在手淘中视频播放的实践,谈谈在手淘中视频播放遇到的问题及其解决方案。 播放器 在手淘过去一年多的历史长河中存在五种类型的播放器。 原生 HTML5 video 标签 Android 5.3.2 版本之后的 UC 内核增强 SAC 播放器 Android 5.4.9 版本之后的 UC HAC 播放器 Android 5.3.2 版本之前的 Glu