admin 发布于 06月15, 2017

JavaScript 最新特性实现的三大黑科技

依次执行多项异步任务

有时候,我们希望批量执行一组异步任务,但是不是并行,而是依次执行,这组任务是动态的,在一个数组里,当然我们可以用 for 循环然后一个一个 await 执行,但是还有另外一种方式:

阅读全文 »

admin 发布于 04月19, 2017

如何用原生 JS 实现手势解锁组件

这是第三届 360 前端星计划的选拔作业题。600多名学生参与了解答,最后通过了60人。这60名同学完成的不错,思路、代码风格、功能完成度颇有可取之处,不过也有一些欠考虑的地方,比如发现很多同学能按照需求实现完整的功能,但是不知道应当如何设计开放的 API,或者说,如何分析和预判产品需求和未来的变化,从而决定什么应当开放,什么应当封装。这无关于答案正确与否,还是和经验有关。

在这里,我提供一个参考的版本,并不是说这一版就最好,而是说,通过这一版,分析当我们遇到这样的比较复杂的 UI 需求的时候,我们应该怎样思考和实现。

阅读全文 »

admin 发布于 04月18, 2017

使用 babel 插件来打造真正的“私有”属性

大家都知道 JavaScript 的对象属性默认是可以被从外部访问和修改的,也就是说,JavaScript 本身不存在完全“私有”的对象属性。例如:

class Point{
    constructor(x, y){
        this._x = x;
        this._y = y;
    }
    get length(){
        const {_x, _y} = this;
        return Math.sqrt(_x * _x + _y * _y);
    }
}

let p = new Point(3, 4);
console.log(p._x, p._y, p.length); //3, 4, 5

在上面的代码里,我们约定俗成地用下划线开头来表示私有变量。我们希望 _x、_y 不被外部访问,然而,这只是我们一厢情愿,使用者还是可以访问到这两个变量。

在这里,我们不讨论 ES 的 private 标准提案,而是讨论如何使用工具来将约定变成真正的私有。

阅读全文 »

admin 发布于 03月31, 2017

共享经济的未来:用 Node.js 玩转分布式鼠电站

当今社会,许多人喜欢养宠物陪伴自己和家人。而仓鼠以其可爱的外表、爱干净的习性和温顺可爱的性格成为许多城市家庭养宠物的选择。

在这个物联网时代,共享经济是人类发展的未来。让可爱的小仓鼠不仅仅能作为卖萌讨巧的宠物,还可以发挥其经济价值,为家庭做出贡献,正是新的万维物联网(Web of Things)云平台将要做的事情。

阅读全文 »

admin 发布于 03月08, 2017

使用 webpack2 和 NPM Scripts 进行 JavaScript 组件开发

最近 webpack 成为非常流行的打包工具,很多项目都在使用它。在我们进行 JavaScript 独立组件开发的时候,如果我们想要使用语言新特性,又想发布的时候产出兼容性好的代码,那么使用 webpack 就能够很大程度上帮助我们实现这一目标。

现在让我们来看看究竟该怎么做吧。

阅读全文 »

admin 发布于 03月07, 2017

用65行代码实现JavaScript动画序列播放

最近在给学生上课,上周六的第一堂课是关于 JavaScript 动画的内容,其中包括一些简单的动画,比如匀速或者匀加/减速的运动,也包括复杂一些的组合动画。而动画的基本原理,在我之前的文章已经有了详细的介绍。在这里,我想谈一谈的是,我们可以如何针对现代浏览器设计更加简单的 API,来实现动画的序列播放。

阅读全文 »

admin 发布于 02月23, 2017

轻松管理你的 Node 版本

玩 Node.js 的小伙伴们都知道,现在 Node 的版本更新很快,目前最新稳定版已经更新到 v7.6.0 了,而生产环境一般选择使用 LTS(Long-term Support)版本,目前最新的是 v6.10.0。

新版的 Node 7.x.x 有非常有用的更新,那就是支持了 --harmony-async-await。这样就不用依赖 babel 来使用 async/await 特性了。

但是,如何让 7.x.x 和 LTS 的 6.x.x 并存呢?就需要用 Node 版本管理工具了。

阅读全文 »