前端重构也已经有各种模块化的思想出现，结构模块化、样式模块化等等

今天和同事沟通视觉统一化的时候，发现流程中在产出物方面存在一个问题
如下图所示：

大家按照统一的思维过程在执行时 产出物在页面构建的环节，形成了一个聚合，从以UI组件为单位变为了以page为单位的产出物，而之后到了后端研发时，其实Template还是需要再次分拆，由于这个问题，而产生了更大的沟通成本，降低了整个团队的效率

基于这个问题 我提出了一个解决方法 还算不上解决方案，短暂的解决一下

在页面构建的环境 通过webserver的SSI Include指令 将静态页面也进行模块化，在交付产出物的时候后端研发人员是很清晰的看到module的复用代码，也降低了重构页面时对于统一的ui而产生不同html和css代码的错误率

具体实现如下：

在开发(测试环境)  建立webserver（nginx、apache均可） 然后通过配置文件开启SSI支持

Apache 开启SSI方式 http://www.uplinux.com/download/doc/apache/ApacheManual/howto/ssi.html

要使服务器允许SSI，必须在httpd.conf文件或.htaccess文件中有如下配置：

Options +Includes

告诉服务器以允许解析文件中的SSI指令。注意，在多数配置中，多个Options指令会互相覆盖，所以，可能必须对需要SSI的特定目录使用Options，以确保位于最后并起作用。

并不是所有文件中的SSI指令都会被解析，所以，必须告诉Apache应该解析哪些文件。有两种方法，使Apache解析带有特定文件后缀的任何文件，比如.shtml, 配置如下：

在 Nginx 开启 SSI ，加入以下3行就OK了，可以放在 http, server, 和 location 段都行

SSI Include 指令语法，我们主要用这个语法来调用相关组件文件代码

<!–#include virtual=”文件路径” –>

在构建页面时 目录结构可以是

demoproject/ 项目文件夹
|-- aboutus.shtml  综合性页面 包含module调用
|-- index.shtml    综合性页面 包含module调用
|-- other_page.shtml 综合性页面 包含module调用
|-- module  组件文件夹
|   |-- footer.html  组件文件
|   |-- header.html  组件文件
|   `-- other_module.html 组件文件
|-- images 其他静态文件
|-- js 其他静态文件
`-- style 其他静态文件

这样 我们形成的综合性页面的代码中会包含module调用，在我们每次对通用组建修改时，只需要修改组建文件即可
如下图，因为我们之前在webserver配置了SSI支持，所以我们能够实时预览效果

这样，除了在开发时方便了我们自己，我们的交付物也能够体现模块化思想，方便后端人员处理templates

同时我也用python写了一个开源项目，方便使用shtml这种方式构建页面的同事 产出传统html交付物

shtml2html项目

使用方法：

Usage: python shtml2html.py path 支持文件和目录（递归处理）

这是我目前的解决方法，正在试行中，小团队还没那么智能化，希望能给大家提供一些思路

如果你有更好的解决方案也请告诉我，多交流

解释：

同步刷新：当文件修改时 浏览器自动刷新，如果你在做多屏幕开发的时候会尤其提升开发效率

昨天在微博上看到了f5这款国人开发的软件，今天收到激活码 ，在mac下进行了简单测试，没有什么问题

相比较的话，国人开发的这款软件基于air技术，能够比较好的跨平台，但是需要激活，不知道除了验证以外会不会有其他数据的收集

总体来讲 支持一下

官方网站：http://www.getf5.com//

视频演示：

下面有几个激活码 分享一下

• c65af48f80e249d198293cdf1a9ee6a9
• 55a365fc7d7042e5be52ad6d24b77450

可以在豆瓣播放器下面显示 歌词 和 下载的 链接

效果见下图：

项目发布地址：http://dbfmshow.sinaapp.com/

借此机会也学习了不少东西

Chrome扩展的相关知识 ，利用浏览器标签实现部分功能（云输入法也是这样实现的），同时还学习了一下SAE的部分使用方法

demo见：http://www.iamued.com/demo/Mselect/

代码：https://github.com/iamued/Mselect

也借此机会尝试用了一下git 貌似还不错哦~

这个1.5版本最大的更新是AJAX的完全重写，提供了更强的可扩展性。但是受制于精力和篇幅，对新的AJAX的分析还是放到下回，本篇先简单介绍一下细节方面的改进。

jQuery._Deferred和jQuery.Deferred

首先不得不说这两个新生事物，因为他们是作为基础设施存在，不把这两个东西讲明白了，有些问题根本没办法解释。

首先，jQuery.Deferred是jQuery._Deferred的增强版，因此对于这个问题，从jQuery._Deferred入手，就能说明一大半的问题。

什么是Deferred？从字面上看，我的第一反应是“延迟加载”，首字母大写的应该是“类型”的定义，所以这大概是一个“透明提供延迟加载功能”的类型吧。然而实际上，虽然确实带有那么一点点“延迟”的意思，这个东西却不是用来实现延迟加载的。

简单来说，jQuery._Deferred是一个函数队列，他的作用有以下几点：

• 保存若干个函数。
• 在特定的时刻把保存着的函数全部执行掉。
• 执行过后，新进来的函数会立刻执行。

感觉是不是和啥东西很像？对，jQuery的ready函数就是这样的逻辑，实际中jQuery 1.5中的ready函数也确实被嫁接到这上面去了。

jQuery._Deferred提供下面的接口：

• done：function(fn1, fn2, …)的形式，用于把函数添加到队列中。
• fire：function(context, args)的形式，使用context指定this对象，args指定参数，调用队列中所有函数。fire被调用后，_Deferred会进入 isResolved状态，未来对done的调用不会再保存函数，而是直接调用函数。
• resolve：相当于调用fire(this, arguments)，一个简化的方法。
• isResolved：用来判断_Deferred是否在isResolved状态，具体参考前面的fire函数的解释。
• cancel：取消掉整个队列，这样不管未来是不是fire，队列中的函数都不会再被调用。

说明白了jQuery._Deferred，再来看看jQuery.Deferred。这个东西其实就是2个_Deferred组成的，第一个称为 deferred，用于保管“正常”状态下的函数；第二个称为failDeferred，用于保管“出错”状态下的函数。同时 jQuery.Deferred提供了一些新的接口：

• then：function(done, fail)的形式，把done添加进deferred，把fail添加进failedDeferred。
• fail：相当于failDeferred的done函数。
• fireReject：相当于failDeferred的fire函数。
• reject：相当于failDeferred的resolve函数。
• isRejected：相当于failDeferred的isResolved函数。

同时jQuery.Deferred取消了cancel函数。

那么这个是啥用的呢？有“正常”和“出错”2个状态，同时又是异步的，很容易就能想到……对，给AJAX用的，在下一篇分析中再详细说明。

jQuery.ready的变化

因为有了jQuery._Deferred这个东西，jQuery.ready函数变成依赖于函数队列，具体的变化有：

原来的readyList变量已经不再是一个数组，而变成了jQuery._Deferred对象。

原本在DOMContentLoaded时，调用readList中所有函数的逻辑，现在也使用了jQuery._Deferred中，原来的代码：

while ( (fn = ready[ i++ ]) ) {
    fn.call( document, jQuery );
}

变成了：

readyList.fire( document , [ jQuery ] );

jQuery.parseXML函数

新增了静态函数jQuery.parseXML，用于提供浏览器兼容的从字符串转为XML文档的功能。

该函数的逻辑网上有很多，jQuery也没有特别的地方，大致分为以下2种：

• 对于标准浏览器，使用DOMParser对象：

  var parser = new DOMParser();
  var xml = parser.parseFromString(text, 'text/html');

• 对于IE，使用Microsoft.XMLDOM对象：

  var parser = new ActiveXObject('Microsoft.XMLDOM');
  parser.async = 'false';
  parser.loadXML(text);
  var xml = parser.documentElement;

data部分

添加了jQuery.hasData函数，用于判断一个元素是否有jQuery附加上去的数据。

修改了jQuery.expando的实现，在原来单纯地取当前时间的基础上，添加了一个随机数：

expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" );

这样保证在同一时间，引入多个jQuery副本，这几个副本之间的expando不会相互冲突，导致元素上的data变得错乱。一般来说，是不会引入多个jQuery副本的，但是使用SealJS等的时候，配置不当的话，也是很容易出现此类问题的。

DOM操作部分

原本的hasClass、addClass、removeClass函数都需要将元素的class属性分隔为数组，在1.4.4版本中，通过\n或\t进行分隔，在1.5中增加了一个\r，用于对应Windows平台下的换行符（\r\n）。

jQuery.fn.attr函数，1.4.4版本中拒绝从TextNode和CommentNode上获取属性，在1.5版本中添加了一个AttributeNode（noteType == 2）。

在1.4.4版本中，jQuery会在页面unload的时候清理掉由jQuery维护的所有DOM事件，这是为了避免IE的内存泄露问题。但是在1.5中这一段代码不见了，不知是出于什么考虑。

对于IE下使用cloneNode复制节点，会将事件也一起复制过来的问题，1.4.4中是采取复制innerHTML的方式给予解决，而在1.5中则采纳了mootools团队提供的方法，使用cloneFixAttribute函数修正该问题。

cloneFixAttribute函数们于jQuery 1.5 beta1源码文件的5388-5438行，处理IE的BUG的原理很简单，当然前端里一些看似简单的东西，都是很难发现的：

1. IE中有个叫clearAttributes的函数，会清除到节点上的所有属性，顺便把和事件相关的onclick之类的属性也去掉了。在复制出来的节点上调用这个函数，就会把属性清得干干净净。
2. IE中还有一个叫mergeAttributes的函数，把一个节点的属性复制到另一个节点上，但他不会把和事件相关的属性复制过去。所以再把原始节点调用mergeAttributes，把属性重新放回复制出来的节点上，这就相当于起到了去除事件相关属性的作用。

另外cloneFixAttribute函数还处理了非常多IE6-8在cloneNode上的兼容性问题，非常值得详细研究。

AJAX部分

AJAX已经完全重写了，只留下一点边边角角保留着1.4.4版本的风采，这里只抽取一部分进行简单的说明。

原来版本中$.get和$.post的实现非常相似，具体来说仅有一个method配置项不同，因此在1.5版本中被合并起来了：

$.each(['get', 'post'], function(i, method) {
    $[method] = function() { ... };
});

ajaxSetup函数现在加了一行return this;，可以链式调用了。

serializeArray函数现在统一将value中的换行符替换成Windows的风格（\r\n）。

AJAX的回调函数中，作为参数的对象不再是原生的XMLHTTPRequest，而是jQuery自己封装的称为jXHR的对象，这个对象提供了XMLHTTPRequest的常用接口。

原本对于“请求成功”的浏览器状态码，除200-299以及304外，还有一个1223，来自于IE的一个BUG，会将204的状态码变成 1223。现在因为有了jXHR对象，相当于中间多了一层，因此从jXHR对象获取statusCode不会出现1223的情况，已经被变回204了。

jQuery.ajax函数的配置项中多了一个statusCode项，其结构为map，用于指定返回特定状态码时的回调函数，大致形式如下：

jQuery.ajax({
    url: 'xxx',
    statusCode: {
        200: function() { 处理请求成功 },
        404: function() { 处理页面未找到 },
        503: function() { 处理Service Unavailable }
    }
});

再添加了这个回调后，jQuery.ajax函数已经有非常多的回调函数，其触发过程如下：

1. 根据返回的状态码，触发success或者error回调。
2. 根据状态码，触发对应的statusCode回调。
3. 触发complete回调。
4. 触发全局ajaxComplete回调。
5. 如果此时没有正在执行的AJAX，触发全局ajaxStop回调。

其他细节

入口函数jQuery.fn.init现在多了一个参数，值始终为rootjQuery，用于加速init函数中对rootjQuery变量的查找速度（减少了一层作用域）：

//jQuery 1.5 beta1 源码23行
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}

jQuery对象支持继承了，具体的修改是将几处直接调用jQuery的代码改为了对this.constructor的调用：

202行：return this.constructor( context ).find( selector );
253行：var ret = this.constructor();
334行：return this.prevObject || this.constructor(null);

同时还提供了jQuery.subclass函数用于创建一个继承自jQuery的类型，由于不是很常用jQuery，更是从来没有用到过需要继承jQuery的情况，因此也不方便说这个功能的作用有多大。

转自:http://www.cnblogs.com/GrayZhang/archive/2011/01/18/jquery-1-5-enhanced-detail.html

<!--[if IE 6]>

<script> document.execCommand("BackgroundImageCache", false, true); </script>

<![endif]-->

之前在使用Google Reader的时候就发现了快捷键来进行操作的方式，对用户体验也是一种提升，现在基本看reader都是用快捷键

今天正好有时间就把豆瓣的实现看了一下 豆瓣团队的分享精神是我一直钦佩的 尤其是kejun 多次听他的演讲都深有感触

拿豆瓣的代码做了一个小Demo 地址是

http://www.iamued.com/demo/hotkey/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>一个jquery的小模板机制-我是UED</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<a id="test" price="110" name="iphone" onmouseover="test();" href="#">这是一个A元素 有2个属性 鼠标放上来看看</a>

临时Demo的部分代码：
<script type="text/javascript">
	function test(){
		var testString="价格为{price}元，我是{name}"
		alert(testString.replace(/{([^{}]+)}/g,function(word){
			var _attr=word.replace(/({|})+/g,"");
			return $("#test").attr(_attr);
		}));

	}
</script>
</body>
</html>

查看临时Demo
实际应用的案例：http://www.iamued.com/demo/simpletip/template/

//最常见的用法：
(function() {
   alert('water');
})();
//当然也可以带参数：
(function(o) {
    alert(o);
})('water');
//想用匿名函数的链式调用？很简单：
(function(o) {
    alert(o);
    return arguments.callee;
})('water')('down');

//常见的匿名函数都知道了，看看不常见的：
~(function(){
    alert('water');
})();
//写法有点酷~
void function(){
    alert('water');
}();
//据说效率最高~
+function(){
    alert('water');
}();
-function(){
    alert('water');
}();
~function(){
    alert('water');
}();
!function(){
    alert('water');
}();
(function(){
    alert('water');
}());
//有点强制执行的味道~

Sorry ：） 刚才忘记把转载地址附上了
转自：
http://blog.163.com/water_down/blog/static/1702765902010869124093/

如果你从没听说过互动电影，那就真的要点击这里开开眼界了。这个页面以灰白色调为主，页面上的动画效果皆由 HTML5 技术制作，官方推荐最好使用 Chrome 浏览器，经过我们的试用，IE8 与 Opera 均无法启动这个页面，而 Firefox 4.0 Beta 4 和 Safari 都能体验这个互动电影。

谷歌在间接“鄙视”IE8 与 Opera 对 HTML5 的支持度

但这两款浏览器对这个页面的 HTML5 特效处理速度奇慢无比，偶尔还会出现崩溃现象，我们不排除这一个页面为谷歌 Chrome 浏览器特别优化过，因为这种以特效体验页面来暗中贬低对手的把戏已经屡见不鲜了。

登录这个页面后你首先需要输入你小时候的住址，为什么？因为电影情节将会从这里开始，并且融合谷歌地图和谷歌街景的技术到电影中，达到非常震撼的互动效果，其他诸如 Canvas，Video，Audio 等的 HTML5 标准特效就更加不用多介绍了。

输入小时候的住址

经过好一会儿的载入等待之后，由著名作家兼导演 Chris Milk 亲自操刀的互动电影就开始了，开始的时候，一名模样十分鬼祟的白衣男子在狂奔，奔到有气无力的时候，电影会先暂停，让你用交互绘图工具绘画一张明信片，寄给小时候的你。

一双无影脚

谷歌街景视图中的是不是你儿时的家？

你可以用鼠标乱涂乱画，也可以直接输入你想说的话，不过这张明信片，无论你的画工有多精细，画出来的都只能是错综复杂的线条，配合著名独立摇滚乐团 Arcade Fire 刚刚推出的新专辑《The Suburbs》中的歌曲 We Used to Wait 作为主题音乐，颇有剪不断理换乱的感觉。

错综复杂的明信片

写完明信片后将会是一段狂奔的视频

纸上谈兵完毕，最后送上这个HTML5 互动电影《The Wilderness Downtown》的视频。

The Wilderness Downtown

关于 Arcade Fire （拱廊之火）

Arcade Fire（拱廊之火）是一支独立摇滚乐队，来自于加拿大的蒙特利尔。乐队的主创成员是Win Butler和Régine Chassagne，他们是一对夫妻。乐队演奏的主要乐器有吉他、贝司和鼓，除此之外还有钢琴、小提琴、中提琴、大提琴、低音提琴、木琴、钟琴、键盘、圆号、手风琴、竖琴、曼陀林和手摇风琴。乐队在巡演中会带上几乎所有的乐器，然后由多面手的乐队成员们在整场演出中交替演奏。

Arcade Fire（拱廊之火）

拱廊之火乐队赢得了诸多奖项，包括2008年流星音乐奖的最佳国际专辑奖和2008年朱诺音乐奖的年度另类专辑奖。乐队在2005年和2008年因专辑《Funeral》（葬礼）和《Neon Bible》（霓虹圣经）同获格莱美音乐奖的最佳另类音乐专辑奖提名。而他们于2010年发行的新专辑《The Suburbs》（郊区），更是得到了评论界的称赞。