博客园_Darren_聂微东 - 关注前端开发技术

要有梦想-创造卓越的职业生涯

2012-03-22T17:54:00Z

我手机里保存着很多经典的句子，有伤感的、幸福的、英语的、励志的... 里面静静的躺着一句不知道从哪抄来的 - “如果生命是一曲动人乐章，我们没法控制如何开始，也很难预测怎么结束，只好把每个音符都弹得漂亮。”

明天和意外，你永远不知道哪个先来...

昨天看了燕洋天老师的文章《活在当下》，颇有感触，于是整理出这篇文章与大家共勉。

这篇文章的目的：

1.这真是一本非常励志的书，适合我们这种经常需要被激励的人...虽然书名确实有点213(不懂213是什么的朋友请搜索一下)

2.希望在自己无助、失败、懒惰、泄气等等的时候能看到自己这篇文章。人生难免有走弯路和跌倒，希望自己和大家都能扛得住、禁得起

3.好书需要拿出来分享，独乐乐不如众乐乐^_^

《我编程，我快乐：程序员职业规划之道》

本书从五个大的方面和具体的53个细节讲述了如何去找到事业上的快乐感和满足感，而成就一个卓越的人生。其中五大方面分别指：1.选择市场；2.在产品上投资；3.执行；4.推销……不仅仅是迎合；5.保持技术领先。具体的53个细节我就不一一表述了，感兴趣的朋友建议入手一本细细品味之。

在此选择了一些非常有价值、非常实用、非常励志的和大家分享一下，也顺便总结下自己这几年的程序生涯。下列的这些观点不光针对我们的程序生涯，对我们的人生都是非常有参考价值。

对待技术投资

投资有多种方式和方法，不过提醒大家最重要的一点 每个人最应该投资、同时投资回报率最高的是：投资自己的身体和头脑 ^_^

风险收益是指减去当时基本的市场收益后的投资收益，那么之间的平衡就需要自己去取舍了。高回报的孪生兄弟就是高风险，他们总是形影不离。

现在这项投资不需要大量的金钱，而是时间。越早投资那些有发展的技术，那么就越有可能成为这个新技术潮流的领导者，那么这时你的投资就是正确的。当然新技术也有会有投资“失败”的情况：自己研究的技术投入一段时间后发现并没有好的发展趋势。不过从另一个角度说，学习本身就是非常好的投资。

那么如何看待成熟稳定的技术？我觉得这种技术什么时候学习都不算晚，因为成熟的技术就意味着有市场，有市场就会有需求。当然在这个供求关系之间，成熟的技术对技术人员的要求往往会苛刻一些，在初中级的岗位上工资相对会稍低一些(会的人太过泛滥工资确实不好谈)，比如十年前会写HTML和现在会写HTML...呃

作为一名普通的开发工程师，在我看来是否要做技术投资其实很简单，具备三个前提：

1.得有这个时间和精力。注：貌似不少公司都有那种前瞻性较强的岗位，就是去折腾一些与公司产品有关的新东西、新技术，羡慕这种纯研发的淫...

2.这技术很酷 or 有些意思，那么花点时间做做研究其实要不了多少时间，而且我认为这种时间的投入肯定都是值得的；

3.多听听各种社区和技术牛人的声音...

自己做判断，选择是把双刃剑...可是无论做出那种选择，最终目的是产生利润。

了解公司所处的行业

技术是一名技术人员的核心竞争力之一，可是如果你想站稳脚跟，就需要深入了解你所处的领域。

书上有这么一句话：“你的行业经历应该成为你的重要才能”。

或许我们只是一名程序员，但是如果能用客户所处行业的专业语言与他们交流，那这就是一门非常重要的技能。

选择行业是十分重要的，选择哪家公司、哪个领域工作对我们来说都是重要的。

简单说下我曾经的一些工作经历都教给了我什么：

1.外包经验让我了解了一些外包行业的工作流程和方式；

2.视频公司的经历让我学习了视频行业的商业模式和多种运作方式；

3.个性化推荐公司是一家技术型的创业公司，除了让我对个性化推荐的趋势有了了解，更让我懂得了创业的艰辛和成功的不易

技术方面的成长只是其中的一个方面，每种经历都学到了很多和技术无关的行业知识，这些都是我人生非常宝贵的财富。

有时我需要以（冒充）专家的身份去给一些客户去做讲解，客户需要的不光只听你说那些API、代码逻辑，他需要的你给他解决问题，他也是带着问题而来，不管是技术层面的还是牵涉到商业层次的。如果你不能对自己公司和甚至公司所在行业的商业模式有了解，那么你很难从客户的角度出发去考虑问题，这是我自己真实的体会。

注：就算忽悠也得有点底子才忽悠的过去呀^_^

实际的作用当然还不止这些，对业务逻辑越了解那么对工作的掌控能力就越强，对工作会更加得心应手；往往对公司业务了解的技术人员都很容易被重视，那也就更有机会升职加薪，尤其是那些有自己想法的人，是金子总会发光的...

还有很重要的一点就是通过了解公司和行业的商业模式，可以让自己了解“你到底在什么领域正在做着什么样的事情”，这样你会更加清楚自己的定位和发展。

成为一名专家 or “通才”

在这个专家已经变成砖家的年代，专家都快变成骂人的话了。这里说的专家当然说的是那些在专业领域有深度而且深入的人。对于专家不用多解释了，成了专家工资和发展自然不是问题了。

专家的成功是由于专注，可是专注不等于一条路走到黑。专注的是技术的追求，而不是对于某个职位或者产品。

这里对于“通才”应该如何去定义确实让我思考了好一会，我自己是这么理解的。要成为通才那么就不要只专注于一种技术，其实通才比专家更稀少，所以很珍贵...

我主要是专注于前端开发，所以曾经也是对后端的知识完全不了解，可是等有了一定的工作经验之后发现，再对后端的知识有了一定认识后，自己对工作和业务的把握更好了，开发效率和沟通效率更高了。

书上对通才的有个通俗易懂的定义：“什么都懂点，但什么都不专”。我觉得如果你热爱自己的工作，那么应该要求能更高一点：“什么都懂点，有至少一样专的”^_^

热爱它，不然就离开它。

站在巨人的肩膀上-阅读源码

牛顿说过：“我看得更远，是因为我站在巨人的肩膀上。”

源码确实是最好的教材，通过阅读源码我们可以学到很多牛人们的思想和技巧。所以建议你找到那些优秀的开源项目，开始阅读吧。

这就像在培养自己的品味，不同的风格和技巧会让你更具有创造力。尤其是在阅读时和自己已有的知识相互印证，你会去想、去思考、去找答案，这个过程你会有很大收获。

执行力

以前我做外包的时候是scrum敏捷开发的模式，每天上午都会有十几分钟的会议，说说自己昨天都做了什么，今天计划做什么，在工作碰见了什么问题等等；到下午或者晚上下班的时候需要发一份日报，记录今天工作的进展情况。所以我养成了几个习惯并一直坚持到现在：

1.按照自己制定的计划的去高效的完成工作

2.记录自己今天完成的工作和其他的工作排期，这样可以让自己面对领导询问工作情况时更清楚自己做过什么，即将需要做什么

3.记录工作中遇见的大小问题，不管是技术相关还是工作沟通等等，只要我觉得有必要记住的事情我都会记录下来

没错，当开始这样每个工作日你都会觉得过的比较紧张。公司一般不会让你无事可做，假如真的无事可做你也想办法给自己安排写具体的任务，比如看看书，学学英语记记单词。我表达这些的目的就是每天进步一点点，这样你就不会停歇不前。当这种思维方式变成习惯，真的会上瘾。如果你没有完成你自己制定的计划，你会浑身不自在^_^

每天都问问自己，你完成了今天的计划吗？

学会说“不 ”

在我工作初期，总感觉和同事说“NO”是件非常丢人的事情。可能是由于我当时还没有学会怎么去拒绝别人，所以加班也就成了家常便饭。自己真的是吃到说“Yes”的苦头才明白原来工作和生活一样，都是需要排优先级的^_^。

当你答应了别人而最终又没有去完成，这就是不遵守承认，这就是在说谎。

这种例子在我身边发生的太多了，说“不”不是说我们失败了，不是说我们不行，往往很多时候是我有自己的排期和计划。

当然不能过分的说“不”，我们也需要挑战和尝试。

要勇敢诚实。

活在当下，可要有梦想

上面这几字就是就是我写这篇文章最初的目的...

梦想就是蓝图...项目正式开始开发的时候一般都会有开发周期的预估，然后就会在此基础上排好一系列的计划，这一系列的计划就是项目的蓝图。

人生也需要有一个大概的蓝图，或者程序生涯中每个阶段都可以有每个阶段的蓝图。我们现在需要的就是找好自己的定位，然后告诉自己下个目标在哪，怎么才能更快更好的到达下一个目标。

自己可以在实现这个蓝图的过程中记录自己成长的点点滴滴，可以有每一次重大的突破和收获，每一次跌倒和失误...慢慢你会发现，每个月，每一周，每一天你都会有进步。

不管大家是开发还是研发甚至是码农，请好好思考下自己的职业方向，因为明天和意外，你永远不知道哪个先来...所以请热爱你的工作，要不就离开它，去找一份自己真正有激情去做的工作。

活在当下，可要有梦想，在此祝福大家。

本文链接

IE下 z-index 的各种坑

2012-03-05T13:40:00Z

到新地方有些日子了，差不多适应了这边的工作节奏与流程。接到的第一个开发任务是几个比较简单的页面，需要做的工作就是先把设计图变成页面，然后使用PHP创建几个请求的接口传递数据，标准且简洁的web开发思路。可是真有些日子没有写DIV+CSS了，而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目)，所以这次开发中不可避免的碰见了几个问题，尤其是在IE下的 z-index 问题很有意思，所以整理了一些资料和总结分享给大家...注：因为引入了jsfiddle，所以页面加载受影响会稍慢一些^_^

阅读目录：

z-index属性
z-index规范参考
在IE下出现的问题
在IE6下z-index的问题
1. >拼爹的时代
2. >万恶的float
IE6下 select z-index无效而遮挡div
1. >用 iframe 包裹 select 元素
2. >以 Iframe 作为div的子元素，覆盖 select 元素
本文结语
参考资料

z-index属性
z-index : auto | number
z-index 属性设置元素的堆叠顺序，如果为正数，则离用户更近，为负数则表示离用户更远；
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；
z-index 仅能在定位元素上奏效（position 属性值为 relative 或 absolute 或 fixed的对象）。

z-index规范参考
在 W3C CSS2.1 规范中，每个元素都具有三维的空间位置，除我们所熟悉的水平和垂直位置外，元素还可在 "Z轴" 方向上层层相叠、依次向前排开；
元素在 "Z 轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。在文档中，每个元素仅属于一个层叠上下文。在给定的层叠上下文中，每个元素都有一个整型的层叠级别，它描述了在相同层叠上下文中元素在 "Z轴" 上的显示顺序；
同一个层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则（back-to-font）；
不同层叠上下文中，元素显示顺序以父级层叠上下文的层叠级别来决定显示的先后顺序。与自身的层叠级别无关；
每一个定位元素都归属于一个stacking context。根元素形成 root stacking context，而其他的 stacking context 则由定位元素产生（此定位元素的 z-index 被定义一个非 auto 的 z-index 值），定位子元素会以这个 local stacking context 为参考，用相同的规则来决定层叠顺序；
当任何一个元素层叠另一个包含在不同 stacking context 元素时，则会以 stacking context 的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的 stacking context 下才会用元素本身的 z-index 来决定先后，不同时则由 stacking context 的父元素的 z-index 来决定。

在IE下出现的问题
当定位元素的 'z-index' 未设置时（默认为 auto），在 IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下，则严格按照规范，不产生新的局部层叠上下文。
这个问题将导致定位元素的层叠关系在不同浏览器出现很大的区别，严重的可导致页面布局混乱、内容覆盖等。
受影响的浏览器有IE6 IE7 IE8(Quriks Mode)
直接从w3help复制了代码，分析以下代码：
<style type="text/css">
body { margin:0; }
.p1{ top:20px; height:50px; width:150px; background-color:blue;}
.p2{ top:10px; left:20px; height:30px; width:100px; background-color:yellow;}
.p3{ top:0px; left:50px; height:100px; width:50px; background-color:red;}
</style>

<div style="position:relative;" class="p1">1
<div style="position:absolute; z-index:1;" class="p2">2</div>
</div>
<div style="position:absolute;" class="p3">3</div>
注：Q代表Quriks Mode，即混杂模式。
根据 W3C CSS2.1 规范中的说明，定位元素【p1】和【p3】由于未设置 'z-index' 特性（使用默认值 auto），它们不会创建新的局部层叠上下文，而定位元素【p2】设置了 z-index:1 则会创建新的层叠上下文。
另，在同一根层叠上下文中，同为 z-index:auto 的定位元素【p1】和【p3】，它们的层叠级别相同，但【p3】在【p1】之后，所以在 Z 轴上【p3】比【p1】靠前显示，又，【p2】层叠上下文的层叠级别为正数，所以【p2】的层叠级别要比【p3】高。因此，它们在 Z 轴上的顺序为：（遵循 back-to-font）【p1】 -> 【p3】 -> 【p2】
以上为标准浏览器下的情况。
而在 IE6 IE7 E8(Q) 下，定位元素【p1】和【p3】都创建了新的局部层叠上下文，在同一根层叠上下文中，它们的层叠级别相同，但【p3】在【p1】之后，所以在 Z 轴上【p3】比【p1】靠前显示。此时，由于【p2】处于【p1】的层叠上下文中，所以【p2】在 Z 轴上要比【p3】靠后。
在来一个例子：
<style>
.parent{width:200px; height:200px; padding:10px;}
.sub{text-align:right; font:15px Verdana;width:100px; height:100px;}
.lt50{left:50px;top:50px;}
</style>

<div style="position:absolute; background:lightgrey;" class="parent">
<div style="position:absolute;z-index:20;background:darkgray;" class="sub">20</div>
<div style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</div>
</div>
<div style="position:absolute;left:80px;top:80px;background:black;" class="parent">
<div style="position:absolute;z-index:2;background:darkgray;" class="sub">2</div>
<div style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</div>
</div>
解决办法
理解层叠上下文、层叠级别与 'z-index' 之间的关系。在可能出现定位元素相互覆盖的情况时，明确指定定位元素的 'z-index' 特性，避免此问题的出现。
注：此段内容基本都是来自w3help。

在IE6下z-index的问题
我不是一个喜欢抱怨的人，so...有关抱怨IE6的话在此省略500字...
先上个图说说我在工作中实际遇到的问题：
图片的上半部分就是在非IE6下的交互，图片下半部分是在IE6下的显示效果，当打开虚拟机测试的时候我表示瞬间碉堡了，囧...在IE6下这个tips被盖住了，很明显这个不是我想要的效果，可是为什么会出现这个情况类？接着往下看。
分析此类问题的原因：
1.这是个拼爹的时代，在IE6下很好的体现了这点...囧
按照正常的思维，z-index层级越高，内容越应该在上面显示，在大部分的浏览器在大部分的情况下，确实如此，但是不绝对。尤其遇到IE6。
在IE6下的层级高低不仅要看本身，还要看自己的父元素是否给力：父元素的 position 属性为 relative或absolute 时，子元素的 absolute 属性是相对于父元素而言的。而在IE6下的层级的表现有时候不是看子元素的 z-index 多高，而要看它们的父元素的 z-index 谁高谁低。点击 Result 可以看到HTML对应的VIEW。
从以上的代码中可以看到最内层<div>的z-index属性为999，其父元素的z-index属性为100。按照正常的显示逻辑，图片应该正常显示且不会被背景色所影响，可是在IE6下会有问题，直接上图片会比较直观，比较看看IE6下和非IE6浏览器的显示效果。chrome、FF和opera都经过测试了，为了不使图片过多我就拿个chrome的截图吧。
重现这个bug的条件很简单，只要绝对定位（position:absolute）<div>的祖先元素，或者说是最顶级的祖先元素的 relative 属性小于黑色半透明层的z-index层级即可。解决办法也很简单，只需要给的祖先元素加上z-index就可以。
为具有 relative 属性的顶级祖先元素打了鸡血(加了z-index)后，IE6下终于正常显示了。这个问题很现实的教育了我们 - 在拼爹拼不过的条件下我们只能靠自己努力...
IE6下拼爹的问题也就是我在实际开发中碰到的问题，现在已经完美解决且达到需求的效果了。接下来要介绍的是一些我总结的资料，都是介绍在IE环境下得各种z-index的坑。
2.万恶的float
float 是 css 的定位属性，而且应该是CSS中最常用的属性之一了，至于为什么说它万恶等我改天去准备一篇文章单独进行解说，在这里借着以前的学习笔记简单说几点：
1. IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉；
2. 3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样；
3. 双倍边距bug处理 IE6 时，另一个需要记住的事情是，如果在和浮动方向相同的方向上设置外边距(margin)，会引发双倍边距。
有关float的扫盲就先到这里，还有一点就是float毕竟是标准的属性，而且大多数的前端都习惯用它去实现页面，所以我的建议就是：深入理解 HTML语义和表现。
接着开始讲述 z-index和float 在IE6环境下擦出的坑爹的火花...先上一段代码：
<div style="background:#000;width:100%;height:600px;opacity:0.3; filter:alpha(opacity=30);position:absolute;left:0;top:0;z-index:1;overflow:hidden;"></div>
<div style="position:relative;z-index:100;">
<img src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_1.jpg" style="float:left;" width="300" />
</div>
看到<img>有设置float属性，上面这段代码显示的效果与IE6下拼爹失败一样，IE6下的犀牛书是灰色的 T.T 。为了让犀牛书正常显示，只需要把<img>的float属性去掉即可。
个人理解可能是因为<img>的float使得z-index失效造成的。网上还有种说法是因为float和relative两者在定位上问题，所以一起使用的时候会造成此bug。
这个问题又教育了我们 - 某些环境(IE6)下也要小心被兄弟坑...

IE6下 select z-index无效而遮挡div
这个问题其实在是比较常见的了，我早期做项目的时候有幸遇见过这个问题，所以有现成的资料，趁着这次也刚好整理整理、回忆回忆。两个解决办法都是围绕iframe展开的，咱们先来看第一个。
1.用 iframe 包裹 select 元素
使用iframe包住select，这样iframe可以有z-index，只要在div上设置的z-index比iframe的高即可实现。示例代码如下：
<iframe style="z-index:1;position: absolute; ">
<select name="me">
<option value="name">Darren聂微东</option>
<option value="sex">male</option>
<option value="age">secret</option>
</select>
</iframe>

2.以 Iframe 作为div的子元素，覆盖 select 元素(推荐使用)
建立一个跟div同宽同高的iframe，并且z-index比div要低。
<style type="text/css">
#iframe{
position: absolute;
width: 100%;
height: 100%;
z-index:-1;
}
.text_div{
position: absolute;
left:100px;
top:50px;
width: 300px;
height: 200px;
background : blue;
z-index:100;
}
</style>
<div class="text_div">
<span>这里可以包含其他dom元素</span>
<iframe id="iframe"></iframe>
</div>
注:在这里如果不加src属性,尽管iframe会把select挡住,但是由于默认iframe为白色,会影响原来的div背景色。解决方法可以加了一个空的HTML文件，并把body 的值设为和原来div背景色一致,这样就解决了默认白色背景色的问题，这里只是一种思路，办法总比困难多 ^_^。

本文结语
与很多做国内项目的前端一样，我也会常常忍不住诅咒IE，可是假如换个思考方式我们也得感谢它，工作因为它才有了更多挑战和成就感。
对不理解CSS层叠朋友来说 z-index 确实是一个大坑，希望这篇文章能够给那些掉到坑内的朋友一些帮助。
如果觉得此文还算用心，请劳驾点击右下角的推荐，谢谢^.^

参考资料：
http://www.w3.org/TR/CSS21/visuren.html#z-index
http://www.zhangxinxu.com/wordpress/?p=471
http://www.w3school.com.cn/css/pr_pos_z-index.asp
http://w3help.org/zh-cn/causes/RM8015

本文链接

2011总结与2012展望

2012-02-19T15:29:00Z

2011年发生了太多的事情，上半年与下半年的工作与生活就像发生了两极反转，我只想对已经发生过的一切说：“谢谢，感谢曾经在我身上发生的一切，无论是美好的还是难受的”。

这是一篇彻头彻尾的水文，只为了纪念这过去的2011和展望已经开始的2012。

2011关键字 - 化蛹、浮躁与专注

化蛹，百度百科给的解释 - “完全变形昆虫在幼虫和成虫之间的一个发育阶段”。我的理解就是从小虫子变成一个蛹，不到破蛹那天还不知道出来的是蛾还是碟。

浮躁，今年换了两份工作，对此我真的很惭愧很懊恼，其实在这儿说换工作的事其实不好，可是既然已下决心写总结了就豁出去呗。换工作确实是个很慎重很谨慎的事情，在这里善意的提醒每个计划换或者准备换工作的朋友：

1.想清楚自己到底需要和追求的是什么；

2.现在是剩者为王的时代，被剩下才有机会；

3.注意职业操守，尊重自己和自己的工作。

专注，正式开始坚持写博客了，也有了自己的分享，更看过不少与前端相关的、不相关的书。因为专注，所以今年收获的是丰富的知识储备。

突然想起在 adsage 时孙埜老师常常会说的一些话：

“结果必须是smart的，可度量的”
“research是要出结果的，需要有分享的”
“看书不是看完就算了的，需要有总结的”
“计划是要学着去分解的，需要灵活对待的”
“工作不是完成就算了的，需要多思考的”...

那是我至今都无比怀念的时光，在这里也谢谢伏哥，孙老师，琳哥，会总，倩姐，团长...脑海中一下出现了好多好多的面孔，真的很感谢你们，祝愿你们身体健康工作顺利。

接下来弄点扎实的、看的到的数据，从生活和工作两大方面出发说说我11年的收获吧：

生活

一.读过的书籍

从10年年底开博至11年9月这段时间，在本博客右侧about那栏一直都列着有大段大段的学习计划，大概就是说要看《JavaScript高级程序设计(第2版)》，《高性能JavaScript》，《JavaScript语言精粹》，《JavaScript DOM高级程序设计》，《JavaScript设计模式》，《精通JavaScript》，《JavaScript DOM编程艺术（第2版）》...除了《编程珠玑（第2版）》实在是看不太明白，其它计划看的书11年上半年就整个看完了，而且某些书是看了一遍又一遍。除了完成11年计划看的书以外还看了以下的书籍，有些书确实非常之不错，简单介绍介绍顺便也推荐给大家：

《大话设计模式》表达风趣、生动、形象，我反正就觉得看起来不枯燥。如果有一些基础的话读这本书会很享受，如果没有基础的话可能会稍有点吃力。而且书也不贵，在时间方面比较宽裕的条件下当小说看看也不错^_^
《JavaScript框架高级编程》这本书很厚，刚出版的时候我就买了，本来对此书报有很大的期望，想提升自己对JS框架的逻辑与结构的理解，可是没想到这本书是一本介绍各大框架的入门书，都是以简单介绍为主，深度确实根本不够，内容较杂且不系统。不太建议购买。
《HTML5高级程序设计》是本介绍新版JSAPI的好书。此书非常厚道的没有去过多介绍HTML5新标签和CSS3的知识(有一章大概讲了下canvas，有一章讲了音频和视频)，直接多角度的去讲解JSAPI，是本非常扎实的好书。想了解HTML5 JSAPI的朋友建议入手。
《python基础教程》和《Python Web开发学习实录》这两本书确实是一时冲动而读的。11年中旬时对python和nodejs着了魔，就想用python和nodejs折腾点东西，所以经过打听就着手买了这两本python书籍。我先看的第二本再看的第一本，最大的体会就是第一本比第二本好了不止一点半点，囧。对python感兴趣的初学者强烈推荐第一本，此书写的非常实在且系统，容易理解。
《重构：改善既有代码的设计》绝对是程序员进阶的好书。我会经常重读《JavaScript设计模式》，再配合看《重构》的时候使我把很多模式方面的知识清晰的串的起来，得到非常多的成就感。此书不管针对新人还是老手，都是不容错过的经典书籍。
类似小说的IT书看了《黑客与画家》《浪潮之巅》，其中《浪潮之巅》确实是本强大无比的书，推荐此书的人实在够多了，我就不多啰嗦了，绝对值得一看
有关用户体验方面的书因为公司有给买，所以也看了三本，分别是《简约至上》《点石成金》《瞬间之美》。个人感觉这几本书内容都是非常相似，都是从用户和产品的角度去思考。读完后启发是有的，可是真的说学到了什么又具体说不上来，不知道是不是读的不够认真的原因。不过书都不厚，而且又都是彩页，看着也挺享受的^_^
《JavaScript权威指南（第6版）》的英文版早在11年2，3月就出来了，一直在等看中文版，所以想看这本书只有拖到12年来实现了。《JavaScript权威指南（第5版）》因为公司有买所以借着翻了几天，说实话我觉得这书还是收藏的价值更大^_^。

二.健康与情感

11年上半年的时候一个月至少能踢一次球，球场上能坚持满场跑两小时；兵兵球、羽毛球、爬山等等体育活动就没中断过，身体杠杠好，所以一直觉得自己还是很年轻。到了下半年工作太忙，运动几乎没有了，连睡觉、看书的时间都少了，一下子身体就垮掉了，这才意识到原来自己都是要奔三的人了，奔泪...
11年下半年正式光棍了，很荣幸有资格能度过百年一遇的神棍节，记得过节那天老爸还给我电话了说“以后最好可别这个节了”。额，瞬间碉堡了...真心表示压力很大，好姑娘确实不好找呀，12年努努力吧...还有，知道你不会看我的博客，所以我悄悄的在这儿祝福你一定要幸福，感谢你在我一无所有、一事无成的时候陪伴过我。
12年初，春运。千辛万苦的还是买到了票回家过年(谢谢给力的志刚同学帮忙订到票^_^)。不知道是以前没注意观察还是什么原因，突然发现爹妈这一年老了很多；老妈更是身体也差了不少，有些家务都没法做了；和很多80后一样，我身边也开始出现一些催着我结婚的亲戚朋友。写到这里我突然想到刚毕业那会儿，不管家里人怎么劝自己就是一心不愿回家，非要在北京打拼闯荡一番，就觉得自己好不容易出来读书了，回家有这样那样的不甘心，可现在我这个当儿子很想多陪在他们身边守护他们。

工作

11年待了两家公司，分别是一家视频网站的和一家做个性化推荐的，直接说说我分别在两家公司工作中的成长和收获吧：

视频网站公司：

在工作中继续使用的jQuery库，对jQuery库及其插件有了更深的理解。今年我会在前端攻略系列中把我对jQuery的理解和关键源码的分析列出来，也请大家到时关注。
来这公司以前主要做国外的项目，所以对IE6,7的兼容了解不深刻，在这儿学到了很多专业的浏览器兼容的知识，如更合理的使用标签和CSS hack。
在项目中使用到了CSS3和HTML5标签，对HTML5除了JS方面的知识有了实践的操作。
参与完成了iphone和ipad的app，了解了在IOS设备中开发的知识。
开始参与前端的线下交流会，结实了许多志同道合的朋友。
和交往5年的女朋友分手，这算是个很重要的成长，囧...

个性化推荐公司：

因为公司是做第三方服务的，所以JS代码会在各种浏览器环境、各种代码环境、各种系统下接受考验，学到了很多有关代码和兼容非常细节的问题，如iframe的各种坑、AJAX跨域问题、代理问题等等
因为觉得使用开源的JS库或者框架还是太重了，所以也抽空去研究了sizzle选择器，这个等有时间我把笔记整理整理再发出来
被荣幸的安排去了解Node.js的知识，有写一篇《node.js 初体验》的文章
项目的服务层是用python写的，因为自己当时也非常非常感兴趣，所以也看了两本书，虽然时间不长，但也算是勉强入门吧。python确实是非常性感的语言，等将来有时间和机会吧，暂时只能放一放了。
在一个高技术的互联网公司工作，也被领着听了几次深刻的NoSQL分享会，所以也了解一些NoSQL的相关知识，不过毕竟不是发展方向，浅尝即可。

2012关键字 - 化蝶、勤奋与沉淀

化蝶，百度百科给的解释 - “指蝴蝶幼虫由蛹，经过蜕皮，变化为成虫的过程”。化蝶是我对自己今年的期望，可能真的是蛾是碟还是得拿现实说话的。

勤奋，古玛雅人预言2012是其文明的终点，可是对我来说2012是新生的一年，新的工作环境和新的生活，一切都是新的开始。一直觉得自己勉强算比较勤奋了，可是今年要实现化蝶的目标这还远远不够，我需要付出更大的努力还行，勤奋勤奋再勤奋，天道酬勤。

沉淀，今年绝不会再主动换工作了，真心希望能安安心心工作、踏踏实实积累一些日子，好好的专研技术，写出更多更深入的分享。

能进入一家大公司做自己喜欢的工作，所以我应该是幸运的，生活待我不薄所以更应该好好把握现在，以下同样从生活和工作两方面说说我12年的大概规划。

生活

1.打算读的书

《我编程我快乐》这本是朋友推荐给我看的，说里面有很多有道理的东西，可以提高工作激情和找到工作方向
《编程人生》理由同上。也是当小说看看顺便激励自己
《代码大全2》这本书实在太厚了，好几次拿起来又放下了，今年把它列在计划里面，鼓起勇气定要看完它
《JavaScript实战》这本书拿到手有些日子了，有翻了几章貌似还不错，可是下半年时间确实有限就没看完，现在也把它放在今年的计划里面
《JavaScript设计模式》这本书快要被翻烂了，可是每次看都会觉得自己又有所提高，等把这本书翻烂了我就买一本新的收藏起来^_^
CSS一直就没有系统的学习过，今年既然要沉淀沉淀那么打算把所有知识都好好巩固下。已经下好了三本电子书，打算把CSS的知识再好好屡一遍，这三本书分别是《CSS禅意花园》、《超越CSS：Web设计艺术精髓》、《CSS权威指南》
《编程珠玑（第2版）》这本书确实有点挑战，就计划花1个月时间慢慢去读，要是再读不明白我只能说我的悟性和IQ不够了，囧
《JavaScript权威指南（第6版）》中文版等了一年了，今年只要能出版一定果断出手，必须珍藏了
《鸟哥的Linux私房菜：基础学习篇（第3版）》工作中偶尔需要和linux打交道，每次碰到linux就蒙了，今年一定得下更多功夫在linux上面，看书+实践
《php和mysql web开发（原书第4版）》我新进的这家公司的前端都需要会一些PHP的知识，所以把09年买的这本书又拿了出来，哈哈。当初还好没有把这本书送人呀，省了省了。这本书被誉为PHP的圣经，对PHP感兴趣的同学可以考虑入手
《正则表达式经典实例》看了两次都因为被工作打断而没有坚持看完，今年既然打算把基础都好好屡屡，所以还是得把正则再好好看看。正则还是比较重要的东西，要是有时间还是建议大家学习学习
《英语口语900句》特别崇拜那些英语说的好的人，学好英语是我的梦想之一，因为真想去环游世界，囧。做计算机的更是需要有一定的英语基础，看最新资料、最新文章什么的大多都得去英语网站。这本书买了2年了，买回来后就甩角落了，如今下决心一定要开始学习英语了，而且买的书不管好坏我至少都会好好看一遍，感觉这个才对得起自己和书，Fighting！注：要是今年英语学不出什么感觉明年我就报个班去。

以上就是今年计划需要读的书，有JS、CSS，也有linux，还有正则，更有English，多种多样哈。

今年计划看的书比去年少了不少，因为确实有很多经典的书不是读完就算了，是需要反复多次去揣摩，一本经典好书的标准就是得值得反复阅读的，所以今年在看新书的同时我也会不停的去阅读曾经读过得旧书。

2.健康与情感

健康的诀窍就在饮食和锻炼了。饮食习惯是我一直都比较注意的，吃的比较清淡和营养；锻炼的话就得靠恒心了，自觉的多去爬山和打球，而且新公司也有健身房，希望能利用起来^_^注：睡眠的话今年打算减少一定的休息时间，多腾点时间学习英语。
今年希望自己能吃胖一点。今年1月回家过年的时候是105斤，希望今年十一回家的时候是115吧，嘿嘿，我觉得我这身高这个数正合适，理想配置
在回忆2011的时候说到想多陪陪父母，所以12年的十一长假打算回家待待。这个对我来说也算是个任务，所以放到12年的计划内吧

工作

2月入职了新公司 - 百度，对这份工作抱有很大的期待，希望能在这里多成长、多承担，更大的实现自己的价值。用这么一句话总结自己，“我没有铁人般的身体，可是我有铁人一般的意志”。勤奋勤奋再勤奋，天道酬勤...

目前在新的工作环境中需要面对以下几个长期的问题：

熟悉linux环境下的编程
高效的使用vi编辑器
学习php的知识

这三个问题不是说下决心几天就能解决的，都需要做好长期实践的打算，看书+实践=真理。吼吼

虽然新环境的工作才刚刚开始，可是就在工作中就遇到了不少挑战，作为一名喜欢高压工作的人我很享受这种感觉，期待化蝶的那天。

其他的计划

博客也是12年重要的一部分，对于博客我对自己有以下期望：

对于《前端攻略系列》我打算把《说说我的web前端之路,分享些前端的好书》和《JavaScript设计模式》这两篇进行修改后放到这个系列内。然后这个系列目前计划还打算这么几写方面： “jQuery源码分析”，“正确使用jQuery”，“sizzle选择器讲解”，“前端MVC思想”，“ECMAScript规范的思考”，“前端征服浏览器之解决方案” 至少十章。到时可能会有所调整，不过必须坚持完成这个系列，也请大家多给我建议，先谢谢了
每月一篇分享是去年的计划，今年希望能做的更多更好，每月至少保证一篇技术分享且12年至少有两个月的分享多于一篇。
11年总结的知识大多都是自己业余时间琢磨的，12年打算多总结一些与工作相关的技术和读书体会之类

多参与线下的交流会，比如百度沙龙、w3ctech、技术群友聚会等等。一.可以增加自己的知识面；二.多认识些志同道合的朋友，吼吼
再提一个重要非必须且不那么着急的计划 - 希望今年能找到个女朋友吧，哇哈哈
12年可以开始为自己存钱了，以前的存款都上缴了，555...每个月省下的钱40%存银行；40%计划会陆续花在英语、旅游、数码产品和服饰上；20%进行理财投资，比如股票、基金、保险、黄金之类，会花钱才会赚钱。反正趁着自己还能折腾就多折腾吧^_^

2012真的来了，希望自己能顶住压力，继续爆发^_^。在这也谢谢大家的关注和支持，求推荐，求回复，求建议...

注：化蛹和化蝶是在上家公司年会上学来的，谢谢文艺范儿的柏总 :)

本文链接

前端攻略系列(二) - 前端各种面试题

2012-01-31T15:12:00Z

幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”。年前确实不是招人的好时候，所以我们前端团队经过了超负荷的运转，终于坚持过了春节。春节以后就开始招人啦，这套题考察的目标就是基础基础再基础，嘿嘿。

事先声明：

这些题目的来源：面试曾经被问过；工作被别人问过或者遇见过；网上看见过...
答案真心不给提供，真的是许多问题都需要个人的理解和沉淀，所以还请各位自己动手...前端可以试试自己差不多能回答多少题，哈哈。
其实很多题我也没有好答案，面试的时候如果遇到牛人我也可以顺便交流交流，反正我也只是一面，不丢人也不怕丢人。
如果朋友们有好的面试题欢迎提建议，我会其实补充更新的，先谢谢各位了。

HTML相关

<!DOCTYPE>标签的定义与用法。
块级元素和行内元素都有哪些？
你真的了解HTML吗？雅虎面试题把前面黄底那段拿去搜索下就知道了(曾在某浪公司面试的时候被问到过，确实是很好的问题)。

CSS相关

介绍所知道的CSS hack技巧(如：_， *， +， \9， !important 之类)。
介绍CSS盒模型。
CSS层叠是什么？介绍一下。
都知道哪些CSS浏览器兼容性问题。
有时会被问到些刁钻点的题，比如position值都有哪些，CSS3都有哪些新内容...

JavaScript基础相关

HTTP协议的状态消息都有哪些？(如200、302对应的描述)
AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?
同步和异步的区别?
简述JavaScript封装。
JavaScript继承有哪两种形式形式，进行描述。
什么是闭包？以下代码点击<p>会输出什么？为什么？能大概说明白的话继续问能想出几种解决办法。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>闭包演示</title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript">
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body onload="init();">
<p>产品 0</p>
<p>产品 1</p>
<p>产品 2</p>
<p>产品 3</p>
<p>产品 4</p>
</body>
</html>
在JS中this关键字的使用场合和用法(如在构造函数中、setTimeout中等)。
简述下cookie的操作，还有cookie的属性都知道哪些。
IE与FF的JS兼容性都知道哪些。
DOM操作 - 怎样添加、移除、移动、复制、创建和查找节点(这个问题真心是基础题，一般不会问)。

jQuery相关

jQuery源码是否尝试去读过？说说基本的架构或者 jQuery.fn.init 中都做了哪些判断。
都知道哪些不好的jQuery书写方式。
Sizzle是否有读过？

其它相关的加分项：

都使用和了解过哪些编辑器？都使用和了解过哪些日常工具？
都知道有哪些浏览器内核？开发过的项目都兼容哪些浏览器？
国内外的JS牛人都知道哪些？
瀑布流布局或者流式布局是否有了解
正则表达式有系统学习过吗(看书或网上教程)？有的话就问问简单点的邮箱验证、URL验证，或者问问贪婪匹配与懒惰匹配的理论知识。
Node.js是否有过尝试？到什么程度？说说个人理解的看法？
HTML5都有哪些新的JS API？
前端优化知识都知道哪些？
基础算法题（如快速排序，能否一两句说说重要的核心原理或者数组消重等）。
是否有接触过或者了解过重构。

如果觉得此文还算用心，请劳驾点击右下角的推荐^.^ 。

即将离职，再为老东家出一份力吧。公司网址 www.baifendian.com ，工作地点北京总公司、沈阳分公司都行。待遇的话我确实不方便多说，不过以国内的标准来说算是不错的。

对前端职位感兴趣的话可以发简历至 peng.zhang@baifendian.com ，title请注明来自博客园，谢谢(感觉利用博客招人有点罪恶感，所以就把字设置的小一些吧^.^)。

本文链接

前端攻略系列(一) - 前端各种优化(保证持续更新)

2011-12-31T15:52:00Z

还有一个小时才到2012，那还能有点时间写点吐槽的东西，嘿嘿...2011年12月绝对是本人工作以来压力最大的一个月，已经忙到睡觉时间少了，业余看书时间少了，身体开始报警了，肩膀上的责任压的我实在喘不过气...作为一个普通的北漂，在北京类似我这样的人海的去了，尤其是在咱们这个行业。

我非常热爱生活，每分钟都无比珍贵；我热爱我现在所做的一切，哪怕确实让我精疲力尽(所以写博客暂时被我当成减压的方法)。

在我看来生活就是应该这样，既然我们在投胎的时候选择的生存模式or困难模式，那么不管发生什么困难都是意料之中。所以我在这不是想要表达自己的抱怨，而是想提醒自己和大家 “ 再忙再累也不要忘记自己的梦想和目标 ”。

突然想起个例子不吐不快，关于我们80后应该都玩过的超级玛丽(mario)。不管你有多少生命多少金币，说到底都是浮云，游戏中你会碰到无数的敌人(乌龟、飞鱼、食人花...)，遇到无数的艰险(一个接一个的坑、下水道、火海...)，可是想要通关只有一个方法，那就是救到公主，这就是目标。

If you want to live a happy life, tie it to a goal. Not to people or things.

如果你想过得快乐，那就把生活和目标结合在一起，而不是来自他人或物质。

许久才出来冒一次泡，所以难免吐槽一下，不喜欢以上那段的就当看个热闹，下面咱们开始正题。

-------------------------------------------------我是分割线-------------------------------------------------

作为本人2011年的收尾文章，就来个总结性质的吧，^_^...最近一直有给新同学做前端方面的培训，也有去参与公司前端的招聘，所以把自己资料库里面很多高效且有用的知识做了些规整分类，然后再分享一篇关于前端优化方面的总结。而且春节一过就又是招聘的高峰期了，在校的、跳槽的、浮躁的都开始进入面试的大军，前端优化也是前端面试一般会问到的东西，所以希望能对朋友们有用。

前端性能优化

1.请减少HTTP请求

基本原理：

在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。
一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。
网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。

解决办法：

合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2.请正确理解 Repaint 和 Reflow

注：Repaint 和 Reflow 也就是重绘和重排，请允许我在这卖弄下我有限认识的那么几个英语单词...囧

基本原理：

Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

减少性能影响的办法：

上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。
总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

3.请减少对DOM的操作

基本原理：

对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。
天生就慢。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

解决办法：

修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。
减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
注：在IE中:hover会降低响应速度。

4.使用JSON格式来进行数据交换

基本原理：

JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

JS操作JSON：

在JSON中，有两种结构：对象和数组。
1. 一个对象以 “ { ” 开始，“ } ” 结束。每个“名称”后跟一个 “ : ” ；“名称/值对”之间使用 “ , ”（逗号）分隔。名称用引号括起来；值如果是字符串则必须用引号括起来，数值型则不需要。如：
var obj={"name":"darren","age":24,"location":"beijing"}
2. 数组是值（value）的有序集合。一个数组以 “ [ ” 开始， “ ] ” 结束。值之间使用 “ , ” （逗号）分隔。如：
var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];
对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员，一定会非常喜欢JSON。

5.高效使用HTML标签和CSS样式

基本原理：

HTML是一门用来描述网页的一种语言，它使用标记标签来描述网页，作为一名合格的前端开发，你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。
CSS指层叠样式表 (Cascading Style Sheets)，如果说把页面想象成一个人，HTML就是人的骨架，CSS就是人的衣装，一个人的品味从他的衣装就能一目了然。
一名专业的前端开发也是一名优秀的重构，因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式，我不是要你重构页面，只是希望你在碰到这种情况的时候解决这些问题。如这样的HTML：
<table><tr><td>
<table><tr><td>
...
</td></tr></table>
</td></tr></table>
或者这样的CSS:
body .box .border ul li p strong span{color:#000}
以上都是对HTML和CSS非常糟糕的使用方法。

正确理解：

HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。
CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：　
ID选择符 #box
类选择符 .box
标签 div
伪类和伪元素 a:hover
当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。

6.使用CDN加速（内容分发网络）

基本原理：

CDN的全称是Content Delivery Network，即内容分发网络。
"其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。" - 百度百科。
上面几句话有多少能安安心心看完的，所以我还是通过说故事再来介绍一遍吧，顺便补一句，故事出处不明，^_^：

古代打仗大家一定都知道，由于古代的交通很不发达，所以当外族进攻的时候往往不能及时的反击，等朝廷征完兵再把兵派往边境的时候那些侵略者却是早已不见了踪影，这个让古代的帝王很是郁闷。后来帝王们学聪明了，都将大量的兵员提前派往边境驻扎，让他们平时屯田，战时当兵，这样的策略起到了很显著的作用。

不足之处：

实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温，这一缺陷将得到改进，使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器，或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。

7.将CSS和JS放到外部文件中引用，CSS放头，JS放尾

基本原理：

注：这个是很基础且必须遵循的知识点，可是为了文章的完整性勉为其难加进来吧，嘿嘿。
引入外部文件好处是显而易见的，而且是项目稍稍复杂一点的时候就有必要了这样做了。
易维护、易扩展，方便管理和重复利用。

正确的方式：

JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。
因为这个阻塞的特点，建议把JavaScript代码放到</body>标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。
HTML规范清楚指出CSS要放包含在页面的<head>区域内，这里就不多解释了。

8.精简CSS和JS文件

基本原理：

有一条非常重要的准则一直没有提到，就是CSS和JavaScript的压缩，直接减少下载的文件体积。我个人经常使用的方式是使用 YUI Compressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。
YUI Compressor是java程序，如果你对java很熟悉的话可快速的上手使用yuicompressor.jar；如果你对java很陌生也没关系，一样可以使用YUI Compressor，下面介绍其使用方式。

YUI Compressor的配置和使用：

先配置使用环境：
1.先确保电脑中是否安装了JDK
2.再配置必要的环境变量(细节不能三两句说清，所以不知道如何设置还是搜索吧)
3.在cmd界面，输入javac可测试是否安装成功
使用方法可从cmd到进入yuicompressor.jar所在磁盘，我以自己的yuicompressor-2.4.2.jar为例：
1.压缩JS
java -jar yuicompressor-2.4.2.jar api.js > api.min.js
2.压缩CSS
java -jar yuicompressor-2.4.2.jar style.css > style.min.css
当然，还有另一种更傻瓜式的使用方式，赶兴趣的朋友自己可去多尝试下。

9.压缩图片和使用图片Spirit技术

基本原理:

注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。
现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：
1.缩小图片分辨率；
2.改变图片格式；
3.降低图片保存质量。
关于图片精灵(Spirit)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Spirit）。图片精灵就是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。
至于图片精灵的操作细节就不多做介绍了，网上相关内容很多。

10.注意控制Cookie大小和污染

基本原理和使用方法：

有关Cookie的基础和高级知识可以去看本人写过的一篇文章《JavaScript 操作 Cookie》。
因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；
使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响
Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。

时间有限，今年就先到这里吧，哈哈。愿大家新年快乐，工作顺利。我会在以后的工作中慢慢完善这篇文章，也请大家多提宝贵建议。

如果大家也有什么好的优化方式也请留言，到时会补充到这篇文章当中，先在此谢谢了。

参考资料

百度百科

http://dev.w3.org/html5/markup/common-models.html

http://www.w3schools.com/

前端攻城师攻略系列

作为一名前端攻城师，越来越感受到在公司受到的重视，身边也有越来越多的朋友加入到前端开发这个岗位上，有种说不出的骄傲感。

由于闲暇时间喜欢看书，所以曾萌生过希望写本书的想法，虽然现在自己还有很多的坑需要踩过，真要写书也是将来很久以后的事了，可是有打算先尝试写点与前端紧密相关的攻略，于是就有了“前端攻略系列”。

由于现在本人表达能力和技术能力上的欠缺，难免有理解不对的地方，也请大家多多谅解。

如果觉得此文还算用心，请劳驾点击右下角的推荐^.^ 。

本文链接

JavaScript 操作 Cookie

2011-11-24T14:29:00Z

从事web开发也有些日子了，cookie 是个啥差不多能说明白，可是实际自己一上手操作就是得去搜索(你们懂的)，结果被鄙视了...所以就写一篇博文做为自己的学习笔记，嘿嘿，博客的好处在此体现出来了。

什么是 Cookie

“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” - w3school
cookie 是访问过的网站创建的文件，用于存储浏览信息，例如个人资料信息。

从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。

在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信，所以除了JavaScript以外，服务端的语言（如PHP）也可以存取 cookie。

Cookie 基础知识

cookie 是有大小限制的，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。
由于 cookie 最终都是以文件形式存放在客户端计算机中，所以查看和修改 cookie 都是很方便的，这就是为什么常说 cookie 不能存放重要信息的原因。
每个 cookie 的格式都是这样的：<cookie名>=<值>；名称和值都必须是合法的标示符。
cookie 是存在有效期的。在默认情况下，一个 cookie 的生命周期就是在浏览器关闭的时候结束。如果想要 cookie 能在浏览器关掉之后还可以使用，就必须要为该 cookie 设置有效期，也就是 cookie 的失效日期。
alert(typeof document.cookie)结果是 string，曾经我以为是array，还闹过笑话...囧
cookie 有域和路径这个概念。域就是domain的概念，因为浏览器是个注意安全的环境，所以不同的域之间是不能互相访问 cookie 的(当然可以通过特殊设置的达到 cookie 跨域访问)。路径就是routing的概念，一个网页所创建的 cookie 只能被与这个网页在同一目录或子目录下得所有网页访问，而不能被其他目录下得网页访问（这句话有点绕，一会看个例子就好理解了）。
其实创建cookie的方式和定义变量的方式有些相似，都需要使用 cookie 名称和 cookie 值。同个网站可以创建多个 cookie ，而多个 cookie 可以存放在同一个cookie 文件中。

Cookie常见问题

cookie 存在两种类型：
- 你浏览的当前网站本身设置的 cookie
- 来自在网页上嵌入广告或图片等其他域来源的第三方 cookie (网站可通过使用这些 cookie 跟踪你的使用信息)

刚刚基础知识里面有说到 cookie 生命周期的问题，其实 cookie 大致可分为两种状态：
- 临时性质的cookie。当前使用的过程中网站会储存一些你的个人信息，当浏览器关闭后这些信息也会从计算机中删除
- 设置失效时间的cookie。就算浏览器关闭了，这些信息业依然会在计算机中。如登录名称和密码，这样无须在每次到特定站点时都进行登录。这种cookie 可在计算机中保留几天、几个月甚至几年
cookie 有两种清除方式：
- 通过浏览器工具清除 cookie (有第三方的工具，浏览器自身也有这种功能)
- 通过设置 cookie 的有效期来清除 cookie
- 注：删除 cookie 有时可能导致某些网页无法正常运行
浏览器可以通过设置来接受和拒绝访问 cookie。
出于功能和性能的原因考虑，建议尽量降低 cookie 的使用数量，并且要尽量使用小 cookie。
关于cookie编码的细节问题将会在cookie高级篇中单独介绍。
假如是本地磁盘中的页面，chrome的控制台是无法用JavaScript读写操作 cookie 的，解决办法...换一个浏览器^_^。

Cookie基础用法

一.简单的存取操作

在使用JavaScript存取 cookie 时，必须要使用Document对象的 cookie 属性；一行代码介绍如何创建和修改一个 cookie ：

document.cookie = 'username=Darren'

以上代码中'username'表示 cookie 名称，'Darren'表示这个名称对应的值。假设 cookie 名称并不存在，那么就是创建一个新的 cookie；如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ，重复使用这个方法即可。

　　二.cookie的读取操作

要精确的对 cookie 进行读取其实很简单，就是对字符串进行操作。从w3school上copy这段代码来做分析：

function getCookie(c_name){
if (document.cookie.length>0){//先查询cookie是否为空，为空就return ""
c_start=document.cookie.indexOf(c_name + "=")//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1
if (c_start!=-1){
c_start=c_start + c_name.length+1//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
c_end=document.cookie.indexOf(";",c_start)//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
}
}
return ""
}

当然想实现读取cookie的方法还有不少，比如数组，正则等，这里就不往细说了。

三.设置cookie的有效期

文章中常常出现的 cookie 的生命周期也就是有效期和失效期，即 cookie 的存在时间。在默认的情况下，cookie 会在浏览器关闭的时候自动清除，但是我们可以通过expires来设置 cookie 的有效期。语法如下：

document.cookie = "name=value;expires=date"

上面代码中的date值为GMT(格林威治时间)格式的日期型字符串，生成方式如下：

var _date = new Date();
_date.setDate(_date.getDate()+30);
_date.toGMTString();

上面三行代码分解为几步来看：

通过new生成一个Date的实例，得到当前的时间；
getDate()方法得到当前本地月份中的某一天，接着加上30就是我希望这个cookie能过在本地保存30天；
接着通过setDate()方法来设置时间；
最后用toGMTString()方法把Date对象转换为字符串，并返回结果

通过下面这个完整的函数来说明在创建 cookie 的过程中我们需要注意的地方 - 从w3school复制下来的。创建一个在 cookie 中存储信息的函数：

1 　function setCookie(c_name, value, expiredays){
2 var exdate=new Date();
3 exdate.setDate(exdate.getDate() + expiredays);
4 document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
5 }
6 使用方法：setCookie('username','Darren',30)

现在我们这个函数是按照天数来设置cookie的有效时间，如果想以其他单位（如：小时）来设置，那么改变第三行代码即可：

exdate.setHours(exdate.getHours() + expiredays);

这样设置以后的cookie有效期就是按照小时为单位的。

常见问题中有提到清除 cookie 的两种方法，现在要说的是使 cookie 失效，通过把有效期的时间设置为一个已过期的时间。既然已经有了设置有效期的方法，那么设置失效期的方法就请感兴趣的朋友自己动手了^_^。下面继续比较深的cookie话题。

Cookie 高级篇

一.cookie 路径概念

在基础知识中有提到 cookie 有域和路径的概念，现在来介绍路径在 cookie 中的作用。

cookie 一般都是由于用户访问页面而被创建的，可是并不是只有在创建 cookie 的页面才可以访问这个 cookie。

默认情况下，只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问，这个是因为安全方面的考虑，造成不是所有页面都可以随意访问其他页面创建的 cookie。举个例子：

在 "http://www.cnblogs.com/Darren_code/" 这个页面创建一个cookie，那么在"/Darren_code/"这个路径下的页面如： "http://www.cnblogs.com/Darren_code/archive/2011/11/07/Cookie.html"这个页面默认就能取到cookie信息。

可在默认情况下， "http://www.cnblogs.com"或者 "http://www.cnblogs.com/xxxx/" 就不可以访问这个 cookie（光看没用，实践出真理^_^）。

那么如何让这个 cookie 能被其他目录或者父级的目录访问类，通过设置 cookie 的路径就可以实现。例子如下：

document.cookie = "name=value;path=path"
document.cookie = "name=value;expires=date;path=path"

红色字体path就是 cookie 的路径，最常用的例子就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie，所有的页面都可以访问到了:

document.cookie = "name=Darren;path=/"

二.cookie 域概念

路径能解决在同一个域下访问 cookie 的问题，咱们接着说 cookie 实现同域之间访问的问题。语法如下：

document.cookie = "name=value;path=path;domain=domain"

红色的domain就是设置的 cookie 域的值。

例如 "www.qq.com" 与 "sports.qq.com" 公用一个关联的域名"qq.com"，我们如果想让 "sports.qq.com" 下的cookie被 "www.qq.com" 访问，我们就需要用到 cookie 的domain属性，并且需要把path属性设置为 "/"。例：

document.cookie = "username=Darren;path=/;domain=qq.com"

注：一定的是同域之间的访问，不能把domain的值设置成非主域的域名。

三.cookie 安全性

通常 cookie 信息都是使用HTTP连接传递数据，这种传递方式很容易被查看，所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。

所以 cookie 的这个属性的名称是“secure”，默认的值为空。如果一个 cookie 的属性为secure，那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下：

document.cookie = "username=Darren;secure"

把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

注：就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以说到底，别把重要信息放cookie就对了，囧...

四.cookie 编码细节

原本来想在常见问题那段介绍cookie编码的知识，因为如果对这个不了解的话编码问题确实是一个坑，所以还是详细说说。

在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在一般情况下，cookie 信息的存储都是采用未编码的方式。所以，在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码，在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时：

document.cookie = name + "="+ escape (value)

再看看基础用法时提到过的getCookie()内的一句：

return unescape(document.cookie.substring(c_start,c_end))

这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。

总结

在工作中越来越感觉到基础的重要性了，有很多技术细节都是要懂不懂或者的懂的不多。为了改善这种情况，打算以后会对知识的细节从点到面的去理解，然后再写博客加深印象，也能分享给更多有需要的朋友。

今天是感恩节，感谢所有人...

如果觉得这文章还算用心，请劳驾点击右下角的推荐，这是对我们这些做分享的最大的肯定，谢谢。

本文链接

node.js 初体验

2011-10-31T14:56:00Z

最近写的文章收到许多朋友的反馈，感谢大家的支持和建议，让我对坚持写博客充满热情，一个月一篇文章确实有点少，所以以后尽力多做分享，做好的分享，希望能对朋友们有用。

到新公司的这段时间学到了很多新东西，有好多东西需要去总结去探索，不过事情得一件一件来，今天咱们先从Node开始。注：以后出现的Node即node.js。

先搞点前戏热热场 - 为什么写这篇文章：

1.前段时间单位有新项目启动，服务端要做的工作不多也不算麻烦，就是处理一些中间层的服务，而且我们团队里面个个都会JavaScript，领导就决定试试服务器端的JavaScript，结果本人有幸被派去研究了几天Node，怀着鸡冻的心情开始了node.js的篇章，这篇文章也就是为这几天研究的总结。

2.一个JavaScript工程师如果没听过node.js那么我想你是不是错过了什么，每个优秀的前端工程师都有必要去了解后台处理流程，那么如果又能从JavaScript出发，岂不是一件很美妙的事么。

3.互联网的火热使得JavaScript风光无限，且服务端的JavaScript也并不是什么新技术了，相关的框架也有不少，只是node.js的成功让他爆发式的出现在我们的视线中，让很多前端工程师看到了从前端写到后端的另一种实现希望。注：node.js 是一个允许开发人员使用 JavaScript 语言编写服务器端代码的框架。

4.今年8月曾在某大公司最后一轮(第五轮)的面试被问到Node.js的问题，相对应的回答那是相当之糟糕，结果怎样你们懂的，感觉这个问题是导致没有通过的关键点之一...那家公司是我在读大学的时候就无比向往的公司，现在回想起那次经历和过程，谈不上惋惜，毕竟我真的尽力了 - 其实这篇文章更多的也是为了完成自己一个小小的心结...好吧，又扯远了。

5.欢迎各种转载，不过请注明出处，谢谢。

Node是个啥？

写个东西还是尽量面面俱到吧，所以有关基本概念的东西我也从网上选择性的拿了些下来，有些地方针对自己的理解有所改动，对这些概念性的东西有过了解的可选择跳过这段。

1.Node 是一个服务器端 JavaScript 解释器，可是真的以为JavaScript不错的同学学习Node就能轻松拿下，那么你就错了，总结：水深不深我还不知道，不过确实不浅。

2.Node 的目标是帮助程序员构建高度可伸缩的应用程序，编写能够处理数万条同时连接到一个物理机的连接代码。处理高并发和异步I/O是Node受到开发人员的关注的原因之一。

3.Node 本身运行Google V8 JavaScript引擎，所以速度和性能非常好，看chrome就知道，而且Node对其封装的同时还改进了其处理二进制数据的能力。因此，Node不仅仅简单的使用了V8，还对其进行了优化，使其在各种环境下更加给力。（什么是V8 JavaScript 引擎？请“百度知道”）

4.第三方的扩展和模块在Node的使用中起到重要的作用。下面也会介绍下载npm，npm就是模块的管理工具，用它安装各种 Node 的软件包(如express，redis等)并发布自己为Node写的软件包。

安装Node

在这简单说说在window7和linux两种环境下安装Node。安装的时候一定要注意Python的版本，多次因为Python版本的问题安装失败，建议2.6+的版本，低版本会出现Node安装错误，查询Python版本可在终端中输入：pyhton -v

1.先介绍linux下的安装吧，Node在Linux环境下的安装和使用都非常方便，建议在Linux下运行Node，^_^...我使用的是Ubuntu11.04

　a.安装依赖包：50-100kb/s大概每个包一分钟就能下载安装完成

sudo apt-get install g++ curl libssl-dev apache2-utils
sudo apt-get install git-core

　b.在终端一步步运行一下命令：

git clone git://github.com/joyent/node.git
cd node
./configure
make
sudo make install

安装顺利的话到这一步Node就算安装成功了，2M的网络用了共计12分钟。

注：如果不用git下载也可以直接下载源码，不过这样下载安装需要注意Node版本问题。使用git下载安装是最方便的，所以推荐之。

2.在Windows下使用Cygwin安装Node，这个方式不太推荐，因为真的需要较长时间和较好的人品。我的系统是 win7旗舰版

Cygwin是一个在windows平台上运行的unix模拟环境，下载地址：http://cygwin.com/setup.exe。

下载好Cygwin后开始安装，步骤：

　a.选择下载的来源 - Install from Internet

　b.选择下载安装的根目录

　c.选择下载文件所存放的目录

　d.选择连接的方式

　e.选择下载的网站 - http://mirrors.163.com/cygwin

　f.麻烦就麻烦在这步，考验人品的时候到了。需要的下载安装时间不确定，反正需要比较长的时间(超过20分钟)，偶尔会出现安装失败的情况。单击一下各个程序包前面的旋转箭头图标选择你想要的版本，选中时会出现了"x"号表示已经选中了该程序包。选择需要下载的程序包：

Devel包：
gcc-g++: C++ compiler
gcc-mingw-g++: Mingw32 support headers and libraries for GCC C++
gcc4-g++: G++ subpackage
git: Fast Version Control System – core files
make: The GNU version of the ‘make’ utility
openssl-devel: The OpenSSL development environment
pkg-config: A utility used to retrieve information about installed libraries
zlib-devel: The zlib compression/decompression library (development)
Editor包：vim: Vi IMproved – enhanced vi editor
Python包：把Default切换成install状态即可
Web包：
wget: Utility to retrieve files from the WWW via HTTP and FTP
curl: Multi-protocol file transfer command-line tool

上个截图，以下载zlib-devel为例：

其上几步走完才算把环境搭建完成，可是现在还没有到安装Node，还需要在Cywgin的ASH模式下执行rebaseall，步骤如下：

　a. cmd命令行

　b. 进入cygwin安装目录下的bin子目录

　c. 运行ash进入shell模式

　d. ./rebaseall -v

　e. 没有错误就关闭命令行窗口
好了，现在到下载安装Node了，启动Cygwin.exe后输入：

$ wget http://nodejs.org/dist/node-v0.4.12.tar.gz
$ tar xf node-v0.4.12.tar.gz
$ cd node-v0.4.12
$ ./configure
$ make
$ make install

3.直接下载node.exe文件

nodejs.org下载较慢所以我在网盘上传了一个，下载地址：http://www.everbox.com/f/VhyL6EiGF5Lm3ZSRx85caFDIA5

听说有不太稳定的问题，不过你假如只是想先在windows下了解Node，个人感觉这个方法比你装个Cygwin好很多。

注：原本不太想写安装Node这段，可是为了这篇文章的全面性还是写了，没想到一写就是那么长一段了...茶几了

“Hello World” - 为什么每次见到这句心情都会小激动，不解...

首先，创建个hello.js的文件，在文件中copy如下代码：

var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');

代码逻辑：

　a. 全局方法require()是用来导入模块的，一般直接把 require() 方法的返回值赋值给一个变量，在 JavaScript 代码中直接使用此变量即可。require("http") 就是加载系统预置的 http 模块

　b. http.createServer 是模块的方法，目的就是创建并返回一个新的web server对象，并且给服务绑定一个回调，用以处理请求。

　c. 通过 http.listen() 方法就可以让该 HTTP 服务器在特定端口监听。

　d. console.log就不用多说了，了解firebug的都应该知道，Node实现了这个方法。

注：想了解具体细节请查看文档 cnodejs.org/cman/all.html#http.createServer

接着运行Node服务器，执行hello.js代码，成功启动会看见console.log()中的文本。有图有真相：

npm的下载和使用

除Node本身提供的API外，现在有不少第三方模块可极大的提高开发效率，npm就是Node的软件包管理器，可以用它安装所需软件包并发布自己为nodejs写的软件包。官网地址：npmjs.org

安装只需要在终端写入一行代码：

curl http://npmjs.org/install.sh | sh

npm安装node扩展包同样是一行代码：

npm install <包名>//例：npm install express

注：如果安装模块的过程中报域名错误的话，请清空缓存 >npm cache clean 或重启计算机即可。

理解Node的模块概念

在Node中，不同的功能组件被划分成不同的模块。应用可以根据自己的需要来选择使用合适的模块。每个模块都会暴露一些公共的方法或属性。模块的使用者直接使用这些方法或属性即可，对于内部的实现细节就可以不用了解。除了Node本身提供的API外，开发人员也可以利用这个机制来将应用拆分成多个模块，以提高代码的可复用性。

1.如何使用模块？

在Node中使用模块是非常方便的，在 JavaScript 代码中可以直接使用全局函数 require() 来加载一个模块。

在刚刚”Hello World"的例子中，require("http") 可以加载系统预置的 http 模块；模块名称以 "./" 开始的，如 require("./myModule.js") 用来加载与当前 JavaScript 文件同一目录下的 myModule.js 模块。

2.自己如何开发模块？

刚刚介绍使用require()导入模块的时候，模块名称以 "./" 开始的这种，就是自己开发的模块文件。需要注意的就是JS文件的系统路径。

代码中封装了模块的内部处理逻辑，一个模块一般都会暴露一些公开的方法或属性给其他的人使用。模块的内部代码需要把这些方法或属性给暴露出来。

3.来一套简单的例子。先创建一个模块文件如myModule.js，就一行代码

console.log('Hi Darren.')

然后创建一个test.js文件，导入这个JS文件，执行node看到结果

现在Node社区中已有不少第三方的模块，希望能有更多人通过学习Node，加入到这个大家庭中，为Node社区来添砖加瓦。先谢谢之，咱们继续。

4.来一个深点的例子。这个例子中将会针对私有和共有进行介绍。先创建一个myModule.js，代码如下：

var name = "Darren";
this.location = "Beijing";
this.showLog = function(){
console.log('Hi Darren.')
};

代码中出现了三种类型，分别是：私用属性，共有属性和共有方法，再创建一个test.js，执行Node

结果高亮的地方很清楚的告诉我们，私有方法我们在模块以外是取不到的，所以是undefined。共有属性和共有方法的声明需要在前面加上 this 关键字。

Node能做什么和它的优势

Node核心思想：1.非阻塞；2.单线程；3.事件驱动。

在目前的web应用中，客户端和服务器端之间有些交互可以认为是基于事件的，那么AJAX就是页面及时响应的关键。每次发送一个请求时（不管请求的数据多么小），都会在网络里走一个来回。服务器必须针对这个请求作出响应，通常是开辟一个新的进程。那么越多用户访问这个页面，所发起的请求个数就会越来越多，就会出现内存溢出、逻辑交错带来的冲突、网络瘫痪、系统崩溃这些问题。

Node的目标是提供一种构建可伸缩的网络应用的方案，在hello world例子中，服务器可以同时处理很多客户端连接。

Node和操作系统有一种约定，如果创建了新的链接，操作系统就将通知Node，然后进入休眠。如果有人创建了新的链接，那么它（Node）执行一个回调，每一个链接只占用了非常小的（内存）堆栈开销。　

举一个简单的异步调用的例子，把test.js和myMydule.js准备好了，^_^。把以下代码拷贝到test.js中并执行：

var fs = require('fs');
fs.readFile('./myModule.js', function (err, data) {
if (err) throw err;
console.log('successfully');
});
console.log('async');

所谓的异步，大家应该都能想得到运行时会先打先显示"async"，再显示"successfully"。

Node是无阻塞的，新请求到达服务器时，不需要为这个请求单独作什么事情。Node仅仅是在那里等待请求的发生，有请求就处理请求。

Node更擅长处理体积小的请求以及基于事件的I/O。

Node不仅仅是做一个Web服务的框架，它可以做更多，比如它可以做Socket服务，可以做比方说基于文件的，然后基于像一些比方说可以有子进程，然后内部的，它是一个很完整的事件机制，包括一些异步非注射的解决方案，而不仅仅局限在网络一层。同时它可能，即使作为一个Web服务来说，它也提供了更多可以深入这个服务内核、核心的一些功能，比方说Node使用的Http Agent，这块就是它可以更深入这个服务内核来去做一些功能。

Node事件流概念

因为Node 采用的是事件驱动的模式，其中的很多模块都会产生各种不同的事件，可由模块来添加事件处理方法，所有能够产生事件的对象都是事件模块中的 EventEmitter 类的实例。代码是全世界通用的语言，所以我们还是用代码说话：

var events = require("events");
var emitter = new events.EventEmitter();
emitter.on("myEvent", function(msg) {
console.log(msg);
});
emitter.emit("myEvent", "Hello World.");

简单的分析这段：

　1. 使用require()方法添加了events模块并把返回值赋给了一个变量

　2. new events.EventEmitter()这句创建了一个事件触发器，也就是所谓的事件模块中的 EventEmitter 类的实例

　3. on(event, listener)用来为某个事件 event 添加事件处理方法监听器

　4. emit(event, [arg1], [arg2], [...]) 方法用来产生事件。以提供的参数作为监听器函数的参数，顺序执行监听器列表中的每个监听器函数。

EventEmitter 类中的方法都与事件的产生和处理相关：

　1. addListener(event, listener) 和 on(event, listener) 这两个方法都是将一个监听器添加到指定事件的监听器数组的末尾

　2. once(event, listener) 这个方法为事件为添加一次性的监听器。该监听器在事件第一次触发时执行，过后将被移除

　3. removeListener(event, listener) 该方法用来将监听器从指定事件的监听器数组中移除出去

　4. emit(event, [arg1], [arg2], [...]) 刚刚提到过了。

在Node中，存在各式各样不同的数据流，Stream（流）是一个由不同对象实现的抽象接口。例如请求HTTP服务器的request是一个流，类似于stdout（标准输出）；包括文件系统、HTTP 请求和响应、以及 TCP/UDP 连接等。流可以是可读的，可写的，或者既可读又可写。所有流都是EventEmitter的实例，因此可以产生各种不同的事件。

可读流主要会产生以下事件：

data 当读取到流中的数据时，此事件被触发
end 当流中没有数据可读时，此事件被触发
error 当读取数据出现错误时，此事件被触发
close 当流被关闭时，，此事件被触发，可是并不是所有流都会触发这个事件。（例如，一个连接进入的HTTP request流就不会触发'close'事件。）

还有一种比较特殊的 fd 事件，当在流中接收到一个文件描述符时触发此事件。只有UNIX流支持这个功能，其他类型的流均不会触发此事件。

相关详细文档：http://cnodejs.org/cman/all.html#events_

强大的File System 文件系统模块

Node 中的 fs 模块用来对本地文件系统进行操作。文件的I/O是由标准POSIX函数封装而成。需要使用require('fs')访问这个模块。所有的方法都提供了异步和同步两种方式。

fs 模块中提供的方法可以用来执行基本的文件操作，包括读、写、重命名、创建和删除目录以及获取文件元数据等。每个操作文件的方法都有同步和异步两个版本。

异步操作的版本都会使用一个回调方法作为最后一个参数。当操作完成的时候，该回调方法会被调用。而回调方法的第一个参数总是保留为操作时可能出现的异常。如果操作正确成功，则第一个参数的值是 null 或 undefined 。

同步操作的版本的方法名称则是在对应的异步方法之后加上一个 Sync 作为后缀。比如异步的 rename() 方法的同步版本是 renameSync() 。下面列出来了 fs 模块中的一些常用方法，都只介绍异步操作的版本。

test.js和myModule.js文件准备好了木？把下面这段代码copy到test.js中执行一次

var fs = require('fs');
fs.unlink('./myModule.js', function (err) {
if (err) throw err;
console.log('successfully deleted myModule.js');
});

如果没有报error，那么myModule.js就被删除了，就是这么简单

这只是一个简单的例子，感兴趣的话自己去多多尝试，实践出真理。由于篇幅原因就不多举例了。^_^

学习Node的总结：

1.对于一个linux的命令和shell知识几乎为零的我来说，这段时间又学到了不少关于linux知识；vim真是一个强大的编辑器，不用鼠标的感觉真的很好；而且有一点对我来说很重要，在linux下编程很cool，尤其是在团队中都是使用windows的，装装更健康^_^。

2.理解了服务端JavaScript的一个成功框架-Node，以及它的一些优势和使用的方式，这篇文章就是最好的总结，当然，这只会是一个开始。

3.对于没有进入那么梦想的公司其实是有那么点遗憾，不过生活就应该要这样，有波折有起伏，这正是我需要并且期待的...那么新的生活还是要继续，做自己的舵手，把握好自己的方向，过去的就让它过去吧。

一些想对大伙说的话：

1. 在这我得打击一部分人的积极性。假如你对后台技术不够了解或者没接触过服务端语言，不知道I/O这些知识，没有后台处理流程这种概念，那么......Node并不是一门适合入门的服务端技术。为什么这么说：

　a.重点就是中文实例少，文章少，想系统的学习会比较麻烦，所以在使用过程中总有一种不成熟的感觉，当然主要还是因为我对它不熟悉所造成的。国内使用Node的公司确实不多，当然国外还是有不少了，从cnodejs.org截了一个图：

　b.对没有经验的朋友来说node其实并不好上手，从最简单“Hello world”就可以看出来(各种运行环境和安装细节的了解都得费点功夫)，不要以jQuery库为比较，所处理的事物不同，学习的成本也不同 - 所以不太建议作为新手入门的服务端技术，如果想学习一门服务端语言PHP和Python都是不错的选择，因为：书多例子多 框架多上手简单容易理解搭建方便...

　c.以上都是我个人善意的建议，由于水平有限，请大家多多指教，希望嘴下留情。

2. 关于Node的书写规范和具体技巧本人就不献丑了，自己写Node的代码也不多，不过面向对象的编程思想在哪都是好使的。

3. 希望这篇文章能对大家学习Node有用，如果觉得这文章也算用心，请劳驾点右下角的推荐。

推荐几个学习Node的网址：
http://nodejs.org/

http://cnodejs.org/ 由淘宝人建立的社区，内有Node中文文档

http://www.oschina.net/p/nodejs/

http://www.ibm.com/developerworks/cn/opensource/os-nodejs/index.html

　　注：最终领导决定放弃Node而使用Python，可是这不会影响我对Node的喜爱。我说过，这篇文章只会是一个开始。

本文链接

Fiddler - 前端开发值得拥有

2011-09-28T15:10:00Z

最近换了新工作，搬了新家，换了新室友，一切都在重新开始。因为家里网还没装好，工作之余上网都得去网吧，所以园子最近比较少上了，可是博客可不能断，就为一口气，坚持就是胜利。好吧，叨叨完了，下面开始正文...

写这篇文章的目的何在：

1.本人还算喜欢看书，JavaScript的相关书看过一些，书本上总能看见对JavaScript类似的评语或者评价 - “JavaScript调试困难”。可是事实却是随着互联网行业的的飞速发展，JavaScript调试难的问题已不像早年那样麻烦了，这里先不说各种IDE对JavaScript强力的支持，刚好因为工作需要，需要调试产品在主流浏览器中兼容问题，所以乘机做了点功课，来为大伙介绍这个在前端开发过程中异常给力的工具。

2.第一次已介绍一款软件为目的写文章，希望大家看完文章能有收获。而且说到底这个也是一个工具，大家如果有用过更好的调试工具也欢迎推广一下，大家好才是真的好，哈哈。

3.这款工具本人已经使用快两年时间了，在实际工作确实得到不少帮助，所以虽然已有介绍此工具的文章，还是决定自己写一篇，让更多的朋友了解这个工具。

4.这个月对本人来说是一个崭新的开始，新的生活，新的工作，新的环境...上个月发生了太多太多事情，好事坏事烦心事，感觉一切都很漫长，不过坚持过后更加坚定自己努力的决心，自己强大起来才是硬道理。

5.文章的前部分介绍工具的具体细节，后部分介绍工具的使用技巧和具体的方法，针对个人需求选择阅读。

6.欢迎转载，不过请注明出处，谢谢。

Fiddler是啥？

百度百科里是这样介绍它的 - “Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求，允许你监视，设置断点，甚至修改输入输出数据，fiddler包含了一个强大的基于事件脚本的子系统，并且能够使用.net框架语言扩展。”

所以无论你是从事什么开发，哪种语言，只要你想了解HTTP，这个工具就值得你去了解，而且更重要的一点，这个工具是免费的。

Fiddler就是以代理服务器的方式，监听系统的网络数据流动。

启动Fiddler后，所发生的网络数据流通过Fiddler进行中转，就可以看到HTTP/HTTPS数据流的信息，我们就可以通过对这些信息加以分析。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具，对前端开发工作很有价值。

Fiddler的安装与下载：

Fiddler下载地址：http://www.fiddler2.com/fiddler2/

假如你是早期的XP版本的系统在安装的过程中会提示你下载.net framework 2.0或以上版本。安装过程很简单，就不介绍了。

Fiddler的使用界面和功能介绍：

监听开关 - 只有两种状态，用的时候就开着，不用就让丫休息。capturing表示捕捉状态

监听类型 - 四种状态分别对应监听所有请求；监听浏览器请求，监听非浏览器请求，和全部隐藏(Hide All)

命令行 - 就不作介绍了，难者不会，会者不难。我就属于前者，悲剧呀...

请求列表 - 请求列表的信息分别有结果（Result），协议（Protocol），主机名（Host），网页地址（URL），内容大小（Body），缓存（Caching），响应的HTTP内容类型（Content-Type），请求所运行的程序（Process），注释（Comments），自定义（Custom）

请求相关信息 - 右边这一大片都是数据流的相关信息的查看器，这些查看器提供很多查看形式，可以查看数据流的内容。

Fiddler请求列表的icon对应具体的数据类型和状态，其含义是：

Fiddler请求相关信息对应的主要功能：

工具最右方的是请求相关信息的查看器，提供了数据多方面的查看方式。想了解？看图片。

统计资料信息(Statistics)

强大的检查器(Inspectors) - 功能很多，等待你慢慢挖掘。

时间轴(Timeline)

自动回复器(autoResponder) - 一会就是介绍它的具体使用方法

说说我在工作中为什么使用Fiddler，如何使用Fiddler。

前端工程师在工作中总会有那么一些要求，要求书写的代码具有优良的兼容性，要求考虑代码的高性能，要求方法要面向对象，要求...前端工程师总是和浏览器兼容有很多不得不说的事。

条件1：在我们前端工程师开发的工作中，要调试服务器上某个HTML/CSS/JavaScript文件。一般情况下，我们都是将文件直接进行修改，然后重新发布再去做验证，这样就容易影响到测试环境或者生成环境的稳定性。更好的做法是，我们在本地开发环境中直接修改文件并进行验证，然后发布到测试环境，这样能保证测试环境的稳定，可是又比较繁琐。

条件2：现在我的情况是需要调试上线产品的浏览器兼容性问题，且我没有本地环境或者生成环境去测试。假如有Bug发生在Firefox或者Chrome这种有控制台支持调试的浏览器下一切都好说，可是假如bug只发生在遨游，TT，世界之窗，搜狗...这种的没有调试功能的浏览器下，而且你还碰见了我目前的情况，那么如果没有Fiddler这种工具，只能说这就是一场灾难。

Fiddler工具可以修改HTTP数据的特性，我们就非常便捷地基于生产环境修改并验证，确认后再发布。

第一步，先定位调试文件且下载。假设发现页面中的某个文件有问题（HTML/CSS/JavaScript都行），那么我们需要做的是就把他先下载到本地（如果本地有这个本地那么可以跳过此步骤），下载到本地的文件偶尔会有乱码的情况，建议你先清理浏览器缓存或者调整注册表（Fiddler2中文乱码问题）。使用细节如下：

第二步，Fiddler - autoResponder出场，开启此功能。打开AutoResponder标签设置。可以看到界面上有三个选择框，第一个的作用是开启或禁用自动重定向功能，我们就可以在下面添加重定向规则了；第二个选择框被勾上时，不匹配的请求可以通过，不影响那些没满足我们处理条件的请求。

　　第三步，创建重定向规则，将目标是这个js的HTTP请求重定向到本地文件。选中刚刚定位的文件，通过“Add…”按钮增加规则，也可以直接拖动过来。

第四步，选择本地刚刚保存的文件或者替换的文件，作为替换这个请求的内容。

第五步，你调试或者不调试，它就在那里 - 只会请求你本地的选择的那个文件。所以，想怎么修改都随便你了。刷新页面，就可以看见这个alert了。

总结：虽然介绍时一共分为5个步骤，其实只要用习惯了很随意就可以调试了。快速前端调试其实很简单，你说类。

如果觉得这篇文章还算用心，请劳驾点右下角的推荐。如果有更好的软件，欢迎留言分享。谢谢。^_^

最后提前祝大伙国庆快乐，工作顺利，学习进步。

本文链接

javascript 设计模式 - 文章很长，请自备瓜子，水果和眼药水

2011-08-31T15:55:00Z

一直都在考虑这个月分享大家什么东西最好，原计划是打算写一些HTML5中JS方面的内容或者是AJAX方面的，可是自己由于表达能力，时间，还有个人工作方面的问题，这个还是等下个月再做分享吧^.^。

老规矩，开始正文以前先交代自己写这篇文章的目的和一些注意事项：

1.首先本人一直从事前端开发，所以除了JavaScript其他的语言了解不深，所以文章只会以JavaScript语言的角度去论证；

2.其实我个人在项目用过的模式也不多，对模式的概念的理解也没有那么抽象，所以最近在面试中如果面试官问到与模式相关的问题，自己感觉在对答过程中很郁闷，很多东西表达不清楚，于是就找了些相关资料，才会有这篇文章分享；

3.JavaScript模式与前端的工作和成长密不可分，因为这确实不是一个简单的话题，所以我只能尽力用简单表达和例子阐明，而且园子里有很多的高手，所以希望大家踊跃发言(由于水平有限，请大家多多指教，希望嘴下留情)；

4.由于这篇文章更多的只是想起到一个介绍和讲解的作用，并不打算对每种模式进行细致的分析，所以每种模式只用到一个至二个例子，可能会造成这个例子的表达并不是最优的或者不够全面，如果各位看官觉得不过瘾，可以再去查找相关资料；

5.做任何事都需要坚持，写博客也是一样，嘿嘿，每月至少一篇(文章确实较长，希望能对朋友们有所帮助，重点部分在前言中有介绍，大家可以选择感兴趣的模式进行深入)。

6.欢迎转载，不过请注明出处，谢谢。

了解JavaScript设计模式我们需要知道的一些必要知识点：（内容相对基础，高手请跳过）

闭包：关于闭包这个月在园子里有几篇不错的分享了，在这我也从最实际的地方出发，说说我的理解。

1.闭包最常用的方式就是返回一个内联函数（何为内联函数？就是在函数内部声明的函数）；

2.在JavaScript中有作用域和执行环境的问题，在函数内部的变量在函数外部是无法访问的，在函数内部却可以得到全局变量。由于种种原因，我们有时候需要得到函数内部的变量，可是用常规方法是得不到的，这时我们就可以创建一个闭包，用来在外部访问这个变量。

3.闭包的用途主要就是上一点提到的读取函数内部变量，还有一个作用就是可以使这些变量一直保存在内存中。

4.使用闭包要注意，由于变量被保存在内存中，所以会对内存造成消耗，所以不能滥用闭包。解决方法是在退出函数之前，将不使用的局部变量全部删除。

最后还是上一套闭包的代码吧，这样更直观。

1 function f(){
2 var n = 999;
3 function f1(){
4 alert(n+=1);
5 }
6 return f1;
7 }
8 var result = f();
9 result(); // 1000
10 result(); // 1001
11 result(); // 1002

封装：通过将一个方法或者属性声明为私用的，可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度，可以保持数据的完整性并对其修改方式加以约束，这样可以是代码更可靠，更易于调试。封装是面向对象的设计的基石。

尽管JavaScript是一门面向对象的语言，可它并不具备将成员声明为公用或私用的任何内部机制，所以我们只能自己想办法实现这种特性。下面还是通过一套完整的代码去分析，介绍什么是私有属性和方法，什么是特权属性和方法，什么是公有属性和方法，什么是公有静态属性和方法。

私有属性和方法：函数有作用域，在函数内用var 关键字声明的变量在外部无法访问，私有属性和方法本质就是你希望在对象外部无法访问的变量。

特权属性和方法：创建属性和方法时使用的this关键字，因为这些方法定义在构造器的作用域中，所以它们可以访问到私有属性和方法；只有那些需要直接访问私有成员的方法才应该被设计为特权方法。

共有属性和方法：直接链在prototype上的属性和方法，不可以访问构造器内的私有成员，可以访问特权成员，子类会继承所有的共有方法。

共有静态属性和方法：最好的理解方式就是把它想象成一个命名空间，实际上相当于把构造器作为命名空间来使用。

1 /* -- 封装 -- */
2 var _packaging =function(){
3 //私有属性和方法
4 var name ='Darren';
5 var method1 =function(){
6 //...
7 }
8 //特权属性和方法
9 this.title ='JavaScript Design Patterns' ;
10 this.getName =function(){
11 return name;
12 }
13 }
14 //共有静态属性和方法
15 _packaging._name ='Darren code';
16 _packaging.alertName =function(){
17 alert(_packaging._name);
18 }
19 //共有属性和方法
20 _packaging.prototype = {
21 init:function(){
22 //...
23 }
24 }

继承：继承本身就是一个抽象的话题，在JavaScript中继承更是一个复杂的话题，因为JavaScript想要实现继承有两种实现方式，分别是类式继承和原型式继承，每种实现的方式都需要采取不少措施，下面本人通过分析例子的方式讲解JavaScript中这个很重要的话题。

1 /* -- 类式继承 -- */
2 //先声明一个超类
3 function Person(name){
4 this.name = name;
5 }
6 //给这个超类的原型对象上添加方法 getName
7 Person.prototype.getName =function(){
8 returnthis.name;
9 }
10 //实例化这个超类
11 var a =new Person('Darren1')
12 alert(a.getName());
13 //再声明类
14 function Programmer(name,sex){
15 //这个类中要调用超类Person的构造函数，并将参数name传给它
16 Person.call(this,name);
17 this.sex = sex;
18 }
19 //这个子类的原型对象等于超类的实例
20 Programmer.prototype =new Person();
21 //因为子类的原型对象等于超类的实例，所以prototype.constructor这个方法也等于超类构造函数，你可以自己测试一下，如果没这一步，alert(Programmer.prototype.constructor)，这个是Person超类的引用，所以要从新赋值为自己本身
22 Programmer.prototype.constructor = Programmer;
23 //子类本身添加了getSex 方法
24 Programmer.prototype.getSex =function(){
25 returnthis.sex;
26 }
27 //实例化这个子类
28 var _m =new Programmer('Darren2','male');
29 //自身的方法
30 alert(_m.getSex());
31 //继承超类的方法
32 alert(_m.getName());

代码都不难，只要对原型链有基础就能理解。类式继承模式是JavaScript继承主要的模式，几乎所有用面向对象方式编写的JavaScript代码中都用到了这种继承，又因为在各种流行语言中只有JavaScript使用原型式继承，因此最好还是使用类式继承。可是要熟悉JavaScript语言，原型继承也是我们必须所了解的，至于在项目中是否使用就得看个人编码风格了。

1 /* -- 原型式继承 -- */
2 //clone()函数用来创建新的类Person对象
3 var clone =function(obj){
4 var _f =function(){};
5 //这句是原型式继承最核心的地方，函数的原型对象为对象字面量
6 _f.prototype = obj;
7 returnnew _f;
8 }
9 //先声明一个对象字面量
10 var Person = {
11 name:'Darren',
12 getName:function(){
13 returnthis.name;
14 }
15 }
16 //不需要定义一个Person的子类，只要执行一次克隆即可
17 var Programmer = clone(Person);
18 //可以直接获得Person提供的默认值，也可以添加或者修改属性和方法
19 alert(Programmer.getName())
20 Programmer.name ='Darren2'
21 alert(Programmer.getName())
22
23 //声明子类,执行一次克隆即可
24 var Someone = clone(Programmer);

------------------------------------------正文开始了，我是分割线------------------------------------------

　前言：

JavaScript设计模式的作用 - 提高代码的重用性，可读性，使代码更容易的维护和扩展。

1.单体模式，工厂模式，桥梁模式个人认为这个一个优秀前端必须掌握的模式，对抽象编程和接口编程都非常有好处。

2.装饰者模式和组合模式有很多相似的地方，它们都与所包装的对象实现同样的接口并且会把任何方法的调用传递给这些对象。装饰者模式和组合模式是本人描述的较吃力的两个模式，我个人其实也没用过，所以查了很多相关资料和文档，请大家海涵。

3.门面模式是个非常有意思的模式，几乎所有的JavaScript库都会用到这个模式，假如你有逆向思维或者逆向编程的经验，你会更容易理解这个模式（听起来有挑战，其实一接触你就知道这是个很简单的模式）；还有配置器模式得和门面模式一块拿来说，这个模式对现有接口进行包装，合理运用可以很多程度上提高开发效率。这两个模式有相似的地方，所以一块理解的话相信都会很快上手的。

4.享元模式是一种以优化为目的的模式。

5.代理模式主要用于控制对象的访问，包括推迟对其创建需要耗用大量计算资源的类得实例化。

6.观察者模式用于对对象的状态进行观察，并且当它发生变化时能得到通知的方法。用于让对象对事件进行监听以便对其作出响应。观察者模式也被称为“订阅者模式”。

7.命令模式是对方法调用进行封装的方式，用命名模式可以对方法调用进行参数化和传递，然后在需要的时候再加以执行。

8.职责链模式用来消除请求的发送者和接收者之间的耦合。

JavaScript设计模式都有哪些？

单体（Singleton）模式：绝对是JavaScript中最基本最有用的模式。

单体在JavaScript的有多种用途，它用来划分命名空间。可以减少网页中全局变量的数量(在网页中使用全局变量有风险)；可以在多人开发时避免代码的冲突(使用合理的命名空间)等等。

在中小型项目或者功能中，单体可以用作命名空间把自己的代码组织在一个全局变量名下；在稍大或者复杂的功能中，单体可以用来把相关代码组织在一起以便日后好维护。

使用单体的方法就是用一个命名空间包含自己的所有代码的全局对象，示例：

1 var functionGroup = {
2 name:'Darren',
3 method1:function(){
4 //code
5 },
6 init:function(){
7 //code
8 }
9 }

或者

1 var functionGroup =newfunction myGroup(){
2 this.name ='Darren';
3 this.getName =function(){
4 returnthis.name
5 }
6 this.method1 =function(){}
7 ...
8 }

工厂（Factory）模式：提供一个创建一系列相关或相互依赖对象的接口，而无需指定他们具体的类。

工厂就是把成员对象的创建工作转交给一个外部对象，好处在于消除对象之间的耦合(何为耦合？就是相互影响)。通过使用工厂方法而不是new关键字及具体类，可以把所有实例化的代码都集中在一个位置，有助于创建模块化的代码，这才是工厂模式的目的和优势。

举个例子：你有一个大的功能要做，其中有一部分是要考虑扩展性的，那么这部分代码就可以考虑抽象出来，当做一个全新的对象做处理。好处就是将来扩展的时候容易维护 - 只需要操作这个对象内部方法和属性，达到了动态实现的目的。非常有名的一个示例 - XHR工厂：

1 var XMLHttpFactory =function(){};//这是一个简单工厂模式
2 XMLHttpFactory.createXMLHttp =function(){
3 var XMLHttp = null;
4 if (window.XMLHttpRequest){
5 XMLHttp = new XMLHttpRequest()
6 }elseif (window.ActiveXObject){
7 XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
8 }
10 return XMLHttp;
11 }
12 //XMLHttpFactory.createXMLHttp()这个方法根据当前环境的具体情况返回一个XHR对象。
13 var AjaxHander =function(){
14 var XMLHttp = XMLHttpFactory.createXMLHttp();
15 ...
16 }

工厂模式又区分简单工厂模式和抽象工厂模式，上面介绍的是简单工厂模式，这种模式用的更多也更简单易用。抽象工厂模式的使用方法就是 - 先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的扩展实现工厂方法。示例：

1 var XMLHttpFactory =function(){};　 //这是一个抽象工厂模式
2 XMLHttpFactory.prototype = {
3 //如果真的要调用这个方法会抛出一个错误，它不能被实例化，只能用来派生子类
4 createFactory:function(){
5 thrownew Error('This is an abstract class');
6 }
7 }
8 //派生子类，文章开始处有基础介绍那有讲解继承的模式，不明白可以去参考原理
9 var XHRHandler =function(){
10 XMLHttpFactory.call(this);
11 };
12 XHRHandler.prototype =new XMLHttpFactory();
13 XHRHandler.prototype.constructor = XHRHandler;
14 //重新定义createFactory 方法
15 XHRHandler.prototype.createFactory =function(){
16 var XMLHttp =null;
17 if (window.XMLHttpRequest){
18 XMLHttp =new XMLHttpRequest()
19 }elseif (window.ActiveXObject){
20 XMLHttp =new ActiveXObject("Microsoft.XMLHTTP")
21 }
22 return XMLHttp;
23 }

桥接（bridge）模式：在实现API的时候，桥梁模式灰常有用。在所有模式中，这种模式最容易立即付诸实施。

桥梁模式可以用来弱化它与使用它的类和对象之间的耦合，就是将抽象与其实现隔离开来，以便二者独立变化；这种模式对于JavaScript中常见的时间驱动的编程有很大益处，桥梁模式最常见和实际的应用场合之一是时间监听器回调函数。先分析一个不好的示例：

1 element.onclick =function(){
2 new setLogFunc();
3 };

为什么说这个示例不好，因为从这段代码中无法看出那个LogFunc方法要显示在什么地方，它有什么可配置的选项以及应该怎么去修改它。换一种说法就是，桥梁模式的要诀就是让接口“可桥梁”，实际上也就是可配置。把页面中一个个功能都想象成模块，接口可以使得模块之间的耦合降低。

掌握桥梁模式的正确使用收益的不只是你，还有那些负责维护你代码的人。把抽象于其实现隔离开，可独立地管理软件的各个部分，bug也因此更容易查找。

桥梁模式目的就是让API更加健壮，提高组件的模块化程度，促成更简洁的实现，并提高抽象的灵活性。一个好的示例：

1 element.onclick =function(){//API可控制性提高了，使得这个API更加健壮
2 new someFunction(element,param,callback);
3 }

注：桥梁模式还可以用于连接公开的API代码和私有的实现代码，还可以把多个类连接在一起。在文章封装介绍的部分提到过特权方法，也是桥梁模式的一种特例。《JS设计模式》上找的示例，加深大家对这个模式的理解：

1 //错误的方式
2 //这个API根据事件监听器回调函数的工作机制，事件对象被作为参数传递给这个函数。本例中并没有使用这个参数，而只是从this对象获取ID。
3 addEvent(element,'click',getBeerById);
4 function(e){
5 var id =this.id;
6 asyncRequest('GET','beer.url?id='+ id,function(resp){
7 //Callback response
8 console.log('Requested Beer: '+ resp.responseText);
9 });
10 }
11
12 //好的方式
13 //从逻辑上分析，把id传给getBeerById函数式合情理的，且回应结果总是通过一个毁掉函数返回。这么理解，我们现在做的是针对接口而不是实现进行编程，用桥梁模式把抽象隔离开来。
14 function getBeerById(id,callback){
15 asyncRequest('GET','beer.url?id='+ id,function(resp){
16 callback(resp.responseText)
17 });
18 }
19 addEvent(element,'click',getBeerByIdBridge);
20 function getBeerByIdBridge(e){
21 getBeerById(this.id,function(beer){
22 console.log('Requested Beer: '+ beer);
23 });
24 }　

装饰者（Decorator）模式：这个模式就是为对象增加功能(或方法)。

动态地给一个对象添加一些额外的职责。就扩展功能而言，它比生成子类方式更为灵活。

装饰者模式和组合模式有很多共同点，它们都与所包装的对象实现统一的接口并且会把任何方法条用传递给这些对象。可是组合模式用于把众多子对象组织为一个整体，而装饰者模式用于在不修改现有对象或从派生子类的前提下为其添加方法。

装饰者的运作过程是透明的，这就是说你可以用它包装其他对象，然后继续按之前使用那么对象的方法来使用，从下面的例子中就可以看出。还是从代码中理解吧：

1 //创建一个命名空间为myText.Decorations
2 var myText= {};
3 myText.Decorations={};
4 myText.Core=function(myString){
5 this.show =function(){return myString;}
6 }
7 //第一次装饰
8 myText.Decorations.addQuestuibMark =function(myString){
9 this.show =function(){return myString.show()+'?';};
10 }
11 //第二次装饰
12 myText.Decorations.makeItalic =function(myString){
13 this.show =function(){return'<li>'+myString.show()+'</li>'};
14 }
15 //得到myText.Core的实例
16 var theString =new myText.Core('this is a sample test String');
17 alert(theString.show());//output 'this is a sample test String'
18 theString =new myText.Decorations.addQuestuibMark(theString);
19 alert(theString.show());//output 'this is a sample test String?'
20 theString =new myText.Decorations.makeItalic (theString);
21 alert(theString.show());//output '<li>this is a sample test String</li>'

从这个示例中可以看出，这一切都可以不用事先知道组件对象的接口，甚至可以动态的实现，在为现有对象增添特性这方面，装饰者模式有极大的灵活性。

如果需要为类增加特性或者方法，而从该类派生子类的解决办法并不实际的话，就应该使用装饰者模式。派生子类之所以会不实际最常见的原因是需要添加的特性或方法的数量要求使用大量子类。

组合（Composite）模式：将对象组合成树形结构以表示“部分-整体”的层次结构。它使得客户对单个对象和复合对象的使用具有一致性。

组合模式是一种专为创建Web上的动态用户界面而量身定制的模式。使用这种模式，可以用一条命令在多个对象上激发复杂的或递归的行为。组合模式擅长于对大批对象进行操作。

组合模式的好处：1.程序员可以用同样的方法处理对象的集合与其中的特定子对象；2.它可以用来把一批子对象组织成树形结构，并且使整棵树都可被便利。

组合模式适用范围：1.存在一批组织成某处层次体系的对象（具体结构可能在开发期间无法知道）；2.希望对这批对象或其中的一部分对象实话一个操作。

其实组合模式就是将一系列相似或相近的对象组合在一个大的对象，由这个大对象提供一些常用的接口来对这些小对象进行操作，代码可重用，对外操作简单。例如：对form内的元素，不考虑页面设计的情况下，一般就剩下input了，对于这些input都有name和value的属性，因此可以将这些input元素作为form对象的成员组合起来，form对象提供对外的接口，便可以实现一些简单的操作，比如设置某个input的value，添加/删除某个input等等。

这种模式描述起来比较吃力，我从《JS设计模式》上找个一个实例，大家还是看代码吧：先创建组合对象类

1 // DynamicGallery Class
2 var DynamicGallery =function (id) { // 实现Composite，GalleryItem组合对象类
3 this.children = [];
4 this.element = document.createElement('div');
5 this.element.id = id;
6 this.element.className ='dynamic-gallery';
7 }
8 DynamicGallery.prototype = {
9 // 实现Composite组合对象接口
10 add: function (child) {
11 this.children.push(child);
12 this.element.appendChild(child.getElement());
13 },
14 remove: function (child) {
15 for (var node, i =0; node =this.getChild(i); i++) {
16 if (node == child) {
17 this.children.splice(i, 1);
18 break;
19 }
20 }
21 this.element.removeChild(child.getElement());
22 },
23 getChild: function (i) {
24 returnthis.children[i];
25 },
26 // 实现DynamicGallery组合对象接口
27 hide: function () {
28 for (var node, i =0; node =this.getChild(i); i++) {
29 node.hide();
30 }
31 this.element.style.display ='none';
32 },
33 show: function () {
34 this.element.style.display ='block';
35 for (var node, i =0; node = getChild(i); i++) {
36 node.show();
37 }
38 },
39 // 帮助方法
40 getElement: function () {
41 returnthis.element;
42 }
43 }

再创建叶对象类

1 var GalleryImage =function (src) { // 实现Composite和GalleryItem组合对象中所定义的方法
2 this.element = document.createElement('img');
3 this.element.className ='gallery-image';
4 this.element.src = src;
5 }
6 GalleryImage.prototype = {
7 // 实现Composite接口
8 // 这些是叶结点，所以我们不用实现这些方法，我们只需要定义即可
9 add: function () { },
10 remove: function () { },
11 getChild: function () { },
12 // 实现GalleryItem接口
13 hide: function () {
14 this.element.style.display ='none';
15 },
16 show: function () {
17 this.element.style.display ='';
18 },
19 // 帮助方法
20 getElement: function () {
21 returnthis.element;
22 }
23 }

现在我们可以使用这两个类来管理图片：

1 var topGallery =new DynamicGallery('top-gallery');
2 topGallery.add(new GalleryImage('/img/image-1.jpg'));
3 topGallery.add(new GalleryImage('/img/image-2.jpg'));
4 topGallery.add(new GalleryImage('/img/image-3.jpg'));
5 var vacationPhotos =new DyamicGallery('vacation-photos');
6 for(var i =0, i <30; i++){
7 vacationPhotos.add(new GalleryImage('/img/vac/image-'+ i +'.jpg'));
8 }
9 topGallery.add(vacationPhotos);
10 topGallery.show();
11 vacationPhotos.hide();

门面（facade）模式：门面模式是几乎所有JavaScript库的核心原则
子系统中的一组接口提供一个一致的界面，门面模式定义了一个高层接口，这个接口使得这一子系统更加容易使用，简单的说这是一种组织性的模式，它可以用来修改类和对象的接口，使其更便于使用。

门面模式的两个作用：1.简化类的接口；2.消除类与使用它的客户代码之间的耦合。

门面模式的使用目的就是图方面。

想象一下计算机桌面上的那些快捷方式图标，它们就是在扮演一个把用户引导至某个地方的接口的角色，每次操作都是间接的执行一些幕后的命令。

你在看这篇的博客的时候我就假设你已经有JavaScript的使用经验了，那么你一定写过或者看过这样的代码：

1 var addEvent =function(el,type,fn){
2 if(window.addEventListener){
3 el.addEventListener(type,fn);
4 }elseif(window.attachEvent){
5 el.attachEvent('on'+type,fn);
6 }else{
7 el['on'+type] = fn;
8 }
9 }

这个就是一个JavaScript中常见的事件监听器函数，这个函数就是一个基本的门面，有了它，就有了为DOM节点添加事件监听器的简便方法。

现在要说门面模式的精华部分了，为什么说JavaScript库几乎都会用这种模式类。假如现在要设计一个库，那么最好把其中所有的工具元素放在一起，这样更好用，访问起来更简便。看代码：

1 //_model.util是一个命名空间
2 _myModel.util.Event = {
3 getEvent:function(e){
4 return e|| window.event;
5 },
6 getTarget:function(e){
7 return e.target||e.srcElement;
8 },
9 preventDefault:function(e){
10 if(e.preventDefault){
11 e.preventDefault();
12 }else{
13 e.returnValue =false;
14 }
15 }
16 };
17 //事件工具大概就是这么一个套路，然后结合addEvent函数使用
18 addEvent(document.getElementsByTagName('body')[0],'click',function(e){
19 alert(_myModel.util.Event.getTarget(e));
20 });

个人认为，在处理游览器差异问题时最好的解决办法就是把这些差异抽取的门面方法中，这样可以提供一个更一致的接口，addEvent函数就是一个例子。

适配置器（Adapter）模式：将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作，使用这种模式的对象又叫包装器，因为他们是在用一个新的接口包装另一个对象。

从表面上看，它和门面模式有点相似，差别在于它们如何改变接口，门面模式展现的是一个简化的接口，它并不提供额外的选择，而适配器模式则要把一个接口转换为另一个接口，它并不会滤除某些能力，也不会简化接口。先来一个简单的示例看看：

1 //假如有一个3个字符串参数的函数，但是现在拥有的却是一个包含三个字符串元素的对象，那么就可以用一个配置器来衔接二者
2 var clientObject = {
3 str1:'bat',
4 str2:'foo',
5 str3:'baz'
6 }
7 function interfaceMethod(str1,str2,str3){
8 alert(str1)
9 }
10 //配置器函数
11 function adapterMethod(o){
12 interfaceMethod(o.str1, o.str2, o.str3);
13 }
14 adapterMethod(clientObject)
15 //adapterMethod函数的作为就在于对interfaceMethod函数进行包装，并把传递给它的参数转换为后者需要的形式。

适配器模式的工作机制是：用一个新的接口对现有类得接口进行包装。

示例：适配两个库。下面的例子要实现的是从Prototype库的$函数到YUI的get方法的转换。

1 //先看它们在接口方面的差别
2 //Prototype $ function
3 function $(){
4 var elements =new Array();
5 for(var i=0;i<arguments.length;i++){
6 var element = arguments[i];
7 if(typeof element =='string'){
8 element = document.getElementById(element);
9 }
10 if(typeof.length ==1) return element;
11 elements.push(element);
12 }
13 return elements;
14 }
15 //YUI get method
16 YAHOO.util.Dom.get =function(el){
17 if(YAHOO.lang.isString(el)){
18 return document.getElementById(el);
19 }
20 if(YAHOO.lang.isArray(el)){
21 var c =[];
22 for(var i=0,len=el.length;i<len;++i){
23 c[c.length] = YAHOO.util.Dom.get(el[i]);
24 }
25 return c;
26 }
27 if(el){
28 return el;
29 }
30 returnnull;
31 }
32 //二者区别就在于get具有一个参数，且可以是HTML,字符串或者数组；而$木有正是的参数，允许使用者传入任意数目的参数，不管HTML还是字符串。
33 //如果需要从使用Prototype的$函数改为使用YUI的get方法（或者相反，那么用适配器模式其实很简单）
34 function PrototypeToYUIAdapter(){
35 return YAHOO.util.Dom.get(arguments);
36 }
37 function YUIToPrototypeAdapter(el){
38 return $.apply(window,el instanceof Array?el:[el]);
39 }

享元（Flyweight）模式：运用共享技术有效地支持大量细粒度的对象。

享元模式可以避免大量非常相似类的开销。在程序设计中有时需要生成大量细粒度的类实例来表示数据。如果发现这些实例除了几个参数外基本伤都是相同的，有时就能够受大幅度第减少需要实例化的类的数量。如果能把这些参数移到类实例外面，在方法调用时将他们传递进来，就可以通过共享大幅度地减少单个实例的数目。

从实际出发说说自己的理解吧。

1 组成部分
2 “享元”：抽离出来的外部操作和数据；
3 “工厂”：创造对象的工厂；
4 “存储器”：存储实例对象的对象或数组，供“享元”来统一控制和管理。
5
6 应用场景
7 1. 页面存在大量资源密集型对象；
8 2. 这些对象具备一定的共性，可以抽离出公用的操作和数据
9
10 关键
11 1. 合理划分内部和外部数据。
12 既要保持每个对象的模块性、保证享元的独立、可维护，又要尽可能多的抽离外部数据。
13 2. 管理所有实例
14 既然抽离出了外部数据和操作，那享元就必须可以访问和控制实例对象。在JavaScript这种动态语言中，这个需求是很容易实现的：我们可以把工厂生产出的对象简单的扔在一个数组中。为每个对象设计暴露给外部的方法，便于享元的控制。
15
16 优点
17 1. 将能耗大的操作抽离成一个，在资源密集型系统中，可大大减少资源和内存占用；
18 2. 职责封装，这些操作独立修改和维护；
19
20 缺点
21 1. 增加了实现复杂度。
22 将原本由一个工厂方法实现的功能，修改为了一个享元+一个工厂+一个存储器。
23 2. 对象数量少的情况，可能会增大系统开销。

示例：

1 //汽车登记示例
2 var Car =function(make,model,year,owner,tag,renewDate){
3 this.make=make;
4 this.model=model;
5 this.year=year;
6 this.owner=owner;
7 this.tag=tag;
8 this.renewDate=renewDate;
9 }
10 Car.prototype = {
11 getMake:function(){
12 returnthis.make;
13 },
14 getModel:function(){
15 returnthis.model;
16 },
17 getYear:function(){
18 returnthis.year;
19 },
20 transferOwner:function(owner,tag,renewDate){
21 this.owner=owner;
22 this.tag=tag;
23 this.renewDate=renewDate;
24 },
25 renewRegistration:function(renewDate){
26 this.renewDate=renewDate;
27 }
28 }
29 //数据量小到没多大的影响，数据量大的时候对计算机内存会产生压力，下面介绍享元模式优化后
30 //包含核心数据的Car类
31 var Car=function(make,model,year){
32 this.make=make;
33 this.model=model;
34 this.year=year;
35 }
36 Car.prototype={
37 getMake:function(){
38 returnthis.make;
39 },
40 getModel:function(){
41 returnthis.model;
42 },
43 getYear:function(){
44 returnthis.year;
45 }
46 }
47 //中间对象，用来实例化Car类
48 var CarFactory=(function(){
49 var createdCars = {};
50 return {
51 createCar:function(make,model,year){
52 var car=createdCars[make+"-"+model+"-"+year];
53 return car ? car : createdCars[make +'-'+ model +'-'+ year] =(new Car(make,model,year));
54 }
55 }
56 })();
57 //数据工厂，用来处理Car的实例化和整合附加数据
58 var CarRecordManager = (function() {
59 var carRecordDatabase = {};
60 return {
61 addCarRecord:function(make,model,year,owner,tag,renewDate){
62 var car = CarFactory.createCar(make, model, year);
63 carRecordDatabase[tag]={
64 owner:owner,
65 tag:tag,
66 renewDate:renewDate,
67 car:car
68 }
69 },
70 transferOwnership:function(tag, newOwner, newTag, newRenewDate){
71 var record=carRecordDatabase[tag];
72 record.owner = newOwner;
73 record.tag = newTag;
74 record.renewDate = newRenewDate;
75 },
76 renewRegistration:function(tag,newRenewDate){
77 carRecordDatabase[tag].renewDate=newRenewDate;
78 },
79 getCarInfo:function(tag){
80 return carRecordDatabase[tag];
81 }
82 }
83 })();

代理（Proxy）模式：此模式最基本的形式是对访问进行控制。代理对象和另一个对象（本体）实现的是同样的接口，可是实际上工作还是本体在做，它才是负责执行所分派的任务的那个对象或类，代理对象不会在另以对象的基础上修改任何方法，也不会简化那个对象的接口。

举一个具体的情况：如果那个对象在某个远端服务器上，直接操作这个对象因为网络速度原因可能比较慢，那我们可以先用Proxy来代替那个对象。
总之对于开销较大的对象，只有在使用它时才创建，这个原则可以为我们节省很多内存。《JS设计模式》上的图书馆示例：

1 var Publication =new Interface('Publication', ['getIsbn', 'setIsbn', 'getTitle', 'setTitle', 'getAuthor', 'setAuthor', 'display']);
2 var Book =function(isbn, title, author) {
3 //...
4 }
5 // implements Publication
6 implements(Book,Publication);
7
8 /* Library interface. */
9 var Library =new Interface('Library', ['findBooks', 'checkoutBook', 'returnBook']);
10
11 /* PublicLibrary class. */
12 var PublicLibrary =function(books) {
13 //...
14 };
15 // implements Library
16 implements(PublicLibrary,Library);
17
18 PublicLibrary.prototype = {
19 findBooks: function(searchString) {
20 //...
21 },
22 checkoutBook: function(book) {
23 //...
24 },
25 returnBook: function(book) {
26 //...
27 }
28 };
29
30 /* PublicLibraryProxy class, a useless proxy. */
31 var PublicLibraryProxy =function(catalog) {
32 this.library =new PublicLibrary(catalog);
33 };
34 // implements Library
35 implements(PublicLibraryProxy,Library);
36
37 PublicLibraryProxy.prototype = {
38 findBooks: function(searchString) {
39 returnthis.library.findBooks(searchString);
40 },
41 checkoutBook: function(book) {
42 returnthis.library.checkoutBook(book);
43 },
44 returnBook: function(book) {
45 returnthis.library.returnBook(book);
46 }
47 };

观察者（Observer）模式：定义对象间的一种一对多的依赖关系，以便当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并自动刷新。

观察者模式中存在两个角色,观察者和被观察者。在DOM的编程环境中的高级事件模式中，事件监听器说到底就是一种内置的观察者。事件处理器(handler)和时间监听器(listener)并不是一回事，前者就是一种把事件传给与其关联的函数的手段，而在后者中，一个时间可以与几个监听器关联，每个监听器都能独立于其他监听器而改变。

1 //使用时间监听器可以让多个函数相应一个事件
2 var fn1 =function(){
3 //code
4 }
5 var fn2 =function(){
6 //code
7 }
8 addEvent(element,'click',fn1)；
9 addEvent(element,'click',fn2)
10
11 //而时间处理函数就办不到
12 element.onclick = fn1;
13 element.onclick = fn2;

观察者模式是开发基于行为的应用程序的有力手段，前端程序员可做的就是借助一个事件监听器替你处理各种行为，从而降低内存消耗和提高互动性能。

命令（Command）模式：将一个请求封装为一个对象，从而使你可用不同的请求对客户进行参数化；对请求排队或记录请求日志，以及支持可取消的操作。

命令对象是一个操作和用来调用这个操作的对象的结合体，所有的命名对象都有一个执行操作，其用途就是调用命令对象所绑定的操作。示例：

1 car Calculator={
2 add:function(x,y){
3 return x+y;
4 },
5 substract:function(x,y){
6 return x-y;
7 },
8 multiply:function(x,y){
9 return x*y;
10 },
11 divide:function(x,y){
12 return x/y;
13 }
14 }
15 Calculator.calc =function(command){
16 return Calculator[command.type](command.op1,command.opd2)
17 };
18 Calculator.calc({type:'add',op1:1,op2:1});
19 Calculator.calc({type:'substract',op1:5,op2:2});
20 Calculator.calc({type:'multiply',op1:5,op2:2});
21 Calculator.calc({type:'divide',op1:8,op2:4});

命名模式的主要用途是把调用对象（用户界面，API和代理等）与实现操作的对象隔离开，也就是说使对象间的互动方式需要更高的模块化时都可以用到这种模式。

职责链（Chain Of Responsibility）模式：为解除请求的发送者和接收者之间耦合，而使多个对象都有机会处理这个请求。将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它。

职责链由多个不同类型的对象组成：发送者是发出请求的对象，而接收者则是接收请求并且对其进行处理或传递的对象，请求本身有时也是一个对象，它封装着与操作有关的所有数据。

典型的流程大致是：

1.发送者知道链中第一个接收者，它向这个接收者发出请求。

2.每一个接收者都对请求进行分析，然后要么处理它，要么将其往下传。

3.每一个接收者知道的其他对象只有一个，即它在链中的下家。

4.如果没有任何接收者处理请求，那么请求将从链上离开，不同的实现对此也有不同的反应，一般会抛出一个错误。

职责链模式的适用范围:1.有多个的对象可以处理一个请求，哪个对象处理该请求运行时刻自动确定；2.想在不明确指定接收者的情况下，向多个对象中的一个提交一个请求；3.可处理一个请求的对象集合需要被动态指定。

确实对这种模式不了解，相关资料也较少，所以代码先不上了。看看大家对这个模式有木有什么好的理解或者能较好表达这种模式的代码，谢谢了。

结束语：

1.每种模式都有自己的优缺点，所以每种模式的正确使用还得看开发人员本身的功力；

2.就算不使用JavaScript设计模式一样可以写出 复杂的可使用 的代码，可是如果你想真正了解JavaScript面向对象能力，学习提高代码的模块化程度﹑可维护性﹑可靠性和效率，那么合理的运用JavaScript设计模式将会是一个优秀 前端开发攻城湿 必备的能力。

终于在8月31日发了这篇博客，字很多，辛苦大家了...

最后，祝大家工作顺利。

本文链接

JavaScript实现页面滚动图片加载

2011-07-21T14:52:00Z

又到了这个月的博客时间了，原计划是打算在这个月做一个的功能较炫的拖拽类，可是感觉想的太容易，实现起来遇见不少问题，如果技术分享做不到有助于人反而害人，那就歇菜了，所以还是等本人多找些资料研究研究，“拖拽类“先放放吧，下面开始正题...

为什么写这篇文章？

1.优化页面很实用的方法，技术实现不难；

2.搜索了相关内容的文章，好像都是用jQuery的方法，可是如果不用jQuery的站长难道就不能用这种方法了么；

3.做技术分享也是在让更多人帮自己测试，因为这个本人木有在项目中实际用到，都是自己琢磨的，所有如果有问题请大家指出，先谢谢了；

4.这个月的博客还没写；

5.刚好木有工作任务，此时不写更待何时...

现在的页面大多都具有的特点 - 内容丰富，图片较多；像我们经常浏览的淘宝，京东，团购网站之类的（本人网购控，属于一个月不在网上花点钱就不痛快），一个页面几十张图片那叫毛毛雨，所以现在流行起了一个方法 - 滚动动态加载。这个方法能解决很大程度的HTTP请求，首先页面只加载窗口显示区的图片，只有等到页面滚动，且滚动到相应位置的时候再去加载图片，这样做网页加载快了（请求少了，加载的东西少了能不提快么）。在《高性能网站建设指南》第一章就说到，减少HTTP请求的重要性，这是提高网页前端性能，优化页面加载速度很实用的做法。

原理：

1.给页面绑定滚动事件；

2.加载页面的时候把真正的图片地址放在某属性中；

3.然后再滚动过程中判断元素是否进入当前浏览器窗口内；

4.最后加载图片，当然加载什么，用什哪种用户体验都得由你决定；

难点：

浏览器兼容是造成难点的原因所在，DOM标准和IE标准，每天前端的工作都在和它们打交道。思考下面的几段代码

1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop

目的:获得当前页面相对于窗口显示区左上角的 Y 位置.
DOM标准:window.pageYOffset;
IE标准:window.document.documentElement.scrollTop

2.window.innerHeight ? window.innerHeight : document.documentElement.clientHeight

目的:声明了窗口的文档显示区的高度和宽度，以像素计.
DOM标准:innerheight 和 innerwidth;
IE标准:document.documentElement 或 ducument.body （与 DTD 相关）的 clientWidth 和 clientHeight 属性作为替代

3.obj.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop

目的:获取页面元素的位置.
当浏览器为非webkit内核时，document.body.scrollTop值恒定为0，使用 document.documentElement.scrollTop才能取到正确值 ;
当浏览器为 webkit内核时，document.documentElement.scrollTop值恒定为0，使用 document.body;
我还搜索到一种说法是和DTD相关（即当页面指定了 DOCTYPE时，使用 document.documentElement ; 当页面没有指定了 DOCTYPE时，使用 document.body），请确定知道的朋友帮忙指出下，不胜感谢。

细节：

1.因为真正的地址最初是在某属性中(默认是xsrc，可自己设置)，所以默认的图片地址最好是一个像素的透明图片，这样可以避免在浏览器中出现红X；

2.在图片load的时候可以加入等待的图片，这样用户才会知道这里有图片需要加载，良好的用户体验是前端一直所追求的(例子中有体现)；

3.在图片load成功后可以加入合适的显示效果(例子中木有体现，可以自己尝试)；

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

JavaScript源码如下：

scrollLoad();

demo下载

可传递一个参数设置src原地址和响应时间

scrollLoad({

src:'userSrc'， //字符串型
time: 100 //数字型
})

最后，祝大家工作愉快，学习进步，哈哈..

如果觉得此文还算用心，请劳驾点右下角的推荐 ^.^ 。

本文链接

博客园_Darren_聂微东 - 关注前端开发技术

要有梦想-创造卓越的职业生涯

IE下 z-index 的各种坑

参考资料：http://www.w3.org/TR/CSS21/visuren.html#z-indexhttp://www.zhangxinxu.com/wordpress/?p=471http://www.w3school.com.cn/css/pr_pos_z-index.asphttp://w3help.org/zh-cn/causes/RM8015 本文链接

2011总结与2012展望

前端攻略系列(二) - 前端各种面试题

前端攻略系列(一) - 前端各种优化(保证持续更新)

JavaScript 操作 Cookie

node.js 初体验

Fiddler - 前端开发值得拥有

javascript 设计模式 - 文章很长，请自备瓜子，水果和眼药水

JavaScript实现 页面滚动图片加载

参考资料：
http://www.w3.org/TR/CSS21/visuren.html#z-index
http://www.zhangxinxu.com/wordpress/?p=471
http://www.w3school.com.cn/css/pr_pos_z-index.asp
http://w3help.org/zh-cn/causes/RM8015

本文链接

JavaScript实现页面滚动图片加载