2014-05-30
关于NodeJS IO异步的理解
一直都听说NodeJS有一个非常强大的特性就是IO异步，今天具体总结以下这到底是个什么东西，以做备忘。
要说到到IO异步首先就要提到两个关键字，IO阻塞和IO非阻塞。
- 阻塞模式下，一个线程只能处理一项任务，要想提高吞吐量必须通过多线程
- 非阻塞模式下，一个线程能处理多项任务，依赖事件通知方式
打个比方，你去银行办理业务，阻塞模式下为了同时处理多个业务，只能另开多个窗口接待多人。非阻塞模式下，在前一个人等待某件事情的间隙，比如客户的身份证被拿去复印了，那么趁这个间隙窗口工作人员可以继续处理后一个人的业务，当后一个人也被某件需要等待的事情耽搁需要等待时就继续处理再后一个人的业务，当在工作人员每处理完一件事情时如果前面复印身份证的被告知身份证复印好了，那么就继续处理第一个客户的事情。
...
READ ALL

2014-05-16

关于JavaScript this指向问题

这是偶然在一次调试中JavaScript发现的问题，把某个对象下的function传入某个函数，然后函数内再调用function，然而这样会导致被传入的function this指向有问题

var F = function (name) {
  this.name = name; 
};
 
F.prototype.getName = function () {
  return this.name;
};
 
var f = new F('琼台博客');
 
var dosome = function (fun) {
  if (typeof fun === 'function') {
    return fun();
  }
};
 
f.getName();                    // 琼台博客
dosome(f.getName);              // undefined
dosome.apply(f, [f.getName]);   // undefined

...

READ ALL

2014-05-12
一道隐藏陷阱的JavaScript面试题
最近朋友发把一道JavaScript的面试题发我
```
var name = "张三";
 
(function () {
  name = "李四";
  var name = "王五";
  console.log(name); 
})();
 
console.log(name);
```
虽然他已经知道运行结果，但他还是有点不太明白为什么！按照正常逻辑思维读这道题
- 声明一个全局变量name=张三
- 声明一个匿名函数并执行
- 匿名函数内name=李四 由于不带var关键字所以是修改全局下name
- 声明一个局部变量name=王五
...
READ ALL
2014-05-07
一次愚蠢的firebug调试经历
之前在firebug下打断点刷新后一直都挺好用，后来又一次不知道怎么了就一直都刷新后断点记录全消失，这点让我很郁闷。于是每次为了断点都需要把页面默认执行的函数停止，然后等进入页面后再找到要断点的地方，再手动执行断点代码处实在累人。并且换了重装firebug、换台电脑都一样，甚至一度怀疑哪里没设置好导致的，为防止以后调试麻烦决定解决下这个问题。
一开始的思路是在网络上搜索“Firebug断点刷新消失”居然没有找到任何疑似记录，以为关键字不准确，再缩小为：“Firebug断点”，文章一大堆，并且文章上面都明确指明刷新后断点记录不会消失。。。没辙了！
...
READ ALL

2014-05-02

一个纯CSS实现的分类菜单

动手写了一个纯CSS的分类菜单，貌似还挺好用，可惜就没有添加动态效果了

full

点这里看Demo

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>分类菜单</title>
    <style type="text/css">
      * {
        margin: 0; 
        padding: 0;
      }

      body {
        font: 14px/1.5 "宋体";
      }

      a {
        text-decoration: none; 
      }

      a:hover {
        color: red; 
      }

      ul {
        position: relative; 
        margin: 50px 0 0 50px;
        width: 300px;
        border: 2px solid #aa9900;
      }

      li {
        height: 30px; 
        line-height: 30px;
        width: 100%;
        text-indent: 1em;
        list-style: none;
        border-top: 1px solid #CCC;
      }

      li:hover,
      li:hover + li,
      li:first-child {
        border-top: none; 
        height: 31px;
        line-height: 31px;
      }

      div.box {
        width: 300px; 
        height: calc(100% + 2px);
        display: none;
        left: 300px;
        top: -2px;

        border: 1px solid #999;
        position: absolute;
        z-index: 1;

        background: #EEE;
      }

      div.item {
        position: relative; 
        width: 100%;
        height: 100%;
      }

      li:hover div.box {
        display: block;
      }

      li div.item span.link { 
        display: block;
        width: calc(100% - 1px);
        height: calc(100% - 2px);
        position: absolute;
        left: 0;
        top: 0;
        border-style: solid;
        border-color: #FFF;
        border-width: 1px 0 1px 1px;
        z-index: 2;
      }

      li:hover div.item span.link {
        border-color: #999;
        background: #EEE;
        width: 100%;
      }

      span.icon {
        position: absolute;
        right: 10px;
        top: 0;
        color: #999;
        font-weight: bold;
        font-family: serif;
      }

      li:hover a {
        color: #270; 
      }

    </style>
  </head>
  <body>
    <ul>
      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类1</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类1 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类2</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类2 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类3</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类3 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类4</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类4 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类5</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类5 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类6</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类6 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类7</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类7 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类8</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类8 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类9</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类9 详细信息</div>
      </li> 
    </ul> 
  </body>
</html>

...

READ ALL

关于NodeJS IO异步的理解

关于JavaScript this指向问题

一道隐藏陷阱的JavaScript面试题

一次愚蠢的firebug调试经历

一个纯CSS实现的分类菜单