<?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; JavaScript脚本</title>
	<atom:link href="http://www.iamued.com/qianduan/js/feed" rel="self" type="application/rss+xml" />
	<link>http://www.iamued.com</link>
	<description>http://www.IamUED.com</description>
	<lastBuildDate>Wed, 28 Jul 2010 12:58:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>太NB了：Google Docs Ctrl + C 技术浅析</title>
		<link>http://www.iamued.com/qianduan/1612.html</link>
		<comments>http://www.iamued.com/qianduan/1612.html#comments</comments>
		<pubDate>Tue, 27 Jul 2010 09:52:29 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[前端]]></category>
		<category><![CDATA[复制]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1612</guid>
		<description><![CDATA[从玉伯那里转来的，Goole非常NB
用 google docs 打开 pdf 文件，选中文本：

表面上没有任何有趣的地方。但仔细一看，会发现选区的颜色是浅蓝色，而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性，立马 firebug:

不看不知道，一看真蹊跷。selection-highlight 是选区，选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性：Ctrl + C 可以复制图片中的文字！
google 太强悍了，好在前端代码都是开源的，下面简单分析下。
首先数据在哪呢，这个比较容易找到，在 firebug 里有一个请求返回的数据如下：
&#60;?xml version="1.0" encoding="UTF-8"?&#62;

&#60;pdf2xml&#62;
&#60;meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/&#62;
&#60;meta name="Producer" content="Adobe Acrobat 8.1"/&#62;
&#60;meta name="CreationDate" content="20100316080708-04'00'"/&#62;
&#60;page t="0" l="0" w="612" h="773"&#62;
 &#60;text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271,
7,280,39,322,7,330,11,344,24,370,23,395,20,418,7"&#62;
Please post comments or corrections to the Author Online forum at&#60;/text&#62;
...
有了这份数据，就可以根据选区得到对应的文本。
接下来的问题是，如何将文本放到剪贴板里？第一反应是用 flash 实现，但感觉 google 不会这么做。禁用掉 flash [...]]]></description>
			<content:encoded><![CDATA[<p>从<a href="http://lifesinger.org/blog/2010/07/goog-docs-copy-tech/">玉伯</a>那里转来的，Goole非常NB<br />
用 google docs 打开 pdf 文件，选中文本：<br />
<img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/07/175239CWS.png" alt="" width="429" height="171" /></p>
<p>表面上没有任何有趣的地方。但仔细一看，会发现选区的颜色是浅蓝色，而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性，立马 firebug:<br />
<img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/07/175243Tbx.png" alt="" width="526" height="324" /></p>
<p>不看不知道，一看真蹊跷。<code>selection-highlight</code> 是选区，选区下面是一张图片 <code>page-image</code>!<br />
于是立刻发现一个非常牛逼的特性：<strong><code>Ctrl + C</code> 可以复制图片中的文字！</strong></p>
<p>google 太强悍了，好在前端代码都是开源的，下面简单分析下。</p>
<p>首先数据在哪呢，这个比较容易找到，在 firebug 里有一个请求返回的数据如下：</p>
<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;

&lt;pdf2xml&gt;
&lt;meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/&gt;
&lt;meta name="Producer" content="Adobe Acrobat 8.1"/&gt;
&lt;meta name="CreationDate" content="20100316080708-04'00'"/&gt;
&lt;page t="0" l="0" w="612" h="773"&gt;
 &lt;text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271,
7,280,39,322,7,330,11,344,24,370,23,395,20,418,7"&gt;
Please post comments or corrections to the Author Online forum at&lt;/text&gt;
...</pre>
<p>有了这份数据，就可以根据选区得到对应的文本。</p>
<p>接下来的问题是，如何将文本放到剪贴板里？第一反应是用 flash 实现，但感觉 google 不会这么做。禁用掉 flash 插件后，功能正常，这说明是用 js 实现的。</p>
<p>通过 Profile 工具 + Fiddler + 肉眼识别 + 运气，终于定位到了关键代码：</p>
<pre>n.am = function(a) {
    if (! (!this.k.Ca &amp;&amp; Mr(this, a))) {
        ac &amp;&amp; this.lf.focus();
        this.lf.select();
        Nr(this, a)
    }
};</pre>
<p>只要注释掉上面的代码，<code>Ctrl + C</code> 复制功能就无效。<code>focus</code> 和 <code>select</code> 为我们提供了进一步线索，在 HTML 里，发现了秘密：<br />
<img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/07/175246JOL.png" alt="" width="514" height="50" /></p>
<p>到此真相大白：当用户按下 <code>Ctrl + C</code> 时，js 会注入事件，首先根据坐标从数据里取出对应文本，然后将文本赋值给 textarea, 并将其激活和选中。这样，就和用户选中 textarea 的内容，再按下 <code>Ctrl + C</code> 的效果是一样了。</p>
<p>强悍的 google, 技术创新无处不在！</p>
<p>注意：利用 textarea 只能复制纯文本，如果想复制富文本，可以借鉴 google docs 编辑 Word 文档时的处理方式：采用 iframe 充当临时容器，有兴趣的可以进一步研究。</p>
<p>简单演示：<a href="http://lifesinger.github.com/lab/2010/goog-docs-copy-demo.html">goog-docs-copy-demo.html</a></p>
<p>发现这个秘密后，最近在疯狂搞编辑的牛人<a href="http://yiminghe.javaeye.com/">承玉</a>（欢迎搞编辑器的其他牛人加盟）立刻想到了各大站长们非常喜爱的功能：<a href="http://yiminghe.javaeye.com/blog/722264">附带警告信息的禁止copy</a>. 据说，能成功复制的，都不是“人”。</p>
<p>我的尝试是：点击按钮，复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去，但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制，对于触发的异步 <code>Ctrl + C</code>, 浏览器会限制其功能。</p>
<p>Google 的产品里有很多秘密，真诱人，创意无限！</p>
<h2  class="related_post_title">您可能还关注的？</h2><ul class="related_post"><li><a href="http://www.iamued.com/qianduan/1486.html" title="判断 iframe 是否加载完成的完美方法">判断 iframe 是否加载完成的完美方法</a></li><li><a href="http://www.iamued.com/qianduan/1382.html" title="即拷即用动画函数：透明度渐变、位置移动、尺寸变化">即拷即用动画函数：透明度渐变、位置移动、尺寸变化</a></li><li><a href="http://www.iamued.com/qianduan/1010.html" title="[原创]用JS控制显示子菜单个数 自动下拉">[原创]用JS控制显示子菜单个数 自动下拉</a></li><li><a href="http://www.iamued.com/qianduan/600.html" title="offsetLeft and offsetTop gives wrong coords in IE ">offsetLeft and offsetTop gives wrong coords in IE </a></li><li><a href="http://www.iamued.com/qianduan/1450.html" title="讨论闭包传入参数：window &#038; undefined">讨论闭包传入参数：window &#038; undefined</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1612.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[分享]W3C Javascript 最新Chm格式下载</title>
		<link>http://www.iamued.com/qianduan/1547.html</link>
		<comments>http://www.iamued.com/qianduan/1547.html#comments</comments>
		<pubDate>Wed, 14 Jul 2010 12:24:28 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[chm]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[w3c]]></category>
		<category><![CDATA[帮助]]></category>
		<category><![CDATA[索引]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1547</guid>
		<description><![CDATA[感谢Blueidea的Zerolone同学为我们提供了W3C Javascript 最新Chm版哦：）
确实很好，支持索引，可以方便的离线查询了
下载
http://code.google.com/p/mootoolstools/downloads/list

您可能还关注的？一个在线JS代码调试器:jsfiddle分享：建议“前端开发”人员掌握的技术测试你的JavaScript能力？ 我还需要恶补！关于top置顶的交互体验CSS阴影详解 ]]></description>
			<content:encoded><![CDATA[<p>感谢Blueidea的<a id="userinfo4978431" href="http://bbs.blueidea.com/space-uid-117813.html" target="_blank">Zerolone</a>同学为我们提供了W3C Javascript 最新Chm版哦：）</p>
<p>确实很好，支持索引，可以方便的离线查询了<br />
下载</p>
<p><a href="http://code.google.com/p/mootoolstools/downloads/list" target="_blank">http://code.google.com/p/mootoolstools/downloads/list</a></p>
<p><a href="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/07/202447SfJ.jpg&amp;noupdate=yes&amp;nothumb=yes" target="_blank"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/07/202447SfJ.jpg" alt="w3c.JPG" /></a></p>
<h2  class="related_post_title">您可能还关注的？</h2><ul class="related_post"><li><a href="http://www.iamued.com/qianduan/1289.html" title="一个在线JS代码调试器:jsfiddle">一个在线JS代码调试器:jsfiddle</a></li><li><a href="http://www.iamued.com/qianduan/1278.html" title="分享：建议“前端开发”人员掌握的技术">分享：建议“前端开发”人员掌握的技术</a></li><li><a href="http://www.iamued.com/qianduan/1267.html" title="测试你的JavaScript能力？ 我还需要恶补！">测试你的JavaScript能力？ 我还需要恶补！</a></li><li><a href="http://www.iamued.com/qianduan/816.html" title="关于top置顶的交互体验">关于top置顶的交互体验</a></li><li><a href="http://www.iamued.com/qianduan/642.html" title="CSS阴影详解 ">CSS阴影详解 </a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1547.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>一个保证利润的彩票计算器[愁啊，我的数学功底]</title>
		<link>http://www.iamued.com/qianduan/1525.html</link>
		<comments>http://www.iamued.com/qianduan/1525.html#comments</comments>
		<pubDate>Sun, 04 Jul 2010 00:29:01 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[彩票计算]]></category>
		<category><![CDATA[算法]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1525</guid>
		<description><![CDATA[Demo：http://www.iamued.com/demo/jisuan.html
核心代码
 &#60;script&#62;
  function js(){
	var jine=parseInt(document.getElementById(&#34;je&#34;).value);//每注金额
	var jiangjin=parseInt(document.getElementById(&#34;jj&#34;).value);//每注奖金
	var num=parseInt(document.getElementById(&#34;num&#34;).value);//计算期数
	var win=parseInt(document.getElementById(&#34;win&#34;).value);//保证利润数
	var content=document.getElementById(&#34;content&#34;);//输出容器
	var countmoney=0;//累计总投入
	var janci=jiangjin-jine;//每注利润值
	for(var i=1;i&#60;=num;i++){
		//计算倍数
		var beishu=Math.ceil((countmoney+win)/janci);
		//累计投入金额
		countmoney=(countmoney+(beishu*jine));
		//本期奖金
		var nowjiangjin=(beishu*jiangjin);

		content.innerHTML=content.innerHTML+&#34;第&#34;+i+&#34;期&#38;nbsp需购买：&#34;+beishu+&#34;注&#38;nbsp;本期奖金：&#34;+nowjiangjin+&#34;&#38;nbsp;总投入:&#34;+countmoney+&#34;&#38;nbsp;净利润:&#34;+(nowjiangjin-countmoney)+&#34;&#60;br&#62;&#34;;
	}
  }
  &#60;/script&#62;

看具体效果的请去 Demo：http://www.iamued.com/demo/jisuan.html
还有一个C#软件版本的 直接放出下载地址吧 http://www.iamued.com/demo/jisuan.exe
就这么简单的一个算法 折腾了我半天 愁
随机日志网站内容决定网站的前途瞬间的设计(三)网页栅格系统研究（2）：蛋糕的切法YUI3设计中的激进和妥协重新发现HTML表格]]></description>
			<content:encoded><![CDATA[<p>Demo：<a href="http://www.iamued.com/demo/jisuan.html">http://www.iamued.com/demo/jisuan.html</a></p>
<p>核心代码</p>
<pre class="brush: jscript;"> &lt;script&gt;
  function js(){
	var jine=parseInt(document.getElementById(&quot;je&quot;).value);//每注金额
	var jiangjin=parseInt(document.getElementById(&quot;jj&quot;).value);//每注奖金
	var num=parseInt(document.getElementById(&quot;num&quot;).value);//计算期数
	var win=parseInt(document.getElementById(&quot;win&quot;).value);//保证利润数
	var content=document.getElementById(&quot;content&quot;);//输出容器
	var countmoney=0;//累计总投入
	var janci=jiangjin-jine;//每注利润值
	for(var i=1;i&lt;=num;i++){
		//计算倍数
		var beishu=Math.ceil((countmoney+win)/janci);
		//累计投入金额
		countmoney=(countmoney+(beishu*jine));
		//本期奖金
		var nowjiangjin=(beishu*jiangjin);

		content.innerHTML=content.innerHTML+&quot;第&quot;+i+&quot;期&amp;nbsp需购买：&quot;+beishu+&quot;注&amp;nbsp;本期奖金：&quot;+nowjiangjin+&quot;&amp;nbsp;总投入:&quot;+countmoney+&quot;&amp;nbsp;净利润:&quot;+(nowjiangjin-countmoney)+&quot;&lt;br&gt;&quot;;
	}
  }
  &lt;/script&gt;
</pre>
<p>看具体效果的请去 Demo：<a href="http://www.iamued.com/demo/jisuan.html">http://www.iamued.com/demo/jisuan.html</a></p>
<p>还有一个C#软件版本的 直接放出下载地址吧 <a href="http://www.iamued.com/demo/jisuan.exe">http://www.iamued.com/demo/jisuan.exe</a></p>
<p>就这么简单的一个算法 折腾了我半天 愁</p>
<h2  class="related_post_title">随机日志</h2><ul class="related_post"><li><a href="http://www.iamued.com/design/1242.html" title="懂得交互的视觉设计师更具有竞争力">懂得交互的视觉设计师更具有竞争力</a></li><li><a href="http://www.iamued.com/qianduan/1010.html" title="[原创]用JS控制显示子菜单个数 自动下拉">[原创]用JS控制显示子菜单个数 自动下拉</a></li><li><a href="http://www.iamued.com/qianduan/1180.html" title="Jquery1.4正式版发布了 JS库时代就是这样快">Jquery1.4正式版发布了 JS库时代就是这样快</a></li><li><a href="http://www.iamued.com/interaction/910.html" title="瞬间的设计(四)">瞬间的设计(四)</a></li><li><a href="http://www.iamued.com/design/492.html" title="如何设计网页横幅">如何设计网页横幅</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1525.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>微软的jQuery国际化插件</title>
		<link>http://www.iamued.com/qianduan/1506.html</link>
		<comments>http://www.iamued.com/qianduan/1506.html#comments</comments>
		<pubDate>Wed, 30 Jun 2010 13:37:48 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[国际化]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1506</guid>
		<description><![CDATA[[原文发表地址] jQuery  Globalization Plugin from Microsoft
[原文发表时间] Thursday, June  10, 2010 10:34 PM
上个月，我写了一篇关于微软如何在向 jQuery贡献代码的文章，也谈到了在第一批贡献的代码中的一些功能：jQuery 模板和数据链接支持.
今天，我们发布了一个新的jQuery国际化插件的原型，你可以在你的JavaScript程序中引用这 个插件添加国际化功能。插件涵盖了超过350种文化的国际化信息，从苏格兰盖尔语、佛里斯兰语、匈牙利语、日语到加拿大英语等。插件将以开源的形式发布。
你可以从我们的Github代码库下载插件的原型版本：
http://github.com/nje/jquery-glob
另外也可以在这里下 载一些示例了解简单的用法。
理解国际化


jQuery国际化插件可以让你在 JavaScript代码中轻松地处理不同文化之间的数字、货币和日期格式。例如，你可以使用这个插件正确地显示一个国家的货币符号：

你也可以用这个插件编排日期格式，这样日期和月份 会以正确的顺序显示，而日期和月份的名称也能够得到正确的翻译：

请注意上图阿拉伯的日期格式中，年份显示成了 1431。这是因为年份已经按照回历的方式转换过了。
一些文化差异比较明显，例如使用不同的货币或者不同的月份名称等。但另外一些差异 却细微而又出人意料。例如，在有一些文化里，数字不是以均衡的方式分组的。在语言标记为“te-IN”的文化中（印度东部的泰卢固语），数字先按3位数字 分组，然后再每2位数字分组。因此象数字一百万（1000000）就会被写成“10,00,000”。而有些文化就根本不对数字进行分组。所有这些细微的 差异都能够被jQuery国际化插件自动处理。
要得到正确的日期可能非常需要技巧。不同的文化采用不同的历法，比如公历和回历。同一种 文化也可能会采用多个历法，比如日本就同时采用公历和以天皇年号推算的纪年历。插件提供了函数将日期在所有这些历法中相互转换。
使 用语言标记
jQuery国际化插件依据RFC 4646和RFC 5646标准里定义的语言标记来识别文化（参见 http://tools.ietf.org/html/rfc5646）， 语言标记通常由连字符将多个辅标签组合而成，比如：



语言标记
语言名称 （中文）


en-AU
英文（澳大 利亚）


en-BZ
英文（伯利兹）


en-CA
英文（加拿 大）


Id
印度尼西亚文


zh-CHS
中文（简体） — 标记不再使用


Zu
祖鲁文



请注意单一语言例如英语可以同时有多个语言标记。同是英语国家，加拿大采用的数字、货币和日期格式就不同于澳大利亚或者美国。你可以使用下面 的语言辅标签查找工具来获取某个文化的语言标记：
http://rishida.net/utils/subtags/
jQuery国际化插件里一个叫做globinfo的文件夹包含了这350种文化的信息。实际上，这个文件夹里有700多个文 件，因为它包括了每个文件的最小化（minify）和原始版本。
比如说，在globinfo文件夹，文件 jQuery.glob.en-AU.js对应英文（澳大利亚），jQuery.glob.id.js对应印度尼西亚文，而 jQuery.glob.zh-CHS对应简体中文。
示例：指定某种文化
假如你要创建 一个德文的网站，并且希望在客户端的JavaScript脚本里使用德语习惯显示所有的日期、货币符号和数字。那页面的源代码也许与下面的HTML类似：

注意上面的span标签，它们标识了所有需要用国 际化插件进行格式化的区域：商品的价格、上架的日期以及库存量。
要在网页里使用jQuery国际化插件，需要添加三个 JavaScript文件：jQuery库，jQuery国际化插件和指定的文化习惯信息：

在上例中，我将包含了德语文化习惯的 jQuery.glob.de-DE.js文件静态地加入到网页中，”de-DE”是语言标记，表示在德国使用的德语。
既然已经引入了 必要的脚本文件，就可以使用下面的客户端JavaScript代码调用插件来显示价格、上架的日期以及库存量等值：

jQuery国际化插件为jQuery函数库添加 了一些新的函数—包括preferCulture()和format()等新函数。你可以通过preferCulture()函数设置插件其他函数调用时 使用的默认文化。preferCulture()函数接受一个语言标记作为参数，这个函数会使用最接近这个语言标记的文化。
$.format() 函数才是真正用来编排货币、日期和数字格式的。$.format()函数的第二个参数是格式分类符。例如，传入“c”表示按货币的样式编排参数值。在 githum的ReadMe文件里详细描述了所有格式分类符代表的意思：http://github.com/nje/jquery-glob
当我们在浏览器打开这个页面的时候，所有的东西都是按照德语习惯正确显示。货币符号采用的是欧元符号，日期采用德语的日期和月份名称，并且，数 字分隔符用的是点号（.），而不是逗号（,）。

你可以通过运行示例下 载中的3_GermanSite.htm文件来了解上述方法。
示例：用户动态选择一个区域设置
在前面的例子中，我们显式指定使用德语文化习惯（通过引用jQuery.glob.de-DE.js文件）。我们现在来看看动态设置文化习惯的 几个例子。
比如说我们打算在页面上加一个包含所有350种文化的下拉框，当用户在下拉框里选择了一个文化，页面上所有的日期都按照这个 文化的习惯显示。

这是网页的HTML源代码：

请留意所有包含了日期的&#60;span&#62; 标签都有一个data-date属性（data-*属性是HTML  5里的新功能，同时在老的浏览器上也可以使用）。当用户在下拉框里选择了一个文化信息后，我们的代码将会格式化data-date属性里保存的日期。
为了显示所有可能的文化信息，我们要象下面这样添加一个叫jQuery.glob.all.js [...]]]></description>
			<content:encoded><![CDATA[<p>[原文发表地址] jQuery  Globalization Plugin from Microsoft</a></p>
<p>[原文发表时间] Thursday, June  10, 2010 10:34 PM</p>
<p>上个月，我写了一篇关于微软如何在<a href="http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx">向 jQuery贡献代码</a>的文章，也谈到了在第一批贡献的代码中的一些功能：<a href="http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx">jQuery 模板和数据链接</a>支持.</p>
<p>今天，我们发布了一个新的jQuery国际化插件的原型，你可以在你的JavaScript程序中引用这 个插件添加国际化功能。插件涵盖了超过350种文化的国际化信息，从苏格兰盖尔语、佛里斯兰语、匈牙利语、日语到加拿大英语等。插件将以开源的形式发布。</p>
<p>你可以从我们的Github代码库下载插件的原型版本：</p>
<p><a href="http://github.com/nje/jquery-glob">http://github.com/nje/jquery-glob</a></p>
<p>另外也可以在<a href="http://www.scottgu.com/blogposts/jQueryGlobalizationDemos.zip">这里</a>下 载一些示例了解简单的用法。</p>
<p><strong><span style="text-decoration: underline;">理解国际化</span></strong></p>
<p><strong><span style="text-decoration: underline;"><span id="more-1506"></span><br />
</span></strong></p>
<p>jQuery国际化插件可以让你在 JavaScript代码中轻松地处理不同文化之间的数字、货币和日期格式。例如，你可以使用这个插件正确地显示一个国家的货币符号：</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_1DAC1393.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213749XRe.png" border="0" alt="image" width="300" height="151" /></a></p>
<p>你也可以用这个插件编排日期格式，这样日期和月份 会以正确的顺序显示，而日期和月份的名称也能够得到正确的翻译：</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_7BE03B01.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213752NQB.png" border="0" alt="image" width="367" height="222" /></a></p>
<p>请注意上图阿拉伯的日期格式中，年份显示成了 1431。这是因为年份已经按照回历的方式转换过了。</p>
<p>一些文化差异比较明显，例如使用不同的货币或者不同的月份名称等。但另外一些差异 却细微而又出人意料。例如，在有一些文化里，数字不是以均衡的方式分组的。在语言标记为“te-IN”的文化中（印度东部的泰卢固语），数字先按3位数字 分组，然后再每2位数字分组。因此象数字一百万（1000000）就会被写成“10,00,000”。而有些文化就根本不对数字进行分组。所有这些细微的 差异都能够被jQuery国际化插件自动处理。</p>
<p>要得到正确的日期可能非常需要技巧。不同的文化采用不同的历法，比如公历和回历。同一种 文化也可能会采用多个历法，比如日本就同时采用公历和以天皇年号推算的纪年历。插件提供了函数将日期在所有这些历法中相互转换。</p>
<p><strong><span style="text-decoration: underline;">使 用语言标记</span></strong></p>
<p>jQuery国际化插件依据RFC 4646和RFC 5646标准里定义的语言标记来识别文化（参见 <a href="http://tools.ietf.org/html/rfc5646">http://tools.ietf.org/html/rfc5646</a>）， 语言标记通常由连字符将多个辅标签组合而成，比如：</p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="119" valign="top"><strong>语言标记</strong></td>
<td width="346" valign="top"><strong>语言名称 </strong><strong>（中文）</strong></td>
</tr>
<tr>
<td width="119" valign="top">en-AU</td>
<td width="346" valign="top">英文（澳大 利亚）</td>
</tr>
<tr>
<td width="119" valign="top">en-BZ</td>
<td width="346" valign="top">英文（伯利兹）</td>
</tr>
<tr>
<td width="119" valign="top">en-CA</td>
<td width="346" valign="top">英文（加拿 大）</td>
</tr>
<tr>
<td width="119" valign="top">Id</td>
<td width="346" valign="top">印度尼西亚文</td>
</tr>
<tr>
<td width="119" valign="top">zh-CHS</td>
<td width="346" valign="top">中文（简体） — 标记不再使用</td>
</tr>
<tr>
<td width="119" valign="top">Zu</td>
<td width="346" valign="top">祖鲁文</td>
</tr>
</tbody>
</table>
<p>请注意单一语言例如英语可以同时有多个语言标记。同是英语国家，加拿大采用的数字、货币和日期格式就不同于澳大利亚或者美国。你可以使用下面 的<strong>语言辅标签查找工具</strong>来获取某个文化的语言标记：</p>
<p><a href="http://rishida.net/utils/subtags/">http://rishida.net/utils/subtags/</a></p>
<p>jQuery国际化插件里一个叫做<strong>globinfo</strong>的文件夹包含了这350种文化的信息。实际上，这个文件夹里有700多个文 件，因为它包括了每个文件的最小化（minify）和原始版本。</p>
<p>比如说，在globinfo文件夹，文件 jQuery.glob.en-AU.js对应英文（澳大利亚），jQuery.glob.id.js对应印度尼西亚文，而 jQuery.glob.zh-CHS对应简体中文。</p>
<p><strong><span style="text-decoration: underline;">示例：指定某种文化</span></strong></p>
<p>假如你要创建 一个德文的网站，并且希望在客户端的JavaScript脚本里使用德语习惯显示所有的日期、货币符号和数字。那页面的源代码也许与下面的HTML类似：</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_737C65AA.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213753cGh.png" border="0" alt="image" width="586" height="384" /></a></p>
<p>注意上面的span标签，它们标识了所有需要用国 际化插件进行格式化的区域：商品的价格、上架的日期以及库存量。</p>
<p>要在网页里使用jQuery国际化插件，需要添加三个 JavaScript文件：jQuery库，jQuery国际化插件和指定的文化习惯信息：</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_46F335C4.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/2137566LC.png" border="0" alt="image" width="628" height="71" /></a></p>
<p>在上例中，我将包含了德语文化习惯的 jQuery.glob.de-DE.js文件静态地加入到网页中，”de-DE”是语言标记，表示在德国使用的德语。</p>
<p>既然已经引入了 必要的脚本文件，就可以使用下面的客户端JavaScript代码调用插件来显示价格、上架的日期以及库存量等值：</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_454269F0.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213757b4R.png" border="0" alt="image" width="561" height="396" /></a></p>
<p>jQuery国际化插件为jQuery函数库添加 了一些新的函数—包括preferCulture()和format()等新函数。你可以通过preferCulture()函数设置插件其他函数调用时 使用的默认文化。preferCulture()函数接受一个语言标记作为参数，这个函数会使用最接近这个语言标记的文化。</p>
<p>$.format() 函数才是真正用来编排货币、日期和数字格式的。$.format()函数的第二个参数是格式分类符。例如，传入“c”表示按货币的样式编排参数值。在 githum的ReadMe文件里详细描述了所有格式分类符代表的意思：<a href="http://github.com/nje/jquery-glob">http://github.com/nje/jquery-glob</a></p>
<p>当我们在浏览器打开这个页面的时候，所有的东西都是按照德语习惯正确显示。货币符号采用的是欧元符号，日期采用德语的日期和月份名称，并且，数 字分隔符用的是点号（.），而不是逗号（,）。</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_63ACAAD9.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213759vLW.png" border="0" alt="image" width="413" height="342" /></a></p>
<p>你可以通过运行<a href="http://www.scottgu.com/blogposts/jQueryGlobalizationDemos.zip">示例下 载</a>中的3_GermanSite.htm文件来了解上述方法。</p>
<p><strong><span style="text-decoration: underline;">示例：用户动态选择一个区域设置</span></strong></p>
<p>在前面的例子中，我们显式指定使用德语文化习惯（通过引用jQuery.glob.de-DE.js文件）。我们现在来看看动态设置文化习惯的 几个例子。</p>
<p>比如说我们打算在页面上加一个包含所有350种文化的下拉框，当用户在下拉框里选择了一个文化，页面上所有的日期都按照这个 文化的习惯显示。</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_01AAB8CE.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/21380422J.png" border="0" alt="image" width="413" height="300" /></a></p>
<p>这是网页的HTML源代码：</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_31F18D84.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213805wMI.png" border="0" alt="image" width="628" height="120" /></a></p>
<p>请留意所有包含了日期的&lt;span&gt; 标签都有一个data-date属性（data-*属性是HTML  5里的新功能，同时在老的浏览器上也可以使用）。当用户在下拉框里选择了一个文化信息后，我们的代码将会格式化data-date属性里保存的日期。</p>
<p>为了显示所有可能的文化信息，我们要象下面这样添加一个叫jQuery.glob.all.js 的文件。</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_6238623A.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/2138072T0.png" border="0" alt="image" width="628" height="64" /></a></p>
<p><em>jQuery</em><em>国际化插件里有一 个叫做jQuery.glob.all.js</em><em>的文件，这个文件包含了所有插件支持的350</em><em>多种文化的国际化信息。即使经过最 小化处理，还是有367k</em><em>字节。由于文件很大，除非你的确需要一次性使用所有这些文化信息，我们建议你只添加所使用到的文化信息对应的 JavaScript</em><em>文件。下一个例子中，我会演示如何在网页中动态地加载某个语言对应的JavaScript</em><em>文件。</em></p>
<p>下一步，把所有支持的文化名称添加到下拉框的列表里。可以用$.cultures这个属性获取它们：</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_750CE5E4.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213808Kac.png" border="0" alt="image" width="628" height="119" /></a></p>
<p>最后，再写几行代码把每个span标签里的 data-date属性的日期都抓出来并编排格式：</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_45029463.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213810V2w.png" border="0" alt="image" width="628" height="245" /></a></p>
<p>jQuery国际化插件里面的 parseDate()函数将一个字符串的日期转换成JavaScript日期，而format()函数则用来编排这些日期的格式。“D”这个格式分类符 说明使用长日期格式编排日期。</p>
<p>现在，只要页面浏览者选择这350种语言其中之一，内容都会被正确的国际化。你可以通过运行<a href="http://www.scottgu.com/blogposts/jQueryGlobalizationDemos.zip">示例下 载</a>中的4_SelectCulture.htm文件来了解上述方法。</p>
<p><strong><span style="text-decoration: underline;">示例：动态加载国际化文件</span></strong></p>
<p>在上一节说过,你应该尽量避免在页面中引用jQuery.glob.all.js文件,  因为它实在是太大了。相反，你可以动态地加载你所需要的国际化信息。</p>
<p>比如说，你要创建一个下拉列表显示下面这些语言：</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_17A0FE93.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213816WdQ.png" border="0" alt="image" width="445" height="131" /></a></p>
<p>下面的代码会在用户从下拉框中选择一个新的语言后 执行。这段代码会先判断选中的语言对应的国际化脚本文件是否已经加载了。如果还没有加载，则使用jQuery的$.getScript()函数动态加载国 际化脚本文件。</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_2185EFFE.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213817ddT.png" border="0" alt="image" width="597" height="333" /></a></p>
<p>当国际化脚本文件被浏览器加载以后，就会调用 globalizePage()函数，继而执行客户端的代码完成国际化。</p>
<p>这个方法的优点是可以让你避免加载整个 jQuery.glob.all.js文件—只要加载使用到的文件，而且只加载一次。</p>
<p><a href="http://www.scottgu.com/blogposts/jQueryGlobalizationDemos.zip">示例下 载</a>中的5_Dynamic.htm文件演示了这个方法。</p>
<p><strong><span style="text-decoration: underline;">示例：自动检测用户的常用语言设置</span></strong></p>
<p>大多数网站通过检测用户的浏览器设置来得到其常用语言，然后根据这种语言文化习惯来国际化网站内容。用户可以在浏览器中设置一个常用语言。这 样，用户在请求页面时，常用语言设置会包含在请求Http消息头的Accept-Language字段中。</p>
<p>如果使用的是微软的IE浏览 器，可以通过以下步骤设置你常用的语言：</p>
<p>1. 在菜单栏里选择<strong>工具</strong>，<strong>Internet </strong><strong>选项。</strong></p>
<p>2. 选择<strong>常规</strong>标签。</p>
<p>3. 在<strong>外观</strong>里点击<strong>语言</strong>按钮。</p>
<p>4.  点击<strong>添加</strong>在语言列表里增加新的语言。</p>
<p>5. 然后把你最常用的语言放在列表的最顶端。</p>
<p><a href="http://blog.joycode.com/images/metaapis/158/WindowsLiveWriter/jQuery_F769/image_2.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213818pIi.png" border="0" alt="image" width="417" height="479" /></a></p>
<p>你可以在这个对话框中设置多门常用语言。所设 置语言的顺序关系将会体现在HTTP请求的Accept-Language字段中，如：</p>
<p>Accept-Language：fr- FR,id-ID;q=0.7,en-US;q=0.3</p>
<p>比较奇怪的是，用户不能够通过客户端的JavaScript脚本得到 Accept-Language的内容。微软的IE和Firefox浏览器都支持一系列语言相关的属性，这些属性可以通过 Window.navigator进行访问，例如windows.navigator.browserLanguage和 window.navigator.language，不过这些属性中的语言一般指的是操作系统中设置的语言或者是浏览器的语言版本。你不能通过这些属性 来得到用户设置的常用语言。</p>
<p>得到用户语言偏好（也就是Accept-Language字段中的内容）的唯一可靠方法就是编写服务器代 码。例如，下面的ASP.NET页面就利用了服务器的Request.UserLanguages属性把用户的语言偏好设置赋给了客户端 JavaScript的acceptLanguage变量（然后就可以通过客户端JavaScipt访问这些值了）：</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_77564215.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213819EWN.png" border="0" alt="image" width="587" height="106" /></a></p>
<p>为了使这段代码能够正常工作，页面中必须包含与 acceptLanguage对应的文化信息。例如如果你的常用语言是fr-FR（法语-法国），那就必须在这个页面中引用 jQuery.glob.fr-FR.js或者jQuery.glob.all.js这两个JavaScript脚本之一，否则没办法得到文化信息。关于 这个方法的应用可以<a href="http://www.scottgu.com/blogposts/jQueryGlobalizationDemos.zip">示例下 载</a>中的”6_AcceptLanguages.aspx”。</p>
<p>如果对于页面中用户的常用语言没有对应的脚本包含其文化信息，那 么$.preferCulture()方法就会引用中立（neutral）的文化信息（例如，使用jQuery.glob.fr.js，而不是 jQuery.glob.fr-FR.js）。如果中立文化信息也不可用，那么$.preferCulture()方法就会回滚到使用默认文化（英语）。</p>
<p><strong><span style="text-decoration: underline;">示例：利用国际化插件使JQuery UI DatePicker</span></strong><strong><span style="text-decoration: underline;">实现国际化</span></strong></p>
<p>国际化插件的目的之一就是使开发能适应各种不同文化的jQuery小工具的变得更为简单。</p>
<p>我们希望确保jQuery的国际化 插件能够与现有的jQuery的UI插件如DatePicker共存并正常工作。为了实现这个目标，我们创建了DatePicker插件的一个整合版本， 使它可以在渲染日历的时候利用我们的插件来提供国际化支持。下图演示了把jQuery的国际化插件和整合后的DatePicker插件一起加入到页面并选 择印度尼西亚语的效果。</p>
<p><a href="http://weblogs.asp.net/blogs/scottgu/image_5D15D8F1.png"><img title="image" src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/06/213823YiM.png" border="0" alt="image" width="577" height="622" /></a></p>
<p>注意：一周中每一天的名称都以印度尼西亚语的缩写 形式显示。 此外，月份的名字也以印度尼西亚语显示。</p>
<p>你可以从我们的github网站下载整合版的JQuery UI  DatePicker。你也可以使用<a href="http://www.scottgu.com/blogposts/jQueryGlobalizationDemos.zip">示例下 载中文件7_DatePicker.htm所使用的版本。</p>
<p><strong><span style="text-decoration: underline;">总结</span></strong></p>
<p>很高兴我们能够 为jQuery社区提供持续的贡献。这个国际化插件已经是我们发布的第三个插件了。</p>
<p>感谢大家对我们年初发布jQuery模板 （Templating）和数据链接（data-linking）的原型提供的很多非常有价值的反馈和设计方面的建议。最后我想趁这个机会感谢 jQuery和jQuery UI团队在创建这些插件时所提供的帮助。</p>
<p>希望这能对您有所帮助。</p>
<h2  class="related_post_title">您可能还关注的？</h2><ul class="related_post"><li><a href="http://www.iamued.com/qianduan/1401.html" title="即拷即用：onDOMReady（提取自jQuery.ready）">即拷即用：onDOMReady（提取自jQuery.ready）</a></li><li><a href="http://www.iamued.com/qianduan/1328.html" title="jQuery源码查看器">jQuery源码查看器</a></li><li><a href="http://www.iamued.com/qianduan/1182.html" title="[译]jQuery 1.4 发布：15个新特性实例精讲">[译]jQuery 1.4 发布：15个新特性实例精讲</a></li><li><a href="http://www.iamued.com/qianduan/1180.html" title="Jquery1.4正式版发布了 JS库时代就是这样快">Jquery1.4正式版发布了 JS库时代就是这样快</a></li><li><a href="http://www.iamued.com/qianduan/1176.html" title="YUI3设计中的激进和妥协">YUI3设计中的激进和妥协</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1506.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>判断 iframe 是否加载完成的完美方法</title>
		<link>http://www.iamued.com/qianduan/1486.html</link>
		<comments>http://www.iamued.com/qianduan/1486.html#comments</comments>
		<pubDate>Tue, 22 Jun 2010 02:51:57 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[iframe加载]]></category>
		<category><![CDATA[前端]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1486</guid>
		<description><![CDATA[今天正好需要判断iframe加载完成 正好找到怿飞同学的这篇文章 方法很完美

var iframe = document.createElement(&#34;iframe&#34;);
iframe.src = &#34;http://www.planabc.net&#34;;

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert(&#34;Local iframe is now loaded.&#34;);
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == &#34;complete&#34;){
            alert(&#34;Local iframe is now loaded.&#34;);
        }
    [...]]]></description>
			<content:encoded><![CDATA[<p>今天正好需要判断iframe加载完成 正好找到<a rel="about" href="http://www.planabc.net/about/">怿飞</a>同学的这篇文章 方法很完美</p>
<pre class="brush: jscript;">
var iframe = document.createElement(&quot;iframe&quot;);
iframe.src = &quot;http://www.planabc.net&quot;;

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert(&quot;Local iframe is now loaded.&quot;);
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == &quot;complete&quot;){
            alert(&quot;Local iframe is now loaded.&quot;);
        }
    };
}

document.body.appendChild(iframe);
</pre>
<p>最近， <a title="NCZOnline" href="http://www.nczonline.net/" target="_blank">Nicholas C. Zakas</a> 文章<a title="Iframes, onload, and document.domain" href="http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/" target="_blank">《Iframes, onload, and document.domain》</a>的评论中 Christopher 提供了一个新的判断方法（很完美）：</p>
<pre class="brush: jscript;">
var iframe = document.createElement(&quot;iframe&quot;);
iframe.src = &quot;http://www.planabc.net&quot;;

if (iframe.attachEvent){
    iframe.attachEvent(&quot;onload&quot;, function(){
        alert(&quot;Local iframe is now loaded.&quot;);
    });
} else {
    iframe.onload = function(){
        alert(&quot;Local iframe is now loaded.&quot;);
    };
}

document.body.appendChild(iframe);
</pre>
<p>几点补充说明：</p>
<ol>
<li><a title="onload Event (BODY, FRAME, FRAMESET, ...)&lt;br /&gt;" href="http://msdn.microsoft.com/en-us/library/cc197055(VS.85).aspx" target="_blank">IE 支持 iframe 的 onload 事件</a>，不过是隐形的，需要通过 attachEvent 来注册。</li>
<li>第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。</li>
</ol>
<h2  class="related_post_title">您可能还关注的？</h2><ul class="related_post"><li><a href="http://www.iamued.com/qianduan/1612.html" title="太NB了：Google Docs Ctrl + C 技术浅析">太NB了：Google Docs Ctrl + C 技术浅析</a></li><li><a href="http://www.iamued.com/qianduan/1382.html" title="即拷即用动画函数：透明度渐变、位置移动、尺寸变化">即拷即用动画函数：透明度渐变、位置移动、尺寸变化</a></li><li><a href="http://www.iamued.com/qianduan/1010.html" title="[原创]用JS控制显示子菜单个数 自动下拉">[原创]用JS控制显示子菜单个数 自动下拉</a></li><li><a href="http://www.iamued.com/qianduan/600.html" title="offsetLeft and offsetTop gives wrong coords in IE ">offsetLeft and offsetTop gives wrong coords in IE </a></li><li><a href="http://www.iamued.com/qianduan/1450.html" title="讨论闭包传入参数：window &#038; undefined">讨论闭包传入参数：window &#038; undefined</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1486.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>讨论闭包传入参数：window &amp; undefined</title>
		<link>http://www.iamued.com/qianduan/1450.html</link>
		<comments>http://www.iamued.com/qianduan/1450.html#comments</comments>
		<pubDate>Fri, 21 May 2010 05:32:12 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[闭包]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1450</guid>
		<description><![CDATA[引言
最常见的闭包 (Closure) 范式大家都很熟悉了：

(function() {
// ...
})();

很简单，大家都在用。但是，我们需要了解更多。
首先，闭包是一个匿名函数 (Anonymous function), 即是 (function() {}) 这部分。之所以要给 function 添加括弧是为了让它形成一个表达式 (expression), 有了表达式，并且确定它的类型是个函数 (Function 实例), 就可以直接调用它。所以，后面的一对括弧是可以工作的，它的意义是：我要调用 (call) 这个函数。
既然是函数调用，那就可以像一般的函数那样，在调用时传入参数。这就是本次讨论的话题。
传入 window 参数
 

(function(win) {
// ...
})(window);

这样做最直观的好处是书写便利：少写几个字。你可以在闭包内任何地方使用 win, 它都会指向 window 对象。另外，它有利于压缩减少最终代码的体积，经过压缩后 (如 Google Closure Complier), 所有的 win 都会被替换成形如 a 这样的简单变量。win 用得越多，减少的字节数也越多。
不过，便利的同时也会带来陷阱。在 IE 上，window 总是指向当前窗口对象，这个没有问题，但是在某些场景下，使用闭包内的 win 变量会导致拒绝访问错误 (Access denied). 重现方式大致是这样的：当页面引用其他域名的脚本，并且该脚本调用了闭包内的 window.document, 而且这个闭包代码是来自另一个域名的脚本。在这种情况下，使用 win 会保持对 window 最早的引用，通过另一个域的脚本访问 win 会导致 IE 认为脚本产生了跨越冲突，从而拒绝了对 [...]]]></description>
			<content:encoded><![CDATA[<h3>引言</h3>
<p>最常见的闭包 (Closure) 范式大家都很熟悉了：</p>
<pre class="brush: jscript;">
(function() {
// ...
})();
</pre>
<p>很简单，大家都在用。但是，我们需要了解更多。<br />
首先，闭包是一个匿名函数 (Anonymous function), 即是 (function() {}) 这部分。之所以要给 function 添加括弧是为了让它形成一个表达式 (expression), 有了表达式，并且确定它的类型是个函数 (Function 实例), 就可以直接调用它。所以，后面的一对括弧是可以工作的，它的意义是：我要调用 (call) 这个函数。</p>
<p>既然是函数调用，那就可以像一般的函数那样，在调用时传入参数。这就是本次讨论的话题。</p>
<h3>传入 window 参数</h3>
<p> </p>
<pre class="brush: jscript;">
(function(win) {
// ...
})(window);
</pre>
<p>这样做最直观的好处是书写便利：少写几个字。你可以在闭包内任何地方使用 win, 它都会指向 window 对象。另外，它有利于压缩减少最终代码的体积，经过压缩后 (如 <a href="http://code.google.com/closure/compiler/">Google Closure Complier</a>), 所有的 win 都会被替换成形如 a 这样的简单变量。win 用得越多，减少的字节数也越多。</p>
<p>不过，便利的同时也会带来陷阱。在 IE 上，window 总是指向当前窗口对象，这个没有问题，但是在某些场景下，使用闭包内的 win 变量会导致拒绝访问错误 (Access denied). 重现方式大致是这样的：当页面引用其他域名的脚本，并且该脚本调用了闭包内的 window.document, 而且这个闭包代码是来自另一个域名的脚本。在这种情况下，使用 win 会保持对 window 最早的引用，通过另一个域的脚本访问 win 会导致 IE 认为脚本产生了跨越冲突，从而拒绝了对 win.document 的访问。解决办法是不使用形参 win, 而是直接使用 window. 需要说明的是，给闭包传入 document 也会导致 IE 出现同样的问题。</p>
<h3>传入 undefined</h3>
<p>其实把 undefined 作为形参就，实参就可以不用传了，因为 JavaScript 中访问未传入的参数就会得到 undefined. 因此，你可以这样写：</p>
<pre class="brush: jscript;">
(function(undefined) {
// ...
})();
</pre>
<p>和上面的讨论一样，你可以在闭包内任何地方使用 undefined, 可以少写几个字（如果把 undefined 换成更短的名字），也可以在减少压缩后体积。</p>
<p>另一个的优势是，你可以认为它是个变量，把它当变量来使用，它的值恒等于 (===) 真正的 undefined. 当外部代码意外地定义了 undefined 的时候——不常见，但确实可能会<a href="http://dev.jqueryui.com/ticket/5434">发生</a>——你可以正常地使用真正的 undefined, 而不会被外部的 undefined 意外影响. 这是由 JavaScript 作用域规则决定的。<br />
无论是否使用这个 undefined 参数，都应该避免使用 undefined 的字符串常量，如：</p>
<pre class="brush: jscript;">
if(typeof myVar === 'undefined') {
// bad part...
}
</pre>
<p>因为如果你把字符串写错了，机器不会告诉你，而且会产生一个难以检查出来的bug. 幸运的是，对于 JavaScript 来说，<a href="http://www.jslint.com/">JsLint</a> 可以帮你做这个校验。当 myVar 已定义的时候（通过形参或 var 声明），上面的代码改成这样会更易于调试：</p>
<pre class="brush: jscript;">
if(myVar === undefined) {
// good part...
}
</pre>
<h3>结论</h3>
<p>从上面两个例子来看，我们建议不要传入 window, 但是可以安全地使用第二种方式 (写 undefined 形参)；我们还要尽量避免使用字符串常量。<br />
最后，最重要的是，这只是两个特定对象和类型的讨论，举一反三，你会更了解 JavaScript</p>
<pre>转自阿里UED：<a href="http://ued.alipay.com/2010/05/using-window-and-undefined-as-parameter-in-closure/">http://ued.alipay.com/2010/05/using-window-and-undefined-as-parameter-in-closure/</a></pre>
<h2  class="related_post_title">您可能还关注的？</h2><ul class="related_post"><li><a href="http://www.iamued.com/qianduan/1612.html" title="太NB了：Google Docs Ctrl + C 技术浅析">太NB了：Google Docs Ctrl + C 技术浅析</a></li><li><a href="http://www.iamued.com/qianduan/1486.html" title="判断 iframe 是否加载完成的完美方法">判断 iframe 是否加载完成的完美方法</a></li><li><a href="http://www.iamued.com/qianduan/1429.html" title="最近写日期操作的几个JS函数">最近写日期操作的几个JS函数</a></li><li><a href="http://www.iamued.com/qianduan/1382.html" title="即拷即用动画函数：透明度渐变、位置移动、尺寸变化">即拷即用动画函数：透明度渐变、位置移动、尺寸变化</a></li><li><a href="http://www.iamued.com/qianduan/1326.html" title="各浏览器中cookie限制">各浏览器中cookie限制</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1450.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WEB标准化交流会第七期-人人都是&#8221;架构&#8221;师</title>
		<link>http://www.iamued.com/qianduan/1434.html</link>
		<comments>http://www.iamued.com/qianduan/1434.html#comments</comments>
		<pubDate>Sat, 24 Apr 2010 15:41:10 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[页面实现]]></category>
		<category><![CDATA[W3Ctech]]></category>
		<category><![CDATA[WEB标准化交流会]]></category>
		<category><![CDATA[架构]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1434</guid>
		<description><![CDATA[今天很荣幸的第三次的参加了WEB标准化交流会
地点是在在北京航空航天大学的第八会议室，这次交流会改变了以往的圆桌讨论方式,改为分享的方式,今天的两场分享都很精彩 第一场是微软的IE9分享,第二场是周爱民老师的前端架构实战
WEB标准化交流会让我认识了不少新朋友、今天更巧的是遇到了一年前项目合作过的同事：）
IE9的分享 重点在于IE系列终于迈向标准化 并且将GPU引入浏览器引擎，对于渲染速度和性能大大提升，同时透露出XP下无论哪个浏览器都是无法使用GPU加速的，虽然不知道这个说法的可信性，但是这次IE的预览，还是有一些收获的，至少让我们看到了浏览器越来越标准，当然更重要的是kill IE6！
第二场爱民老师的分享让我比较有收获，几个方面吧
1.解决问题的思路-共性、本质，找到问题的根源
现场的例子：以为运营说需要在这里加一个按钮，他的需求真的是要多加一个按钮么？实际上可能是觉得原来按钮的位置并不合适
2.系统框架、框架、库、应用的概念
说实话，听的确实有些模糊，不过两个例子很精彩，由浅入深的，讲解了是如何一步一步的抽象出最终的系统框架。
从我的理解，库是相互没有依赖关系的，框架是来将库进行一个抽象关联，而系统框架，是更本质的抽象出了某一类业务的底层逻辑包括一些必须的数据和逻辑关联
给我印象比较深的一张图片如下：

当我们更多的关注于插件机制、组建机制、消息机制的时候、我们更应该从需求变更、版本升级、产品整合的视角来看待他们的本质
而我的观点是-人人都是&#8221;架构&#8221;师
为什么这么说呢?哈,首先我所说的架构是加了引号的
我理解的&#8221;架构&#8221;呢,更贴近我们的生活,工作,架构可大可小,&#8221;系统架构师&#8221;可能我们确实需要很多积累、天赋，而我们要把架构的意识引入到我们的日常生活中来
几个例子：
1.职业规划 是不是架构？
2.当我们保存站点文件，站点文件的目录是不是架构？
3.CSS的reset、grid、form等算不算架构呢？
4.我们经常用js写的weiget又算不算架构呢？
……
我相信在我们的生活、工作中、架构无所不在-人人都是&#8221;架构&#8221;师 
您可能还关注的？WEB标准化交流会第九期：前端工程师的知识收集与管理2010年3月 &#8211; WEB标准化交流会 -腾飞吧前端们第六期WEB标准化交流会 会后总结 By 刘钢第四期 WEB标准化交流会 参会总结]]></description>
			<content:encoded><![CDATA[<p><strong>今天很荣幸的第三次的参加了<a href="http://www.w3ctech.com" target="_blank">WEB标准化交流会</a></strong><br />
地点是在在北京航空航天大学的第八会议室，这次交流会改变了以往的圆桌讨论方式,改为分享的方式,今天的两场分享都很精彩 <strong>第一场是微软的IE9分享,第二场是周爱民老师的前端架构实战</strong></p>
<p>WEB标准化交流会让我认识了不少新朋友、今天更巧的是遇到了一年前项目合作过的同事：）</p>
<p>IE9的分享 重点在于IE系列终于迈向标准化 并且将GPU引入浏览器引擎，对于渲染速度和性能大大提升，同时透露出XP下无论哪个浏览器都是无法使用GPU加速的，虽然不知道这个说法的可信性，但是这次IE的预览，还是有一些收获的，至少让我们看到了浏览器越来越标准，当然更重要的是<span style="color: #ff0000;"><strong>kill IE6</strong></span>！</p>
<h3>第二场爱民老师的分享让我比较有收获，几个方面吧</h3>
<p><strong>1.解决问题的思路-共性、本质，找到问题的根源</strong><br />
现场的例子：以为运营说需要在这里加一个按钮，他的需求真的是要多加一个按钮么？实际上可能是觉得原来按钮的位置并不合适<br />
<strong>2.系统框架、框架、库、应用的概念</strong><br />
说实话，听的确实有些模糊，不过两个例子很精彩，由浅入深的，讲解了是如何一步一步的抽象出最终的系统框架。<br />
从我的理解，库是相互没有依赖关系的，框架是来将库进行一个抽象关联，而系统框架，是更本质的抽象出了某一类业务的底层逻辑包括一些必须的数据和逻辑关联</p>
<p>给我印象比较深的一张图片如下：</p>
<p><a href="../wp-content/uploads/2010/04/jg1.jpg"><img title="jg" src="../wp-content/uploads/2010/04/jg1.jpg" alt="" width="557" height="304" /></a></p>
<p>当我们更多的关注于<span style="color: #ff0000;">插件机制、组建机制、消息机制</span>的时候、我们更应该从<span style="color: #ff0000;">需求变更、版本升级、产品整合</span>的视角来看待他们的本质</p>
<h2>而我的观点是-人人都是&#8221;架构&#8221;师</h2>
<p>为什么这么说呢?哈,首先我所说的架构是加了引号的</p>
<p><strong>我理解的&#8221;架构&#8221;呢,更贴近我们的生活,工作,架构可大可小,&#8221;系统架构师&#8221;可能我们确实需要很多积累、天赋，而我们要把架构的意识引入到我们的日常生活中来</strong></p>
<p>几个例子：<br />
1.职业规划 是不是架构？<br />
2.当我们保存站点文件，站点文件的目录是不是架构？<br />
3.CSS的reset、grid、form等算不算架构呢？<br />
4.我们经常用js写的weiget又算不算架构呢？<br />
……<br />
<strong>我相信在我们的生活、工作中、架构无所不在-人人都是&#8221;架构&#8221;师</strong><strong><a href="../wp-content/uploads/2010/04/qd.jpg"><img title="qd" src="../wp-content/uploads/2010/04/qd.jpg" alt="" width="500" height="335" /></a></strong><strong> </strong></p>
<h2  class="related_post_title">您可能还关注的？</h2><ul class="related_post"><li><a href="http://www.iamued.com/qianduan/1492.html" title="WEB标准化交流会第九期：前端工程师的知识收集与管理">WEB标准化交流会第九期：前端工程师的知识收集与管理</a></li><li><a href="http://www.iamued.com/qianduan/1281.html" title="2010年3月 &#8211; WEB标准化交流会 -腾飞吧前端们">2010年3月 &#8211; WEB标准化交流会 -腾飞吧前端们</a></li><li><a href="http://www.iamued.com/qianduan/1369.html" title="第六期WEB标准化交流会 会后总结 By 刘钢">第六期WEB标准化交流会 会后总结 By 刘钢</a></li><li><a href="http://www.iamued.com/qianduan/1251.html" title="第四期 WEB标准化交流会 参会总结">第四期 WEB标准化交流会 参会总结</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1434.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>最近写日期操作的几个JS函数</title>
		<link>http://www.iamued.com/qianduan/1429.html</link>
		<comments>http://www.iamued.com/qianduan/1429.html#comments</comments>
		<pubDate>Fri, 23 Apr 2010 14:39:16 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[Date]]></category>
		<category><![CDATA[日期]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1429</guid>
		<description><![CDATA[
//格式化函数 Date原型扩展
Date.prototype.format = function(format)
{
 var o = {

 &#34;M+&#34; : this.getMonth()+1, // month
 &#34;d+&#34; : this.getDate(),// day
 &#34;h+&#34; : this.getHours(), // hour
 &#34;m+&#34; : this.getMinutes(), // minute
 &#34;s+&#34; : this.getSeconds(), // second
 &#34;q+&#34; : Math.floor((this.getMonth()+3)/3), // quarter
 &#34;S&#34; : this.getMilliseconds() // millisecond
 }

 if(/(y+)/.test(format))
 format = format.replace(RegExp.$1,(this.getFullYear()+&#34;&#34;).substr(4 - RegExp.$1.length));
 for(var k in o)
 if(new RegExp(&#34;(&#34;+ [...]]]></description>
			<content:encoded><![CDATA[<pre class="brush: jscript;">
//格式化函数 Date原型扩展
Date.prototype.format = function(format)
{
 var o = {

 &quot;M+&quot; : this.getMonth()+1, // month
 &quot;d+&quot; : this.getDate(),// day
 &quot;h+&quot; : this.getHours(), // hour
 &quot;m+&quot; : this.getMinutes(), // minute
 &quot;s+&quot; : this.getSeconds(), // second
 &quot;q+&quot; : Math.floor((this.getMonth()+3)/3), // quarter
 &quot;S&quot; : this.getMilliseconds() // millisecond
 }

 if(/(y+)/.test(format))
 format = format.replace(RegExp.$1,(this.getFullYear()+&quot;&quot;).substr(4 - RegExp.$1.length));
 for(var k in o)
 if(new RegExp(&quot;(&quot;+ k +&quot;)&quot;).test(format))
 format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] <img src='http://www.iamued.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> &quot;00&quot;+ o[k]).substr((&quot;&quot;+ o[k]).length));
 return format;
}
// 日期比较

function datecompare(startDate, endDate) {
 var re = /^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/;
 var d1 = new Date(startDate.replace(/-/g, &quot;/&quot;));
 var d2 = new Date(endDate.replace(/-/g, &quot;/&quot;));
 if (Date.parse(d1) - Date.parse(d2) == 0) {
 // window.alert(&quot;两个日期相等&quot;);
 return &quot;1&quot;;
 }
 if (Date.parse(d1) - Date.parse(d2) &lt; 0) {
 // window.alert(&quot;结束日期 大于 开始日期&quot;);
 return &quot;2&quot;;
 }
 if (Date.parse(d1) - Date.parse(d2) &gt; 0) {
 // window.alert(&quot;结束日期 小于 开始日期&quot;);
 return &quot;3&quot;;
 }
}
//添加一天
function DateAddOneDay(now){
 return new Date(Date.parse(now) + (86400000 * 1))
}
</pre>
<h2  class="related_post_title">您可能还关注的？</h2><ul class="related_post"><li><a href="http://www.iamued.com/qianduan/1612.html" title="太NB了：Google Docs Ctrl + C 技术浅析">太NB了：Google Docs Ctrl + C 技术浅析</a></li><li><a href="http://www.iamued.com/qianduan/1486.html" title="判断 iframe 是否加载完成的完美方法">判断 iframe 是否加载完成的完美方法</a></li><li><a href="http://www.iamued.com/qianduan/1450.html" title="讨论闭包传入参数：window &#038; undefined">讨论闭包传入参数：window &#038; undefined</a></li><li><a href="http://www.iamued.com/qianduan/1382.html" title="即拷即用动画函数：透明度渐变、位置移动、尺寸变化">即拷即用动画函数：透明度渐变、位置移动、尺寸变化</a></li><li><a href="http://www.iamued.com/qianduan/1326.html" title="各浏览器中cookie限制">各浏览器中cookie限制</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1429.html/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>编码大全 &#8211; 前端相关</title>
		<link>http://www.iamued.com/qianduan/1426.html</link>
		<comments>http://www.iamued.com/qianduan/1426.html#comments</comments>
		<pubDate>Fri, 23 Apr 2010 14:18:34 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[编码]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1426</guid>
		<description><![CDATA[
这是我在本周珍珠奶茶会上做的分享。编码的细节太多太多，对于前端工程师，掌握主流常用的编码就可以了，并知晓后端处理URL编码的基本思路以及浏览器在 处理编码问题上的差异性。
ps：补充一点，encodeURIComponent和encodeURI，可以参照玉伯的例子
http://lifesinger.googlecode.com/svn/tr  &#8230; _test.html﻿
随机日志如何做好一份前端工程师的简历？[原创]jQuery SimpleTip Plugin1.0行动召唤按钮在网页中的实例与实践交互设计实用指南(6)–标签明晰、有效交互设计实用指南(1)–“有效性”之“操作入口明确”]]></description>
			<content:encoded><![CDATA[<p><iframe src="http://docs.google.com/present/embed?id=df8vkjf3_122f965793d" frameborder="0" width="410" height="342"></iframe><br />
这是我在本周珍珠奶茶会上做的分享。编码的细节太多太多，对于前端工程师，掌握主流常用的编码就可以了，并知晓后端处理URL编码的基本思路以及浏览器在 处理编码问题上的差异性。</p>
<p>ps：补充一点，encodeURIComponent和encodeURI，可以参照玉伯的例子<br />
<a href="http://lifesinger.googlecode.com/svn/trunk/lab/2009/escape_and_encodeURIComponent_test.html" target="_blank">http://lifesinger.googlecode.com/svn/tr  &#8230; _test.html</a>﻿</p>
<h2  class="related_post_title">随机日志</h2><ul class="related_post"><li><a href="http://www.iamued.com/qianduan/1278.html" title="分享：建议“前端开发”人员掌握的技术">分享：建议“前端开发”人员掌握的技术</a></li><li><a href="http://www.iamued.com/qianduan/1506.html" title="微软的jQuery国际化插件">微软的jQuery国际化插件</a></li><li><a href="http://www.iamued.com/qianduan/1326.html" title="各浏览器中cookie限制">各浏览器中cookie限制</a></li><li><a href="http://www.iamued.com/qianduan/635.html" title="认识Javascript数组">认识Javascript数组</a></li><li><a href="http://www.iamued.com/qianduan/805.html" title="如何做好一份前端工程师的简历？">如何做好一份前端工程师的简历？</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1426.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>如何量身打造一个前端框架</title>
		<link>http://www.iamued.com/qianduan/1404.html</link>
		<comments>http://www.iamued.com/qianduan/1404.html#comments</comments>
		<pubDate>Thu, 15 Apr 2010 07:00:38 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[框架]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1404</guid>
		<description><![CDATA[转一篇：taobao拔赤的一篇文章 写的很好 查看原文
程序层面，重点是？
框架包含：核心(core)、适配器(adapter)、基础接口(public api)、代码管理(sandbox &#38; plugin)、组件库(widgets)，显然，框架的重点在于基础接口、和代码管理机制的设计。widget的实现是基于框架提供的public api，public api interface一旦定型尽量不要更改，也就是说，设计要遵循编程基本原则：面向接口，而不是面向实现，这个原则的基本要求是接口的稳定性。因此，框架版本升级导致接口更改的情况可以不考虑？

框架设计师应当将有限的精力放在adapter、public api、sandbox &#38; plugins上，以保证框架基础逻辑设计思路清晰，widget和外部plugin的实现则是纯粹工作量的堆积，可以由更多的人参与开发，以分担框架设计师的工作。
需不需要对core进行重构？
比较纠结的问题是，要不要对core进行重构？即将适配器以下都由自己重构，完全放弃现有的jquery或者yui，这个看情况，个人认为，使用现成的“库”是比较聪明的选择，开源的初衷不也是这样吗？我们要做的，只是将jquery式的api或者yui式的api转换成我想要的api格式即可，api的实现，有什么重要呢？
开发者的角色？
框架设计：框架设计师着力设计public api和sandbox &#38; plugin，adapter可以另有人做，只要对adapter有规范完整的黑盒测试即可。
widget开发：可以由更多的人基于pbulic api开发大量的widget，入库保证有code review即可。
应用开发：任何人基于sandbox和widget都可以开发app了。
各自的视野？
对于框架的使用者来说，他们的视野仅限于sandbox、plugin usage、widgets，手旁只要准备一本public api手册就天下无敌了。对于框架开发小组来说，着重维护widget和api，把项目中的widgets不断抽离、code review并入库。对于工程师来说，他们的视野是一本手册和一些demo，没有必要理解框架的细节。对于那些业余的人来说，让他们一眼看到这个框架有这么多widget和demo，他们就会傻乎乎的开始用了。。。
因此，框架的开发，在于专业、在于坚持、在于团队，三者缺一不可。。。
您可能还关注的？分享：建议“前端开发”人员掌握的技术前后端分离开发模式初体验IE bug:1像素的dotted/dashed边框 ]]></description>
			<content:encoded><![CDATA[<p>转一篇：taobao拔赤的一篇文章 写的很好 <a href="http://www.uedmagazine.com/ued/index.php?entry=entry100412-135038">查看原文</a></p>
<p><strong>程序层面，重点是？</strong></p>
<p>框架包含：核心(core)、适配器(adapter)、基础接口(public api)、代码管理(sandbox &amp; plugin)、组件库(widgets)，显然，框架的重点在于基础接口、和代码管理机制的设计。widget的实现是基于框架提供的public api，public api interface一旦定型尽量不要更改，也就是说，设计要遵循编程基本原则：面向接口，而不是面向实现，这个原则的基本要求是接口的稳定性。因此，框架版本升级导致接口更改的情况可以不考虑？</p>
<p><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn040/20100412/1245/p_large_wG5X_7685000444862d11.jpg',800,600,false);"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/04/150358kfX.jpg" border="0" alt="" /></a></p>
<p>框架设计师应当将有限的精力放在adapter、public api、sandbox &amp; plugins上，以保证框架基础逻辑设计思路清晰，widget和外部plugin的实现则是纯粹工作量的堆积，可以由更多的人参与开发，以分担框架设计师的工作。</p>
<p><strong>需不需要对core进行重构？</strong></p>
<p>比较纠结的问题是，要不要对core进行重构？即将适配器以下都由自己重构，完全放弃现有的jquery或者yui，这个看情况，个人认为，使用现成的“库”是比较聪明的选择，开源的初衷不也是这样吗？我们要做的，只是将jquery式的api或者yui式的api转换成我想要的api格式即可，api的实现，有什么重要呢？</p>
<p><strong>开发者的角色？</strong></p>
<p>框架设计：框架设计师着力设计public api和sandbox &amp; plugin，adapter可以另有人做，只要对adapter有规范完整的黑盒测试即可。<br />
widget开发：可以由更多的人基于pbulic api开发大量的widget，入库保证有code review即可。<br />
应用开发：任何人基于sandbox和widget都可以开发app了。</p>
<p><strong>各自的视野？</strong></p>
<p>对于框架的使用者来说，他们的视野仅限于sandbox、plugin usage、widgets，手旁只要准备一本public api手册就天下无敌了。对于框架开发小组来说，着重维护widget和api，把项目中的widgets不断抽离、code review并入库。对于工程师来说，他们的视野是一本手册和一些demo，没有必要理解框架的细节。对于那些业余的人来说，让他们一眼看到这个框架有这么多widget和demo，他们就会傻乎乎的开始用了。。。</p>
<p>因此，框架的开发，在于专业、在于坚持、在于团队，三者缺一不可。。。</p>
<h2  class="related_post_title">您可能还关注的？</h2><ul class="related_post"><li><a href="http://www.iamued.com/qianduan/1278.html" title="分享：建议“前端开发”人员掌握的技术">分享：建议“前端开发”人员掌握的技术</a></li><li><a href="http://www.iamued.com/qianduan/566.html" title="前后端分离开发模式初体验">前后端分离开发模式初体验</a></li><li><a href="http://www.iamued.com/qianduan/457.html" title="IE bug:1像素的dotted/dashed边框 ">IE bug:1像素的dotted/dashed边框 </a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/1404.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
