Posts tagged with JavaScript


关于 __proto__ 属性,MDN 上的解释是这样的[1]

The __proto__ property of Object.prototype is an accessor property (a getter function and a setter function) that exposes the internal [[Prototype]] (either an object or null) of the object through which it is accessed.

即是说,__proto__ 属性指向了实例对象的原型 Constructor.prototype。那么,这个属性里隐藏着怎样的黑魔法呢?

...

随着前端的发展,异步这个词真是越来越常见了。假设我们现在有这么一个异步任务:

向服务器发起数次请求,每次请求的结果作为下次请求的参数。

来看看我们都有哪些处理方法:

Callbacks

最先想到也是最常用的便是回调函数了,我们来进行简单的封装:

const makeAjaxCall = (url, cb) => {  
    // do some ajax
    // callback with result
}

makeAjaxCall('http://url1', (result) => {  
    result = JSON.parse(result)
})

嗯,看起来还不错!但是当我们尝试嵌套多个任务时,代码看起来会是这样的:

makeAjaxCall('http://url1', (result) => {  
    result = JSON.parse(result)

    makeAjaxCall(`http://url2?q=${result.query}`, (result) => {
        result = JSON.parse(result)

        makeAjaxCall(`http://url3?q=${result.query}`, (result) => {
            // ...
        })
    })
})

天哪!快让那堆 }) 见鬼去吧!

于是,我们想尝试借助 JavaScript 事件模型:

...

本文经过 JavaScript Anti-Pattern Organization 认证,予以公示。阅读前请大呼三声「我决不使用文中代码模式!」。

我们都知道,在 JavaScript 的世界里(文中指 ECMAScript 5 及更早期版本)有三种方式来声明函数[1]

I. 函数声明

function name([param] [, param] [..., param]) {  
   statements
}

II. 函数表达式

function [name]([param] [, param] [..., param]) {  
   statements
}

III. Function 构造函数

[new] Function (arg1, arg2, ... argN, functionBody)

OK,那么让我们看看如何玩坏它。

...

格式约定:
1. 绑定在对象上的静态方法使用 Object.method 表示,如 Promise.resolve
2. 对象实例的方法使用 instance#method 表示,如 Promise#then

本文所出现的 concat 示例代码可以在 Github Gist 上找到

文中代码可能引起强烈不适,非战斗人员请撤离

Callback vs Promise

熟悉 JavaScript 的程序员一定都了解其事件模型和回调函数,如:

img.addEventListener('load', function imgLoaded() {  
    // do something after image loaded
});

上面这段代码表示在一个图片元素加载完成时,触发回调函数 imgLoaded()

假设我们现在有这么个需求:利用 node.js 实现简单的文件合并功能,通过传入一个包含资源路径和输出路径的配置对象,合并资源路径下的所有 *.js 文件并输出到指定路径。

...

一、源起

今年的开发者大会上,Google 发表了 Android L 和跨屏统一 UI 风格—— Material Design。

这个承载着 Google 统一大愿的设计语言,恰恰给一味扁平化的 Designers 敲了一记闷棍:

一切都仿佛变成了色块加文字。哪个是按钮?哪个不是?哪些是重要的信息?哪些不是?当扁平化的风格让信息层级也扁平化,影响了「信息的正确沟通」这个最终目的时,我们知道这样的扁平化已经跳得太远。

所以 Google 选择了往回跳一小步。在扁平化的基础上,保留了物理世界的阴影和动作。

Material Design 等于是强调了物理定律的扁平化设计。 Google is trying to bringing physicalityinto Flat Design.

——Material Design:向拟物回跳一下的扁平化设计 - 笔戈科技 - 知乎专栏

偶然有一天,后端同学给我发了 Polymer Project 这个网站,第一次看到 Material Design 的前端组件化实现的我惊艳不已,尤其是 Button Click 时的水波纹效果 的那种交互效果,简直让人感动到想哭 (笑)。

于是按捺不住激动,便开始考虑自己实(chao)现(xi)一个类似的效果。

...