PorkFat Finding Neverland

Archive for the ‘译稿’ Category

适合 JavaScript 库作者的规则

04.23.2007 · Posted in JavaScript, 译稿

这是 Dean Edwards 在一个月前写在他的 blog 上的一篇文章。我正在学 JavaScript,也许要用到一个 JavaScript 库,这些规则刚好从侧面教我分析那些作者的做法,不至于面对许多库茫然无措,因此翻译过来共勉 PS: 原文有很多外部链接,推荐去看看 http://dean.edwards.name/weblog/2007/03/rules/ 适合 JavaScript 库作者的规则 大约六个月之前,我在 base2 的工作启动前写了此文。当时我决定先不发布,因为我认为它听起来有点华而不实。经再三思量,这些规则还不坏,并且我最终保留下来。因此在这里献上我在十月份为自己写的规则。 不乱入(Be unobtrusive; hlb 的台式翻译XD) 我的 HTML 不应该去适应你的 JavaScript。 禁止 Object.prototype 这条相当重要,所以需要一条完全针对它的规则。对象是构建 JavaScript 功能的基础积木,别胡乱摆弄。 不要过分扩展 你对 JavaScript 内建对象的扩展越少越好。别理解错,原生 JavaScript 对象的有用的方法是有点少,你会感到被迫增加一两条你自己的,但是“一两条”对于创造性的(库)程序员来说是不够的。就此停手吧,加你需要的就好。你对 JavaScript 内建对象的扩展越少,你和其它库的冲突越少。 跟随标准 作为一个库的作者,你在定义 JavaScript 代码的模式。在程序设计语言中模式是虚弱的征兆。记住,JavaScript 和文档对象模型在频繁更新,如果你正要“修正”某处,那么注意看看它是否还没被修正。考虑现成的解决方法,如果你跟随标准,就紧随它们(举例来说:别遗漏 forEach 方法的参数) 或者跟随主导 Mozilla 主导 JavaScript。这门语言的创造者 Brendan Eich,不断在发展它,新的语言特征在 Mozilla 浏览器中比任何其它浏览器更早可用。如果你要增加语言特征到 JavaScript,那么首先关注 Mozilla 标准。例如:如果你想要扩展 Array 来允许一个枚举方法,那就调用 forEach 方法来代替 each。如果你确实提供缺少的语言特征,那么紧随已存在的标准(见上文)。 灵活可塑 如果我要修改行为而不改变你的库的源码呢?那有多容易?不够容易的话,做得更容易些。 管理内存 人们担心内存泄露,尽力为之。 摆脱浏览器嗅探 貌似浏览器厂商将永远通过添加新的特性来竞争。 作为一个库的作者,你必须跟得上最入潮的流行。偶尔浏览 Ajaxian 可不够好,你必须奴隶般地读每一个 blog 来寻找下一个 ...

IE双倍浮动边界Bug

10.29.2004 · Posted in web标准, 心得, 译稿

Last Updated October 29th, 2004 The IE Doubled Float-Margin Bug 原址:http://www.positioniseverything.net/explorer/doubled-margin.html 译文:PorkFat 什么发生故障? 一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单,对吗?但直至它被在IE/Win中浏览为止,在浏览器中居左浮动元素的边界长度被神秘地翻了一倍! 情况应该如何? 下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界,使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止,一直都还不错。 .floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; /*This last value applies the 100px left margin */ } 陈旧的IE“双倍占据” 原样的相同代码被在IE/Win中浏览时以些微不同的方式显示,下面的图释展示了IE/Win在布局上所做的。 这为什么会发生?别问这种傻问题!这就是IE,记得吗?符合标准只是理想的状况,不指望实现,这个简单的事实正验证了。 重点 这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。 最后,修复办法! 直到现在(04年1月)这个Bug一直被认为是无法修复的,通常用来替代错误的边界的控制方法如:一个不可视浮动元素的左边距,连同一个内嵌的盒子一起,可视的盒子装在不可视浮动元素里;或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了,但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。 Steve Clason发现了一个修复办法,描述在他的Guest Demo里,修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法,使用一个属性来修复影响不相关属性的Bug。 现在如何来做? 研究它,简单地将{display: inline;}设置给浮动元素就是全部所需做的!是的,听起来太简单了,不是吗?不过这是真的,仅仅一个display的”inline”声明已经能够胜任了。 熟悉规则的人知道浮动元素自动设置为”block”元素,而不管他们之前是什么。就如Steve从W3C里指出: 9.5.1 Positioning the float: the ‘float’ property “This property specifies whether a box should float to the ...