<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>刘钢的博客 - 我是UED &#187; 前端开发</title>
	<atom:link href="http://www.iamued.com/qianduan/feed" rel="self" type="application/rss+xml" />
	<link>http://www.iamued.com</link>
	<description>http://www.IamUED.com</description>
	<lastBuildDate>Wed, 18 Jan 2012 02:51:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Alice-支付宝前端样式解决方案</title>
		<link>http://www.iamued.com/qianduan/2061.html</link>
		<comments>http://www.iamued.com/qianduan/2061.html#comments</comments>
		<pubDate>Mon, 26 Dec 2011 03:28:41 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[页面实现]]></category>
		<category><![CDATA[aliceui]]></category>
		<category><![CDATA[Ant]]></category>
		<category><![CDATA[支付宝样式]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=2061</guid>
		<description><![CDATA[Alice 是支付宝前端样式解决方案小组的项目代称。她包括构建样式库的样式库解决方案，帮助团队理解新技术的W3C标准文档库和正在进行中实验项目等; 也是团队的代称。目前 Alice 的主要职责是提供 CSS 和 HTML 方面的技术支持和解决方案开发。 基于“分享·贡献·学习”的理念建立此网站，开源部分团队成果。发布的所有开源源代码，均采用 MIT License 许可。欢迎参与 Alice 的开发，或提出你宝贵的意见。 &#160; 官方站点：http://aliceui.com/ Github：https://github.com/sofish/Alice &#160; 简单用了一下 感觉还不错哦 为了方便大家打包压缩 我也写了个插件基于ant的打包工具 https://github.com/sofish/Alice/tree/master/plugins/AntBuild]]></description>
			<content:encoded><![CDATA[<h1><a id="logo" title="Alice" href="http://aliceui.com/"><img src="http://aliceui.com/wp-content/themes/aliceui/images/logo.png" alt="Alice" /></a></h1>
<p>Alice 是支付宝前端样式解决方案小组的项目代称。她包括构建样式库的<a href="http://aliceui.com/alice-css">样式库解决方案</a>，帮助团队理解新技术的<a href="http://aliceui.com/w3c-docs">W3C标准文档库</a>和正在进行中实验项目等; 也是团队的代称。目前 Alice 的主要职责是提供 CSS 和 HTML 方面的技术支持和解决方案开发。</p>
<p>基于<em>“分享·贡献·学习”</em>的理念建立此网站，开源部分团队成果。发布的所有开源源代码，均采用 <a href="http://aliceui.com/license.txt">MIT License</a> 许可。欢迎参与 Alice 的开发，或提出你宝贵的意见。</p>
<p>&nbsp;</p>
<p>官方站点：<a href="http://aliceui.com/" target="_blank">http://aliceui.com/</a></p>
<p>Github：<a href="https://github.com/sofish/Alice" target="_blank">https://github.com/sofish/Alice</a></p>
<p>&nbsp;</p>
<p>简单用了一下 感觉还不错哦<br />
为了方便大家打包压缩 我也写了个插件基于ant的打包工具</p>
<p><a href="https://github.com/sofish/Alice/tree/master/plugins/AntBuild" target="_blank">https://github.com/sofish/Alice/tree/master/plugins/AntBuild</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/2061.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Node入门  一本全面的Node.js教程 离线版下载</title>
		<link>http://www.iamued.com/qianduan/2038.html</link>
		<comments>http://www.iamued.com/qianduan/2038.html#comments</comments>
		<pubDate>Wed, 09 Nov 2011 05:14:00 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[node]]></category>
		<category><![CDATA[nodejs]]></category>
		<category><![CDATA[下载]]></category>
		<category><![CDATA[入门]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=2038</guid>
		<description><![CDATA[关于 本书致力于教会你如何用Node.js来开发应用，过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。 状态 你正在阅读的已经是本书的最终版。因此，只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时，才会进行更新。 本书中的代码案例都在Node.js 0.4.9版本中测试过，可以正确工作。 读者对象 本书最适合与我有相似技术背景的读者： 至少对一门诸如Ruby、Python、PHP或者Java这样面向对象的语言有一定的经验；对JavaScript处于初学阶段，并且完全是一个Node.js的新手。 这里指的适合对其他编程语言有一定经验的开发者，意思是说，本书不会对诸如数据类型、变量、控制结构等等之类非常基础的概念作介绍。要读懂本书，这些基础的概念我都默认你已经会了。 然而，本书还是会对JavaScript中的函数和对象作详细介绍，因为它们与其他同类编程语言中的函数和对象有很大的不同。 本书结构 读完本书之后，你将完成一个完整的web应用，该应用允许用户浏览页面以及上传文件。 当然了，应用本身并没有什么了不起的，相比为了实现该功能书写的代码本身，我们更关注的是如何创建一个框架来对我们应用的不同模块进行干净地剥离。 是不是很玄乎？稍后你就明白了。 本书先从介绍在Node.js环境中进行JavaScript开发和在浏览器环境中进行JavaScript开发的差异开始。 紧接着，会带领大家完成一个最传统的“Hello World”应用，这也是最基础的Node.js应用。 最后，会和大家讨论如何设计一个“真正”完整的应用，剖析要完成该应用需要实现的不同模块，并一步一步介绍如何来实现这些模块。 可以确保的是，在这过程中，大家会学到JavaScript中一些高级的概念、如何使用它们以及为什么使用这些概念就可以实现而其他编程语言中同类的概念就无法实现。 该应用所有的源代码都可以通过 本书Github代码仓库. 相关链接 在线阅读：http://www.nodebeginner.org/index-zh-cn.html 离线版（html）下载地址：http://115.com/file/cljz7jnf#nodejsstart.rar]]></description>
			<content:encoded><![CDATA[<h2>关于</h2>
<blockquote><p>本书致力于教会你如何用Node.js来开发应用，过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。</p></blockquote>
<p><a name="status"></a></p>
<h3>状态</h3>
<blockquote><p>你正在阅读的已经是本书的最终版。因此，只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时，才会进行更新。</p>
<p>本书中的代码案例都在Node.js 0.4.9版本中测试过，可以正确工作。</p></blockquote>
<p><a name="intended-audience"></a></p>
<h3>读者对象</h3>
<blockquote><p>本书最适合与我有相似技术背景的读者： 至少对一门诸如Ruby、Python、PHP或者Java这样面向对象的语言有一定的经验；对JavaScript处于初学阶段，并且完全是一个Node.js的新手。</p>
<p>这里指的适合对其他编程语言有一定经验的开发者，意思是说，本书不会对诸如数据类型、变量、控制结构等等之类非常基础的概念作介绍。要读懂本书，这些基础的概念我都默认你已经会了。</p>
<p>然而，本书还是会对JavaScript中的函数和对象作详细介绍，因为它们与其他同类编程语言中的函数和对象有很大的不同。</p></blockquote>
<p><a name="structure"></a></p>
<h3>本书结构</h3>
<blockquote><p>读完本书之后，你将完成一个完整的web应用，该应用允许用户浏览页面以及上传文件。</p>
<p>当然了，应用本身并没有什么了不起的，相比为了实现该功能书写的代码本身，我们更关注的是如何创建一个框架来对我们应用的不同模块进行干净地剥离。 是不是很玄乎？稍后你就明白了。</p>
<p>本书先从介绍在Node.js环境中进行JavaScript开发和在浏览器环境中进行JavaScript开发的差异开始。</p>
<p>紧接着，会带领大家完成一个最传统的“Hello World”应用，这也是最基础的Node.js应用。</p>
<p>最后，会和大家讨论如何设计一个“真正”完整的应用，剖析要完成该应用需要实现的不同模块，并一步一步介绍如何来实现这些模块。</p>
<p>可以确保的是，在这过程中，大家会学到JavaScript中一些高级的概念、如何使用它们以及为什么使用这些概念就可以实现而其他编程语言中同类的概念就无法实现。</p>
<p>该应用所有的源代码都可以通过 <a href="https://github.com/ManuelKiessling/NodeBeginnerBook/tree/master/code/application">本书Github代码仓库</a>.</p></blockquote>
<h2>相关链接</h2>
<p>在线阅读：<a href="http://www.nodebeginner.org/index-zh-cn.html" target="_blank">http://www.nodebeginner.org/index-zh-cn.html</a></p>
<p>离线版（html）下载地址：<a href="http://115.com/file/cljz7jnf#nodejsstart.rar" target="_blank">http://115.com/file/cljz7jnf#nodejsstart.rar</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/2038.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[原创]通过shtml实现重构页面模块化构建—实现交付物模块化</title>
		<link>http://www.iamued.com/qianduan/1998.html</link>
		<comments>http://www.iamued.com/qianduan/1998.html#comments</comments>
		<pubDate>Wed, 19 Oct 2011 13:39:43 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[shtml2html]]></category>
		<category><![CDATA[原创]]></category>
		<category><![CDATA[模块化]]></category>
		<category><![CDATA[重构]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1998</guid>
		<description><![CDATA[模块化思想已经不再是创新，陆续的演变成一种思维模式，在处理各种问题时都会考虑模块化思想 前端重构也已经有各种模块化的思想出现，结构模块化、样式模块化等等 今天和同事沟通视觉统一化的时候，发现流程中在产出物方面存在一个问题 如下图所示： 大家按照统一的思维过程在执行时 产出物在页面构建的环节，形成了一个聚合，从以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, 配置如下： AddType text/html .shtml AddOutputFilter INCLUDES .shtml 在 Nginx 开启 SSI ，加入以下3行就OK了，可以放在 http, server, 和 location 段都行 ssi on; ssi_silent_errors on; ssi_types text/shtml; SSI Include 指令语法，我们主要用这个语法来调用相关组件文件代码 &#60;!&#8211;#include virtual=”文件路径” &#8211;&#62; 在构建页面时 目录结构可以是 [...]]]></description>
			<content:encoded><![CDATA[<p>模块化思想已经不再是创新，陆续的演变成一种思维模式，在处理各种问题时都会考虑模块化思想</p>
<p>前端重构也已经有各种模块化的思想出现，结构模块化、样式模块化等等</p>
<p>今天和同事沟通视觉统一化的时候，发现流程中在<span style="color: #ff6600;">产出物方面</span>存在一个问题<br />
如下图所示：</p>
<p><a href="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/10/Screen-Shot-2011-10-19-at-下午8.58.36.png" rel="lightbox[1998]"><img class="alignnone size-full wp-image-1999" title="Screen Shot 2011-10-19 at 下午8.58.36" src="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/10/Screen-Shot-2011-10-19-at-下午8.58.36.png" alt="" width="636" height="252" /></a></p>
<p>大家按照统一的思维过程在执行时 产出物在页面构建的环节，形成了一个聚合，从以UI组件为单位变为了以page为单位的产出物，而之后到了后端研发时，其实Template还是需要再次分拆，由于这个问题，而产生了更大的沟通成本，降低了整个团队的效率</p>
<p>基于这个问题 我提出了一个解决方法 还算不上解决方案，短暂的解决一下</p>
<p>在页面构建的环境 通过webserver的SSI Include指令 将静态页面也进行模块化，在交付产出物的时候后端研发人员是很清晰的看到module的复用代码，也降低了重构页面时对于统一的ui而产生不同html和css代码的错误率</p>
<p>具体实现如下：</p>
<p>在开发(测试环境)  建立webserver（nginx、apache均可） 然后通过配置文件开启SSI支持</p>
<h3>Apache 开启SSI方式 <a href="http://www.uplinux.com/download/doc/apache/ApacheManual/howto/ssi.html">http://www.uplinux.com/download/doc/apache/ApacheManual/howto/ssi.html</a></h3>
<blockquote><p>要使服务器允许SSI，必须在<code>httpd.conf</code>文件或<code>.htaccess</code>文件中有如下配置：</p>
<div>
<p><code>Options +Includes</code></p>
</div>
<p>告诉服务器以允许解析文件中的SSI指令。注意，在多数配置中，多个<code><a href="http://www.uplinux.com/download/doc/apache/ApacheManual/mod/core.html#options">Options</a></code>指令会互相覆盖，所以，可能必须对需要SSI的特定目录使用<code>Options</code>，以确保位于最后并起作用。</p>
<p>并不是所有文件中的SSI指令都会被解析，所以，必须告诉Apache应该解析哪些文件。有两种方法，使Apache解析带有特定文件后缀的任何文件，比如<code>.shtml</code>, 配置如下：</p>
</blockquote>
<div>
<blockquote><p><code>AddType text/html .shtml<br />
AddOutputFilter INCLUDES .shtml</code></p>
</blockquote>
</div>
<h3>在 Nginx 开启 SSI ，加入以下3行就OK了，可以放在 http, server, 和 location 段都行</h3>
<div>
<blockquote>
<div>ssi on;<br />
ssi_silent_errors on;<br />
ssi_types text/shtml;</div>
</blockquote>
</div>
<h3>SSI Include 指令语法，我们主要用这个语法来调用相关组件文件代码</h3>
<blockquote><p>&lt;!&#8211;#include virtual=”文件路径” &#8211;&gt;</p>
</blockquote>
<p>在构建页面时 目录结构可以是</p>
<pre>demoproject/ 项目文件夹
|-- aboutus.shtml  综合性页面 包含module调用
|-- index.shtml    综合性页面 包含module调用
|-- other_page.shtml 综合性页面 包含module调用
|-- module  组件文件夹
|   |-- footer.html  组件文件
|   |-- header.html  组件文件
|   `-- other_module.html 组件文件
|-- images 其他静态文件
|-- js 其他静态文件
`-- style 其他静态文件</pre>
<p>这样 我们形成的综合性页面的代码中会包含module调用，在我们每次对通用组建修改时，只需要修改组建文件即可<br />
如下图，因为我们之前在webserver配置了SSI支持，所以我们能够实时预览效果<br />
<a href="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/10/Screen-Shot-2011-10-19-at-下午9.22.28.png" rel="lightbox[1998]"><img class="alignnone size-full wp-image-2001" title="Screen Shot 2011-10-19 at 下午9.22.28" src="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/10/Screen-Shot-2011-10-19-at-下午9.22.28.png" alt="" width="533" height="296" /></a></p>
<p>这样，除了在开发时方便了我们自己，我们的交付物也能够体现模块化思想，方便后端人员处理templates</p>
<p>&nbsp;</p>
<p><span style="color: #ff0000;">同时我也用python写了一个开源项目，方便使用shtml这种方式构建页面的同事 产出传统html交付物</span></p>
<h2>shtml2html项目</h2>
<div>
<p>介绍：替换shtml中include内容为真实调用内容 并在同级目录生成.html文件 给重构团队在构建页面时使用</p>
</div>
<div>项目地址：<a href="https://github.com/iamued/shtml2html">https://github.com/iamued/shtml2html</a></div>
<h3>使用方法：</h3>
<div>必须安装python环境 2.x版本</div>
<blockquote>
<div>Usage: python shtml2html.py path 支持文件和目录（递归处理）</div>
</blockquote>
<p>这是我目前的解决方法，正在试行中，小团队还没那么智能化，希望能给大家提供一些思路</p>
<p>如果你有更好的解决方案也请告诉我，多交流</p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1998.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>[前端开发利器]F5，实时页面刷新工具小测</title>
		<link>http://www.iamued.com/qianduan/1968.html</link>
		<comments>http://www.iamued.com/qianduan/1968.html#comments</comments>
		<pubDate>Thu, 15 Sep 2011 05:59:26 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[页面实现]]></category>
		<category><![CDATA[f5]]></category>
		<category><![CDATA[livereload]]></category>
		<category><![CDATA[xrefresh]]></category>
		<category><![CDATA[同步刷新]]></category>
		<category><![CDATA[多屏幕开发]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1968</guid>
		<description><![CDATA[一直在mac平台下工作，一直在用LiveReload（http://livereload.com/），windows下一直在用 xrefresh（http://xrefresh.binaryage.com/）做同步刷新还是很不错的，能够解决基本问题了 解释： 同步刷新：当文件修改时 浏览器自动刷新，如果你在做多屏幕开发的时候会尤其提升开发效率 昨天在微博上看到了f5这款国人开发的软件，今天收到激活码 ，在mac下进行了简单测试，没有什么问题 相比较的话，国人开发的这款软件基于air技术，能够比较好的跨平台，但是需要激活，不知道除了验证以外会不会有其他数据的收集 总体来讲 支持一下 官方网站：http://www.getf5.com// 视频演示： 下面有几个激活码 分享一下 c65af48f80e249d198293cdf1a9ee6a9 55a365fc7d7042e5be52ad6d24b77450]]></description>
			<content:encoded><![CDATA[<p>一直在mac平台下工作，一直在用<a href="http://livereload.com">LiveReload（http://livereload.com/）</a>，windows下一直在用 <a href="http://xrefresh.binaryage.com/">xrefresh（http://xrefresh.binaryage.com/）</a>做同步刷新还是很不错的，能够解决基本问题了</p>
<p>解释：</p>
<p>同步刷新：当文件修改时 浏览器自动刷新，如果你在做多屏幕开发的时候会尤其提升开发效率</p>
<p>昨天在微博上看到了f5这款国人开发的软件，今天收到激活码 ，在mac下进行了简单测试，没有什么问题</p>
<p>相比较的话，国人开发的这款软件基于air技术，能够比较好的跨平台，但是需要激活，不知道除了验证以外会不会有其他数据的收集</p>
<p>总体来讲 支持一下</p>
<p><img class="alignnone" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2011/09/055928WAe.png" alt="" width="276" height="423" /></p>
<p>官方网站：<a href="http://www.getf5.com//?1967">http://www.getf5.com//</a></p>
<p>视频演示：<br />
<object width="520" height="430" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://player.youku.com/player.php/sid/XMzAyNzYzMTcy/v.swf" /><param name="quality" value="high" /><param name="allowscriptaccess" value="sameDomain" /><embed width="520" height="430" type="application/x-shockwave-flash" src="http://player.youku.com/player.php/sid/XMzAyNzYzMTcy/v.swf" quality="high" allowscriptaccess="sameDomain" /></object></p>
<p>下面有几个激活码 分享一下</p>
<ul>
<li>c65af48f80e249d198293cdf1a9ee6a9</li>
<li>55a365fc7d7042e5be52ad6d24b77450</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1968.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>[原创]用Vmware Server搭建多虚拟环境 便于浏览器兼容性测试</title>
		<link>http://www.iamued.com/qianduan/1950.html</link>
		<comments>http://www.iamued.com/qianduan/1950.html#comments</comments>
		<pubDate>Sat, 23 Jul 2011 09:33:42 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[Linux]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[vmserver]]></category>
		<category><![CDATA[兼容性]]></category>
		<category><![CDATA[前端]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1950</guid>
		<description><![CDATA[目前正在梳理整个前端开发的流程及环境，也看了d2大家分享的关于前端各种自动化的演讲，便开始动手了 第一项是希望解决大家兼容性测试的问题，之前已经用虚拟机替换掉了ietester 但本地的虚拟机还是会出现团队成员不一致的情况，并且占用本地资源比较严重 在 美团 潘魏增 老兄帮助下，了解到美团目前在用的vmserver是很好的解决方案，再次感谢 同时参考了很多大家分享的东西，把自己遇到的问题也放出来和大家分享 下一步打算做一些前端自动化方面的脚本，希望和大家多学习，共进步 vmserver是vmware旗下的一款虚拟机服务器，可以通过web管理和操作虚拟机，同时支持多平台 windows、linux、macos等，免费的 可以在官网申请到授权码 这次我们选择的是linux版的vmware server 服务器环境：centos 5.5 vmserver版本：VMware-server-2.0.2-203138.i386 安装过程不详细叙述了 参考下面这篇文章即可，我也复制到最后给大家参考了 http://wuyizhaizhu.blog.163.com/blog/static/115151869201052201339515/ 安装后通过web可以访问，进入管理端，在里面安装虚拟机即可 我就讲讲我们在搭建过程中遇到的问题吧 1.安装遇到提示 You cannot install VMware Server on a system running a xen kernel 解决方法： http://zackofalltrades.com/2008/09/changing-to-a-non-xen-kernel-in-centos-5-so-you-can-run-vmware-server/ To do this, you first need to install the kernel. yum makes this easy: yum install kernel Then remove xen [...]]]></description>
			<content:encoded><![CDATA[<p><!-- p.p1 {margin: 0.0px 0.0px 14.0px 0.0px; line-height: 20.0px; font: 14.0px Palatino} p.p2 {margin: 0.0px 0.0px 14.0px 0.0px; line-height: 20.0px; font: 14.0px Palatino; color: #596219} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 20.0px; font: 13.0px Courier} p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 20.0px; font: 14.0px Palatino} p.p5 {margin: 0.0px 0.0px 14.0px 0.0px; line-height: 20.0px; font: 14.0px Verdana; color: #596219} p.p6 {margin: 0.0px 0.0px 14.0px 0.0px; line-height: 20.0px; font: 14.0px Palatino; min-height: 19.0px} p.p7 {margin: 0.0px 0.0px 17.0px 0.0px; line-height: 20.0px; font: 21.0px Palatino} p.p8 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 20.0px; font: 13.0px Courier; color: #fe3df7} p.p9 {margin: 0.0px 0.0px 14.0px 0.0px; line-height: 20.0px; font: 14.0px NSimSun} p.p10 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 20.0px; font: 13.0px Courier; min-height: 16.0px} span.s1 {color: #596219} span.s2 {color: #000000} span.s3 {font: 14.0px Courier} span.s4 {font: 14.0px Verdana} span.s5 {color: #fe3df7} span.s6 {font: 14.0px Palatino} -->目前正在梳理整个前端开发的流程及环境，也看了d2大家分享的关于前端各种自动化的演讲，便开始动手了<br />
第一项是希望解决大家兼容性测试的问题，之前已经用虚拟机替换掉了ietester<br />
但本地的虚拟机还是会出现团队成员不一致的情况，并且占用本地资源比较严重<br />
在 美团 <a href="http://panweizeng.com/">潘魏增</a> 老兄帮助下，了解到美团目前在用的vmserver是很好的解决方案，再次感谢</p>
<p>同时参考了很多大家分享的东西，把自己遇到的问题也放出来和大家分享</p>
<p>下一步打算做一些前端自动化方面的脚本，希望和大家多学习，共进步</p>
<p>vmserver是vmware旗下的一款虚拟机服务器，可以通过web管理和操作虚拟机，同时支持多平台 windows、linux、macos等，免费的 可以在官网申请到授权码</p>
<p>这次我们选择的是linux版的vmware server</p>
<p>服务器环境：centos 5.5</p>
<p>vmserver版本：VMware-server-2.0.2-203138.i386</p>
<p>安装过程不详细叙述了 参考下面这篇文章即可，我也复制到最后给大家参考了</p>
<p><a href="http://wuyizhaizhu.blog.163.com/blog/static/115151869201052201339515/">http://wuyizhaizhu.blog.163.com/blog/static/115151869201052201339515/</a></p>
<p>安装后通过web可以访问，进入管理端，在里面安装虚拟机即可</p>
<p><a href="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/07/login.jpg" rel="lightbox[1950]"><img class="alignnone size-full wp-image-1951" title="login" src="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/07/login.jpg" alt="" width="567" height="272" /></a><br />
<a href="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/07/ui.jpg" rel="lightbox[1950]"><img class="alignnone size-full wp-image-1952" title="ui" src="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/07/ui.jpg" alt="" width="800" height="398" /></a><br />
我就讲讲我们在搭建过程中遇到的问题吧</p>
<p><strong>1.安装遇到提示</strong></p>
<p>You cannot install VMware Server on a system running a xen kernel</p>
<p>解决方法：<br />
<a href="http://zackofalltrades.com/2008/09/changing-to-a-non-xen-kernel-in-centos-5-so-you-can-run-vmware-server/">http://zackofalltrades.com/2008/09/changing-to-a-non-xen-kernel-in-centos-5-so-you-can-run-vmware-server/</a></p>
<blockquote><p>To do this, you first need to install the kernel. yum makes this easy:</p>
<p>yum install kernel</p>
<p>Then remove xen and the kernel-xen packages:</p>
<p>yum remove xen kernel-xen</p>
<p>Then you have to specify which kernel you want to run in /boot/grub/grub.conf. In that file there’s a list of kernels available to boot from:</p>
<p>#boot=/dev/sda</p>
<p>default=1</p>
<p>timeout=5</p>
<p>splashimage=(hd0,0)/boot/grub/splash.xpm.gz</p>
<p>hiddenmenu</p>
<p>title CentOS (2.6.18-92.1.10.el5)</p>
<p>root (hd0,0)</p>
<p>kernel /boot/vmlinuz-2.6.18-92.1.10.el5 ro root=LABEL=/1 rhgb quiet</p>
<p>initrd /boot/initrd-2.6.18-92.1.10.el5.img</p>
<p>title CentOS (2.6.18-92.1.10.el5xen)</p>
<p>root (hd0,0)</p>
<p>kernel /boot/xen.gz-2.6.18-92.1.10.el5</p>
<p>module /boot/vmlinuz-2.6.18-92.1.10.el5xen ro root=LABEL=/1 rhgb quiet</p>
<p>module /boot/initrd-2.6.18-92.1.10.el5xen.img</p>
<p>The line that says default= specifies which kernel to load, where 0 is the first one listed in the file. In my case, I had to change the line that says default=1 to default=0 to specify the non-xen kernel.</p>
<p>Reboot, and you’re good to go – the VMware RPM will install, and VMware server runs just fine.</p></blockquote>
<p>2.安装好虚拟机后 通过NAT模式链接网络，web管理没有问题，如果想使用远程桌面登陆会发现没有网内ip，只有vm自带的虚拟ip</p>
<p><strong>解决方案：通过iptables转发服务器某端口到虚拟机的端口 使我们可以访问虚拟机上面的某些服务，比如远程桌面</strong></p>
<blockquote><p>启用ipv4端口转发功能 /etc/sysctl.conf 文件修改net.ipv4.ip_forward =1 即可</p>
<p>然后通过iptables配置，vm的NAT机制其实是通过虚拟网卡来实现虚拟机的网络共享的，所以你的服务器上面会有一块vm虚拟网卡，可以通过ifconfig看到</p>
<p>我的是：</p>
<p>vmnet8    Link encap:Ethernet  HWaddr 00:50:56:C0:00:08</p>
<p>inet addr:172.16.20.1  Bcast:172.16.20.255  Mask:255.255.255.0</p>
<p>进入虚拟机也可以看到虚拟机的ip也是这个网段的</p>
<p>下面我们来把服务器的某个端口 转发到虚拟机即可 iptables配置如下</p>
<p>192.168.0.90是服务器ip dport 12346 是服务器端的端口</p>
<p>172.16.20.130是虚拟机的ip ，3389是虚拟机的远程终端端口</p>
<p>重启iptables，通过远程桌面链接服务器ip：12346端口 成功了！</p>
<p>-A PREROUTING -d 192.168.0.90 -p tcp -m tcp –dport 12346 -j DNAT –to-destination 172.16.20.130:3389</p>
<p>-A POSTROUTING -d 172.16.20.128 -p tcp -m tcp –dport 3389 -j SNAT –to-source 172.16.20.1</p>
<p>3.因为多人来使用虚拟机，xp默认仅支持一个用户链接，所以需要hack一下远程服务 目前采用较多的是替换dll的方法 百度一下即可找到很多，这里不再叙述了</p></blockquote>
<p>4.我们还需要测试win7 发现在vmware server选择安装版本的时候没有win7的选项，这时可以通过选择Microsoft Windows Vista 安装即可</p>
<p>附：mac osx远程桌面下载 ，大家可以通过mac直接链接到虚拟机了<br />
<a href="http://www.microsoft.com/china/office/mac/downloads?pid=Mactopia_RDC&amp;fid=68346E0D-44D3-4065-99BB-B664B27EE1F0#viewer">http://www.microsoft.com/china/office/mac/downloads?pid=Mactopia_RDC&amp;fid=68346E0D-44D3-4065-99BB-B664B27EE1F0#viewer</a></p>
<p>至此，基本的环境搭建完毕了 放几张截图吧<br />
<a href="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/07/xp.jpg" rel="lightbox[1950]"><img class="alignnone size-full wp-image-1953" title="xp" src="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/07/xp.jpg" alt="" width="730" height="462" /></a></p>
<p>成功通过远程桌面链接到虚拟机环境</p>
<p>由于vmserver web Console 只支持windows 我在mac下开了个本地虚拟机截了一张Console操作的图</p>
<p>转载请注明:<a href="http://www.iamued.com/qianduan/1951.html">http://www.iamued.com/qianduan/1951.html</a><br />
参考：vmwareserver for centos 安装方法：</p>
<blockquote><p><strong>Install</strong></p>
<p>1. 在 VMware 中注册并下载 VMware Server 的 rpm 安装包<br />
注册的时候要注意一点，即问你准备在windows下和linux下各安装多少个copy，当然要填多点了 ：）</p>
<p>2. 使用 <strong>root</strong> 用户登录要安装的主机</p>
<p>3. 安装 rpm</p>
<p><strong>rpm -ivh VMware-server-2.0.1-156745.i386.rpm</strong></p>
<p>4、进行配置</p>
<p>4.1运行</p>
<p><strong>/usr/bin/vmware-config.pl</strong></p>
<p>开始配置界面，下面，我们尽量详细的讲解一下配置过程</p>
<p>4.2</p>
<p>Do you want networking for your virtual machines? (yes/no/help) <strong>[yes]</strong></p>
<p>是否需要配置网络，一般应该使用，所以使用缺省值。</p>
<p>4.3</p>
<p>Configuring a bridged network for vmnet0.</p>
<p>Please specify a name for this network.</p>
<p>[Bridged]<strong>vm-bridged</strong></p>
<p>首先配置使用桥接的网络，如果你希望你的虚拟机直接暴露于外网（并不特指internet，通常是指暴露在宿主机所在的子网内），可通过桥接的方法，需要指定该网络的名称，例如 <strong>vm-bridged</strong> ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。</p>
<p>4.4</p>
<p>Your computer has multiple ethernet network interfaces available: eth0, eth1.</p>
<p>Which one do you want to bridge to vmnet0? [eth0]</p>
<p>选择在哪块网卡上配置桥接网络，一般应该选择你能够上网的网卡，当然，如果你比较熟悉网络，也可进行其它的配置。</p>
<p>4.5</p>
<p>Do you wish to configure another bridged network? (yes/no) <strong>[no]</strong></p>
<p>是否需要在其它网卡上配置桥接网络，根据你的实际需要，一般是不需要的。</p>
<p>4.6</p>
<p>Do you want to be able to use NAT networking in your virtual machines? (yes/no) <strong>[yes]</strong></p>
<p>是否需要通过NAT配置网络，如果你希望你的虚拟机暴露在外网（并不特指internet，通常是指暴露在宿主机所在的子网内），NAT是常用的一种虚拟机网络配置方法（类似你通过一台路由器上网），通过其往往能够得到更高的网速，通过在宿主机的iptables中进行配置，可以很容易让类似 BT，EMule等软件获得更高的下载速度，所以我们选择 yes。</p>
<p>4.7</p>
<p>Configuring a NAT network for vmnet8.</p>
<p>Please specify a name for this network. [NAT]<strong>vm-nat</strong></p>
<p>配置使用NAT的网络名称，例如 <strong>vm-nat</strong> ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。</p>
<p>4.8</p>
<p>Do you want this program to probe for an unused private subnet? (yes/no/help) <strong>[yes]</strong></p>
<p>是否自动配置NAT使用的子网，一般选择自动配置了，除非你希望对子网进行规划，通常会自动配置 172.16.*.* 这样的子网。</p>
<p>4.9</p>
<p>Do you wish to configure another NAT network? (yes/no) <strong>[no]</strong></p>
<p>是否需要配置另外一个NAT网络，通常不需要。</p>
<p>4.10</p>
<p>Do you want to be able to use host-only networking in your virtual machines? <strong>[yes]</strong></p>
<p>是否希望虚拟机支持 host-only 的网络，如果你不希望将虚拟机暴露于外网（并不特指internet，通常是指暴露在宿主机所在的子网内），应该在创建虚拟机时选择这种网络。</p>
<p>4.11</p>
<p>Configuring a host-only network for vmnet1.</p>
<p>Please specify a name for this network. [HostOnly] <strong>vm-hostonly</strong></p>
<p>配置使用NAT的网络名称，例如 <strong>vm-hostonly</strong> ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。</p>
<p>4.12</p>
<p>Do you want this program to probe for an unused private subnet? (yes/no/help) <strong>[yes]</strong></p>
<p>是否自动配置HostOnly使用的子网，一般选择自动配置了，除非你希望对子网进行规划，通常会自动配置 172.16.*.* 这样的子网。</p>
<p>4.13</p>
<p>Do you wish to configure another host-only network? (yes/no) <strong>[no]</strong></p>
<p>是否需要配置另外一个HostOnly网络，通常不需要。</p>
<p>4.14</p>
<p>Please specify a port for remote connections to use [902]</p>
<p>指定远程连接端口，VMware Server安装完成后，可通过其一套Web界面进行访问，在这套界面中，有一个 Console（控制台）的功能，该功能通过在浏览器中安装一个插件，可以实现通过浏览器查看和管理被安装的虚拟机（如果你用过rdesktop、symantec pc-anywhere或KVM，你应该明白我在说什么），这个插件需要通过服务器上的这个端口获得数据（所以，如果你的宿主机前有防火墙，需要开通此端口的TCP协议），一般我们就用缺省的端口就好了，除非你的端口已经被占用，BTW，查看端口被谁打开的方法是：</p>
<p>lsof -i :902</p>
<p>如果出现结果，则可以通过进程号获得什么进程打开了此端口。</p>
<p>4.15</p>
<p>Please specify a port for standard http connections to use [8222]</p>
<p>同上，web访问界面使用的http端口，安装完成后，你可以通过 <a href="http://www.xxx.com:8222/">http://www.xxx.com:8222</a> 来访问 VMware Server的Web管理界面，需要在防火墙内打开此端口的TCP协议。</p>
<p>4.16</p>
<p>Please specify a port for secure http (https) connections to use [8333]</p>
<p>同上，web访问界面使用的https端口，安装完成后，你可以通过 <a href="https://www.xxx.com:8333/ui">https://www.xxx.com:8333/ui</a> 来访问 VMware Server的Web管理界面，需要在防火墙内打开此端口的TCP协议。</p>
<p>4.17</p>
<p>The current administrative user for VMware Server  is ”.  Would you like to specify a different administrator? [no]<strong>yes</strong></p>
<p>这里我们一般不能用缺省选项，应该选择 <strong>yes</strong> ，这个配置的意思是说当前 VMware Server 的管理员尚未指定（”的意思可不就是没指定嘛，当然，也可能有别的含义，不过我们不是测试人员，没有必要都搞明白），是否需要指定–当然要指定了。</p>
<p>4.18</p>
<p>Please specify the user whom you wish to be the VMware Server administrator</p>
<p>选择宿主机上的一个已有的用户作为其管理员，这里的用户是指linux系统的用户，当然应该有密码了，一般为了安全起见，应该创建一个单独的用户，例如 <strong>vmware</strong> 什么的，并指定其密码，不过可能不需要有 home 目录，也最好不给它 shell。</p>
<p>4.19</p>
<p>In which directory do you want to keep your virtual machine files?</p>
<p>[/var/lib/vmware/Virtual Machines]</p>
<p>指定虚拟机存放的目录，即其 DataStore 的概念，这里可能会占用较多的空间（看你装多少操作系统，系统中有多少内容了），所以最好放置在有足够空间的位置，一般我们的 var 或 home 通常会是空间比较大的地方，所以，看你自己的情况了。</p>
<p>4.20</p>
<p>The path “/home/vmware/Virtual Machines” does not exist currently. This program</p>
<p>is going to create it, including needed parent directories. Is this what you</p>
<p>want? [yes]</p>
<p>如果你指定了一个不存在的目录，会提示你是否要自动创建，当然要创建了。</p>
<p>4.21</p>
<p>Please enter your 20-character serial number.</p>
<p>Type XXXXX-XXXXX-XXXXX-XXXXX or &#8216;Enter&#8217; to cancel:</p>
<p>毕竟，只是一个free的软件，序列号还是需要的，在 VMware注册的时候会在激活邮件中获取到，你应该将其妥善保存好。</p>
<p>4.22</p>
<p>In which directory do you want to install the VMware VIX API binary files?</p>
<p>[/usr/bin]</p>
<p>选择 VMware VIX API binary files 的安装位置，VMware VIX API 是很有用的东东，特别是在你的虚拟机比较多，需要自己写脚本进行管理的情况下，你可以在脚本中通过调用VMware VIX API，完成虚拟机的启动、关闭、备份等日常工作，以后我们会对此进行专门的说明，请参看 VMware VIX API。</p>
<p>4.23</p>
<p>In which directory do you want to install the VMware VIX API library files?</p>
<p>[/usr/lib/vmware-vix/lib]</p>
<p>选择 VMware VIX API library files 的安装位置。</p>
<p>4.24</p>
<p>The path “/usr/lib/vmware-vix/lib” does not exist currently. This program is</p>
<p>going to create it, including needed parent directories. Is this what you want?</p>
<p>[yes]</p>
<p>是否自动创建 VMware VIX API library files 的安装目录，当然了。</p>
<p>4.25</p>
<p>In which directory do you want to install the VMware VIX API document pages?</p>
<p>[/usr/share/doc/vmware-vix]</p>
<p>指定VMware VIX API 的文档的安装位置。</p>
<p>4.26</p>
<p>The path “/usr/share/doc/vmware-vix” does not exist currently. This program is</p>
<p>going to create it, including needed parent directories. Is this what you want?</p>
<p>[yes]</p>
<p>是否自动创建 VMware VIX API 文档的安装目录，当然了。</p>
<p>4.27</p>
<p>The installation of VMware VIX API 1.6.2 build-156745 for Linux completed</p>
<p>successfully. You can decide to remove this software from your system at any</p>
<p>time by invoking the following command: “/usr/bin/vmware-uninstall-vix.pl”.</p>
<p>告诉你 VMware VIX API 已安装完成，可以在以后通过 /usr/bin/vmware-uninstall-vix.pl 进行卸载，如果你以后不想再使用 VMware Server（你可能有了更好的选择，例如开源的 KVM），你可以先使用 /usr/bin/vmware-uninstall-vix.pl 卸载 VIX API，然后使用rpm卸载VMware Server。</p>
<p>4.28</p>
<p>基本的配置过程就是以上这些，在配置完成后，系统会尝试自动启动虚拟机，并会在系统重启时自动启动 VMware Server。</p>
<p>5. 使用 VMware Server</p>
<p>作为安装和配置之后，下面我们来介绍一下如何使用 VMware Server。</p>
<p>5.1 配置防火墙</p>
<p>首先，如果你的宿主机上安装有防火墙，并且希望通过其它机器上的浏览器访问宿主机上的管理界面，需要在宿主机上的防火墙上进行设置，假设你使用 <strong>iptables</strong>，你可以</p>
<p>vi /etc/sysconfig/iptables</p>
<p>在其中适当的位置加入</p>
<p>-A RH-Firewall-1-INPUT -m state &#8211;state NEW -m multiport -p tcp &#8211;dport 902,8222,8333 -j ACCEPT</p>
<p>然后重启服务</p>
<p>service iptables restart</p>
<p>5.2 在浏览器中访问 VMware Server</p>
<p>在浏览器中输入 http://www.xxx.com:8222 ，其中 www.xxx.com 是你的宿主机的地址，如果你在本机访问，可以使用localhost ，此时，页面会自动跳转至 https://www.xxx.com:8333/ui ，并报出提示</p>
<p>www.xxx.com:8333 使用了无效的安全证书。</p>
<p>这是由于使用了非正式发布的证书，可以让浏览器接收该证书，当然，如果你愿意，也可以加入正式的证书，请参考 在VMware Server 中使用证书。需要注意的是，有时候会无法打开loading页面，例如在 firefox 的错误控制台内可以看到类似这样的错误</p>
<p>Error: vmtn is not defined</p>
<p>Source File: https://vm.myserver.com:8333/ui/</p>
<p>Line: 130</p>
<p>Error: unterminated string literal</p>
<p>Source File: https://vm.myserver.com:8333/ui/jslib-1.0.128374/.jslib.js</p>
<p>Line: 1, Column: 120</p>
<p>Source Code:</p>
<p>d(),TIMEOUT:vmtn.util.EventObject.nextId()});var $super=$class.parent.prototype;})(); (function(){var $class=new $Class(“vmtn.</p>
<p>Error: syntax error</p>
<p>Source File: https://vm.myserver.com:8333/ui/jslib-1.0.128374/.wbc.js</p>
<p>Line: 1, Column: 77</p>
<p>Source Code:</p>
<p>is._config.getFinalData();},setSelection:function(selection){var oldSelection=</p>
<p>Error: vmtn is not defined</p>
<p>Source File: https://vm.myserver.com.ch:8333/ui/</p>
<p>Line: 122</p>
<p>这时，我们清空浏览器的缓存，再重新访问，一般就可以解决问题了（如果你有更好的办法，请mail我：<a href="mailto:wanxiren@gmail.com">wanxiren@gmail.com</a> ）。</p>
<p>5.3 创建虚拟机<br />
按照提示一步一步创建就可以了，需要注意的是，最好在创建时选择的CPU多一些，内存也大一些，将来在真正使用时可以从大改小，但不能从小改大。对于虚拟机来说，配置稍微多一些的内存是必要的，这可以尽量避免换页操作，从而减少IO操作，以提升虚拟机性能。</p>
<p>5.4 安装操作系统<br />
将虚拟机关机，然后创建CD/DVD drive，选择你要安装的操作系统镜像文件（iso文件），然后开机，即可进行操作系统的安装工作。</p>
<p>5.5 复制虚拟机<br />
如果我们已经安装好了一个虚拟机，为了方便下次安装，可将其复制出来，对虚拟机关机，然后到虚拟机的数据目录下找到刚才装好的操作系统，将整个目录进行备份即可。下次安装时，将该目录复制到虚拟机的数据目录下，改名成你希望的名字，然后在web管理界面中创建虚拟机（创建时直接选择刚才复制过来的目录）并开机，在开机时，有一个重要的提示，就是问你这个虚拟机是“移动过来的”还是“复制过来的”，一般应该选择是“复制过来的”（这样会对其重新进行配置），然后就可以使用了。</p>
<p>5.6 使用Console<br />
在虚拟机开机后，点击 Console 标签，第一次点击时会提示是否需要“Install plug-in”，这个插件就是在浏览器中操作虚拟机的界面，安装之，重启浏览器，就可以访问虚拟机了。</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1950.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>【发布】豆瓣fm 简单扩展 支持各浏览器</title>
		<link>http://www.iamued.com/qianduan/1900.html</link>
		<comments>http://www.iamued.com/qianduan/1900.html#comments</comments>
		<pubDate>Fri, 01 Jul 2011 05:56:42 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[douban.fm]]></category>
		<category><![CDATA[sae]]></category>
		<category><![CDATA[扩展]]></category>
		<category><![CDATA[豆瓣]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1900</guid>
		<description><![CDATA[听豆瓣电台的时候 听到好歌 想看下歌词或者下载 发现很费劲 标题也不能复制 就给自己开发了这个小扩展 可以在豆瓣播放器下面显示 歌词 和 下载的 链接 效果见下图： 项目发布地址：http://dbfmshow.sinaapp.com/ 借此机会也学习了不少东西 Chrome扩展的相关知识 ，利用浏览器标签实现部分功能（云输入法也是这样实现的），同时还学习了一下SAE的部分使用方法]]></description>
			<content:encoded><![CDATA[<p>听豆瓣电台的时候 听到好歌 想看下歌词或者下载 发现很费劲 标题也不能复制 就给自己开发了这个小扩展</p>
<p>可以在豆瓣播放器下面显示 歌词 和 下载的 链接</p>
<p>效果见下图：</p>
<p><a href="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/07/dbdemo.jpg" rel="lightbox[1900]"><img title="dbdemo" src="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/07/dbdemo.jpg" alt="" width="596" height="379" /></a></p>
<p>项目发布地址：<a href="http://dbfmshow.sinaapp.com/" target="_blank">http://dbfmshow.sinaapp.com/</a></p>
<p>借此机会也学习了不少东西</p>
<p>Chrome扩展的相关知识 ，利用浏览器标签实现部分功能（云输入法也是这样实现的），同时还学习了一下SAE的部分使用方法</p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1900.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>用JqGrid简单实现了一个查询数据效果 基于本地静态数据</title>
		<link>http://www.iamued.com/qianduan/1894.html</link>
		<comments>http://www.iamued.com/qianduan/1894.html#comments</comments>
		<pubDate>Tue, 21 Jun 2011 15:40:40 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[页面实现]]></category>
		<category><![CDATA[git]]></category>
		<category><![CDATA[jqgrid]]></category>
		<category><![CDATA[前端]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1894</guid>
		<description><![CDATA[截图： demo见：http://www.iamued.com/demo/Mselect/ 代码：https://github.com/iamued/Mselect 也借此机会尝试用了一下git 貌似还不错哦~]]></description>
			<content:encoded><![CDATA[<p>截图：</p>
<p><a href="http://www.iamued.com/demo/Mselect/" target="_blank"><br />
<img class="alignleft size-full wp-image-1897" title="demo" src="http://iamued-wordpress.stor.sinaapp.com/uploads/2011/06/demo1.jpg" alt="" width="566" height="357" /></a></p>
<p>demo见：<a href="http://www.iamued.com/demo/Mselect/" target="_blank">http://www.iamued.com/demo/Mselect/</a></p>
<p>代码：<a href="https://github.com/iamued/Mselect" target="_blank">https://github.com/iamued/Mselect</a></p>
<p>也借此机会尝试用了一下git 貌似还不错哦~</p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1894.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>[转]让Web开发者事半功倍的8个网站</title>
		<link>http://www.iamued.com/qianduan/1890.html</link>
		<comments>http://www.iamued.com/qianduan/1890.html#comments</comments>
		<pubDate>Mon, 20 Jun 2011 01:19:41 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[事半功倍]]></category>
		<category><![CDATA[开发]]></category>
		<category><![CDATA[页面实现]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1890</guid>
		<description><![CDATA[1. Min.us: 上传图片的最简单方式 任何开发人员、设计师、网络管理员都必须跟客户和同事在线分享图片。Min.us的全部服务就是让你极度简单地上传图片：只需把图片拖拽到Min.us的网页里，图片就会保存在服务器上。并且自动生成短网址，这样你就可以通过这个网站分享图片了。 访问 Min.us 2. Wirify: 把任何网页转换成线框图 设计网站时线框图非常有用。Wirify是一个可以把任何网页立刻转换成线框图的书签工具，这样你就可以学习或应用到自己的工作中。 访问 Wirify 3. CSS Resetr: 查看和比较CSS resets CSS resets是所有样式表的必需品，以在不同的浏览器之间渲染。2004年以来，已经发布了许多不同的CSS resets。那么，哪个才是最适合你的项目的呢?CSS Resetr可以让你比较最流行的resets对同一个网页的渲染效果。 访问 CSS Resetr 4. Head JS: 用2.30 kb的Javascript代码来提速你的网站 Head JS是一段简单、轻量的脚本代码，通过像加载图片一样加载其他脚本，让你的网站更快。Head JS能做许多工作使你的网站变得现代化：支持CSS3、动态CSS等等。 访问 Head js 5. Copy Paste Character: 轻松使用特殊字符 特殊字符处理起来很麻烦，因为键盘上没有，而且你不知道对应的ASCII码。当然，你可以找一份ASCII码表放在桌面上，或者使用一个叫做Copy Paste Character的服务：只需点击所选字符，就可以复制到你的剪贴板。 访问 Copy Paste Character 6. DB Designr: 在线生成数据库模式 这是一个非常棒的简单在线生成数据库模式的工具。无需创建账户，你可以用你的Google账户登入。(我觉得我们伯乐在线网站的读者都有Google账户!说不定你就是通过Google阅读器在阅读此文。) 访问 DB Designr (得翻墙) 7. Web 2 pdf convert: [...]]]></description>
			<content:encoded><![CDATA[<p><!-- p.p1 {margin: 0.0px 0.0px 5.0px 0.0px; line-height: 21.0px; font: 14.0px Verdana} p.p2 {margin: 0.0px 0.0px 5.0px 0.0px; line-height: 21.0px; font: 14.0px Verdana; min-height: 17.0px} span.s1 {text-decoration: underline} --><strong> </strong></p>
<div id="_mcePaste"><strong></p>
<div id="_mcePaste"><span style="font-family: verdana, 'ms song', 宋体, Arial, 微软雅黑, Helvetica, sans-serif; line-height: 21px; font-weight: normal;"></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;"><strong style="padding: 0px; margin: 0px;">1. Min.us: 上传图片的最简单方式</strong></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;"><a style="color: black; text-decoration: underline; padding: 0px; margin: 0px;" href="http://images.51cto.com/files/uploadimg/20110421/1325120.jpg" target="_blank" rel="lightbox[1890]"><img style="width: 444px; height: 313px; padding: 0px; margin: 0px; border: 0px initial initial;" src="http://images.51cto.com/files/uploadimg/20110421/1325120.jpg" border="0" alt="对Web开发人员有用的8个网站" width="594" height="397" /></a></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">任何开发人员、设计师、网络管理员都必须跟客户和同事在线分享图片。Min.us的全部服务就是让你极度简单地上传图片：只需把图片拖拽到Min.us的网页里，图片就会保存在服务器上。并且自动生成短网址，这样你就可以通过这个网站分享图片了。</p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">访问 <a style="color: black; text-decoration: underline; padding: 0px; margin: 0px;" rel="”external" href="http://min.us/" target="_blank">Min.us</a></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;"><strong style="padding: 0px; margin: 0px;">2. Wirify: 把任何网页转换成线框图</strong></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">设计网站时线框图非常有用。Wirify是一个可以把任何网页立刻转换成线框图的书签工具，这样你就可以学习或应用到自己的工作中。</p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">访问 <a style="color: black; text-decoration: underline; padding: 0px; margin: 0px;" rel="”external" href="http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/" target="_blank">Wirify</a></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;"><strong style="padding: 0px; margin: 0px;">3. CSS Resetr: 查看和比较CSS resets</strong></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">CSS resets是所有样式表的必需品，以在不同的浏览器之间渲染。2004年以来，已经发布了许多不同的CSS resets。那么，哪个才是最适合你的项目的呢?CSS Resetr可以让你比较最流行的resets对同一个网页的渲染效果。</p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">访问 <a style="color: black; text-decoration: underline; padding: 0px; margin: 0px;" rel="”external" href="http://cssresetr.com/" target="_blank">CSS Resetr</a></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;"><strong style="padding: 0px; margin: 0px;">4. Head JS: 用2.30 kb的Javascript代码来提速你的网站</strong></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">Head JS是一段简单、轻量的脚本代码，通过像加载图片一样加载其他脚本，让你的网站更快。Head JS能做许多工作使你的网站变得现代化：支持CSS3、动态CSS等等。</p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">访问 <a style="color: black; text-decoration: underline; padding: 0px; margin: 0px;" rel="”external" href="http://headjs.com/" target="_blank">Head js</a></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;"><strong style="padding: 0px; margin: 0px;">5. Copy Paste Character: 轻松使用特殊字符</strong></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;"><a style="color: black; text-decoration: underline; padding: 0px; margin: 0px;" href="http://images.51cto.com/files/uploadimg/20110421/1325121.jpg" target="_blank" rel="lightbox[1890]"><img style="width: 462px; height: 346px; padding: 0px; margin: 0px; border: 0px initial initial;" src="http://images.51cto.com/files/uploadimg/20110421/1325121.jpg" border="0" alt="对Web开发人员有用的8个网站" width="594" height="397" /></a></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">特殊字符处理起来很麻烦，因为键盘上没有，而且你不知道对应的ASCII码。当然，你可以找一份ASCII码表放在桌面上，或者使用一个叫做Copy Paste Character的服务：只需点击所选字符，就可以复制到你的剪贴板。</p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">访问 <a style="color: black; text-decoration: underline; padding: 0px; margin: 0px;" rel="”external" href="http://www.copypastecharacter.com/" target="_blank">Copy Paste Character</a></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;"><strong style="padding: 0px; margin: 0px;">6. DB Designr: 在线生成数据库模式</strong></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">这是一个非常棒的简单在线生成数据库模式的工具。无需创建账户，你可以用你的Google账户登入。(我觉得我们伯乐在线网站的读者都有Google账户!说不定你就是通过Google阅读器在阅读此文。)</p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">访问 <a style="color: black; text-decoration: underline; padding: 0px; margin: 0px;" rel="”external" href="http://dbdsgnr.appspot.com/" target="_blank">DB Designr</a> (得翻墙)</p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;"><strong style="padding: 0px; margin: 0px;">7. Web 2 pdf convert: 把转换任意网页为PDF</strong></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">Web2PDF Converter是一个很有用的工具，能把转换任意网页为PDF文件。非常好用：我已经转换了5个页面，所有地方都跟html上的版本完全一样。</p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">访问<a style="color: black; text-decoration: underline; padding: 0px; margin: 0px;" rel="”external" href="http://www.web2pdfconvert.com/" target="_blank">web 2 pdf convert</a></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;"><strong style="padding: 0px; margin: 0px;">8. ScriptSrc：轻轻松松地把html页面连接到JS库中</strong></p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">你是否已经厌倦了在网上寻觅最新的Javascript库标签?ScriptSrc.net收录了jQuery、 Mootools、 Prototype等所有最新的标签，只需单击就可以把它复制到你的浏览器剪贴板。</p>
<p style="margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; padding: 0px;">访问 <a style="color: black; text-decoration: underline; padding: 0px; margin: 0px;" rel="”external" href="http://scriptsrc.net/" target="_blank">ScriptSrc</a></p>
<div></div>
<p></span></div>
<p></strong></div>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1890.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[转]jQuery1.5的改进细节</title>
		<link>http://www.iamued.com/qianduan/1868.html</link>
		<comments>http://www.iamued.com/qianduan/1868.html#comments</comments>
		<pubDate>Wed, 19 Jan 2011 12:39:28 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[jq]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1868</guid>
		<description><![CDATA[jQuery 1.5 beta1出来了，从学习跟进上来说，这一次已经比较晚了（我竟然不知道1.5什么时候出的alpha，就这么beta了）。 这个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, &#8230;)的形式，用于把函数添加到队列中。 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 ); } 变成了： [...]]]></description>
			<content:encoded><![CDATA[<p>jQuery 1.5 beta1出来了，从学习跟进上来说，这一次已经比较晚了（我竟然不知道1.5什么时候出的alpha，就这么beta了）。</p>
<p>这个1.5版本最大的更新是AJAX的完全重写，提供了更强的可扩展性。但是受制于精力和篇幅，对新的AJAX的分析还是放到下回，本篇先简单介绍一下细节方面的改进。</p>
<h3>jQuery._Deferred和jQuery.Deferred</h3>
<p>首先不得不说这两个新生事物，因为他们是作为基础设施存在，不把这两个东西讲明白了，有些问题根本没办法解释。</p>
<p>首先，jQuery.Deferred是jQuery._Deferred的增强版，因此对于这个问题，从jQuery._Deferred入手，就能说明一大半的问题。</p>
<p>什么是Deferred？从字面上看，我的第一反应是“延迟加载”，首字母大写的应该是“类型”的定义，所以这大概是一个“透明提供延迟加载功能”的类型吧。然而实际上，虽然确实带有那么一点点“延迟”的意思，这个东西却不是用来实现延迟加载的。</p>
<p>简单来说，jQuery._Deferred是一个函数队列，他的作用有以下几点：</p>
<ul>
<li>保存若干个函数。</li>
<li>在特定的时刻把保存着的函数全部执行掉。</li>
<li>执行过后，新进来的函数会立刻执行。</li>
</ul>
<p>感觉是不是和啥东西很像？对，jQuery的ready函数就是这样的逻辑，实际中jQuery 1.5中的ready函数也确实被嫁接到这上面去了。</p>
<p>jQuery._Deferred提供下面的接口：</p>
<ul>
<li>done：function(fn1, fn2, &#8230;)的形式，用于把函数添加到队列中。</li>
<li>fire：function(context,  args)的形式，使用context指定this对象，args指定参数，调用队列中所有函数。fire被调用后，_Deferred会进入 isResolved状态，未来对done的调用不会再保存函数，而是直接调用函数。</li>
<li>resolve：相当于调用fire(this, arguments)，一个简化的方法。</li>
<li>isResolved：用来判断_Deferred是否在isResolved状态，具体参考前面的fire函数的解释。</li>
<li>cancel：取消掉整个队列，这样不管未来是不是fire，队列中的函数都不会再被调用。</li>
</ul>
<p>说明白了jQuery._Deferred，再来看看jQuery.Deferred。这个东西其实就是2个_Deferred组成的，第一个称为 deferred，用于保管“正常”状态下的函数；第二个称为failDeferred，用于保管“出错”状态下的函数。同时 jQuery.Deferred提供了一些新的接口：</p>
<ul>
<li>then：function(done, fail)的形式，把done添加进deferred，把fail添加进failedDeferred。</li>
<li>fail：相当于failDeferred的done函数。</li>
<li>fireReject：相当于failDeferred的fire函数。</li>
<li>reject：相当于failDeferred的resolve函数。</li>
<li>isRejected：相当于failDeferred的isResolved函数。</li>
</ul>
<p>同时jQuery.Deferred取消了cancel函数。</p>
<p>那么这个是啥用的呢？有“正常”和“出错”2个状态，同时又是异步的，很容易就能想到……对，给AJAX用的，在下一篇分析中再详细说明。</p>
<h3>jQuery.ready的变化</h3>
<p>因为有了jQuery._Deferred这个东西，jQuery.ready函数变成依赖于函数队列，具体的变化有：</p>
<p>原来的readyList变量已经不再是一个数组，而变成了jQuery._Deferred对象。</p>
<p>原本在DOMContentLoaded时，调用readList中所有函数的逻辑，现在也使用了jQuery._Deferred中，原来的代码：</p>
<pre><code>while ( (fn = ready[ i++ ]) ) {
    fn.call( document, jQuery );
}</code></pre>
<p>变成了：</p>
<pre><code>readyList.fire( document , [ jQuery ] );</code></pre>
<h3>jQuery.parseXML函数</h3>
<p>新增了静态函数jQuery.parseXML，用于提供浏览器兼容的从字符串转为XML文档的功能。</p>
<p>该函数的逻辑网上有很多，jQuery也没有特别的地方，大致分为以下2种：</p>
<ul>
<li>对于标准浏览器，使用DOMParser对象：
<pre><code>var parser = new DOMParser();
var xml = parser.parseFromString(text, 'text/html');</code></pre>
</li>
<li>对于IE，使用Microsoft.XMLDOM对象：
<pre><code>var parser = new ActiveXObject('Microsoft.XMLDOM');
parser.async = 'false';
parser.loadXML(text);
var xml = parser.documentElement;</code></pre>
</li>
</ul>
<h3>data部分</h3>
<p>添加了jQuery.hasData函数，用于判断一个元素是否有jQuery附加上去的数据。</p>
<p>修改了jQuery.expando的实现，在原来单纯地取当前时间的基础上，添加了一个随机数：</p>
<pre><code>expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" );</code></pre>
<p>这样保证在同一时间，引入多个jQuery副本，这几个副本之间的expando不会相互冲突，导致元素上的data变得错乱。一般来说，是不会引入多个jQuery副本的，但是使用SealJS等的时候，配置不当的话，也是很容易出现此类问题的。</p>
<h3>DOM操作部分</h3>
<p>原本的hasClass、addClass、removeClass函数都需要将元素的class属性分隔为数组，在1.4.4版本中，通过\n或\t进行分隔，在1.5中增加了一个\r，用于对应Windows平台下的换行符（\r\n）。</p>
<p>jQuery.fn.attr函数，1.4.4版本中拒绝从TextNode和CommentNode上获取属性，在1.5版本中添加了一个AttributeNode（noteType == 2）。</p>
<p>在1.4.4版本中，jQuery会在页面unload的时候清理掉由jQuery维护的所有DOM事件，这是为了避免IE的内存泄露问题。但是在1.5中这一段代码<em>不见了</em>，不知是出于什么考虑。</p>
<p>对于IE下使用cloneNode复制节点，会将事件也一起复制过来的问题，1.4.4中是采取复制innerHTML的方式给予解决，而在1.5中则采纳了mootools团队提供的方法，使用cloneFixAttribute函数修正该问题。</p>
<p>cloneFixAttribute函数们于jQuery 1.5 beta1源码文件的5388-5438行，处理IE的BUG的原理很简单，当然前端里一些看似简单的东西，都是很难发现的：</p>
<ol>
<li>IE中有个叫clearAttributes的函数，会清除到节点上的所有属性，顺便把和事件相关的onclick之类的属性也去掉了。在复制出来的节点上调用这个函数，就会把属性清得干干净净。</li>
<li>IE中还有一个叫mergeAttributes的函数，把一个节点的属性复制到另一个节点上，但他不会把和事件相关的属性复制过去。所以再把原始节点调用mergeAttributes，把属性重新放回复制出来的节点上，这就相当于起到了去除事件相关属性的作用。</li>
</ol>
<p>另外cloneFixAttribute函数还处理了非常多IE6-8在cloneNode上的兼容性问题，非常值得详细研究。</p>
<h3>AJAX部分</h3>
<p>AJAX已经完全重写了，只留下一点边边角角保留着1.4.4版本的风采，这里只抽取一部分进行简单的说明。</p>
<p>原来版本中$.get和$.post的实现非常相似，具体来说仅有一个method配置项不同，因此在1.5版本中被合并起来了：</p>
<pre><code>$.each(['get', 'post'], function(i, method) {
    $[method] = function() { ... };
});</code></pre>
<p>ajaxSetup函数现在加了一行<code>return this;</code>，可以链式调用了。</p>
<p>serializeArray函数现在统一将value中的换行符替换成Windows的风格（\r\n）。</p>
<p>AJAX的回调函数中，作为参数的对象不再是原生的XMLHTTPRequest，而是jQuery自己封装的称为jXHR的对象，这个对象提供了XMLHTTPRequest的常用接口。</p>
<p>原本对于“请求成功”的浏览器状态码，除200-299以及304外，还有一个1223，来自于IE的一个BUG，会将204的状态码变成 1223。现在因为有了jXHR对象，相当于中间多了一层，因此从jXHR对象获取statusCode不会出现1223的情况，已经被变回204了。</p>
<p>jQuery.ajax函数的配置项中多了一个statusCode项，其结构为map，用于指定返回特定状态码时的回调函数，大致形式如下：</p>
<pre><code>jQuery.ajax({
    url: 'xxx',
    statusCode: {
        200: function() { 处理请求成功 },
        404: function() { 处理页面未找到 },
        503: function() { 处理Service Unavailable }
    }
});</code></pre>
<p>再添加了这个回调后，jQuery.ajax函数已经有非常多的回调函数，其触发过程如下：</p>
<ol>
<li>根据返回的状态码，触发success或者error回调。</li>
<li>根据状态码，触发对应的statusCode回调。</li>
<li>触发complete回调。</li>
<li>触发全局ajaxComplete回调。</li>
<li>如果此时没有正在执行的AJAX，触发全局ajaxStop回调。</li>
</ol>
<h3>其他细节</h3>
<p>入口函数jQuery.fn.init现在多了一个参数，值始终为rootjQuery，用于加速init函数中对rootjQuery变量的查找速度（减少了一层作用域）：</p>
<pre><code>//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 );
}</code></pre>
<p>jQuery对象支持继承了，具体的修改是将几处直接调用jQuery的代码改为了对this.constructor的调用：</p>
<pre><code>202行：return this.constructor( context ).find( selector );
253行：var ret = this.constructor();
334行：return this.prevObject || this.constructor(null);</code></pre>
<p>同时还提供了jQuery.subclass函数用于创建一个继承自jQuery的类型，由于不是很常用jQuery，更是从来没有用到过需要继承jQuery的情况，因此也不方便说这个功能的作用有多大。</p>
<p>转自:http://www.cnblogs.com/GrayZhang/archive/2011/01/18/jquery-1-5-enhanced-detail.html</p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1868.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>一句话解决IE6 鼠标闪烁 or 抖动的问题</title>
		<link>http://www.iamued.com/qianduan/1859.html</link>
		<comments>http://www.iamued.com/qianduan/1859.html#comments</comments>
		<pubDate>Fri, 17 Dec 2010 07:15:49 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[抖动]]></category>
		<category><![CDATA[闪烁]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1859</guid>
		<description><![CDATA[做一个效果遇到的问题 据说是IE6不缓存背景图片导致的 解决方法如下]]></description>
			<content:encoded><![CDATA[<p>做一个效果遇到的问题 据说是IE6不缓存背景图片导致的 解决方法如下</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;!--[if IE 6]&gt;

&lt;script&gt; document.execCommand(&quot;BackgroundImageCache&quot;, false, true); &lt;/script&gt;

&lt;![endif]--&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1859.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

