This is called closure.

每次提到closure首先想到的都是「Friends」里Rachel喝高了给Ross留语音的这个场景.. 🙂

closure

 

好了当然我说的不是这个。

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure ‘remembers’ the environment in which it was created.

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains:

  1. it has access to its own scope (variables defined between its curly brackets)
  2. it has access to the outer function’s variables
  3. it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.

Continue reading “This is called closure.”

More about DOM

上次回来以后一直对DOM的manipulation念念不忘。每次遇到有关的题就看了又看。

Define a walk_the_DOM function that visits every node of the tree in HTML source order, starting from some given node.
  1. 当然是用recursion来做。Each recursive call is given a smaller piece of the tree to work on.
  2. It invokes a function, passing it each node in turn.
  3. walk_the_DOM calls itself to process each of the child nodes.
  4. Code:
Screen Shot 2016-03-22 at 11.46.39 PM.png
Define a getElementsByAttribute function. It takes an attribute name string and an optional matching value.
  1. 利用上面的walk_the_DOM. 传入的是DOM中<body>所在的node,以及一个检查node的attribute是不是和要求的att的value相符合的匿名函数。
  2. 结果存在一个数组里。
  3. Code:Screen Shot 2016-03-22 at 11.46.54 PM.png

你看其实又用到了nodeType的概念所以没文化真可怕啊!

Happy Pi Day

早上看到peachd给我发菜单说Happy Pi Day的时候还翻了个大白眼,心想这啥呀是还嫌程序媛的生活不够nerdy么。幸好午饭是I Love Sushi不是派,要不然真得粉转路人了。

下班回来一边蹬椭圆机一边刷微博的的时候瞥到一眼03/14/16.. 脑中灵光一闪,Pi约等于3.1416.. 那那那不就是今天么,千年等一回的今天呐!有没有觉得自己很渺小?是爸爸坐着飞机经过头顶时,用力挥动手绢他也看不见的那种渺小。森林里的一滴露水,蝴蝶鳞片上的一颗粉粒。

一下子觉得这个日子好像还挺浪漫的。

what a slap in the face.

 

然后我就突然很想把「生活大爆炸」翻出来看一看了。

 

动物乌托邦

想说工作日下班一个人跑来看动画片也是没谁了。

so what.. 我还就是看动画片的时候最认真!就是喜欢制作人用心良苦的每一个细节,仔细埋下的每一个梗。诚意满满,没有槽点!

抛开里面有关民主和平等的各种隐喻,单单当励志片看就很棒。也许当时觉得哇塞超级经典的台词一觉醒来就都忘了,但片子本身带来的温暖和爱却是绵延悠长的。

就好像上次自己一个人进影院看了「超能陆战队」,情节可能现在不会全记得,可是胖嘟嘟的大白让我懂得逝去的亲人其实一直会在我们身边,给我们力量,这就很治愈。(◕——◕)

我也知道乌托邦是不存在的,可是还是想默默感叹一句要是生活也像迪士尼一样就好了。

永远善良勇敢,永远充满惊喜。

IMG_2297

 

p.s. 新买的MUJI蒸汽小灯到了,放在床头呼呼地冒出薰衣草的香气真是很梦幻啊。

p.s.s. 蓝牙防水音响也到了,终于可以在洗澡的时候放心大胆地听歌。比如大清早来一曲「时光」,据说这叫心存高远。

throttling vs. debouncing

每天都在感叹前端水好深,每天都想爬上来写那么一点点。今天被说是卖萌/豆瓣风格的技术博客。I’ll take it as a compliment. 🙂

我跟老爷爷说jQuery有个功能叫debounce的时候他竟然”oh really?!”但是!他最后blahblah讲了应该怎样把keyup event传给setTimeout,然后补充说”which is basically how the debounce is implemented”的时候我断定他之前的惊讶是在唬我!( ̄工 ̄lll)

Continue reading “throttling vs. debouncing”

Everything about DOM

The DOM is short for Document Object Model. But the M in DOM could just as easily stand for Map. Since the DOM is just a MAP of the web page that’s currently loaded in the browser.

  • DOCUMENT = the web page
  • OBJECT = virtual objects
  • MODEL = map

不到两个月前连DOM的数据结构都搞不清楚,现在回想一下被hr羞辱实在是理所应当。后来搞清楚了大致的tree结构然而还是没有理解透彻,以至于上战场后还是做不到举一反三,无法handle一些DOM操作的具体case。真是应该好好从零开始学习。

最近被问到如何实现在一个网页里统计并高亮与查找text match的text。感觉有好多细枝末节啊,比如何时调用函数(我能想到的就是setTimeout,具体怎么应用将来再仔细研究这个javascript函数的时候可以补充);比如一个特别tricky的case,如果我要查找“Hello world”,网页的html里有这么一段:<b>Hello</b> world,这种情况下其实也是符合要求的呀,那怎么办呢?当时就蒙圈啦,难道利用regex么?其实是有种东西叫Node.nodeType的。

比如说

  • Node.ELEMENT_NODE: An Element node such as <p> or <div>
  • Node.TEXT_NODE: The actual Text of Element or Attr

那回到刚才的tricky case是不是就遍历DOM tree中间所有nodeType是TEXT_NODE的node呢。

好厉害啊! Continue reading “Everything about DOM”