<?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/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Uedmagazine</title>
	<atom:link href="https://lijing00333.wordpress.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://lijing00333.wordpress.com</link>
	<description>@jayli</description>
	<lastBuildDate>Thu, 05 Jan 2012 08:26:58 +0000</lastBuildDate>
	<language>zh</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='lijing00333.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>https://s-ssl.wordpress.com/i/buttonw-com.png</url>
		<title>Uedmagazine</title>
		<link>https://lijing00333.wordpress.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="https://lijing00333.wordpress.com/osd.xml" title="Uedmagazine" />
	<atom:link rel='hub' href='https://lijing00333.wordpress.com/?pushpress=hub'/>
		<item>
		<title>YUISlide——针对移动设备的动画性能优化</title>
		<link>https://lijing00333.wordpress.com/2012/01/05/yuislide/</link>
		<comments>https://lijing00333.wordpress.com/2012/01/05/yuislide/#comments</comments>
		<pubDate>Thu, 05 Jan 2012 08:20:56 +0000</pubDate>
		<dc:creator>Jayli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://lijing00333.wordpress.com/?p=247</guid>
		<description><![CDATA[YUISlide这是一个集选项卡切换和幻灯切换功能于一体的小插件，基于YUI3实现，之前主要用在普通的PC终端里，在网厅项目中灵玉同学对Slide进行了改进，增加了手持设备里的小功能，比如手指滑动事件。但Slide的动画在移动端的表现出人意外的糟糕。 在普通的PC平台里，动画的实现大都是通过setInterval函数来完成，jQuery和YUI以及Kissy中亦是如此，只不过帧频有所差异。后来都各自添加了对内置css3 transition的检测，优先使用css3 animation，动画在现代浏览器中的性能又上升了一个台阶。Slide使用了YUI的Anim，在iphone/ipad/android平台中使用的是css3 animation，却依然不流畅，更流畅的动画则需要开启webkit的硬件加速。可以参照之前的一个ppt来了解js动画编程的一些背景知识。 首先要清楚css3的transitions和transform有着细微的差别，css3 transform本质上是将元素的内容作平移，而非直接对元素作属性渐变，因此性能更好，通过Demo可以看出，移动端的Dom操作性能要比css3 animation慢几个数量级。因此要在Slide运行当中尽量减少Dom操作，因此这里对Slide里的跑马灯的实现原理做了微调，即在初始化的时候就处理好待用的Dom节点，而不用在每次执行next()时剪切Dom节点。 另外还有一个css3动画相关属性就是keyframe，这个是用来辅助作复杂动画时用的，通过设定关键帧来作动画，Slide中的简单动画暂时用不到。因此css3动画的几个属性小结如下： css3 transition：平滑的改变CSS属性值，和setInterval原理类似，但速度更快 css3 2d transform：二维变换，CSS属性值未渐变，未用到webGL加速，速度有提升，但提升程度有限 css3 3d transform：三维变换，CSS属性值未渐变，开启WebGL加速，速度明显提升 css3 animation：即使用keyframe来模拟动画，用来实现复杂动画，和性能无关 判断是否开启内置动画： // true:支持，false:不支持 var nativeTransition = "webkitTransition" in document.body.style; 在支持transition的平台中使用translate3d来启用webGL进行硬件加速，注意这里使用transform代替了transition： animNode.setStyles({ '-webkit-transition-duration': speed + 's', '-webkit-transform':'translate3d('+dic+',0,0)' }); 最后比较下改造前和改造后的Slide在移动终端里的性能，在Ipad/Iphone中打开下面这两个Demo： 改造前，使用css3 2d transform（性能糟糕）：Demo 改造后，使用css3 3d transform（动画流畅）：Demo Slide项目首页：http://jayli.github.com/gallery/yuislide/<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=lijing00333.wordpress.com&amp;blog=19827007&amp;post=247&amp;subd=lijing00333&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>https://lijing00333.wordpress.com/2012/01/05/yuislide/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="https://secure.gravatar.com/avatar/cb9e58891ba7f47286edb660919f72b4?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">lijing00333</media:title>
		</media:content>

		<media:content url="http://lijing00333.files.wordpress.com/2012/01/screenshot-4.jpg?w=400" medium="image">
			<media:title type="html">Screenshot-4</media:title>
		</media:content>

		<media:content url="http://jayli.github.com/gallery/yuislide/assets/slide-c.png" medium="image" />
	</item>
		<item>
		<title>JavaScript Autoload 的实现</title>
		<link>https://lijing00333.wordpress.com/2011/07/09/javascript-autoload/</link>
		<comments>https://lijing00333.wordpress.com/2011/07/09/javascript-autoload/#comments</comments>
		<pubDate>Sat, 09 Jul 2011 08:28:56 +0000</pubDate>
		<dc:creator>Jayli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://lijing00333.wordpress.com/?p=238</guid>
		<description><![CDATA[熟悉PHP的同学一定对autoload不会陌生。我们知道，不管在任何语言和类库中，要使用某个类（或者方法）的前提是这个类必须存在，这个类或方法可能在类库的某个文件的某个角落中定义了，但当类库太过庞大时，初学者往往记不起某个方法属于哪个文件，或者不知道类库文件存放在哪里。另外，开发者不知道什么时候需要用到这个文件，特别是项目文件特别多时，不可能每个文件都在开始的部分写很长一串require。PHP5中提供了__autoload来解决这个问题。开发者将注意力完全放在程序逻辑上，大胆的使用基础类和方法，而不必考虑类和方法属于哪个模块、如何将模块require进来、何时require比较合适，是否有多余的require等等。PHP程序会对代码作分析，自动将程序中用到的“陌生的类和方法”所属的库文件引入进来，保证程序的正确执行。这就是autoload的基本机制，Ruby和Python中也实现了这种机制。 autoload听起来不错，非常适于初学者，而且是动态语言必不可少的组成部分（我才不要像写Java或C++那样一本正经的纠结于程序定义了哪些变量、都是什么类型、作用域是什么、用了哪些类库、类库的引用关系是什么……）。 现在我们在JavaScript中实现PHP的这种autoload机制，其中实现的难点在于对代码的静态分析，这里所指的静态分析只是伪分析（除非嵌入一个JavaScript解释器）。看下在Sandbox中实现的autoload： Demo：http://jayli.github.com/sandbox/examples/autoload/main.html 首先像PHP一样定义一个全局函数__autoload，返回值是一个map，给出每个方法对应的文件：: function __autoload() { return { 'MyClass1':'MyClass1.js', 'A.B.C.D':'MyClass1.js', 'MyClass2':'MyClass2.js', 'X.Y.Z':'MyClass2.js' }; } 然后在沙箱中就可以随意使用定义好的类和方法了，和PHP的写法唯一的不同之处在于，PHP需要手写include方法来“阻塞式”引入文件，Sandbox只给出映射表即可，另外，Sandbox也不支持给__autoload传入参数，比如__autoload($class_name)。 Sandbox.ready(function(S){ MyClass1.init(); MyClass2.init(); A.B.C.D.init(); }); 具体实现可参见sandbox-seed.js源码 另外需要注意的一点是，看起来这里载入文件是“阻塞式”的，没错，逻辑的执行总是在载入文件完成后再执行，后端语言几乎都是阻塞式的引入文件，比如php中： //logic1... include('file.php') //logic2... 程序必然在file.php载入完成后再执行logic2，这就是所谓阻塞式载入外部文件，在服务器端的JavaScript中也是如此，比如CommonJS规范中定义的require方法，也是默认require的文件是“阻塞式”载入的，即requries时主程序“停止执行”，在载入文件结束后再继续执行。而在客户端JavaScript中是无法实现这种阻塞式载入外部文件的（有人提出可以用同步ajax来模拟载入外部脚本，但这涉及到跨域），在SeaJS中同样存在这个问题，玉伯给出的解决办法和Sandbox一样，都是对代码作过滤，都是一种“伪”阻塞，比如SeaJS中执行： define(function(require) { return; require('./a'); }); 这段代码同样引入“./a.js”，而从逻辑上看是不应该引入这个文件的，Sandbox亦存在同样问题。 还需要注意一点，“阻塞式”加载的缺点就是串行，当然这是符合逻辑的，上下两个外部文件的引用必定有依赖关系，所以他们的执行不得不串行，Sandbox中加载多个脚本的实现也是串行，比如： Sandbox.loadScript(['a.js','b.js'],callback); 由于无法对a.js和b.js的内容作任何假设，因此串行一定是最安全的，也是唯一的策略，如果所有文件都有统一的约定，比如Sandbox中的Sandbox.add(callback)、YUI的YUI.add(&#8216;name&#8217;,callback)、以及SeaJS中的define(callback)，则多脚本加载有太多可优化的空间，比如YUI提供的comboCDN、以及SeaJS提供的build工具。 那么，JavaScript中什么时候适合使用autoload呢？应当是在做全站架构时最适合使用，由专人负责维护通用功能和组件，维护一份__autoload函数即可，当然，子逻辑可以重写这个函数（函数劫持），只要在页面中引用了种子文件就会包含这个__autoload函数，共用功能和组件就可以任意使用而不用刻意引入“包名”。也就是说，组件名称本身就是一个标识，这个标识和它所在的文件地址是一一对应的，根本不必再知晓组件名称属于哪个包名，这也符合autoload机制的本意。 当然这种做法有一个不足就是性能问题，这也是YUI为什么一定要将“包名”以及包的依赖预先定义好的原因。尽管从纯粹程序逻辑的角度讲，这样做是多余的。由于前端代码的性能依赖于网速，不像后端代码，因此在JavaScript中也应当有节制的使用autoload，切不可滥用，寻找架构代码可维护性和性能之间的平衡点，这一点非常重要。<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=lijing00333.wordpress.com&amp;blog=19827007&amp;post=238&amp;subd=lijing00333&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>https://lijing00333.wordpress.com/2011/07/09/javascript-autoload/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="https://secure.gravatar.com/avatar/cb9e58891ba7f47286edb660919f72b4?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">lijing00333</media:title>
		</media:content>
	</item>
		<item>
		<title>[翻译]YUI3.4.0 中对 Seed 和 Loader 的改造</title>
		<link>https://lijing00333.wordpress.com/2011/07/08/yui/</link>
		<comments>https://lijing00333.wordpress.com/2011/07/08/yui/#comments</comments>
		<pubDate>Fri, 08 Jul 2011 07:46:09 +0000</pubDate>
		<dc:creator>Jayli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://lijing00333.wordpress.com/?p=226</guid>
		<description><![CDATA[原文：http://www.yuiblog.com/blog/2011/07/01/yui-and-loader-changes-for-3-4-0/ 标题：YUI and Loader changes for 3.4.0 作者：Dav Glass 译文：YUI3.4.0 中对 Seed 和 Loader 的改造 在 YUI3.4.0 中，我们开始对 Loader 的核心逻辑进行升级改造。Loader 的性能有了很大提升，而且更加健壮，可以在更多场景下非常方便的使用（比如在服务器环境中）。同时我们会给出YUI的发展路线图，但首先还是有必要解释一下本次更新带来了哪些新内容，为什么做这些更新，以及这些更新对开发者带来的影响。对于大多数用例来说，开发者甚至不会察觉到有什么变化，但有一点变化最明显，就是速度更快，而且加载的资源文件更小了。 种子文件 我们首先来看 YUI 种子文件的一些变化，在之前的版本中，YUI 种子文件非常小，不包含 Loader 以及它的元组件（meta-data）。我们发现在90%的用例中，种子文件并未像我们设计的那样工作。大部分人引用种子文件之后再去载入他们自有的模块，也就意味着种子文件需要先获取 Loader，再计算模块依赖关系，然后再载入模块。我们感到这种策略是一种错误，它会带来一次额外的 http 请求，因此在新版的 YUI 中我们将 Loader 和它的元组件都整合进种子文件中。当然，这会让种子文件体积变大一些，但由于元组件已经包含在种子之内，页面模块的加载自然会提速很多。 如果你仍希望使用旧的方式加载YUI，你只需引入 yui-base 种子文件就可以了。基于 yui-base 可以单机模式运行YUI，它也可以根据需要去自动加载 Loader。如果你想更细粒度的使用 YUI，我们提供了 yui-core 种子文件，yui-core 文件几乎就是原来的 yui-base。 /build/yui/yui-min.js //YUI Seed + Loader /build/yui-base/yui-base-min.js //Old YUI Seed [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=lijing00333.wordpress.com&amp;blog=19827007&amp;post=226&amp;subd=lijing00333&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>https://lijing00333.wordpress.com/2011/07/08/yui/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="https://secure.gravatar.com/avatar/cb9e58891ba7f47286edb660919f72b4?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">lijing00333</media:title>
		</media:content>
	</item>
		<item>
		<title>[翻译]F2E大会上关于@font-face的分享</title>
		<link>https://lijing00333.wordpress.com/2011/04/29/lessons-on-font-face-from-the-f2e-summit/</link>
		<comments>https://lijing00333.wordpress.com/2011/04/29/lessons-on-font-face-from-the-f2e-summit/#comments</comments>
		<pubDate>Fri, 29 Apr 2011 07:00:33 +0000</pubDate>
		<dc:creator>Jayli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://lijing00333.wordpress.com/?p=219</guid>
		<description><![CDATA[原文：http://www.nczonline.net/blog/2011/04/05/lessons-on-font-face-from-the-f2e-summit/ 标题：Lessons on @font-face from the F2E Summit 作者：NCZakas 译文：F2E大会上关于@font-face的分享 上周我参与组织了Yahoo F2E大会，这次大会聚集了Yahoo全球各地的前端工程师，其中@font-face是本次大会最受关注的话题之一，我们讨论了它的种种优势和缺陷，好记性不如烂笔头，我得赶紧把这些知识点记录下来，本篇内容来自于 Matt Seeley 关于“yahoo.com/tablet”的专题分享“iPad版Yahoo首页实战”（Lessons from the Tablet Front Page），以及来自于Adam Wang关于面向未来的CSS3的专题分享“无名小站新版首页案例分析”（Case Study: Wretch New Front Page），在这里我只是将他们的分享做了摘录。 兼容性 如果你不清楚&#60;video&#62;和&#60;audio&#62;标签的兼容性问题的话，你可能也不会知道 @font-face 的兼容性情况，尽管在桌面浏览器中可以通过 OpenType、TrueType 和 WOFF 可以比较好的做到兼容，但在移动终端则没办法轻易做到兼容。iOS4.1 和较早的版本只支持 SVG 字体，而 Android 只支持 TrueType 字体。iOS4.2 及后续版本开始同时支持 OpenType、TrueType 和 SVG 字体。也就是说，要想兼容 iOS 和 Android，只要将 css 代码精简成如下模样即可： @font-face { font-family: "Gotham [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=lijing00333.wordpress.com&amp;blog=19827007&amp;post=219&amp;subd=lijing00333&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>https://lijing00333.wordpress.com/2011/04/29/lessons-on-font-face-from-the-f2e-summit/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="https://secure.gravatar.com/avatar/cb9e58891ba7f47286edb660919f72b4?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">lijing00333</media:title>
		</media:content>
	</item>
		<item>
		<title>QCon 2011 后记</title>
		<link>https://lijing00333.wordpress.com/2011/04/22/qcon2011/</link>
		<comments>https://lijing00333.wordpress.com/2011/04/22/qcon2011/#comments</comments>
		<pubDate>Fri, 22 Apr 2011 11:23:36 +0000</pubDate>
		<dc:creator>Jayli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://lijing00333.wordpress.com/?p=183</guid>
		<description><![CDATA[本文同期发表在http://ued.taobao.com 关于Qcon 2011 之前年初我参加了新版淘宝首页的开发，做了一些html5的实践，正好这次QCon有学鹍主持的html5专题，小马就推荐我去QCon分享一下这方面的心得，所以对我来说，能参加这次QCon很幸运，也很忐忑。一方面，我在html5方面的确算不得专家，另一方面，淘宝在html5实践之路上也在摸着石头过河，不过，感谢学鹍的鼓励，还有澄净、承玉、圆心和完颜的帮助，让我仔细梳理html5实践原则和一些教训，这才有了这个ppt 说起来，这是我第二次参加QCon，之前QCon关于纯粹Web前端的专题很少，就像小马说的，QCon大会是后端开发工程师和架构师的技术大会，不过这次QCon前端的专题一下子增加到了三个，有点小意外。此外，敏捷开发、Java的回归、关于测试和服务器集群优化的专题演讲依然让人收获颇丰。 关于敏捷 这次QCon“敏捷开发”突然就火了起来，当然不是说之前没有“敏捷”，甚至我们每天都在“敏捷”之中。那么，对于前端工程师来讲，有无必要去关注“敏捷”呢？我认为不但要关注，而且要有意识历练自己成为敏捷教练，也就是说前端工程师做不了PM(项目经理)的职位，不代表不能具备PM的能力，如果由前端工程师来驱动项目（比如Kissy的开发和淘宝首页的开发），能不能做到真正的敏捷高效，如何合理的做需求排期、安排迭代开发？这种基本能力应当是每个工程师——当然包括前端工程师——所必备的技能，我想，这也是前端工程师自身发展的一个必由节点。 关于Java 我在QCon上听到关于前端工程师的言论最多的就是，“怎么看，都感觉前端写的代码比不上后端工程师那么专业功底扎实，写出来的东西也没有后端稳重可靠”。尽管这种言论有失偏颇，但也说明了IT行业对前端开发的普遍看法，没错，前端工程师多是半路出家，毕竟入门前端开发实在太简单了，所以我们在招聘前端工程师的时候都会加上一条：至少熟悉一门后端语言（当然熟悉Java更好，淘宝的后台大部分使用Java），如果前端工程师仅仅将关注点放在html/css/js上面，其成长将迅速到达瓶颈，所以，和传统后台开发语言不同，前端的学习曲线是先缓后陡，越到后来越会发现数据结构、设计模式、编译原理、网络协议的重要性，而这些内容，正是传统后端工程师所擅长的。这里不是说前后端之间不容水火，而是掌握全面的知识结构，对于前端工程师的成长百利而无一害。因此，当今天大家重新将目光聚焦在Java身上，重新审视Java时候，对于前端工程师，也要将目光收回，从箱底翻出那些破旧的计算机专业课本，这些东东才是我们更上一层楼的关键所在。 关于测试 测试的话题一直都备受关注，这次QCon就有诸多专家做了这方面的分享，而我更想了解如何做前端测试，遗憾的是，专家的分享依然侧重于测试平台建设和分层测试理论。不过，不管是平台自动化还是分层理论，大家至少有两个共识，第一，对于MVC来讲，对M做测试最容易，对C做测试难度次之，对V做测试最难；第二，代码质量直接影响到测试效率。而需求变化频繁又影响代码质量，似乎注定测试是一个永恒的难题。不过，对于前端来讲，可以先让M可测，再深入搞定C，最后集中精力攻克V的测试难题，当然在这之前，则要先教会小白们如何写出符合MVC的代码。 关于前端开发 这次QCon上三个前端专题基本描述清楚了前端开发的三个发展方向，第一，面向服务器端的JavaScirpt，第二、手持终端，第三、传统前端从html4到html5的进化。我想这种分工是一种必然，当然不是说现在一定是做分工的最佳时机，而是作为前端工程师来讲，应当具有这种危机意识和一定的前瞻性，而不管哪个方向，我们都能看到这个职位对前端工程师专业素养极高的要求。 其实，这次QCon给我带来的思考不止这些，我也非常高兴能把这些体会分享给大家，当然这次QCon上和html5专题的几位讲师（谢子斌、hax、杜欢）的合作相当愉快，学鹍对这个专题也是信心满满，也非常期待和他们的再次合作：<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=lijing00333.wordpress.com&amp;blog=19827007&amp;post=183&amp;subd=lijing00333&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>https://lijing00333.wordpress.com/2011/04/22/qcon2011/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="https://secure.gravatar.com/avatar/cb9e58891ba7f47286edb660919f72b4?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">lijing00333</media:title>
		</media:content>

		<media:content url="http://ued.taobao.com/blog/wp-content/uploads/2011/04/qcon_html5.jpg" medium="image" />
	</item>
		<item>
		<title>[翻译]使用YUI 3开发Web应用的诀窍</title>
		<link>https://lijing00333.wordpress.com/2011/04/22/a-recipe-for-a-yui-3-application/</link>
		<comments>https://lijing00333.wordpress.com/2011/04/22/a-recipe-for-a-yui-3-application/#comments</comments>
		<pubDate>Fri, 22 Apr 2011 11:17:26 +0000</pubDate>
		<dc:creator>Jayli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://lijing00333.wordpress.com/?p=179</guid>
		<description><![CDATA[本文同期发表在http://ued.taobao.com 导语：这篇“基于YUI3开发web应用的诀窍”是比较经典的介绍 YUI3 工作机制的文章，文章发布在yuiblog上，总体难度适中，比较适合初学者认识、了解 YUI3。以此纠集了三名应届同学来翻译这篇文章：函谷、郝黎、张勉，并希望能对正在学习YUI3的同学有所帮助和启发。 原文标题：A Recipe for a YUI 3 Application 原文地址：http://www.yuiblog.com/blog/2011/04/01/a-recipe-for-a-yui-3-application/ 译文：使用YUI 3开发Web应用的诀窍 我们知道，YUI3的设计始终围绕着“模块”展开。今天我不想过多解释什么是模块，因为Nicholas Zakas在他的文章&#8221;构建可伸缩的前端架构&#8220;中已经做了详尽说明。在这里我将着重阐述如何构建这些模块。文章中的大部分内容都可以从在线文档查阅，并有其他可代替的方法。当然在线API文档的内容大而全。本文只是介绍其中的精华的部分——基于YUI3开发web应用的诀窍，这里的“诀窍”更针对短小精悍的程序场景，不像Nicholas Zakas所指的架构级场景，毕竟仅凭本文的篇幅无法全部展开讲述YUI3。 模块的定义 首先我们要对模块进行定义，一种常见的方法是将页面可视区域的不同部分做切分，导航、菜单、正文、边栏面板等等。然后查一下YUI是否已经提供了这些模块，比如YUI3就没有提供“菜单”组件，但提供了Node-MenuNav插件，这个插件可以将结构化好的html代码（ul&#62;li）渲染成具有交互行为的菜单。或者你可以直接去YUI Gallery中去找基础组件。不管怎样，你总会找到一种容器或者布局，可以让你往里填充你需要的东西，ok，让我们从这里开始。 我建议将每个模块都封装进一个文件，放在和文件名同名的目录中，比如weather模块应当放在/weather/weather.js中，这样做的原因是，有可能你的组件会依赖一些样式，包括css和img等，将这些样式和资源文件放到和js同一个目录下，YUILoader就会很方便的找到他们。这样，样式文件就可以放在weather/assets/skins/sam/weather.css，同样，其他图片和样式也可以按这种方式放置，当然我们假设你没有使用YUI Builder来打包你的项目，这就有点说来话长了。assets目录和skin目录的含义不言自明，但sam目录就搞不懂啥意思了，其实sam是YUI配置项中skin的默认值，指代YUI内嵌组件的默认样式，sam取名自其设计师Sam Lind。因此你也可以使用你的昵称作为你的组件皮肤名称，当然这需要你在YUI全局配置中传入skin参数，简单起见，我们这里只使用默认皮肤。 模块文件模板 这里是一段最常用的模块定义的代码： ﻿ /*jslint devel: true, undef: true, newcap: true, strict: true, maxerr: 50 */ /*global YUI*/ /** * The module-name module creates the blah blah * @module module-name */ YUI.add(‘module-name’, [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=lijing00333.wordpress.com&amp;blog=19827007&amp;post=179&amp;subd=lijing00333&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>https://lijing00333.wordpress.com/2011/04/22/a-recipe-for-a-yui-3-application/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="https://secure.gravatar.com/avatar/cb9e58891ba7f47286edb660919f72b4?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">lijing00333</media:title>
		</media:content>
	</item>
		<item>
		<title>JavaScript语法检查插件 jsLint for Vim</title>
		<link>https://lijing00333.wordpress.com/2011/03/09/jslint-for-vim/</link>
		<comments>https://lijing00333.wordpress.com/2011/03/09/jslint-for-vim/#comments</comments>
		<pubDate>Wed, 09 Mar 2011 08:48:08 +0000</pubDate>
		<dc:creator>Jayli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://lijing00333.wordpress.com/?p=212</guid>
		<description><![CDATA[工欲善其事，必先利其器。作为更专业的前端工程师，我们需要强劲的IDE协助我们写出规范、美观、漂亮的JavaScript代码，首先要作的就是对代码进行合法性检查，而通过 www.jslint.com 进行手工操作又显得碍手碍脚。为了提高效率，这里推荐使用 jsLint + Vim(gVim)，能够协助你达到事半功倍的效果。 首先，和 JavaScriptLint 不同[注1]，jsLint 是需要 JavaScript 引擎的支持的，linux中可选的有基于 C 语言的 Spidermonkey 和基于 Java 的 Rhino，考虑到速度，推荐使用 Spidermonkey。另外，jsLint.vim 初始配置挂载的监听有些冗余，这会导致 Vim 运行很慢，影响编码的效率，这里我 hack 了一份 jslint.vim，只用F4键就可以开启/关闭语法检查，下面介绍配置方法（linux &#38; windows）。 jsLint + vim for Linux 1，准备JS引擎 linux 下默认没有 JavaScript 引擎，需要安装，旧版本的 ubuntu 通过apt-get来安装 sudo apt-get install spidermonkey-bin 新版的 ubuntu 需要通过下面这个包安装 https://launchpad.net/ubuntu/hardy/i386/spidermonkey-bin/1.8.1.4-2ubuntu5 其他linux发行版可以通过源码安装： ftp://ftp.mozilla.org/pub/mozilla.org/js/ 2，安装ruby环境 ubuntu下安装： sudo apt-get install [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=lijing00333.wordpress.com&amp;blog=19827007&amp;post=212&amp;subd=lijing00333&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>https://lijing00333.wordpress.com/2011/03/09/jslint-for-vim/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="https://secure.gravatar.com/avatar/cb9e58891ba7f47286edb660919f72b4?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">lijing00333</media:title>
		</media:content>

		<media:content url="http://ued.taobao.com/blog/wp-content/uploads/2010/11/linux界面.png" medium="image" />

		<media:content url="http://ued.taobao.com/blog/wp-content/uploads/2010/11/windows界面.png" medium="image" />

		<media:content url="http://ued.taobao.com/blog/wp-content/uploads/2010/11/环境变量配置.png" medium="image" />

		<media:content url="http://ued.taobao.com/blog/wp-content/uploads/2010/11/修改文件.png" medium="image" />
	</item>
		<item>
		<title>数组去重——一道前端校招试题</title>
		<link>https://lijing00333.wordpress.com/2011/02/08/%e6%95%b0%e7%bb%84%e5%8e%bb%e9%87%8d%e2%80%94%e2%80%94%e4%b8%80%e9%81%93%e5%89%8d%e7%ab%af%e6%a0%a1%e6%8b%9b%e8%af%95%e9%a2%98/</link>
		<comments>https://lijing00333.wordpress.com/2011/02/08/%e6%95%b0%e7%bb%84%e5%8e%bb%e9%87%8d%e2%80%94%e2%80%94%e4%b8%80%e9%81%93%e5%89%8d%e7%ab%af%e6%a0%a1%e6%8b%9b%e8%af%95%e9%a2%98/#comments</comments>
		<pubDate>Tue, 08 Feb 2011 16:43:51 +0000</pubDate>
		<dc:creator>Jayli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://lijing00333.wordpress.com/?p=171</guid>
		<description><![CDATA[很多校招题是没有严格的标准答案的，只有知识点，只要几个关键点能答上来，不管程序是否真的能跑通，都可以拿分的。比如最常见的一道题： 试题： 有这样一个数组，成员都是数字，例如 var a = [1,2,3,4,5,2,3,4,6,7,8]; 请实现a.distinct()方法，用来给数组a去掉重复值，要求对Array的原型进行扩展方法，并尽可能做到效率最优。 考察点： 1，考察应试者是否理解原型链 2，考察应试者是否由意识的控制算法的时间复杂度，了解应试者对专业课知识的掌握程度 3，考察应试者对js数组函数的了解程度 答案1： Array.prototype.distinct = function(){ var a = [],b=[],oa = this.concat(); for(var i = 1;i&#60;oa.length;i++){ for(var j = 0;j&#60;i;j++){ if(b.indexOf(j)&#60;-1)continue; if(oa[j] == oa[i]){ b.push(j); } } } this.splice(0,this.length); for(var i = 0;i-1)continue; this.push(oa[i]); } return this; }; 答案2： Array.prototype.distinct = function(){ for(var i = [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=lijing00333.wordpress.com&amp;blog=19827007&amp;post=171&amp;subd=lijing00333&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>https://lijing00333.wordpress.com/2011/02/08/%e6%95%b0%e7%bb%84%e5%8e%bb%e9%87%8d%e2%80%94%e2%80%94%e4%b8%80%e9%81%93%e5%89%8d%e7%ab%af%e6%a0%a1%e6%8b%9b%e8%af%95%e9%a2%98/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
	
		<media:content url="https://secure.gravatar.com/avatar/cb9e58891ba7f47286edb660919f72b4?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">lijing00333</media:title>
		</media:content>
	</item>
		<item>
		<title>淘宝2011新版首页开发实践</title>
		<link>https://lijing00333.wordpress.com/2011/02/08/dev-share-for-taobao-new-homepage/</link>
		<comments>https://lijing00333.wordpress.com/2011/02/08/dev-share-for-taobao-new-homepage/#comments</comments>
		<pubDate>Tue, 08 Feb 2011 16:43:15 +0000</pubDate>
		<dc:creator>Jayli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://lijing00333.wordpress.com/?p=234</guid>
		<description><![CDATA[本文同期发表于 http://ued.taobao.com 新年钟声刚过，淘宝新版首页全“心”上线了，这次设计大胆的将布局从 960px 伸展至 1000px，页面更通透，新首页更大范围的实践了 HTML5 和 CSS3，全面兼容 iPad，并在可访问性方面有了更多积极的尝试。对于我来讲，这次开发着实是一次奇妙的经历，也让我对可访问性、html5 和性能优化有了新的认识。 其实 html5 并不是那么遥不可及，现在也有着不少针对 pc 终端的 html5 template，如果不甚考虑 ie6/7/8 禁用脚本的情况，完全可以放手运用 html5 标签。那么针对那些 ie6/7/8 禁用脚本的用户，我们参照了 facebook 的做法，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。 如果你足够细心，就会发现新首页并未完全遵循“栅格”，因为一个很纯粹的文档中，实现栅格效果所使用的层层 wrap 本身就缺乏语义，html5 带来了更多语义化的标签，这和缺乏语义的栅格实现是如此格格不入，摆脱栅格，容器用绝对定位，不用写那么多 hack，岂不多快好省～ 另外，关于性能优化，之前我们的确过于依赖 yslow、pagespeed 的评分，其实，这些条条框框才是真正阻碍我们作 WPO 的拦路虎，不是说这些指标不科学，而是他们限制住了我们的思维和视野，更何况，他们都缺少对“加载/渲染时间”这个最重要的因素的评估，当用户更快的看到并可用页面（尤其是首屏），才是真正的性能提升，因此，这次开发特意针对 First Rendering（首次渲染）的指标进行一些重构，重写了几乎所有的逻辑层 js 代码 （domready 之前，甚至 Render 出 UI 之前，js 已经在运行了），当 js [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=lijing00333.wordpress.com&amp;blog=19827007&amp;post=234&amp;subd=lijing00333&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>https://lijing00333.wordpress.com/2011/02/08/dev-share-for-taobao-new-homepage/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="https://secure.gravatar.com/avatar/cb9e58891ba7f47286edb660919f72b4?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">lijing00333</media:title>
		</media:content>

		<media:content url="http://ued.taobao.com/blog/wp-content/uploads/2011/01/ued-blog-wpo-1.png" medium="image" />

		<media:content url="http://ued.taobao.com/blog/wp-content/uploads/2011/01/ued-blog-wpo-2.png" medium="image" />
	</item>
		<item>
		<title>[翻译] Zakas 对 John 的回应</title>
		<link>https://lijing00333.wordpress.com/2011/02/08/%e7%bf%bb%e8%af%91-zakas-%e5%af%b9-john-%e7%9a%84%e5%9b%9e%e5%ba%94/</link>
		<comments>https://lijing00333.wordpress.com/2011/02/08/%e7%bf%bb%e8%af%91-zakas-%e5%af%b9-john-%e7%9a%84%e5%9b%9e%e5%ba%94/#comments</comments>
		<pubDate>Tue, 08 Feb 2011 16:43:11 +0000</pubDate>
		<dc:creator>Jayli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://lijing00333.wordpress.com/?p=169</guid>
		<description><![CDATA[题目：回应 John Resig 关于 YUI 的评论 作者：Nicholas C. Zakas 译者：拔赤 原文：http://www.nczonline.net/blog/2010/11/03/response-to-john-resigs-comments-about-yui/ 外一篇：jq之父回答“YUI3如何提升其影响力？” 就在今早，有人在 Quora [注1]上提了一个问题：“YUI3 如何提升其影响力？”，这个问题很有意思，下面的回复也很有意思。我最感兴趣的一个回复来自于 jQuery 的作者 John Resig，他的解读非常独到，给出了创建 jQuery 庞大且充满活力的开源社区的路线图。只是其中很多观点我不敢苟同。 在讨论之前，应当说明的是，我在 YAHOO 工作，我一直都在为 YUI 贡献代码，尽管我不是 YUI 开发团队成员，因此我的观点不代表 YAHOO 公司和 YUI开发团队，仅仅是我个人针对 John Resig 回复来分享我的看法。再补充一点，我对 John 本人、jQuery 团队和 jQuery 社区开发者们十分敬重，所以，请不要将我的观点断章取义，做别有用心的理解。 首先，我承认，分散的站点的确是 YUI 的一个问题，不止一个人曾经纠结于到底应该访问 YDN 呢还是访问 YUILibrary.com？这是 YUI 首先要解决的问题。同样，John 对于简化 YUI 文档首页上的引导信息的建议也相当不错，是个好主意。 John 的下一段落介绍了 YUI 如何与 [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=lijing00333.wordpress.com&amp;blog=19827007&amp;post=169&amp;subd=lijing00333&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>https://lijing00333.wordpress.com/2011/02/08/%e7%bf%bb%e8%af%91-zakas-%e5%af%b9-john-%e7%9a%84%e5%9b%9e%e5%ba%94/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="https://secure.gravatar.com/avatar/cb9e58891ba7f47286edb660919f72b4?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">lijing00333</media:title>
		</media:content>
	</item>
	</channel>
</rss>
