知识共享许可协议

ESL 中的错误提示信息

AMD 为浏览器端开发带来了诸多好处:模块声明、异步加载、依赖管理、bundle等,已经成为很多团队应用开发的标配。在正确的代码下,一切看起来都还好,但是当问题出现时,追查过程通常会令人头疼,此时Loader的提示信息对错误的追查非常关键。ESL 是熊厂应用得比较多的 AMD Loader,本篇blog试图对 ESL 的错误场景与信息提示策略,以及如何追查错误,进行简单的介绍。主要涉及以下3个方面:

  1. 模块结构问题
  2. 初始化运行中的错误
  3. 疏忽导致在模块定义内使用了global require

先厚脸皮求关注。

首先,建议大家在开发中追查错误时,使用 chrome 浏览器的开发者工具。因为它对 re-throw 错误的 stack 跟踪与查看支持得比较好。

阅读全部

使用高阶函数实现类的扩展设计

在不少框架中,都会对“扩展”这一概念有需求。所谓扩展,即一个可组合的组件,用于嵌入到目标的生命周期中,对目标的行为进行额外的处理使得目标拥有不同的表现。

一个非常简单的案例即日志的记录。通常框架自身并不会有业务相关的日志记录的功能,而业务代码也不希望混入并非业务逻辑的日志记录部分。那么使用一个扩展,在合适的点进行日志的收集和存储是很合适的设计。

在以往,比较流行的扩展通常有几种形式:

阅读全部

14款基于javascript的数据可视化工具

原文: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 库是一款完全独立的类库,在应用中不依赖任何其他第三方类库,就可直接编译运行。除了提供最基本的规范要素外,amCharts 还提供了交互特性。用户在浏览基于 amCharts 制作的图表时,用鼠标 hover 图表内容,可以与其进行交互,使图表展示细节信息,其中呈现信息的容器被叫做 Balloon(气球)。除此之外图表可以动态动画的形式被绘制出来,带来了了非常好的展示效果。

阅读全部

ECharts 3 带来了什么

ECharts 在 github 上沉寂了数个月,想必很多小伙伴充满了各种疑问,ECharts是不是不维护了?你们以后是不是不做了?别着急,其实这几个月,我们的设计师、工程师一直厉兵秣马,加班加点,没有周末,没有女朋友地疯狂工作中。

终于,ECharts 的又一个重大版本即将出炉,在 ECharts 3 正式版发行前,我们选择了今天,12.3,一个能够隐喻我们一步一步从1.0到2.0再到3.0走来的日子,提前给广大用户带来 ECharts 3 的测试版。

那 ECharts 3 究竟会有哪些新的特征,我们用数月究竟在颠覆着自己的什么呢?接下来让我们一一为您道来:

焕然一新的面貌

焕然一新的面貌

焕然一新的面貌

从底层的技术架构到上层的外观展现,都进行了较大的升级。无需多言,请看下面的诸多例子。

阅读全部

化解使用 Promise 时的竞态条件

原文:Defusing Race Conditions when Using Promises

网络时代,创建现代软件时其中一个很大的限制是所需要的数据往往在远程服务器上。应用程序在等待网络请求时简单地锁死是不现实(甚至不可能)的。相反,我们必须让应用程序在等待时保持响应。。

为此,我们需要写出并发的代码。当应用的某一部分正在等待网络请求的响应时,其他部分必须继续运行。 Promise 对于编写非阻塞型的代码是很不错的工具,而且你的浏览器就支持这个。

Promise 能让潜在可怕的异步代码变得非常友好。下面假设一个博客的文章视图这样从远程服务器加载一篇文章并显示它:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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({
title: article.title,
body: article.body
});
}).catch(err => {
this.setState({ error: 'Oh Noes!' });
});
};

注意:这个例子使用了 React,但是这个概念适用于绝大多数前端视图系统。

这样的代码是很优雅的。许多复杂的异步调用消失了,取而代之的是直接明了的代码。然而,使用 promise 并不能保证代码是正确的。

注意到我例子中引入的不易察觉的竞态条件了吗?

提示:竞态条件出现的原因是无法保证异步操作的完成会按照他们开始时同样的顺序。

阅读全部

前端代码风格检查套件 FECS

All code in any code-base should look like a single person typed it, no matter how many people contributed. — idiomatic.js

fecs

fecs 是以百度前端代码规范为目标的前端代码风格套件,套件包括 htmlcscsshintlesslintjformatter,此外还有社区的相关开源模块 cssbeautify、csscomb、fixmyjs 和 esformatter:

HTML CSS Less JavaScript
Linter htmlcs csshint lesslint eslint+
Fixer htmlcs cssbeautify csscomb cssbeautify csscomb fixmyjs jformatter esformatter

显而易见,fecs 不仅能检查 HTML/CSS/LESS/JavaScript 代码的规范问题,而且还能修复代码的规范问题。

代码检查

fecs-check

fecs-check

代码的检查,目前主要是以百度前端代码规范(JS/CSS/HTML) 的检查为首要目标,同时根据 EFE 的技术规划,为 Less 代码规范 的检查带来了 lesslint。

阅读全部