前端开发

Live and breathe HTML, CSS and Javascript

Monthly Archives: 二月 2012

2012 年 02 月 29 日
by Ryan
1 Comment

Javascript Semicolon

《The Definitive Guide, 6th Edition》这本动物书，我们俗称的犀牛书已经出到了第6本。好像看到中文版的还没有出世，由淘宝的前端团队负责翻译，但是我还是喜欢原版的，尽管读起来有点麻烦。这本书的第6版应该会跟前面的有所不同，我有看到有讲jQuery库的。jQuery现在非常地流行，出现在这本书应该也是讲一些实现方式吧。我看了一点，发现有关分号(;)的就讲了2页，以前好像没有发现会讲解这么多。 在JavaScript中分号(;)的作用只是用来区分语句，仅此而已，甚至可以省略分号，前提是你熟知JavaScript的解析机制。 书中列举了几个例子来说明，随手做个笔记： 1、 如果是以这几个开头(, [, /, +, 或者-，表示继续的意思。此时，需要用一个分号作防御性保护。 var x = 0 ;[x,x+1,x+2].forEach(console.log) 这也是我好久以前问的一个问题，大家也会经常见到这种写法： ;(function(){ //doSomething }) 2、最后有2个例外的东西，一个是return, break, 和continue，另一个是++ and −−。我相信return就不用解析了，我们来看看自增自减。 //书上有这么一个东西 x ++ y 这个会解析成什么呢？ A) x; ++y; B)x++y; C)x++;y; 就这样猜，你可能会猜中。可是为什么会这样解析，可能就要看书上是怎么说的了。++和–可以放在前头或者后面，一般是作前缀，如果要作后缀，就要加一个分号来结束它。否则JS就把其当成是一个前缀了，所以结果是A。

2012 年 02 月 25 日
by Ryan
1 Comment

CSS权重计算？

用过CSS都知道一个简单的法则，写在样式里面的样式权重是最高的。它的作用相当于important!。 如果你是一个做了几年的前端，连这个都不会计算，那说明你是一个不注重细节的人，虽然不能代表你的技术。毕竟技术是经验加上去的，一个有经验的人可以很轻松地搞定新手认为很难的问题，虽然说这些是废话，但也不得不说这是非常有道理的废话。我在这里就简单地总结一下CSS权重的计算方法吧。 首先分4个级别，你可以想像成4个框框，分别是Style Attribute,ID,Class/psuedo-class/attribute,Element。这几个英文就不用解释了吧，这个都不懂就别做技术了。比如一个这样的选择器：.nav .item，2个class选择器，计算起来就是0 0 2 0。假如只有写在行内，那么结果就是1 0 0 0。更多地资料请阅读下面的地址，我也只是看了它的图而已，文章的细节没怎么细细阅读。 http://css-tricks.com/specifics-on-css-specificity/

2012 年 02 月 18 日
by lemon
0 comments

iframe跨域高度自适应

iframe跨域高度自适应 思路: 需要三个页面分别是 main.html, iframeHeightFix.html, iframeHeightFixIntermediary.html main.html (主页面) 在域coolicer下， iframeHeightFix.html (被嵌套页面) 在域taobao下。 frameHeightFix.html 又嵌套了一个在域coolicer下的中介页面 iframeHeightFixIntermediary.html。当用户访问 main.html 的时候载入 iframeHeightFix.html， 触发它的onload事件获取其自身高度， 然后载入 iframeHeightFixIntermediary.html， 并将高度值作为参数传给iframeHeightFixIntermediary.html的location对象。这样 iframeHeightFixIntermediary.html 就可以通过参数获得 iframeHeightFix.html 的高度。由于 iframeHeightFixIntermediary.html 与 main.html 同域， 所以可以修改 main.html 的DOM节点属性，从而达到我们设置iframe标签高度的目的。

2012 年 02 月 16 日
by Ryan
0 comments

BackBone新手入门

JavaScript发展是非常快速的，快到很多新的东西出现了，你还没能了解。当然，如果是蜻蜓点水式地看，那也是没用的。新手我最近对Backbone有点兴趣，整理了一下学习资源。 http://backbonetutorials.com/ http://thomasdavis.github.com/2011/02/01/backbone-introduction.html http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js 其次，Backbone是依赖一个叫underscore的Js工具库（看了一下，两个库加起来才10K），学习的时候不要忘记加上这个工具库了。 http://backbonejs.org/ http://documentcloud.github.com/underscore/

2012 年 02 月 14 日
by Ryan
0 comments

Chrome user scripts

很久之前，知道Firefox中安装了Greasemonkey可以运行JavaScript。一直没有去研究，其中原因就不说了。但是，某一天我发现Chrome也能运行User Scripts（一个有名的网站）的脚本。我在上面专门下载了一个叫YouTube Video Download的Script，然后就能在Youtube上下载视频了。当时也没有太在意，为什么它能够运行这个脚本，直到今天我终于知道了。原来从某个版本（不管，反正是chrome4+）开始就内置了Greasemonkey这种功能，所以它才可以运行脚本，但有一些功能是受限的，详情就不多说了。 平时看动漫都喜欢去下载的，朋友介绍我去一个网站还不错，就是广告比较多。谷歌浏览器当然也有一个去广告的插件，但是我想试一下自己写一个Script，因为我觉得只对这个网站去那个广告太简单了。它的广告是一个A标签覆盖了整个document，所以当你不知道的时候，点了一下就会帮他赚一分钱。最不喜欢就是这种手段，强迫性。我写的那个就不放上来共享了，太简单了。我们看看那个Youtube的吧。 它的开头部分： // ==UserScript== // @name YouTube Video Download // @namespace http://rossy2401.blogspot.com/ // @description Scans the YouTube page for all formats, including 1080p on selected videos. Designed to be lightweight and unobtrusive, it runs entirely on … Continue reading →

2012 年 02 月 10 日
by Ryan
2 Comments

Chrome 开发工具自动保存CSS和JavaScript文件

好久没有发表过相关技术类的文章了，近日偶然发现了一种快速编码的技巧，因此写此文与大家分享。此前，见一博客写了一种快速码HTML的一个JS，个人觉得Sublime的其中一个功能已经实现了。当然如果他的能做好也是不错的。 今天我介绍的功能是，Chorme开发工具自动保存CSS和JavaScript文件。这对于前端来说是一个极大的喜讯啊，不用来回地切换浏览器与编辑器，而且Chrome DevTool 功能也十分强大，我早已转到了它的阵营。废话少说，下面看步骤： 好东西当然需要配置一下，它依赖Node.js和Chrome的一些功能。 1、你需要安装Node.JS。 2、你需要一个Chrome浏览器。 3、一个编辑器。 配置如下 客户端： 打开chrome://flags/ 开启Experimental Extension APIs 功能 重启浏览器 下载并安装所需插件 服务端： 安装Node.js 安装autosava:npm install -g autosave 使用方法： 运行：autosave，你会看见一行DevTools Autosave 0.3.0 is listening on http://127.0.0.1:9104.

2012 年 02 月 06 日
by Ryan
0 comments

二月好风光

眨间就过了春节，来到了二月。 一月是一个多事的月份，因此我少写了许多的日志。前几天貌似还被那个和谐了…… 二月为什么是好风光，因为这世上有许多美好的事情，尽管自己或身边的朋友过得不好。也一定要相信，这个世上的美好。我们不要只看到阴暗的一面，要发现美丽。说这些话，有点像是苦口婆心的老师，但是我不是老师。我的老师也说过类似的话，他总是说，“世上不是缺少美丽，而是缺少发现美丽的眼睛。”。尽管如此地有道理，从他口中可以不厌其烦地重复再重复，真的是一件很难的事情。因此，我要感谢他。还有另外一个老师，他说过这样的话，“多么好的一句话。”，你觉得这句话怎样？有些奉承的意思？那就错了，这是一句赞美的话。我们活着活着都会失去赞美别人的话语，多了得罪，疑惑，甚至敌对的想法。我们要多多回想以前老师的话，那些话为什么要忘记呢？应该要一生铭记！