关于JavaScript中的继承（一）：类式继承

发表于 2013-05-30   |  

“继承”是面向对象中的一个概念，说开去无非就是代码重用的一种方式罢了。

虽然JavaScript并不是一门真正的面向对象语言，甚至连类的概念都没有。但得益于构造器的存在，在JavaScript中是可以完全模拟出 类-对象 行为的。如： 

1
var person = new Person();

看上去除了变量声明时不是强类型之外，完全与面向对象如出一辙。所以谈及继承时，大家首推的也是一种叫“类式继承”的手法了。

类式继承之基于原型链

1
2
3
4
5
6
7
8
9
10
11
var Parent = function (name) {
  this.name = name || 'heroic';
};
Parent.prototype.printName = function () {
  console.log(this.name);
};
var Child = function (name) {};

inherit(Child, Parent);
// or
Child.inherit(Parent);
阅读全文 »
#inherit #javascript

折腾了个新主题

发表于 2013-05-22   |  

前几天偶然发现了一个Github Page主题：Modernist，觉着很舒服。作者将其开源在Github上的，所以我就fork下来自己折腾了个Hexo的主题。

根据light主题的结构修改而来，但是去掉了侧边栏，改成一栏，所以随之也就没有了light主题的那些widget了。不过我增加了国内的多说评论框的配置，以及更好的响应式支持。

主题已经放到Github上了，也已完全适用于最新版的Hexo。为了更好的使用这个主题，建议clone我fork的hexo项目到本地，使用/path/to/hexo/bin/hexo来代替之前安装的全局hexo命令，方法见下面。我主要修改了代码块高亮（highlight）生成，以及修复了始终会生成Read more链接的BUG，不过我会尽快发起pull request到hexo的。

另外，如果需要使用多说评论框，可以使用我的自定义多说评论框样式，主要保持了和Modernist theme的样式统一。请猛戳这里。

#hexo #modernist #theme

《JavaScript设计模式》阅读笔记

发表于 2013-03-26   |  

最近总算是把《JavaScript设计模式》这本书给认认真真啃完了，受益匪浅。虽然已经是几年前的出版物了，而且也没得地方可以买到，但是我个人觉得这本书是JavaScript程序员必读书籍之一。如果没有读过，建议一读，绝对不会让你失望。

而可能有一些地方的翻译让人一开始有点迷糊，比如我们常说的“单例模式”被译为“单体模式”，而“mixin class”被译为“掺元类”。但是对于我这种E文能力弱的人来说，完全没有挑剔的地方。

我在读这本书的时候，采取了一些阅读方式来加深理解，个人感觉还过得去，就简单的分享下。我每两天完成一章节，第一天阅读整个章节的内容，边理解边对照着写实例代码；之后若是一有时间，大脑就温习这次的内容；第二天则主动回忆前一天所阅读的内容，整理简要的笔记纲要，并按照个人的理解和笔记纲要再写一次实例代码。

因此这本书读完之后，我的笔记也就随即产出了。我没有采用很长的篇幅记录，而是思维导图来整理每一章的内容，这样也方便日后温习。

呃，好久也没有写博客了，所以将笔记也一并分享出来，也欢迎大家分享自己的学习方法和笔记方法。

阅读全文 »
#design pattern #javascript

深入理解JavaScript定时器（续）

发表于 2012-10-14   |  

对于浏览器端来说，大多数事件都是异步的，但是有部分事件却不是，这部分事件称做同步事件，因此它们都是立即执行的，完全不理会前几篇文章中所提到的事件队列。以及浏览器的渲染、重绘等操作，也会打乱之前我们好不容易所建立起来的事件队列的概念。不过，本篇将会陆续不断的把这些坑给填上。

同步事件

DOM改变事件(DOM Mutation events)

下面的Demo便用于说明同步事件之一的DOM Mutation events（注：该事件不支持Chrome浏览器）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<a href="http://heroicyang.com/">
  heroicyang.com
</a>
<script type="text/javascript">
  var anchor = document.getElementsByTagName('a')[0];
  anchor.onclick = function(e) {
    alert('in onclick');
    this.setAttribute('href', '#');
    alert('out onclick');
    return false;
  };
  if (anchor.addEventListener) {  //Firefox, Opera
    anchor
      .addEventListener('DOMAttrModified', onpropchange, false);
  } else if (anchor.attachEvent) {  //IE
    anchor
      .attachEvent('onpropertychange', onpropchange);
  }
  
  function onpropchange() {
    alert('onpropchange');
  }
</script>
阅读全文 »
#javascript #javascript timer

深入理解JavaScript定时器

发表于 2012-09-22   |  

对于浏览器内部，大部分操作都是异步的生成事件并添加到JavaScript引擎线程的队列中，然后由JavaScript引擎线程进行调度执行。因此浏览器的很多事件都是和JavaScript相结合的，但是也有一些内部的限制。

首先我们非常确定JavaScript是单线程的，对于浏览器来说，一个窗体中只有一个JavaScript引擎线程。而其他的行为，如：渲染、下载等是由单独的线程进行管理的，且具有不同的优先级。

异步事件

前面提到大多数事件都是异步的，触发的时候就将回调函数添加到事件队列。浏览器提供了一个内部的回路，也就是之前所谈到的Event Loop，由它来负责检查队列和处理事件、执行函数等。详细可参考我的前一篇博文。而setTimeout和setInterval也是将其需要执行的函数添加到事件队列。

事实上，大多数交互和活动都得通过事件循环。

阅读全文 »
#javascript #javascript timer