<?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>WEB前端开发</title>
	<atom:link href="http://www.css88.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.css88.com</link>
	<description>专注前端开发，关注用户体验</description>
	<lastBuildDate>Wed, 01 Feb 2012 05:47:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Javascript 中的 call 和 apply</title>
		<link>http://www.css88.com/archives/4431</link>
		<comments>http://www.css88.com/archives/4431#comments</comments>
		<pubDate>Wed, 01 Feb 2012 05:44:17 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[apply]]></category>
		<category><![CDATA[call]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4431</guid>
		<description><![CDATA[JavaScript 中通过call或者apply用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。简单的说就是改变函数执行的上下文，这是最基本的用法。两个方法基本区别在于传参不同。 call(obj,arg1,arg2,arg3);call第一个参数传对象，可以是null。参数以逗号分开进行传值，参数可以是任何类型。 apply(obj,[arg1,arg2,arg3]);apply第一个参数传对象，参数可以是数组或者arguments 对象。 这两个方法通常被用来类的继承和回调函数： 作用一、类的继承： 先来看这个例子： function Person(name,age){ this.name = name; this.age=age; this.alertName = function(){ alert(this.name); } this.alertAge = function(){ alert(this.age); } } function webDever(name,age,sex){ Person.call(this,name,age); this.sex=sex; this.alertSex = function(){ alert(this.sex); } } var test= new webDever(&#34;愚人码头&#34;,28,&#34;男&#34;); test.alertName();//愚人码头 test.alertAge();//28 test.alertSex();//男 这样 webDever类就继承Person类，Person.call(this,name,age) 的 意思就是使用 Person构造函数（也是函数）在this对象下执行，那么 webDever就有了Person的所有属性和方法，test对象就能够直接调用Person的方法以及属性了; 09年的理解解非常粗浅，呵呵。http://www.css88.com/archives/1692 作用二、回调函数： call 和 apply在回调行数中也非常有用，很多时候我们在开发过程中需要对改变回调函数的执行上下文，最常用的比如ajax或者定时什么的，一般情况下，Ajax都是全局的，也就是window对象下的，来看这个例子： function Album(id, [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4431/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>javascript插入样式</title>
		<link>http://www.css88.com/archives/4426</link>
		<comments>http://www.css88.com/archives/4426#comments</comments>
		<pubDate>Mon, 30 Jan 2012 05:19:01 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[styleSheet]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4426</guid>
		<description><![CDATA[最近做一个项目，需要javascript动态插入样式，结果以前的方法失效了！查了2个小时的原因竟然是自己手贱，这个最后再说！ javascript插入样式在前端开发中应用比较广泛，特别是在修改前端表现和页面换肤的时候。最近做的这个任务是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入。 一般情况下javascript动态插入样式有两种，一种页面中引入外部样式,在&#60;head&#62;中使用&#60;link&#62;标签引入一个外部样式文件，另一种是在页面中使用&#60;style&#62;标签插入页面样式（这里说的不是style属性）。 一、页面中引入外部样式： 在&#60;head&#62;中使用&#60;link&#62;标签引入一个外部样式文件，这个比较简单，各个主流浏览器也不存在兼容性问题： function includeLinkStyle(url) { var link = document.createElement(&#34;link&#34;); link.rel = &#34;stylesheet&#34;; link.type = &#34;text/css&#34;; link.href = url; document.getElementsByTagName(&#34;head&#34;)[0].appendChild(link); } includeLinkStyle(&#34;http://css.sodao.com/home/css/reset.css?v=20101227&#34;); 但是在我目前做的这个项目中本身应用的样式非常少，直接用引入一个外部样式文件似乎不合适，所以我选择了第二种方案，在页面中使用&#60;style&#62;标签插入页面样式。 二、使用&#60;style&#62;标签插入页面样式： 这种方式在各个主流浏览器存在兼容性问题，像firefox等标准浏览器无法直接获取设置styleSheet的cssText值，标准浏览器下只能使用document.styleSheets[0].cssRules[0].cssText单个获取样式；同时使用：document.styleSheets[0].cssRules[0].cssText=newcssText；页面不会自动更新样式，必须使用：document.styleSheets[0].cssRules[0].style.cssText=newcssText；这点似乎没坑爹的IE来的人性化和简便。YUI中使用了一个很好的办法：style.appendChild(document.createTextNode(styles));采用createTextNode将样式字符串添加到&#60;style&#62;标签内； function includeStyleElement(styles,styleId) { if (document.getElementById(styleId)) { return } var style = document.createElement(&#34;style&#34;); style.id = styleId; //这里最好给ie设置下面的属性 /*if (isIE()) { style.type = &#34;text/css&#34;; style.media = &#34;screen&#34; }*/ (document.getElementsByTagName(&#34;head&#34;)[0] &#124;&#124; document.body).appendChild(style); [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4426/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Javascript绝句欣赏</title>
		<link>http://www.css88.com/archives/4419</link>
		<comments>http://www.css88.com/archives/4419#comments</comments>
		<pubDate>Thu, 19 Jan 2012 06:43:28 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[JS]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4419</guid>
		<description><![CDATA[转载自：http://site.douban.com/widget/notes/22456/note/142716442/ 1. 取整同时转成数值型： &#8217;10.567890&#8242;&#124;0 结果: 10 &#8217;10.567890&#8242;^0 结果: 10 -2.23456789&#124;0 结果: -2 ~~-2.23456789 结果: -2 2. 日期转数值： var d = +new Date(); //1295698416792 3. 类数组对象转数组： var arr = [].slice.call(arguments) 4. 漂亮的随机码： Math.random().toString(16).substring(2); //14位 Math.random().toString(36).substring(2); //11位 5. 合并数组： var a = [1,2,3]; var b = [4,5,6]; Array.prototype.push.apply(a, b); uneval(a); //[1,2,3,4,5,6] 6. 用0补全位数： function prefixInteger(num, length) { [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4419/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>前端工程师？前端攻城湿？前端攻城师？前端攻城狮？！</title>
		<link>http://www.css88.com/archives/4409</link>
		<comments>http://www.css88.com/archives/4409#comments</comments>
		<pubDate>Mon, 16 Jan 2012 14:06:57 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[杂谈]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4409</guid>
		<description><![CDATA[前端工程师？前端攻城湿？前端攻城师？前端攻城狮？！ 我坎坷的前端路 06年年底我刚刚接触前端概念的时候给自己定了一个这么定义：和设计师一样细腻,和程序员一样严谨;游走在设计师和工程师之间,游刃于用户体验和技术实现之间,斡旋在用户利益和商业利益之间。——偶是一枚前端开发工程师！那时候决定直接一定要坚定的走前端开发这条路！到现在也有5年多了，其中发生了很多事情。 07年开始基本上一门心思的学js，调试前期全是一个一个的alert，后来用Visurl Studio断点调试，前端知识和js基本是从零开始，那时候甚至连ajax都要问后端问个半天才搞懂，那时候做音乐试听的项目，做了2个月，基本每天都是凌晨12点后回家，相当的累，但是每天都非常开心充实。这个项目现在回去想想，交互还是相当的负责，每个页面都有可以直接播放音乐，循环播放，打分，歌词随音乐滚动，还有烦人的mediaplayer操作，还有很多很多的交互功能，或许我是幸运的，第一次做前端就碰到了这么个项目，让我深刻的体会了前端的苦与乐。这以后一直不断的学原生的js。 08年年底做过个2个月的客服，嘿嘿，基本上是帮网友解决一些网页上操作和一些电脑故障问题，这时候才真正思考了一个问题：用户到底是怎么使用我们自己开发的网站的。用户很“笨”，“笨”到你想把你自己的电脑砸了。一个网友在某个原创音乐网站上上传了歌曲，到我们网站来听他自己的歌曲，找了半天没找到说你们网站真垃圾，搞了半天终于知道了他在那个网站上上传的歌曲不能在我们网站上听！当然这个是个极端的例子，原因也很简单其实这两个音乐网站前期本来就是同一批人开发的，架构和交互基本一样。给用户造成一些错觉。 09年开始做了半年的美工，设计加切页面，空的时候也自己玩js。那时候自己搞MTJS，写了一个很不成熟的写了一个DOM类库，基本功能都实现了，那时候学了很多，不过由于相对的不成熟所以一直实际应用，当然现在凡是碰到用原生js写的时候，里面的方法还是非常有效，非常好用的。 09年下半年开始就不做设计了，基本上是切页面，写js，今年开始基本每天都扑在js上了，基本没有多少空余的时间，每天听产品今天这样改明天那样改，说实话累了。现在前端方向那么多，真得好好想想自己接下去的路该怎么走。很多苦逼，很多快乐，有时候也很嚣张，有时候也很无助，更多的是无奈。 前端开发正在蓬勃发展，或许大家也该想想自己将来该往哪方面发展。 以下内容来自：http://www.cnblogs.com/radom/archive/2011/11/23/2259674.html 豆瓣前端: 认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容，解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的，多年使用的语言，作为开放标准将被各种平台所支持。产品形态和数据的分离是形势所趋。移动时代对产品形态多元化的要求虽然可以靠不同技术分别实现，但要付出巨大的成本。这也是html5这个04年就提出来的标准，直到前两年才火爆的原因。 现阶段的价值也很大。web产品交互越来越复杂，用户使用体验和网站前端性能优化，这些都需要专业的前端工程师来解决。另外，在项目中还要弥补设计师在交互设计上的不足，前端工程师在开发过程中起着重要的承上启下的作用。一两个前端工程师就可以让整个开发并行起来，让设计到实现的转换更顺利。明智的公司应该贮备前端工程师资源。 我不认为前端工程师和产品经理有什么关系。好的前端工程师一定会成为好的交互设计师。前端工程师对信息架构的理解应不亚于专业的交互设计师。 新浪前端： 作为前端工程师最核心的价值或者说是责任，就是将大伙的所有心血和努力最终要完美地呈现给用户。在一个技术开发团队中，无疑离用户最近的人就是前端，其次是UI、UE和产品，然后是后端、DBA和系统工程师。 如果说一个技术开发团队就是一支足球队的话，那么前端工程师无疑就是前锋，他接到队友们倾力传到脚下的球，他责无旁贷，要做的就是必须将球准确无误地打入对方的球门&#8230;.. 他有两点必须是非常清楚：1、他必须清楚在对方球门与自己之间存在着哪些阻碍；2、他必须清楚如何破除这些障碍将球直至门网&#8230;.. 他也应该要是所有队员中对这两点最为清楚的人。 每个球队都有自己的明星，可以是锋线杀手、可以是中场战车、可以是超级后卫、也可以是神奇门将、甚至可以是救火教练。而且相信球场上任何一个位置的优秀球员，都有可能在后场断球长途盘带奔袭射门，球进！但任何一支优秀的球队都必须有两类分工，前场球员想的是赢得比赛，后场球员想的是不能输掉比赛，各司其职才能卓越。 而作为一名称职的前锋，你必须是球队里，进球最多、射门技术最好的那一个，否则你还有什么价值可言呢&#8230;. 百度前端： 应该来讲有三条路，一个是向前走，一个是向后走，另外一个是一直做前端，深入下去。向前即是克军所说的往用户体验与交互设计甚至产品设计师上走，这是最能体现前端价值的了，即用户体验，大多人会往这方面走； 向后走就是做Web开发，往数据库和后台开发方面走，不再区分前后端，大家深入产品的研发实现，这条路就是与软件工程师融合的路，这是的价值就体现在对于业务功能的实现上； 最后还有的是一直深入做前端开发，比如前端各类库与框架的架构设计，W3C各种标准深入研究，对于JavaScript语言本身的研究，对浏览器的原理分析，对于网络传输协议的原理分析等等，这条路要深入下去很不容易，因为涉及很多原理与根本性的东西，所以走的人也不是很多。 当然了，还有一些彻底离开了前端甚至软件开发，转行专门做产品或者做业务运营。可能会因为有不错的技术背景有一定的优势呢。 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《前端工程师？前端攻城湿？前端攻城师？前端攻城狮？！》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4409/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>漫话产品设计</title>
		<link>http://www.css88.com/archives/4406</link>
		<comments>http://www.css88.com/archives/4406#comments</comments>
		<pubDate>Mon, 16 Jan 2012 01:14:43 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[设计素材]]></category>
		<category><![CDATA[产品设计]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4406</guid>
		<description><![CDATA[很有意思的几幅和产品设计相关的漫画，分享一下： 来自：http://www.uegeek.com/ue/talk_about_product_design 1.鱼饵就应当符合鱼儿的胃口，而不是钓鱼者 第一次看到这幅漫画就笑了：画的不就是做产品的我们嘛~ 花了不少成本、人力、时间，把自己看起来都颇诱人的鱼饵（x产品x功能）抛到鱼塘（网站）里，满心欢喜地守着盼着等着念着：“鱼儿鱼儿快上钩~”鱼儿们来到网站，先是看到一个庞然大物，一晕；然后满世界找熟悉的功能，未遂，再晕；好不容易找对地儿，发现鱼饵味道变了，三晕…… 反省：核心需求的满足，永远是最好的饵料啊~ &#160; 2.踏着别人的脚步前进，超越就无从谈起 “超越”是一个我们都很迷恋的词。但是它后面藏着很多疑问：为什么要超越？怎样算超越？要在哪些方面超越？现在距离有多少？大家的起跑线、方向、耐力、步长、频率一样吗？怎样超越？投入多少成本去超越？…… 好了，如果顺利回答完上面的问题，我们往往发现，“超越”其实只是我们嘴巴迷恋的词，而“跟随”才是我们脑袋和腿脚（不自觉地）迷恋的词。正是因为“有距离”，所以欲望很强烈，心情很急切，脚步很错乱。“跟随”就显得很靠谱：直接跨越摸索、纠结阶段，直接节约思考、打磨的时间，直接规避失败的风险，何乐而不为呢？但是，跟随的结果最多是不过不失，大家都跟随了，整个市场的产品也同质化了。我们表面上做了不少事情，将产品改头换面更新换代，但是，实际上属于自己的东西越来越少，产品的个性越来越不鲜明，用户只好在审美疲劳中放弃选择。 反省：寄望通过别人的分享和经验得到提高，将永远没有自己核心的东西 3.找解决方案要比纠结原因的优先级高 呱呱坠地就流芳百世的产品，恐怕是百年一遇的。绝大多数的产品被设计出来后，都会经历一个生命周期。尤其在生命周期曲线的上升期和下降期，我们尤其会纠结于产品停滞不前、不受欢迎甚至是被千夫所指的阶段。这个时候，如上图，大概会有几种情况：a.在汪洋中没有方向，在一小片区域打转，自我感觉良好；b.大家逐渐发现各种问题，前后不靠岸，于是开始相互推诿和指责  c.大家坐到一起，发现问题有ABCD，解决方案是1234，分工是甲做指南针、乙补洞、丙掌舵、丁划桨…… 反省：没有目标，任何风向都是不顺的；不提出问题，也无法寻找到原因；办法总比问题多，关键是想不想，做不做。 4.真正的创新只有在经历过擦肩而过后才能实现 创新是产品设计中不可缺少的元素。但它总是披着“灵光一现”的隐形衣，所以我们总觉得它可遇不可求。但是为什么有人遇到了，有人求之却不得？这里有歪理一枚：“遇”字包含这样的意思，两个物体要相遇，前提是至少有一个物体在移动。如果目标是静止不动的，当然只有我们去移动，才有与其相遇的可能；当然，我们的目标也可能是移动的，但是相遇往往只是电光火石的一瞬间，你有把握能捕捉到吗？所以说，“机会只光顾有准备的人”…… 反省：实践和思考的反复迭代，是创新的催化剂。 5.过多的会议是一个糟糕的组织明显的标志 这一点，估计只需意会，不需言传了。用会议代替流程和规范，用讨论代替执行，推卸责任，陷入细节，导致时间成本高筑，责权不明晰，奖惩不分明……在产品设计的过程中，我们或多或少都能体会到。 反省：绅士的演讲应该像女人的裙子，越短越好，会议也是。当然前提是问题能够解决。 胡诌了五幅小漫画，很不厚道地作为优涩控新年开篇。更多的漫画，可以到这里和这里围观~ 生活总是充满问题和思考的，一言半语的总结常常能让我们获益良多，做产品，也是一样。 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《漫话产品设计》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4406/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Underscore.string.js Version (2.0.0) 中文文档</title>
		<link>http://www.css88.com/archives/4404</link>
		<comments>http://www.css88.com/archives/4404#comments</comments>
		<pubDate>Sat, 07 Jan 2012 13:02:15 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[前端资源]]></category>
		<category><![CDATA[开发资源]]></category>
		<category><![CDATA[Underscore]]></category>
		<category><![CDATA[Underscore.string]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4404</guid>
		<description><![CDATA[Javascript缺乏完整的字符串操作。Underscore.string.js试图填补这一空白。 正如名称指出的Underscore.string.js为 Underscore.js 的扩展，但你可以独立使用_s-全局变量。但配合 Underscore.js 使用。 Underscore.string.js Version (2.0.0) 中文文档：http://www.css88.com/doc/underscore.string/ github项目地址：http://epeli.github.com/underscore.string/ &#124; https://github.com/epeli/underscore.string 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《Underscore.string.js Version (2.0.0) 中文文档》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4404/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>时尚的CSS3进度条</title>
		<link>http://www.css88.com/archives/4381</link>
		<comments>http://www.css88.com/archives/4381#comments</comments>
		<pubDate>Sun, 01 Jan 2012 09:13:22 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[css3]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4381</guid>
		<description><![CDATA[时尚的CSS3进度条先看效果图，非常漂亮吧： demo：http://www.css88.com/demo/css3-progress-bars/ 英文原文：http://www.red-team-design.com/stylish-css3-progress-bars HTML代码： HTML代码比较简单 123&#60;div class=&#34;progress-bar blue stripes&#34;&#62; &#160; &#160; &#60;span style=&#34;width: 40%&#34;&#62;&#60;/span&#62; &#60;/div&#62; .progress-bar – 定义进度栏的常规样式。 .blue – 定义进度条的风格，这里是蓝色的 .stripes – 当前进度的动画类型。 span – 填充进度条。内联设置的宽度，0%-100%，进度条的宽度。 CCS代码： 123456789101112131415161718192021222324252627282930.progress-bar &#123; background-color: #1a1a1a; height: 25px; padding: 5px; width: 350px; margin: 50px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 5px #000 inset, 0 1px [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4381/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>用CSS3做的动画按钮</title>
		<link>http://www.css88.com/archives/4377</link>
		<comments>http://www.css88.com/archives/4377#comments</comments>
		<pubDate>Sun, 01 Jan 2012 08:03:15 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html5+css3]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[动画]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4377</guid>
		<description><![CDATA[在Codrops上看到了这篇文章《Animated Buttons with CSS3》，按钮效果非常赞！转过来分享一下： demo：http://www.css88.com/demo/AnimatedButtons/ (页面有广告，点击需谨慎！！！) 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《用CSS3做的动画按钮》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4377/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[转载]2011回顾：20个将JavaScript推到极致的网站</title>
		<link>http://www.css88.com/archives/4370</link>
		<comments>http://www.css88.com/archives/4370#comments</comments>
		<pubDate>Thu, 29 Dec 2011 00:50:32 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[前端志]]></category>
		<category><![CDATA[前端资源]]></category>
		<category><![CDATA[开发资源]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4370</guid>
		<description><![CDATA[转载至：http://www.webapptrend.com/2011/12/1123.html 对于浏览器上的开发者来说，2011年又是相当精彩的一年。web开发者Phil Hawksworth在这篇文章中总结了web 上经典的JavaScript用法。 那些喜欢冒险体验前沿技术的开发者现在应该会非常开心。浏览器正变得越来越强大，上面有各种丰富的功能可以供开发者选择，一些在几年前几乎难以想象的功能都已经一一实现。有了这些新功能，开发者现在能够开发出更精细、更复杂、更有想象力的用户界面了。这为网站开发扫清了障碍，网站能够拥有让人惊喜的用户界面了。 有时候，这种技术的运用是非常精妙的，它无声无息地改变了应用的用户体验。有时结果就像是加入樱桃可乐中的跳跳糖，悄悄地给人们带来惊喜。 这里有20个特别突出的网站，他们在定位、技巧或者是JavaScript的使用上有各自的独到之处。 演示网站 先看一些有趣的东西。这些网站利用JavaScript将Canvas，WebGL，CSS3和HTML5元素这些浏览器技术融合在了一起。通常这些技术只是用来取悦用户，或是在现代的浏览器中显示一些新的功能。虽然大多数的功能都很不错，但有些会占用大量的处理器或是显卡，所以笔记本电脑用户常常需要关注他们的笔记本温度，以免温度过高而出现异常。 1. Baroque.me Baroque.me是一个简单，但是能够催眠的网站，它就用到了HTML5 Canvas元素，并使用JavaScript巧妙地控制了一个简单的虚拟巴赫大提琴设备的渲染工作。网站的声音是由Flash提供的，并且使用JavaScript控制。你可以控制页面上那些跳动的圆点，但是却很难控制大提琴的时间节奏。 它的开发者Alexander Chen来自Google Creative Labs，也参与了非常受欢迎的Les Paul Google Doodle开发，在早些时候，还开发了一个非常棒的可视化NY地铁系统。 2. Beercamp Beercamp 2011的界面非常有趣，可以自由缩放，它非常巧妙地使用了CSS3和JavaScript技术，这一点吸引了许多人的关注。网站大量采用了CSS3转换和变形效果，你还会发现它劫持了浏览器的滚动事件用来控制网页的缩放效果。今年的早些时候David DeSandro曾分享了相关效果实现的技术细节。 &#160; 3. Three.js Canvas和WebGL这些技术为浏览器带来了强大的渲染功能。Mr. Doob开发的Three.js项目是一个3D JavaScript引擎，能够利用浏览器上的这些新功能渲染页面。下面是一个利用Three.js渲染动画或是3D模型的例子。 4. Windows Phone Demo 最新消息：web将覆盖移动设备！老实说，这个消息确实对使用JavaScript技术的移动市场来说是一个好消息。这还只是推动移动市场发展的第一步。 为了演示新的Windows移动设备界面，Microsoft开发了一个Windows mobile上的演示示例。用户确实能够发现它的界面播放的动画非常流畅，并且响应相当及时。这也是CSS和JavaScript的功劳（最好是通过iPhone或是Android设备访问——目前还不支持Windows Phone！）。 工具 这一节介绍的技术可能不会直接给用户带来惊艳的感觉（虽然有些可能可以做到），但他们确实非常重要。其中有些是开发者可能会频繁使用的JavaScript资源，而有些是人们开发浏览器应用时的首选工具。 5. Workflowy Workflowy可以帮助人们整理自己的想法。在2010年十一月推出了他们的测试版本，仅仅用了30天的时间，它就拥有了一百万条记录了。它是由 Jesse Patel和Mike Turitzin共同开发的，Workflowy使用JavaScript处理DOM操作和存储，并且能够在大量的本地记录中快速查找目标记录。如果你需要整理自己的记录或是想查找新的GTD 工具，Workflowy会是一个不错的选择。最近它还增加了对移动设备和平板电脑的支持，方便用户分享文档。 6. jQuery Mobile 虽然现在移动web开发正变得越来越热，但是移动设备的开发工作还是相当困难的。jQuery JavaScript库的目标就是想在浏览器上实现一个通用的JavaScript开发方法。而 jQuery Mobile的目标则更加远大：简化各种移动设备平台上的web开发工作。这个库已经推出了1.0版本，jQuery Mobile网站就是一个很好的示例，展示了如何使用jQuery Mobile开发一个能够在各种移动设备和传统浏览器设备上运行的网站。 7. [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4370/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>设置样式方法setStyle</title>
		<link>http://www.css88.com/archives/4355</link>
		<comments>http://www.css88.com/archives/4355#comments</comments>
		<pubDate>Mon, 26 Dec 2011 10:14:07 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[cssText]]></category>
		<category><![CDATA[setStyle]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4355</guid>
		<description><![CDATA[上周在微博上看到这样一条微博： 这个setStyle方法确实避免了mydiv.style.xxx这种写法大量重复的代码，确实代码简洁了不少，也很直观，但是这里还有一个问题，如果设置的样式一多，重复操作DOM无法避免，销毁原样式并重建都会增加浏览器的开销。我们可以先生成一个样式字符串，再一次性设置样式，这样可以尽量避免页面reflow。例如： 123456789101112131415161718192021222324//类型判断 var TypeC=window.TypeC&#124;&#124;&#123;&#125;; &#40;function&#40;TC&#41;&#123; var toString = Object.prototype.toString; TC.isString = function&#40;o&#41; &#123; return toString.call&#40;o&#41; === '[object String]'; &#125;; TC.isObject = function&#40;o&#41; &#123; return toString.call&#40;o&#41; === '[object Object]'; &#125;; &#125;&#41;&#40;TypeC&#41;; function setStyle&#40;el, style&#41; &#123;//style变量：{&#34;display&#34;:&#34;block&#34;,&#34;font-size&#34;:&#34;28px&#34;,&#34;color&#34;:&#34;red&#34;} var sty=&#34;&#34;; if &#40;TypeC.isString&#40;style&#41;&#41;&#123; sty=style; &#125;else if &#40;TypeC.isObject&#40;style&#41;&#41; &#123; var s; for &#40;s in style&#41; &#123; sty += s+&#34;:&#34;+style&#91;s&#93;+&#34;;&#34;; &#125; [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4355/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

