我才12 ?

2010年04月 存档

前端 tips (2010.4) at 2010.4.30 11:11

本月前端 Tips:

4.1 - 4.2

23.【JS】在遍历Dom结构时,应该尽量避免修改Dom,比如在遍历的时候不断的增加元素,可能会造成无限循环,每次修改都是实时更新的,如果有需要可以先建立一个静态列表进行遍历。

24.【CSS】在ie中如果设定了li元素的height,则项目列表中的序号不正常,而且list-style-position:inside;失效

4.6 - 4.9

25.【Mobile】GIF、PNG、TIFF最大尺寸上限是300万像素,也就是说,确保width  height ≤ 3  1024 * 1024。JPEG二次采样(颜色压缩)后的最大尺寸上限是3200万像素(王卓)

26.【JS】如果一个元素的 display 样式被设置为 none,即使其内容变化也不再需要重绘此元素,因为根本就不会显示此元素。可以利用这一点,当我们要显示某个盒子并且要修改其内容时,先修改后再显示,减少reflow。

27.【Mobile】canvas元素的最大尺寸上限是3百万像素,canvas对象的默认宽高是150 x 300像素。(王卓)

28.【JS】绝对不能为Object.prototype添加属性,所添加的任何属性和方法都可以通过for/in循环枚举,当一个对象被当做关联数组使用时将会带来很大的问题。

4.12 - 4.16

29.【Mobile】JavaScript执行时间限制在10秒之内,如果脚本执行时间超过10秒的话,Safari会在一个随机位置强制停止执行,可能会导致意想不到的后果。(王卓)

30.【CSS】针对所有IE浏览器的hack:\9,仅针对IE8的hack:\0。

31.【Mobile】单个资源文件必须小于10MB,适用于HTML、CSS、JavaScript、非流格式媒体。一次性打开最多的页面数量是8个(慎用Framesets)(王卓)

32.【CSS】如果一个盒子里只有图片,那么font-size的定义在现代浏览器下会影响到盒子的高度,设置line-height在现代浏览器下可以让图片垂直居中,而在ie6、7下则需要设置font-size来达到目的。

33.【JS】focus和blur事件不支持冒泡,但是它支持捕获,所以在事件代理中我们可以使用捕获,但是ie不支持捕获,ie可以通过focusin和focusout这两个专有事件来代替,它们是支持冒泡的。

4.19 - 4.23

34.【JS】需要做页面刷新的时候推荐使用location.replace和location.href两个方法,而不推荐使用location.reload和history.go(0),因为这两个刷新相当于按F5刷新,有表单提交的页面很容易会给出是否重复提交表单的提示。

35.【CSS】关于ie的专有属性behavior,最近在cssbeauty上有一篇相关文档,大家可以看下,不推荐这种方式:http://fetchak.com/ie-css3/

36.【CSS】可以使用 @-moz-document url-prefix() {} 来单独为 Firefox 做样式定义。

37.【CSS】important! 的优先级高于任何其他样式定义。

38.【JS】使用Array.join在Internet Explorer中进行字符串连接操作是最快的; 而+= 或者 String.prototype.concat.apply(object, arguments) 在其他浏览器中表现得更好。详细测试数据参见: http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/ (赵成阳)

4.26 - 4.30

39.【JS】String.fromCharCode是String函数的一个静态方法,所以每次使用的时候都要按照 String.fromCharCode(num1,num2,...)这样的方式去使用。(此方法是用来反解码charCodeAt()生成的数字的)(涵宇)

40.【HTML】页面在载入图像的时候并不知道图像的尺寸,所以刚开始仅显示混杂在一起的问题,图片完全在载入后才会显示图片,这样在网速极慢的情况下就会造成页面的跳动,如果确定图片的大小尺寸的话,应该在img标签上设置宽高,这样的话可以在页面载入时会预先留好位置,避免发生类似问题。

41.【JS】关于Preload的一篇文章:http://www.phpied.com/preload-cssjavascript-without-execution/

42.【CSS】对于input框,在定义高度后在ie下会出现各种很怪异的问题,所以我们一般不定义input框的高度,通过padding值来控制。

43.【JS】toFixed 方法返回一个以定点表示法表示的数字的字符串形式,但是有一点需要注意的是,各浏览器下返回的值会稍有不同,有些会进行四舍五入,而有些是进行直接截取,解决的方法一是重写这个方法,二是在进行相应操作时先乘以10的n次方,然后再转化为小数。

叶问2 at 2010.4.28 22:10

好片哈~

刚开始看到河南电影制片厂,小小的骄傲了一下哈~

跟第一部一样,这部也是带一些小幽默,效果很不错,中间的打斗甚能打动人、带动人的感情,当时感觉所有人的情绪都上来了,我又看的热血沸腾的。。。看来我有暴力倾向哈~

黄晓明无论演啥都一个样,释小龙让大家吃了一下惊哈~

隆重推荐一下此片,不错哈,灰常的欢迎椰壳儿同学加入淘宝!

东风雨 at 2010.4.27 22:10

东风,有雨。

这个电影很烂,从头看到尾没有看到他想要表达什么?真的没看到,可能我没理解到。。。

直到最后让我很雷的是,所有的人为了一个过期的情报死了,电影还自我解释到如赵氏孤儿。。。

这部片子跟《风声》、《秋喜》比,啥都不是,偶觉得没有存在的必要,不是说大家的演技不好,而是编剧、导演完全就是扯淡、自恋,偶去看的目的仅仅是为了冰冰。

岁月神偷 at 2010.4.24 22:10

非常感谢椰壳儿同学的推荐,要不然我真的可能错过这部片子了,因为它档期太少了,UME每天只有三场。。。

这是一部好片,真的是一部好片。

其实看之前,我一直感觉这是一部搞笑喜剧片,结果搞得哥各种落泪。

片子描述的是一个普通的家庭生活,很自然的想起了自己的家庭,自己的生活,想起小时候爸爸打我的情节,很像,很真实的事情,也很自然的打动了我,看的很心酸。看片中的小男孩儿,非常的怀念自己的童年,可惜啊,人老了。

感觉有好多要表达的,其实还是表达不出来哈,推荐大家看一下。

昨晚和乖逛河坊街的时候,在一家小店门口看到一句话:“时光是记忆的橡皮差”。挺好的,做人嘛,就要信,一步难,一步佳。

杜拉拉升职记 at 2010.4.22 23:11

貌似很久没看电影了,最近近一个月比较忙哈,积攒了一些片子没看了,趁有一小段不忙的时间,抓紧看哈~

晚上去看了杜拉拉,结果看完后发现其实我不该去看,这就是一部爱情片,太杯具了。

现在的片子很强哈,各种广告植入,做导演难啊!

从中也看到了些东西,每个人都会以为自己做的已经很好了,自己很优秀,为什么付出和回报是不平等的?都以为很有优越性,都以为自己很强,别人什么都不是,其实,如果真的是这样,你还活着干嘛,还待着干嘛?不能正视自己的缺点,不能正面的看自己,其实也很难突破自己。

每个人都有自己的理想,每个人都有自己的痛苦,每个人都有自己的无奈,坚持下去,就好~

天地之大,岂能无立锥之地?天地之间,任我遨游~逍遥于天地间,此生何撼?

这本书花了更久的时间才看完,估计下一本要更加久一点哈~

最近一段时间都没有好好写过东西了,忙是一方面,主要是心志遭受了比较大的打击,以至于没落了很长一段时间,慢慢的慢慢的已经恢复的差不多了,还好,还好哈~

这一卷主要讲的是吕不韦从鼎盛走到死亡,其实主要原因跟之前的丞相甘茂一样,不能正确的区分、看待私恩,或者说,更多的不仅仅是私恩,同样也有对秦国更大的贡献,吕不韦当然不会知恩不图报了,以至于导致了杯具的后果。。。推崇一下禅宗的一个境界:花未全开月未圆。

当然吕不韦也不会故意的,他自身也同样的非常的后悔、内疚,而嬴政其实做的有点过分了,当然换作是我可能也承受不了,人家捅了你一刀,虽然刀拔掉了,但是伤疤却永远留下了,可能这也是我永远都无法释怀的一个原因。。。回过来说,嬴政还是比较有主见,看问题都比较独到,而且很会抓住每一个人的特点、弱点,佩服一下~

老子:天下皆知美之为美,斯恶已;皆知善之为善,斯不善已。

庄子:天地有大美而不言,四时有明法而不议,万物有成理而不说。圣人者,原天地之美而达万物之理。

加油~

前端 tips (2010.3) at 2010.4.7 18:06

圆心提出的,搜集组内每个人的小tip,每天发一个在群里和大家分享、讨论,有些可能只适合淘宝的环境,大家择优浏览哈:

3.2 - 3.5

1.【约定】文件命名全部都用小写和下划线,样式命名全部使用小写和连接符,JS的钩子使用“J_HiTao”

2.【HTML】需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,可以使用以"data-"为前缀来添加自定义属性,避免使用"data:"

3.【约定】文件要求编码必须为GBK、GB2312或者GB18030

4.【HTML】html代码要求所有的标签、属性都是用小写字母,属性值使用双引号括起来,使用js插入html代码的时候也要注意保持一致。

3.8 - 3.12

5.【JS】在书写代码时,应该尽量在函数开始地方统一进行变量声明,变量名注意语义化,一般使用名词来命名,不要在意名字的长度,压缩后会替换为简短的变量名的。

6.【JS】浮点数的计算过程是:先将浮点数转化为二进制,然后进行计算,再转化为十进制,这样子会有少许的误差,所以为了避免这种误差我们可先将浮点数乘以10的n次方,转化为整数计算,然后再转化为小数。

7.【Firefox】Firefox中将同一域名下不同端口的访问也视为跨域操作。

8.【Mobile】强制WEB App在iPhone中全屏模式运行 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />(王卓)

9.【Mobile】移动设备上的CSS媒体查询应用: img {   margin:0 0 10px 10px;   float:right; } @media all and (max-width: 480px) {   img {     margin:10px auto;     float:none;     display:block;   } } @media all and (max-width: 240px) {   img {     display:none;   } } 释义:浏览器中的图片在屏幕大于480px时会向右浮动,当屏幕小于480px时图片display:block并居中,屏幕小于240px非常小时,直接让图片消失掉 (Opera/Safari3 only) (王卓)

3.15-3.19

10.【JS】Date()作为普通函数被调用时,Date()将忽略传递给它的所有参数,返回当前日期和事件的字符串标识。

11.【HTML】在页面中写button的时候,一定要记得加上button的type类型,否则,某些浏览器会将其认为是submit类型。

12.【JS】在绑定表单的提交事件时,如果button的type类型为submit时,要通过绑定form的submit事件,避免使用button的click事件,因为如果表单可以通过回车提交的话,绑定在button上的click事件是不会触发的。

13.【HTML】img对象alt和title的解析: alt:当照片不存在或者load错误时的提示; title:照片的tip说明。 在IE中如果没有定义title,alt也可以作为img的tip使用,但是在FF中,两者完全按照标准中的定义使用 结论:大家在定义img对象时,最后将alt和title对象都写全,保证在各种浏览器中都能正常使用(涵宇)

14.【JS】在使用form[name]的方式去取同一name的多个表单元素时,需要注意一点,如果有多个的话,返回的是一个数组,如果仅有一个的话直接返回这个元素而不是一个数组,所以大家在循环之前要先做判断,以免报错。

3.22 - 3.26

15.【JS】关于Degrading Script Tags,这是一种脚本文件加载完成后执行一段脚本的方法,由jQuery的作者John提出,不了解的可以看下作者的博客:http://ejohn.org/blog/degrading-script-tags/

16.【JS】有些浏览器对 try-catch-finally 的处理并不高效,所以把 catch 语句放在关键循环中将极大影响性能。如果可能,应在脚本中不频繁被调用的地方进行异常处理,或通过检查某种动作是否被支持来避免使用。

17.【JS】尽量向 setTimeout() 和 setInterval()传送函数名,而不要传送字串。setTimeout() 和 setInterval() 方法近似于 eval。如果传进参数是字符串,则在一段时间之后,会和 eval一样执行字符串值,当然其低效率也和 eval 一样。但这些方法也可以接受函数作为第一个参数。在一段时间后将调用此函数,但此函数可在编译时被解释和优化,也就是说会有更好的性能。

18.【CSS】经典的垂直问题中,img 的父容器如果 float 了,那么其 display table-cell 将失效,table-cell 只能在 display static 的时候有效,因此解决方案是给 img 再加个包装容器,原来的父容器 float,包装器 table-cell……(法海)

19.【编辑器】编辑器下的bug,选中字体背景色时,除了对gecko浏览器要对backColor替换成hiliteColor,opera下也有问题。设置背景色时需用hiliteColor~(子涯)

3.29 - 3.31

20.【JS】如果页面里只有div和script标签没有body,head什么的,而且div里面只有空格没有字符的话,这时候用document.getElementById("****")获取不到div的引用(孙信宇)

21.【JS】字符串合并是比较慢的。+ 运算符并不管是否将结果保存在变量中。它会创建新 string 对象,并将结果赋给此对象;也许新对象会被赋给某个变量。下面是一个常见的字符串合并语句: a += 'x' + 'y'; 此代码首先创建临时string对象保存合并后的'xy'值,然后和a变量合并,最后将结果赋给a。下面的代码使用两条分开的命令,但每次都直接赋值给a ,因此不需要创建临时string对象。结果在大部分浏览器中,后者比前者快20%,而且消耗更少的内存: a += 'x'; a += 'y';

22.【JS】在设置元素样式时,应该尽量一次设定,避免多次设定,较少reflow,可以通过改变元素的class来达到目的。

这位姐姐,你好,你的浏览器版本太低了,为了避免您中毒,请您升级您的浏览器!