01Web前端团队

We focus on HTML5, CSS3, Node.js.

Babel 6 小白使用指南

Posted on 18 Jul, 2016 by Wilberway in JavaScript , visited: 1136

什么是Babel

Babel是一个JavaScript的编译工具,他可以转换JavaScript的格式(例如ES6 -> ES5)。所以,Babel可以让我们现在就使用ES6的新功能而无需担心浏览器的兼容性。

不仅如此,Babel还支持JSX语法,作为React的JSX编译工具。有些其他的前端工具例如Wabpack、JSPM也会用到Babel。

Continue Reading...

浅谈Web Audio API

Posted on 27 May, 2016 by Wilberway in JavaScript , visited: 1192

“人生如戏,全靠演技。” “没有声音,再好的戏也出不来。”

过去,网页只能借助Flash,QuikTime等插件播放音频,自从HTML5新增了audio标签,网页才原生支持了音频播放。

而Web Audio API弥补了audio标签功能简单的不足(Web Audio API属于Web API的范畴,严格意义上讲并不属于HTML5),提供了大量的功能,能够实现媲美桌面播放器的功能。

Continue Reading...

DOCTYPE 与 渲染模式

Posted on 16 May, 2016 by maginazhang in JavaScript , visited: 1051

目前我们大多数人编写HTML页面时,都会以类似 <!DOCTYPE HTML> 的字样作为开头。但我们为什么要以这种形式作为开头呢?或许你并不清楚。那就让我们一起来了解一下,这到底代表什么意思。

Continue Reading...

arguments的前世今生

Posted on 15 May, 2016 by 黑子 in JavaScript , visited: 1009

arguments作为一个类数组,并没有数组的一些基本方法,比如:shift、push、pop等。那有什么方法可以将其转换为数组,在stackoverflow查到的结果是通过如下代码即可将其转换为数组。

Array.prototype.slice.call(arguments);

看到这里,你可以会奇怪,为什么这样子就可以实现?

首先要看下slice方法,在MDN官方文档解释是

The slice() method returns a shallow copy of a portion of an array into a new array object.

根据slice的特性,我们可以通过一段简单的代码来模拟

function slice(begin, end) {
    var newArr = [];
    if (!begin) begin = 0;
    if (!end) end = this.length;
    for (var i = begin; i < end; i++) {
        newArr[i] = this[i];
    }
    return newArr;
}

Continue Reading...

React——带你走进组件化的世界

Posted on 6 May, 2016 by Allen in JavaScript , visited: 1296

Facebook一个开源项目掀起了前端界的惊涛骇浪,React到底是何方神圣,现在就让我们一起走进React的世界。

React是什么?

React起源

React最初来自Facebook内部的广告系统项目,项目实施过程中前端开发遇到了巨大挑战,代码变得越来越臃肿且混乱不堪,难以维护。于是痛定思痛,他们决定抛开很多所谓的“最佳实践”,重新思考前端界面的构建方式,于是就有了React。创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。

Continue Reading...