Implementing responsive design in React

Two kinds of responsive design

There’s two type of responsive design:

One is just adjusting an element’s appearance in response to different media types, like hiding or showing some elements, change size, color or layout.

Another way will be using the diffent design or totally different component for different media types. For example, a complex table view with lots of fields for each row, for a large screen, just show a regular table, but when the screen shrinks, the table view will be replaced with a card list, within each card, all the fields will be rendered vertically.

Continue reading →

《JavaScript权威指南》读书笔记: 闭包

闭包,简单说是指: 函数对象本身和这个函数关联的作用域链的结合

上面的定义可能听不懂,为了详细说明这个概念,需要先解释清楚JavaScript中作用域相关的概念。

变量作用域

变量作用域是一个变量在定义后在源码中可见的范围。

JavaScript中存在两种变量作用域:

全局作用域:全局变量具有全局作用域,在整个JavaScript代码中都可见

本地作用域:

  • 在函数中定义的变量就是本地变量,这些变量具有本地作用域,他们在其被定义的函数体内部完全可见,函数的参数也算作该函数的本地变量。
  • 本地变量可以覆盖同名的全局变量
  • 函数可以嵌套,且每一个函数都具有自己的本地作用域环境。

例子:

函数作用域

JavaScript使用函数作用域规则来决定变量的作用域范围。这意味着,一个在函数中被定义的变量,在这个函数体中,以及该函数体中嵌套定义的所有函数内部都可见。另外和同名本地变量覆盖全局变量同理,嵌套函数中的同名本地变量也会覆盖其上层函数中的本地变量。

例子:

作为对象属性的变量

变量的本质是通过对象来组织到一起的属性集合。

当你定义了一个全局变量,你是在全局对象上定义了一个属性(这个全局对象根据宿主环境不一样而不一样,比如在浏览器里面就是window)

对于本地变量,你可以同样的将他们视为某个对象的属性,只是在JavaScript中,你并没有方法获取到这个对象。在ES3中,这个对象被称为“调用对象”(Call Object),在ES5中被称为“声明上下文”(declarative enviroment record),以下面这个函数定义为例:

若我们能找到办法获取到这个“调用对象”的对象引用,即为A,则A将具有如下的属性:

作用域链

结合上面的所有信息,在JS的实际执行中,为了准确的定位到一个标示符具体指向的是哪个变量,我们需要了解作用域链的概念。为什么需要这个听起来很复杂的东西?先看看下面的代码:

这个例子其实不算复杂,但是你在看的时候还是要仔细注意这些个namemyNameoriginName 都实际指向的是哪个变量。

首先作用域链是什么呢?JavaScript中的每一块代码都会与一个作用域链相关联,这个链是一个对象列表,对于每一个标示符,都依次从这个链的对象中查找具有同样标示符的属性。而作用域链就是由全局变量和不定数量的由函数调用产生的调用对象构成的列表。

看下面的例子:

需要注意,在一个函数刚刚被定义时,还没有调用对象存在,只有当这个函数开始被调用执行时,才会有一个调用对象被创建用于储存其中的本地变量。也就是说,相同的一个函数,在每一次调用都会产生一个独立的调用对象。

另外,在函数刚刚被定义时,除了新建了一个函数对象(Function Object)外,还将当前的作用域链和这个函数对象关联在了一起:

所以当函数嵌套很多的时候,作用域链会很长:

词法作用域

词法作用域(lexical scoping)是指,函数在执行时,使用的是它被定义时的作用域,而不是这个函数被调用时的作用域。

有点抽象,我们看下面的例子:

上面的例子中,核心是嵌套定义的这个函数:

虽然实际该函数在执行时fn()时作用域中的scopeglobal scope,但是实际执行使用的是定义函数时的那个 ‘local scope’,集合上面作用域链的知识,所谓的词法作用域规定了:

函数在执行时使用的作用域链是它在定义时绑定的那个作用域链(准确地说是使用当时绑定的那个作用域链加上新建的调用对象组成的新的作用域链),而不是函数调用时所处上下文的作用域链。

回到闭包上来

上面讲了这么多概念后,回到一开始的答案:

函数对象本身和这个函数关联的作用域链的结合。

也即是:fn + fn.__scope_chain (并不存在__scope_chain,只是为了让这个关联更加形象)

其实,由于作用域链本身的特性,以及函数在定义时就能和作用域链关联起来的自然特性,可以简单说:在JavaScript中,每个函数都是闭包。

理解了闭包本身后,你会发现,闭包的强大之处其实在于:JavaScript中的函数,通过作用域链和词法作用域两者的特性,将该函数定义时的所处的作用域中的相关函数进行了捕获和保存,从而可以在完全不同的上下文中进行引用。

《奇幻森林》观后感

p2324177434

今天下午一个人去看了IMAX,随便说点印象。

CG技术再一次刷新

我对于动物渲染的印象,还停留在大家称赞少年派中的老虎多逼真时,《奇幻森林》已经表示群兽共舞已无压力。印象特别深刻的是毛克利坐在巴鲁肚子上在水里戏水那段…真人和特效中的熊以及水的所有融合,如此自然:

Continue reading →