原文：The Inner Workings Of Virtual DOMPreact VDOM 工作流程图虚拟DOM (VDOM，也称为 VNode) 是非常神奇的，同时也是复杂难懂的。React，Preact以及其他类似的 JS 库都使用了虚拟 DOM 技术作为内核。可惜我找不到任何靠谱的文章或者文档可以简单又清楚解释清虚拟DOM的内部细节。所以，我就想到自己动手写一篇。注：这是一篇很长的博客。为了让内容更容易理解，我添加了很多图片。这也导致这篇博客看上去更长了。在这篇博客中，我是基于Preact的代码和 VDOM 机制来介绍的。因为 Preact 代码量更少，你在以后也可以不费力地自己看看源码。但是我觉得绝大部分的概念也同样适用于 React。我希望读者通过这篇博客可以更好地理解虚拟DOM，并期待你们可以为 React 和 Preact 等开源项目提供贡献。在这篇博客中，我会通过一个简单的例子来仔细地介绍虚拟DOM的每个场景，给大家虚拟DOM是如何工作的。特别地，我会介绍以下内容：Babel 和 JSX创建 VNode – 单个虚拟 DOM 元素处理组件和子组件初始渲染和创建 DOM 元素再次渲染删除 DOM 元素替换 DOM 元素演示程序演示程序是一个简单的可筛选的搜索程序，包含了两个组件FilteredList和List。List 组件会渲染一个城市列表（默认情况是 Cal ...继续阅读 (20)

最近研究了下 React Native 的 Code Push 热更新，先来 iOS 版本~安装 code-push-cli 工具npm install code-push-cli@latest -g初始化 react native 工程react-native init CodePushExample在工程内安装 react-native-code-pushcd CodePushExample && yarn add react-native-code-pushAdd Link12345# react-native 0.27+react-native link react-native-code-push# react-native <0.27rnpm link react-native-code-push? What is your CodePush deployment key for Android? What is your CodePush deployment key for iOS均先按回车忽略修改代码，把index.ios.js和index.android.js里面的代码改为require('./demo');，同时在同级增加demo.js，内容如当前 repo 所示。用 xcode 打开CodePushExample/ios/CodePushExample.xc ...继续阅读 (18)

原文地址：https://medium.com/@kureevalexey/how-to-create-your-own-native-bridge-bfa050e708fc#.ykryuzmunJSVM and the first adventureWhat do you know about JavaScript engines? Did you ever try to embed one? In this chapter I’m going to guide you through the dark spooky forest of hosted objects, virtual machines, interpreters and other evil spirits that we call JavaScript engines.你之前对 JS 引擎是否有过了解？有没有试着在自己的项目里面嵌入一个 JS 引擎玩玩儿？在这篇文章里面，我会给你一些指引，以便可以顺利通过含有 Hosted Objects, Virtual Machines, Interpreters 以及一些其它稀奇古怪玩意儿的『魔法森林』。（不太准确）I know that it may look scary, but don’t forget that a journey of a thousand mi ...继续阅读 (21)

原文地址：How you create your own Native Bridge和很多人一样，在我弄清楚 React Native 的实现机制之前，其实已经在实际项目中用过一段儿时间了。不过在我学习 React Native 实现机制的过程中，逐渐开始给这个项目贡献代码，最终成为核心开发者中的一员。尽管如此，这个项目中的 Native Bridge 对我来说还是很神秘的，它到底是通过什么『魔法』打通了 JavaScript 和 Objective C 这两种不同编程语言之间的边界。正因为缺少对这部分内容的了解，才促使我花了一些时间做了这些调研，然后把我的理解通过这几篇文章分享给大家。毋庸置疑，在没有一个对项目清晰的规划设计之前就写代码是没有任何意义的。架构设计对于软件开发来说是很重要的一步，我会讲解整个思考过程，详细解释我们做的一些决策以及背后的原因。第一章：设计一个架构第一个迭代在开始一个新项目之前，首先需要确定一下在这个项目中应该采用哪些技术方案：在我们这个场景下，选择的技术方法如下：Objective C 来控制 Cocoa UIC++ 来和 JSVM 交互JSVM (V8 或 Chakra)JavaScriptReact + 自定义渲染器我默认主要的执行逻辑是用 C++ 写的，它内部有一个自定义全局上下文的 JS 引擎（基本上所有主流的 JS 引擎 都提供扩展内置函数的 ...继续阅读 (18)

背景近几年，前端应用（WebApp）正朝着大规模方向发展，在这个过程中我们会对项目拆解成多个模块/组件来组合使用，以此提高我们代码的复用性，最终提高研发效率。在编写一个复杂组件的时候，总会依赖其他组件来协同完成某个逻辑功能。组件越复杂，依赖越多，可复用性就越差，我们可以借助软件工程中优秀的编程理念来提高复杂组件的可复用性，以下将详述其中之一的依赖倒置理念。什么是 IoCIoC 全称 Inversion of Control，中文术语为依赖倒置（反转），包含两个准则：高层次的模块不应该依赖于低层次的模块，他们都应该依赖于抽象。抽象不应该依赖于具体实现，具体实现应该依赖于抽象其背后的核心思想还是：面向接口编程。我们用一个例子来说明：我们要实现一个列表 A，能够加载一系列的信息并展示，于是很自然的我们遵守职责单一功能，将展示和加载两个逻辑拆分成2个类：123456789101112131415161718192021222324252627282930// Loader.jsexportdefaultclassLoader {constructor(url) {this.url = url;}async load() {letresult = await fetch(this.url);returnresult.text();}} ...继续阅读 (22)

开发业务代码的时候，我们总能发现一些通用的功能。这时候，作为一个在互联网时代富有分享精神的程序员，就会想要把项目开源出去，让更多的小伙伴去使用，偶尔可能会有大神评论，能学到很多。 在 GitHub 上， README 是最先让人看到的，一些应用广泛的项目的 README ，除了非常详细的文字介绍，还常常会带有很多小徽章，比如Vue的这个 README 的开头：Vue这些徽章 (badage) 展示了代码的测试覆盖率、构建状态、在各个浏览器中的运行情况，这会让项目显得更加专业和有说服力。本文以笔者集齐了一套徽章的亲身经历，总结了过程中的主要流程和一些踩到的坑，欢迎大家补充，让我们的项目流行起来！首先，安利一下我们开发的一个基于React和Masterial Design的组件库Melon，欢迎大家使用，如果能加个星，提个 pr 就更欢迎了。测试代码的重要性靠人工来保证项目的维护总是不出差错是不靠谱的，人总有健忘和糊涂的时候，尤其是当项目越来越复杂时，一个人甚至可能无法全部了解项目的全部逻辑，这时我们就要依靠测试来保证项目的可靠性，这里的测试包括但不限于，单元功能测试，UI 测试，兼容性测试等等。关于单测框架已经有很多教程和文档，一个测试体系大体应该包含四部分测试运行器 Test Runner:edp-testkarma测试框架 Testing Framework:jasminemoc ...继续阅读 (26)

原文：Composers and audiences(没错，这篇文章是关于 JavaScript 的，在这个比喻里 YY 一会吧。)想象一下自己是一个十八世纪的年轻宫廷作曲家。你刚刚从学校里出来到维也纳，心里有一个目标：向前辈大师们学习，提高你的技艺。你听过莫扎特的令人震撼的歌剧，巴赫沉重的赋格曲，也梦想着用这种传奇的艺术形式来征服你的听众。Source: Wikimedia Commons你对近期在乐器响度上的进展感到激动——毕竟小提琴的音孔在你那个年代才刚刚完善。你还被探索者们所描述的来自远东的陌生记谱法深深吸引，它们完全不像你在学校所学的12个音符音阶。你甚至还听过非洲鼓复杂的韵律，要远远的复杂于欧洲标准锁步打击乐器。于是在你上班的第一天，你靠近乐队的乐长，兴奋地问：“现在宫廷正在发展什么样的新技术？什么样的音乐创新才会在未来几年震惊的歌剧爱好者们呢？”大师叹了口气，把一只手搭在你的肩膀上，解释道：“现代作曲是非常艰巨的一件事情，当今作曲家们之间争论最激烈的就是如何适当的使用乐谱。”“你看”，他说，“不久前我们意识到对于不懂意大利语的人来说，像播奏（Pizzicato）与快板（Allegro）这样的注解理解起来是比较困难的。此外，它们把页面弄得杂乱，它们让音乐家们在视奏的时候耗费了太多的时间。因此，我们正逐步用表达同样概念的符号来代替它们。”“啊”，你说，对于如此平淡的主题你 ...继续阅读 (47)

前言貌似前端[1]圈一直以来流传着一种误解：前端用不到算法知识。[2]长久以来，我也曾受这种说法的影响。直到前阵子遇到一个产品需求，回过头来看，发现事实并非如此。前端排序前端排序的场景前端将排序条件作为请求参数传递给后端，后端将排序结果作为请求响应返回前端，这是一种常见设计。但是对于有些产品则不是那么适用。试想一个场景：你在使用美食类APP时，是否会经常切换排序方式，一会儿按照价格排序，一会儿按照评分排序。实际生产中，受限于服务器成本等因素，当单次数据查询成为整体性能瓶颈时，也会考虑通过将排序在前端完成的方式来优化性能。排序算法感觉这个没什么介绍的必要，作为计算机科学的一种基础算法，描述就直接照搬Wikipedia。这里存在这一段内容纯粹是为了承(cou)上(man)启(zi)下(shu)。JavaScript的排序既然说到前端排序，自然首先会想到JavaScript的原生接口Array.prototype.sort。这个接口自ECMAScript 1st Edition起就存在。让我们看看最新的规范中关于它的描述是什么样的。Array.prototype.sort规范Array.prototype.sort(compareFn)The elements of this array are sorted. The sort is not necessarily stable (th ...继续阅读 (23)

回想n年前刚写前端的时候，在处理一个’鼠标hover切换背景图会闪’的问题时，将两张背景图合成一张图片，顺利解决问题。这应该是我第一次用到雪碧图的情况。雪碧图作为背景在切换时不会有因为需要等待下载而产生的闪现如今，打开一个站点，呈现铺天盖地的图片资源的页面随处可见。而多数站点更会用一套包含几十个风格统一的图标的图标库，加之移动端的占比与日俱增，雪碧图这项技术被运用的就越来越普遍。最简单，最实用的使用方法得益于伪元素的功劳，在不破坏页面结构，不增加多余标签的情况下，通过::after创建一个你所需要图标大小的伪元素，并将所需要的图标通过background-position定位到指定的空间，对应的图标变顺利地呈现出来。123456789101112.message:after{background:url(../img/sprite.png) scroll0px-86pxno-repeat transparent;content:'';text-indent:-9999px;overflow:hidden;position:absolute;top:0;left:50%;margin-left:-10px;width:20px;height:22px;}通过伪元素实现的图标一些问题看上去貌似是一个完美的解决方案，然而真的是这样么？我们来看一个例子：一个界面目前有这 ...继续阅读 (31)

在ES2015发布后，JavaScript最终也有了一个标准的模块化方案，而同时从webpack开始，也带来了一波“一切皆模块”的潮流。整个2015-2016的前端发展中，除去在UI层不断的努力和突破外，几乎每一件事都和模块化脱不开关系。本文也试图从几个方面简单地说一下模块化，并分析一些在模块化实施中产生的误区。模块的本质模块化顾名思义，指的必然是将程序拆分为多个“模块”，使用模块间通信的方式进行交互。这和其它对程序逻辑进行拆分的手段是一样的，无论是拆成类、拆成对象还是拆成啥，其目的无非是隔离内部的实现以及声明对外的接口。事实上自远古时代起，JavaScript就在努力进行实现封装的尝试，无论是通过IIFE避免全局变量，还是基于Namespace进行管理，以至后期的AMD、CJS社区模块化方案，直到现在的ES Module标准模块化，无不以上为目的。在模块化的思想里，一个模块应该是：需要一系列的依赖。涉及一个内部的实现。提供一系列的接口。一个模块的接口既然是它的结构表达，就如同一个类的属性和方法一样，应该是一个在同版本内稳定的签名。在实际的版本管理中，对于模块应该严格遵守semver等版本号规则，当模块对外声明的接口有所变化时，通过不同层级的版本号的变化以示区分。从ES Module开始在ES2015发布后，ES Module也事实上成为了JavaScript的模块标准。从语法上 ...继续阅读 (38)

在 6 月 30 这个 ECharts 三周年之际我们发布了 3.2.0，这个版本是 ECharts 进入 3 之后最大的一次升级，新增的特性中有些是大家反复提了好久的，有些是我们自己想了很久的，有些我们在实现后光看看效果都觉得非常激动，有些可能看不出来区别但是我们也在底层做了很多工作。希望这个开发了长达一个多月时间的新版本不会让大家失望。新版本都有哪些东西？在功能方面，这个版本新增了 brush（刷选），markArea，单轴等组件，除此之外对已有的图表组件，比如折线图，线图，dataZoom，坐标轴等做了或多或少的增强和优化，当然还有一些 bug 的修复。这个版本在底层的性能上也做了很多的优化工作，首先直观的用数据来说大部分场景底层重绘的效率是原先的 2x~3x。其次是引入了渐进式渲染和单独的高亮层防止图形很多的时候交互和重绘带来很严重的阻塞。同时我们官网还新增了一款主题编辑器方便大家编辑自己的主题下面会一一介绍这些新特性。多图流量党慎入！完整无图的 changelog 见这里新增 brush 组件首先是这次新增的最重要的交互组件，刷选 brush，先看下面几个 Brushing and Linking 的效果 gif：散点矩阵与平行坐标轴的联动K 线图与柱状图的联动平行坐标与地图的联动brush 组件可以通过矩形选择框快速的进行框选，也可以更细致的使用多边形选择工具，在散点矩 ...继续阅读 (31)

原文：http://www.2ality.com/2016/01/private-data-classes.html如何在ES6中管理类的私有数据？本文为你介绍四种方法：在类的构造函数作用域中处理私有数据成员遵照命名约定（例如前置下划线）标记私有属性将私有数据保存在WeakMap中使用Symbol作为私有属性的键对构造函数来说，前两种方法在ES5中已经很常见了，后两种方法是ES6中新出现的。现在我们在同一个案例上分别用这四种方法来实践一下：1. 在类的构造函数作用域中处理私有数据成员我们要演示的这段代码是一个名为Countdown的类在counter（初始值为 counter）变成0时触发一个名为action的回调函数。其中action和counter两个参数应被存储为私有数据。在这个实现方案中，我们将action和counter存储在constructor这个类的环境里面。环境是指JS引擎存储参数和本地变量的内部数据结构，变量存在即可，无论是否进入一个新的作用域（例如通过一个函数调用或者一个类调用）。来看看代码：12345678910111213classCountdown {constructor(counter, action) {Object.assign(this, {dec() {if(counter <1)return;c ...继续阅读 (30)

误区在设计产品时，由于不少产品经理、工程师并没有「字符不一定等宽」的概念，往往会给出「超过 n 个字符截断显示，英文数字算一个字符，汉字算两个字符」这样的需求。要知道，这里面的问题有很多：为了显示效果，前端往往会采用优先西文字体族的font-family设置，即西文字符用西文字体，汉字用中文字体，这就很容易使得文本的宽度不好根据字符数来控制。首先，非代码的内容本身就不一定适合用等宽西文字体显示。其次即使用了等宽西文字体，汉字也基本不可能正好是其两倍宽。满足这个需求的，只能放弃西文字体，让西文字符也使用中文字体，并且使用中易系列的几个字体了（比如 SimSun，也就是 Windows 下的「宋体」）。（丑不说，还只能满足 Windows 下的需求。）这种需求甚至在很多时候还会和某些字符编码长度的概念产生混淆，催生「长度限制 n 个字节，其中英文数字算 1 字节、汉字算 2 字节」这样的奇葩说法。顺便歪个楼，这种「西文等宽、汉字占两倍宽度」的需求正常情况下只会存在于程序员的代码编辑器里。如果你是这种强迫症晚期，又不想用中易宋体，可以考虑试试Belleve制作的Inziu。思路和原理对于前端来说，数据库存储的限制不应该是我们需要关心的问题。看下前面的「伪需求」，我们实际的需求往往是从视觉角度出发的「超出特定高度截断显示」或「超出特定行数阶段显示」两种。由于实现方式的差异，其实可以分为「单 ...继续阅读 (30)

原文：https://github.com/blog/2112-delivering-octicons-with-svgGitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显，但你马上就能体会到 SVG 图标的优点。Octicon 上的对比切换到 SVG 以后，图标会作为图片渲染而非文字，这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的 SVG 版本。为何使用 SVG？图标字体渲染问题图标字体从来只是一种 hack。我们之前使用一个自定义字体，并将图标作为 Unicode 符号。这样图标字体就可以通过打包后的 CSS 来引入。只要简单地在任意元素上添加一个 class，图标就可以显示出来。然后我们只使用 CSS 就能即时改变图标的尺寸和颜色了。不幸的是，虽然这些图标是矢量图形，但在 1x 显示屏下的渲染效果并不理想。在基于 WebKit 的浏览器下，图标可能会在某些窗口宽度下变得模糊。因为此时图标是作为文本输出的，本来用于提高文本可读性的次像素渲染技术反而使图标看起来糟糕许多。对页面渲染的改进因为我们直接将 SVG 注入 HTML（这也是我们选择这种方式更大的原因），所以不再会出现图标字体下载、缓存、渲染过程中出现的样式闪动。页面闪动可访问性就像在《图标 ...继续阅读 (23)

原文：Mixins Are Dead. Long Live Composition当 React 0.13 推出的时候，大家都震惊了。它的开篇表达得很明确，mixin 正在逐步退出历史舞台：不好意思，React ES6 将不再支持mixin，否则有悖 JavaScript 语义化的初衷。在 JavaScript 中我们找不到通用的标准来定义 mixin，事实上，ES6 也摒弃了不少支持 mixin 的特性。语义混乱的类库已经很多了。尽管我们认为应该有一个统一的方法来定义 mixin，便于对 JavaScript 各种“类”的操作，但 React 并不打算这么做。mixin 始终会来的，某些人可能会有这样的理解。但实际上，Sebastian Markbåge，伟大的API终结者，也不太看好 mixin：“坦白说，mixin 其实是一个后门，它可以绕过系统对某些复用的限制，但是语义化的 React 不该是这样的。让组合更加便捷较之随心所欲地 mixin 应该享有更高的优先级，对 React 来说，这才是正事。”为什么要用 mixin？mixin 解决了什么问题？我们是否可以换一种无继（Tong）承（ku）的方式去解决这些问题？通用函数这个例子举得稍微有点脑残。与其用 mixin 的方式去共享通用功能，直接将其提取出来并模块化，需要的时候直接引用不是更好么？生命周期和状态选择这是 mix ...继续阅读 (32)

AMD为浏览器端开发带来了诸多好处：模块声明、异步加载、依赖管理、bundle等，已经成为很多团队应用开发的标配。在正确的代码下，一切看起来都还好，但是当问题出现时，追查过程通常会令人头疼，此时Loader的提示信息对错误的追查非常关键。ESL是熊厂应用得比较多的 AMD Loader，本篇blog试图对ESL的错误场景与信息提示策略，以及如何追查错误，进行简单的介绍。主要涉及以下3个方面：模块结构问题初始化运行中的错误疏忽导致在模块定义内使用了global require先厚脸皮求关注。首先，建议大家在开发中追查错误时，使用 chrome 浏览器的开发者工具。因为它对 re-throw 错误的 stack 跟踪与查看支持得比较好。模块结构问题和 RequireJS 一样，ESL 支持通过waitSeconds参数，指定超时时间。当到达指定时间后，如果模块还没加载完成，将抛出MODULE_TIMEOUT错误。这种错误通常用于追查模块结构问题。模块缺失模块缺失是常见的模块结构问题场景。下面的示例代码中可见，a模块和c模块是缺失的。1234567891011121314151617181920// main.jsdefine(function(require){vara =require('./a');varb =require('./b');});// a.js/ ...继续阅读 (26)

在不少框架中，都会对“扩展”这一概念有需求。所谓扩展，即一个可组合的组件，用于嵌入到目标的生命周期中，对目标的行为进行额外的处理使得目标拥有不同的表现。一个非常简单的案例即日志的记录。通常框架自身并不会有业务相关的日志记录的功能，而业务代码也不希望混入并非业务逻辑的日志记录部分。那么使用一个扩展，在合适的点进行日志的收集和存储是很合适的设计。在以往，比较流行的扩展通常有几种形式：Mixin形式。这种形式下扩展与目标形成完全的覆盖关系，属于暴力而简单的方法。class Component { constructor({mixins}) { mixins.forEach(mixin => Object.assign(this, mixin)); } doWork() { // ... } } let logMixin = { doWork(...args) { console.log('Start do work'); Component.prototype.doWork.apply(this, ...args); console.log('Finish do work'); } }; let foo = new Component({mixins ...继续阅读 (25)

原文：Are you ready for the era of big data? 14 popular JavaScript based data visualization tools俗话说，一图胜千言。图形化的信息可以让人们对数据有更加直观清晰的理解，让信息发布者更加高效地展示自己的核心内容。在前端开发中，如果缺少合适工具，制作数据可视化图表会十分复杂。然而随着数据可视化概念逐年火热，有较多优秀的图表开源库和制作工具脱颖而出。下面，我们就拿其中比较有名的 14个产品进行简要介绍。AnyChart链接：http://www.anychart.com/AnyChart 是基于 Flash/JavaScript(HTML5) 的图表解决方案，它可以轻松地跨浏览器、跨平台工作。除了基础的图表功能外，它还有收费的交互式图表和仪表功能。它可以通过 XML 格式获取数据，该方式让开发人员非常灵活地控制图表上的每一个数据点，而当图表数据点数量偏大时，则可以采用 CSV 数据输入，减小数据文件大小和图表加载时间。amCharts链接：http://www.amcharts.com/amCharts 是一款高级图表库，致力于对 Web 上的数据可视化提供支持。它所支持的图表包括柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图、燃烧图和金字塔图等等。amCharts 库是一款完全独立的类 ...继续阅读 (22)

ECharts 在 github 上沉寂了数个月，想必很多小伙伴充满了各种疑问，ECharts是不是不维护了？你们以后是不是不做了？别着急，其实这几个月，我们的设计师、工程师一直厉兵秣马，加班加点，没有周末，没有女朋友地疯狂工作中。终于，ECharts 的又一个重大版本即将出炉，在 ECharts 3 正式版发行前，我们选择了今天，12.3，一个能够隐喻我们一步一步从1.0到2.0再到3.0走来的日子，提前给广大用户带来 ECharts 3 的测试版。那 ECharts 3 究竟会有哪些新的特征，我们用数月究竟在颠覆着自己的什么呢？接下来让我们一一为您道来：焕然一新的面貌焕然一新的面貌从底层的技术架构到上层的外观展现，都进行了较大的升级。无需多言，请看下面的诸多例子。数据和坐标系的抽象及统一ECharts 3 中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例如，线性表以及树、图的节点列表的结构可以归一化为这样的二维数组：123456[[1,91,45,125,"良"],[2,65,27,78,"良"],[3,83,60,84,"优"],...]这种设计利于跨组件的数据处理（数据过滤、视觉编码等），并且为多维度的数据使用带来了方便。ECharts 3 中另一个重要的数据结构抽象是独立出了“坐标系”概念。事实上在 ECharts 2 中已经有gridpolar配置项 ...继续阅读 (70)

原文：https://quickleft.com/blog/defusing-race-conditions-when-using-promises/网络时代，创建现代软件时其中一个很大的限制是所需要的数据往往在远程服务器上。应用程序在等待网络请求时简单地锁死是不现实（甚至不可能）的。相反，我们必须让应用程序在等待时保持响应。。为此，我们需要写出并发的代码。当应用的某一部分正在等待网络请求的响应时，其他部分必须继续运行。Promise对于编写非阻塞型的代码是很不错的工具，而且你的浏览器就支持这个。Promise 能让潜在可怕的异步代码变得非常友好。下面假设一个博客的文章视图这样从远程服务器加载一篇文章并显示它：12345678910111213141516// Called from `componentWillMount` and `componentWillReceiveProps`:ArticleView.prototype.updateArticle =function(props){this.setState({error:null,title:null,body:null});ArticleStore.fetch(props.articleID).then(article => {this.setState({ti ...继续阅读 (29)

All code in any code-base should look like a single person typed it, no matter how many people contributed. — idiomatic.jsfecs是以百度前端代码规范为目标的前端代码风格套件，套件包括htmlcs、csshint、lesslint和jformatter，此外还有社区的相关开源模块cssbeautify、csscomb、fixmyjs 和 esformatter：HTMLCSSLessJavaScriptLinterhtmlcscsshintlesslinteslint+Fixerhtmlcscssbeautifycsscombcssbeautifycsscombfixmyjsjformatteresformatter显而易见，fecs不仅能检查 HTML/CSS/LESS/JavaScript 代码的规范问题，而且还能修复代码的规范问题。代码检查fecs-check代码的检查，目前主要是以百度前端代码规范（JS/CSS/HTML） 的检查为首要目标，同时根据EFE的技术规划，为Less 代码规范的检查带来了 lesslint。JavaScript相对于前端的其他语言，JS 的 linter 选择众多，然而我们最终选择了 eslint，同时针对我们的代码规范作了新 ...继续阅读 (69)

背景：MVC是一种架构设计模式，它通过关注点分离鼓励改进应用程序组织。在过去，MVC被大量用于构建桌面和服务器端应用程序，如今Web应用程序的开发已经越来越向传统应用软件开发靠拢，Web和应用之间的界限也进一步模糊。传统编程语言中的设计模式也在慢慢地融入Web前端开发。由于前端开发的环境特性，在经典MVC模式上也引申出了诸多MV*模式，被实现到各个Javascript框架中都有多少的衍变。在研究MV*模式和各框架的过程中，却是“剪不断、理还乱”：为什么每个地方讲的MVC都不太一样？MVP、MVVM的出现是要解决什么问题？为什么有人义正言辞的说“MVC在Web前端开发中根本无法使用”？带着十万个为什么去翻阅很多资料，但是看起来像view、model、controller、解耦、监听、通知、主动、被动、注册、绑定、渲染等各种术语的排列组合，像汪峰的歌词似的。本篇希望用通俗易懂的方式阐述清楚一些关系，由于接触时间有限，英文阅读能力有限，可能会存在误解，欢迎讨论和纠正。MVC变形记MVC历史MVC最初是在研究Smalltalk-80（1979年）期间设计出来的，恐怕没有一本书能够回到计算机石器时代介绍一下Smalltalk的代码是如何实现MVC的，不仅如此，连想搞清楚当时的应用场景都很难了，都要追溯到80后出生以前的事了。但是当时的图形界面少之又少，施乐公司正在研发友好的用户图形界面，以取 ...继续阅读 (32)

最近因为遇到一个float相关的bug，又跑去撸了一遍css标准。然后发现，它确实比其他属性复杂好多，既不像inline-block那样单纯的完成并排显示，又不像绝对定位那样彻底的脱离文档流而不影响别的元素。它唯一单纯的就是，真的是唯一可以实现文字环绕显示的属性。但是唯一单纯的特点却并不是很招人待见，相反，大家更习惯使用float去完成其他的功能，比如横排展示和自适应分栏布局。很多人这样用着，只是因为一堆现成的文章告诉他们可以这样用，但是到底为什么可以，以及用的时候要注意什么问题却并不是所有人都知道，结果就是，一时的“便利”，为日后的维护埋了一堆的坑。这篇文章打算通过将目前一些成文的浮动元素的特点与CSS规范中的具体描述对应，来加深大家对float属性原理的理解。并在后面通过一个bug实例，说明使用这个属性时要注意的问题。浮动元素的业界公认特点float属性被设置为非none的元素：元素被视作块级元素，相当于display设置为“block”；元素具备包裹性，会根据它所包含的元素实现宽度、高度自适应；浮动元素前后的块级兄弟元素忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素；浮动元素前后的行内元素环绕浮动元素排列；浮动元素之前的元素如果也是浮动元素，且方向相同，它会紧跟在它们 ...继续阅读 (29)

前言在面向对象的编程范式中，封装都是必不可少的一个概念，而在诸如 Java，C++等传统的面向对象的语言中，私有成员是实现封装的一个重要途径。但在 JavaScript 中，确没有在语法特性上对私有成员提供支持， 这也使得开发人员使出了各种奇技淫巧去实现 JS 中的私有成员，以下将介绍下目前实现 JS 私有成员特性的几个方案以及它们之间的优缺点对比。现有的一些实现方案约定命名方案约定以下划线’_’开头的成员名作为私有成员，仅允许类成员方法访问调用，外部不得访问私有成员。简单的代码如下：123456789101112varMyClass =function(){this._privateProp = ‘privateProp’;};MyClass.prototype.getPrivateProp =function(){returnthis._privateProp;};varmy =newMyClass();alert(my.getPrivateProp());// ‘privateProp’;alert(my._privateProp);// 并未真正隐藏，依然弹出 ‘privateProp’优点毫无疑问，约定命名是最简单的私有成员实现方案，没有代码层面上的工作。调试方便，能够在控制台上直接看到对象上的私有成员，方便排查问题。兼容性好，ie ...继续阅读 (35)

早期互联网很大一部分是静态文件的堆积。因此，我们上网访问的其实都是一个个静态的资源。通过URL的定义，可以很方便地找到资源。随着互联网应用规模的扩大，以及应用复杂度的提高，之前的静态资源已经不能满足需求，网站返回给访问者的内容需要通过动态的方式生成（例如通过获取数据库的内容），同时还支持由访问者控制希望看到的内容。 传统的用于定位资源位置的URL的定义变得复杂起来。本篇内容偏向于Web API设计中，有关URL部分的讨论。习以为常的一些URL在Ajax还未发展起来前，网站应用的复杂度就已经变得相当复杂。因此当我们访问很多网站时，观察地址栏以及网络传输时，不难见到类似这样的请求。1http://xxx.com/index.jsp?page=10&catelog=food&create_time=20151001这样的请求存在一个问题：无法很好地描述一个资源。无法知晓参数之间的层级关系，从请求串来看它们的关系是并列的无法知晓某个参数具体服务于页面中的哪一部分由于HTTP是无状态的，因此通过请求也无法准确知晓对于资源状态的影响是什么以上这些弊端对于描述一个资源是不友好的，特别当应用规模扩大时，会产生较大的对于接口的理解成本与使用成本。自从Ajax技术兴起，接口的表现形式又有了一些变化。由于页面内容可以实现异步控制，因此通过统一的地址参数与服务器通信的模型改变为，特定的接口 ...继续阅读 (32)

前言在我们的日常生活中经常会遇到各种各样的排序列表，排序是将无序的数据项集合重组的普遍方式，它基于数据项的单个或多个属性值为数据项计算一个排名。多属性排序是普遍存在的，在多属性排序中，我们无法直观理解单个属性对排序所作得贡献以及单个或多个属性的变动是如何影响排序的。具体来说多属性排序可视化工具需要解决的问题为：当诠释一组排序时，我们想知道为什么一个数据项的排名比其他项要低（高），是因为它的所有属性值都低（高）还是因为它的某个属性值较低（高）。如何使得不同类型的属性之间具有可比性，并且组合在一起产生一个排名。如何比较同一个数据项的不同排名，如修改一个数据项的属性，它的排名会相应变化，我们希望比较这些变化的排名。如果可以修改排序中单个或多个数据项的属性，我们希望探究属性值改变所产生的效果。在这篇文章中将介绍对多属性排序可视化的需求所作的全面分析，以及全新的多属性组合排序可视分析技术LineUp的设计与实现。多属性排序可视化的需求排名的可视编码：可视化的用户能够快速地理解单个数据项的排名。排名由来的可视编码：也就是将排名所依赖的属性值进行编码，支持多重属性：支持基于多重属性的排序，允许用户将任意的几个属性组合，从而产生一个综合的排名。支持过滤：用户可以过滤出满足特定条件的数据项。属性值的标准化：数据项的属性可以是不同类型的（数值型或有序型）、不同规模的（0到1之间或无限的）、不同语意的（ ...继续阅读 (39)

前段时间上线了全息机器人项目，线上访问可直接在手机百度 APP 中语音搜索百度神灯即可（请在wifi环境下访问）。项目部分截图如下：通过部分截图可以看出，这个项目主要是两部分，一部分正常的动画引导页面（前四个截图所示），另外一部分是全息播放页面（最后一个截图所示）。其中动画引导页面共有十一个，全息播放页面有四个，进入每个全息页面前都会一些动画引导的页面。这篇文章主要从方案制定，遇到的问题以及应对方法等方面来对项目中这两部分做一个介绍。正常动画部分方案制定在没有老旧 IE 的情况下，做动画的选择是比较多的，SVG，CSS3，CANVAS等等。最开始拿到这个项目的时候，结合这三种各自的特点，最终选择了主要动画由CANVAS来实现，具体原因如下：SVG。大家都知道SVG是一种在内存中持久保存的保留模式矢量图形，这个特性让SVG有很多优势：不受像素影响，无论屏幕分辨率如何，SVG图形的表现都十分良好；SVG对动画支持较好，JS 可以完全控制SVG DOM元素；可被CSS样式化等等。但同时SVG也有一些缺点：SVG DOM结构如果过多，那么会比正常的图形慢；无法动态的修改动画内容；不能与 HTML 内容集成等等。我们这个项目是一个移动端的单页应用，十一个页面加上四个全息播放页面，总的来看，如果用SVG的话，页面上SVG DOM元素过多，而且几乎每个节点上都会有一些动画效果，动画效果是比较开放 ...继续阅读 (42)

因为某些奇怪的原因，国内访问 Android 镜像的时候总是会失败，导致更新 Android SDK 的时候非常困难，虽然国内有一个http://www.androiddevtools.cn/收集了很多 Android 开发相关的资源。但是对于我本人而言，使用这里面提供的代理服务器的时候，速度还是慢的跟蜗牛一样。另外我使用的是中国电信的宽带，虽然购买了 VPN 但是速度还是很不理想，可能也跟如何看待上海电信访问国外网站困难，并推出国际精品网、国际氮气瓶业务？有些关系。知乎上面也有一个相关的话题讨论谷歌不能访问了 怎么构建安卓开发环境？因此我开始考虑是否可以自己弄一个代理服务器，借助于百度网盘的CDN网络，提供更快的下载速度。为了构建这个代理服务器，首先需要有资源。我直接使用了百度网盘的离线下载功能，把http://mirrors.neusoft.edu.cn/android/repository/的内容镜像了一次，这部分主要是人肉的工作，因为提交的 URL 多了之后，需要手工输入验证码，花费了大概2，3个小时的时间。1链接:http://pan.baidu.com/s/1mgGhdlm 密码: 526k有了资源之后，就需要考虑如何通过代理服务器下载，代理服务器本质上就是一个 Web 服务器，当收到类似/android/repository/addons_list-1.xml的请求之 ...继续阅读 (25)

关于代码静态质量检查，在大佛的上一篇文章 《JavaScript 代码静态质量检查》中已经说得很明白了，虽然主要讲的是 JavaScript 方面，但代码静态质量检查的本质是不变的，今天我们来介绍一下 CSS 方面的静态质量检查。CSS 中也有一些 Lint 工具，例如CSSLint，PrettyCSS，recess，CKStyle，stylelint，当然还有百度 EFE 出品的 CSS 代码风格检查工具CSSHint。本文将从功能、性能、适用范围、规则实现、个性化几个方面对这几个 Lint 工具进行对比。CSSLintCSSLint和它底层所使用的解析器parserlib都是Nicholas C. Zakas的作品（当然，ESLint也是他的作品）。它适用于浏览器以及 CLI 环境，在浏览器端和 CLI 环境中分别是两套代码，这么做的原因是它的底层库parserlib在浏览器和 CLI 环境分别是两套。功能上，CSSLint提供了对 CSS 的解析、检查等功能。在规则实现方面，无法通过 JSON 配置来管理，默认的规则全部在src/rules/目录中，要添加自定义规则，必须通过全局的CSSLint.addRule方法来实现。实现上，CSSLint主要是利用事件监听，在底层 parse CSS 过程中触发事件，例如startstylesheet、endstylesheet、cha ...继续阅读 (54)

原文：http://aeflash.com/2014-11/avoid-foreach.html遍历集合，会产生副作用。——如mori.each 文档所说首先声明，本文和性能无关。执行for循环总是比执行Array.forEach快。如果性能测试显示迭代的开销足够显著并且性能优先，那么你绝对应该使用for循环而不是forEach（总是使用for循环是典型的过早优化。forEach仍然可以在 1 微秒内遍历长度为 50 的数组）。本文和编码风格有关，是我对forEach和其它Array.prototype方法的思考，与性能无关。forEach 为副作用而生当人们想要把代码重构成一个更加实用的风格时，往往首选[].forEach或_.each。forEach直接模拟最基本的for循环——遍历数组并且执行一些操作——所以它是一个很机械的转换。但是就像for循环一样，forEach在程序的某个地方必定会产生副作用。它必须修改父作用域中的对象，或者调用一个外部方法，或者使用迭代函数以外的其它变量。使用forEach也意味着你的迭代函数和它所在的作用域产生了耦合。在编程中，我们通常认为副作用是不好的。他们使程序更难理解，可能导致 bug 的产生，而且难以重构。当然，forEach在大项目中引起的副作用是微不足道的，但是这些副作用是不必要的。当然也有一些副作用是无法避免的。123arr.forE ...继续阅读 (36)