�??xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>&#20122;&#27954;&#31934;&#21697;&#35270;&#39057;&#19968;&#20108;&#19977;&#21306;&#44;&#25104;&#20154;&#97;&#118;&#20013;&#25991;&#23383;&#24149;&#44;&#31934;&#21697;&#20013;&#25991;&#35270;&#39057;</title><link>http://www.aygfsteel.com/iamtin/category/25697.html</link><description>You are coming a long way, baby~Thinking, feeling, memory...</description><language>zh-cn</language><lastBuildDate>Thu, 13 Sep 2007 00:52:50 GMT</lastBuildDate><pubDate>Thu, 13 Sep 2007 00:52:50 GMT</pubDate><ttl>60</ttl><item><title>说说我对moo、prototype、JQuery的看�?/title><link>http://www.aygfsteel.com/iamtin/archive/2007/09/13/reply_to_javaeye_fins_why_leave_prototype_choose_moo.html</link><dc:creator>Tin</dc:creator><author>Tin</author><pubDate>Thu, 13 Sep 2007 00:40:00 GMT</pubDate><guid>http://www.aygfsteel.com/iamtin/archive/2007/09/13/reply_to_javaeye_fins_why_leave_prototype_choose_moo.html</guid><wfw:comment>http://www.aygfsteel.com/iamtin/comments/144680.html</wfw:comment><comments>http://www.aygfsteel.com/iamtin/archive/2007/09/13/reply_to_javaeye_fins_why_leave_prototype_choose_moo.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/iamtin/comments/commentRss/144680.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/iamtin/services/trackbacks/144680.html</trackback:ping><description><![CDATA[因�ؓ(f��)javaeye的fins的这个帖子：(x��)<a >我�ؓ(f��)什么选择mootools,抛弃了prototype. (mootools与prototype 核心代码分析)</a><br />
我发表了一下我的看�?img src="/CuteSoft_Client/CuteEditor/images/emwink.gif" align="absmiddle" border="0"  alt="" /><br />
<br />
我觉得fins同学的一些说法会(x��)造成没有深入使用�q�几个框架的朋友的误解。因�����几个框架的思想是不一��L(f��ng)���Q�所以它们的语法也是不同的。fins同学的评价似乎更像从Java的OO��x��来评价几个js框架�?br />
其实�Q�moo一开始的��x�����是light weight�Q�所以它的很多语法其实就是没有语法。fins说的json语法�Q�其实就是js里面的散列对象嘛�Q�javascript语法本来���是�q�个样子呀�Q�不包装���是�q�样。而这�U�方式如果写的好读�v来很像DSL�Q�很舒服�Q�moo充分发挥了这个好处�?br />
prototype和JQuery都没有强调��承这��L(f��ng)��概念。javascript的强大很大就来自它的原�Ş�l�承�Q�如果要用好它就要利用好原�Ş�l�承。prototype在这斚w��很像Ruby�Q�比如Enumerable�Q�这是一�U�按照行为的抽象�Q�很�W�合Ruby/Python里面Module的想法，�q����所有行为都要抽象到一个对象再�l�承�Q�行为本�w�也可以抽象再�؜入�?br />
JQuery我觉得像Python。write less do more�q�个��x��也比较pythonic。在�q�个框架中有很强的函数式�~�程的味道，其实javascript已经具备了函数式�~�程的语法能力，所以��用FP的强大是JQuery受欢�q�的原因之一�?br />
<br />
说回来，�q�是���派原因。moo的��生比前两者要晚。prototype已经开始走大而全的�\子了�Q�而且配套的script.aculo.us也是���来���臃肿（而且�q�个�Ҏ(gu��)��库的代码质量的确不怎么好）�Q�但是要看到RoR里面使用RJS���化Ajax应用开发都得益于这些大而全的库�Q�所以我们也没什么可抱怨的�Q�只能说没有使用RoR�����n受点便利吧。JQuery�l�箋保持它的优美�Q�插件也���来���多�Q�我了解到的很多使用Django�q�行W(xu��)eb开发的朋友都在用JQuery。而moo�Q�越来越受欢�q�，我们也要认真��x��它的体积�Q�如果它能持�l�保持苗条，那么轻量�U�Web��目���很有可能越来越多的选用它�?br />
每年学一门新语言�Q�学两三个新框架�Q�肯定是有益的。fins转阵营说明你也在拥抱变化呀:D<br />
<img src ="http://www.aygfsteel.com/iamtin/aggbug/144680.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/iamtin/" target="_blank">Tin</a> 2007-09-13 08:40 <a href="http://www.aygfsteel.com/iamtin/archive/2007/09/13/reply_to_javaeye_fins_why_leave_prototype_choose_moo.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>充满Trick的CSS�Q�两隄���选择</title><link>http://www.aygfsteel.com/iamtin/archive/2007/09/10/css_trick_to_be_or_not_to_be.html</link><dc:creator>Tin</dc:creator><author>Tin</author><pubDate>Mon, 10 Sep 2007 00:02:00 GMT</pubDate><guid>http://www.aygfsteel.com/iamtin/archive/2007/09/10/css_trick_to_be_or_not_to_be.html</guid><wfw:comment>http://www.aygfsteel.com/iamtin/comments/143872.html</wfw:comment><comments>http://www.aygfsteel.com/iamtin/archive/2007/09/10/css_trick_to_be_or_not_to_be.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.aygfsteel.com/iamtin/comments/commentRss/143872.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/iamtin/services/trackbacks/143872.html</trackback:ping><description><![CDATA[<img height="44" alt="" src="http://www.infoq.com/styles/cn/i/logo.gif" width="140" border="0" /> 本文已经发表于InfoQ中文站，�Q?a  target="_blank">充满Trick的CSS�Q�两隄���选择</a>�Q?
<p>javaeye的hax最�q�在他的blog上进行了一场关于如何写css的讨论，其中反思和讨论了一些关于基于标准或trick�q�行设计的选择问题�Q�这个问题也�?a  target="_blank">David Heinemeier Hansson对于XHTML/CSS/Javascript标准�q�行RIA开发话�?/a>的一个�g展。我们可以从中思考如何在不完���的技术中选择一条相对完���的技术�\�U�？</p>
<p>讨论的�v因是淘宝�|�的UED团队成员�D늎�爷在他的blog上发表了一��?a  target="_blank">关于淘宝�|�页面设计上的小技巧（Trick�Q?/a>的介�l�，�q�个技巧是��Z��让一些条目之间的分隔�U�完全��用css生成�Q�不使用多余的class�Q�段王爷�q�对比了其它三种常见实现�Ҏ(gu��)��。实现方法如下：(x��) </p>
<blockquote style="background: #eee;font-style:normal;">从很久很久以前开始，�cȝ��间的横线无非都只有三�U��?br />
1、背景图<br />
在a标签讄���一个padding 用宽1px高不�{�的背景图来position到右侧�?br />
�~�点�Q�最后一个还是要用class来隐藏掉背景�?br />
2、符�?br />
在每个a标签之间�?#8220;|&#8221;�W�号来填充�?br />
�~�点�Q�html文�g变大�Q�文件维护变得很�ȝ���Q�而且在html中毫无意义�?br />
3、a标签右侧的boder�?br />
同背景图一��P��只不�q���用border-right来代�ѝ��缺点也同上�?br />
<br />
其实现有�Q�淘宝的实现方式�Q�是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这��L(f��ng)��做法���可以同旉���免以上的�~�点了�?br />
</blockquote>
<p>上面提到的��用border的传�l�方式需要在�W�一或者最后一个元素上面添加class来隐藏border�Q�Realazy也在他的blog中给��Z��一�U�不错的解决�Ҏ(gu��)���Q�他推荐�q�样做：(x��)</p>
<blockquote style="background: #eee;font-style:normal;">��D����目间的竖线�Q�我们往往通过border或者background来实现。特�D�需求是�Q�第一��左�Ҏ(gu��)��竖线或最后一��右�Ҏ(gu��)��竖线。按照一般的�~�程�Ҏ(gu��)���Q�控制第一��要比控制最后一��容易得多�?br />
<br />
区分�W�一��的�q�有一个好处是�Q�CSS有一�?first-child的伪元素�Q�pseudo element�Q�可以让我们轻而易丄���选择�W�一个子元素。遗憄���是，当前全球占有率最高的���览器，IE6�Q��ƈ不支持这个伪元素。我们可以手工给�W�一个元素加上class然后再定义它。等ie6淘汰之时�Q�就可以攑ֿ��?:first-child了，相权衡的话，我觉得给�W�一��加上class="first"也不�׃ؓ(f��)实用��M��做法�?</blockquote>
<p>Realazy提出的方案的思�\是��用基于标准的css选择器（selector�Q�，�q�种�Ҏ(gu��)��的好处是可以实现完美的内容与表现分离。但是现实的问题是�ƈ非所有的���览器都��Z��标准实现�Q�这也正是基于标准的RIA开发面对的最大问题，���其以CSS和Javascript问题最大。javaeye的hax在他的blog中提��Z��自己对于�q�个Trick的不同意见：(x��)</p>
<blockquote style="background: #eee;font-style:normal;">因�ؓ(f��)我觉得这个方法一点也不好。很���单的一个理由：(x��)�q�只是一个trick�Q�只适合�q�特�D�情况，假设你要换用&#8220;-&#8221;来分割呢�Q�作为插入分割符��h����_(d��)��真正合理使用css的，我给一个例子：(x��)<br />
li ~ li:before { content:'-'; margin:0.25em; }
<p>优点�Q�含义非常清晎ͼ��l�护性极高。你可以换�Q何的分隔字符�Q�可以设定字体，可以讑֮�颜色、大���等样式�Q�甚臛_��以换用图片作为分隔�?/p>
好了�Q�下面说�~�点。唯一的缺点：(x��)<strong>IE不支持�?/strong> </blockquote>
<p>hax�l�出的方案在IE中无法��用，其实对于大部分网站来说这���q��当于�l�大多数用户都无法看到这�U�表玎ͼ��q�就意味着��p�|。淘宝UED的小马提�?#8220;实用�W�一&#8221;�Q�从�q�种观点上说hax的方案就是不实用的。但是hax提出可以使用<a  target="_blank">Dean Edwards的IE7 Javascript�?/a>�Q?/p>
<blockquote style="background: #eee;font-style:normal;">IE7是一个可以让IE像标准浏览器一样工作的Javascript库。它修正了很多CSS问题�Q�让PNG在IE5和IE6下正常工作�?</blockquote>
<p>IE7�q�个库动态的实现了很多IE原本不支持的伪类�Q�Pseudo Classes�Q�，让完全基于标准的css选择器（使用伪类�Q�成为可能。随后，hax在他的另外一���blog<a  target="_blank">&#8220;面向未来的CSS实践&#8221;</a>中作了如下设惻I��(x��)</p>
<blockquote style="background: #eee;font-style:normal;">我推崇一�U�面向未来的CSS实践�?strong>卛_��胆采用CSS2.1甚至部分CSS3的特性�?/strong>因�ؓ(f��)�l�大多数�Ҏ(gu��)��，Firefox、Opera�?Safari�{�都已经很好的支持了。MSIE7也改�q�了许多�Q�将来IE也无疑终�I�会(x��)完全支持CSS2.1。对于目前的IE�Q�除了graceful degradation的方式（实际上整个内�Ҏ(gu��)��式分��ȝ��原则和良好的CSS设计可以���保�q�点�Q�比如淘宝以前的&#8220;�怽�&#8221;所体现的）�Q�可以考虑通过特定手段来patch之�?br />
<br />
在这点上�Q�我必须��_(d��)��我原来也是一直坚持只用ie6的selector的。是什么改变了我？���是Dean Edwards的IE7�Q�它的出��C��仅在于实践�h(hu��n)值——即提供了一个对于IE的补丁，让开发者可以直接写C(j��)SS2甚至CSS3�?</blockquote>
<p>hax提出的这�U�方式是比较�Ȁ�q�的�Q�他�q�在<a  target="_blank">&#8220;面向未来的CSS实践&#8221;</a>中进一步的描述了通过脚本修正的方式解决IE不支持标准伪�c�d��多class问题的设惻I��他的核心��x�����是让CSS的开发可以遵循标准，减少��Z��优雅退化（graceful degradation�Q�而向最低支持（���览器）兼容造成的表达方式限制。但是hax自己也提��Z���q�种思�\面��(f��)的尴���，它�D了table布局的实用性�h(hu��n)��gؓ(f��)例：(x��)</p>
<blockquote style="background: #eee;font-style:normal;"><strong>我认为出现这栯���刺的情况�Q�即遵��@标准的�h�z�d��比不遵��@的�h更篏�Q�是很有问题的�?/strong>�q�种矛盾在我�w�上存在着�Q?001�q�的时候我在某bbs上发了个��_(d��)��大数 table布局之罪�Q�但是过了几天我又跑上去说table布局在某�U�情况下也可以用用�?dlee同志貌似到现在也跟我当时一栗���如果你���实认�ؓ(f��)�Q�table布局从实用主义角度无法被完全否定�Q�那DHH同志采用实用��M��的角度来力挺 html/css/js��׃��有点心虚�Q�那个标题也���显得带点�Q性味�?#8230;&#8230;</blockquote>
<p>&#8220;遵��@标准的�h�z�d��比不遵��@的�h更篏&#8221;�q�句话说��Z��很多坚持��Z��标准�q�行CSS设计的开发�h员的心声�Q�这其实是实用性和坚持标准之间的一些交换，现实世界中两个方面如何��^衡正是广大XHTML/CSS/Javascript开发者需要认真思考的�Q�关键的问题�Q�还是目的要明确。盲目的遵��@标准�Q�例如很多开发者着�q�于使用div布局代替table�Q�但是却没有明确的目标就�?x��)迷失，hax�q�样评�h(hu��n)�Q?/p>
<blockquote style="background: #eee;font-style:normal;">从实用主义角度说�Q��}慎的table布局也许更简单，因�ؓ(f��)它更好的映射��C��grid模型上。如果你转用div/span�Q?strong>标签是清��C���Q�但是css是�؜��q���Q?/strong>�q�些属性（css属性）是分散的�Q�css代码无法反映整体�Q�无法记录你的grid 布局意图�Q�这是�ؓ(f��)什么我们经常说我有一个css trick的原因，它是trick而已�Q�是你达到最�l�目的的手段�Q�但是你的目的，<strong>你的意图�Q�没有好好加入文���的话，那维护�v来恐怕也不见得轻松�?/strong>
<p>table布局 其他css样式 = 清晰的布局意图和内容的混合�?/p>
<p>div容器 css样式 = 内容样式分离�Q�但是从css代码中很隄���出布局意图</p>
关于div/css布局�q�有一些误区，���单的把table标签换成div是没有意义的�Q�若�q�层�U�的div可能比table更糟�p�）�?strong>实际上我们希望的是语义标�{��?/strong> </blockquote>
<p>我们应该看到�Q�CSS的意图是���表现分���R��从设计的角度就是实现语义化的html�l�构�Q�让html/xhtml���量只表辄����_�的数据�l�构。但是此时css里面的布局意图是比较难以被记录的（难以被理解就难以�l�护�Q�难以重构）�Q�有其在充斥了大量Trick的情况下�Q�这正是�q�大�E�序�?设计人员需要解决的�Q�我们是否应该通过不断地重构来扑ֈ��q�个矛盾的��^衡点呢？�Ƣ迎大家讨论。最后附上淘宝UED团队的小马�ȝ��的淘宝CSS�~�程原则�Q?/p>
<blockquote style="background: #eee;font-style:normal;">
<ol>
    <li><strong>���量不��用hack</strong>
    <li><strong>���量不��用ie6不支持的选择�W?/strong> </li>
</ol>
能符合这两个条�g的最����z�的写法�Q�就是我们的目标�?</blockquote>   <img src ="http://www.aygfsteel.com/iamtin/aggbug/143872.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/iamtin/" target="_blank">Tin</a> 2007-09-10 08:02 <a href="http://www.aygfsteel.com/iamtin/archive/2007/09/10/css_trick_to_be_or_not_to_be.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>                                                      <footer>
<div class="friendship-link">
<a href="http://www.aygfsteel.com/" title="&#29408;&#29408;&#20037;&#20037;&#20122;&#27954;&#27431;&#32654;&#19987;&#21306;&#95;&#20013;&#25991;&#23383;&#24149;&#20122;&#27954;&#32508;&#21512;&#20037;&#20037;&#50;&#48;&#50;&#95;&#22269;&#20135;&#31934;&#21697;&#20122;&#27954;&#31532;&#20116;&#21306;&#22312;&#32447;&#95;&#26085;&#26412;&#20813;&#36153;&#32593;&#31449;&#35270;&#39057;">&#29408;&#29408;&#20037;&#20037;&#20122;&#27954;&#27431;&#32654;&#19987;&#21306;&#95;&#20013;&#25991;&#23383;&#24149;&#20122;&#27954;&#32508;&#21512;&#20037;&#20037;&#50;&#48;&#50;&#95;&#22269;&#20135;&#31934;&#21697;&#20122;&#27954;&#31532;&#20116;&#21306;&#22312;&#32447;&#95;&#26085;&#26412;&#20813;&#36153;&#32593;&#31449;&#35270;&#39057;</a>

</div>

</footer>


��վ֩���ģ�壺
<a href="http://" target="_blank">����ɽ��</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">�ٲ���</a>|
<a href="http://" target="_blank">��������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">��ƽ��</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">��Ҧ��</a>|
<a href="http://" target="_blank">���</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">��Զ��</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">��ͷ��</a>|
<a href="http://" target="_blank">�˺���</a>|
<a href="http://" target="_blank">ͬ����</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">����</a>|
<a href="http://" target="_blank">ƽ����</a>|
<a href="http://" target="_blank">������ǰ��</a>|
<a href="http://" target="_blank">��Ϫ��</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">�»���</a>|
<a href="http://" target="_blank">˫����</a>|
<a href="http://" target="_blank">����</a>|
<a href="http://" target="_blank">��������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">�ϰ���</a>|
<a href="http://" target="_blank">��Դ��</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">��ɽ��</a>|
<a href="http://" target="_blank">������</a>|
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</body>