無標題文檔

i++ 与 ++i 的性能区别

很多有关程序设计的书中都会说明 ++i 与 i++ 的区别。比如经典的论述就是

i = 5;
k = i++; // 此时 k 还是 5,但是 i 自增以后已经是 6

i = 5;
k = ++i;  // 此时 k 已经是 6,k 是 i 自增以后的值

可能这样的说明还不够直观。总而言之,i++; 是一个右值,而 ++i 是一个左值。

加深印象,上述的两条语句可以用下面两个函数表示。

i++ 为

function () {
    tmp = i;
    i = tmp + 1;
    return tmp;
}

++i 为

function () {
    i = i + 1;
    return i;
}

可以参考 这里获知详情 。总而言之,i++ 语句需要个临时变量,去存储返回自增前的值。

不要忽略这个变量的意义,了解过 C 等「低级」语言的朋友,可能会了解变量的内部机制(重新祭奠我老去的 C 语言知识)。首先,申请(malloc)一段内存空间,然后将值塞(push,压栈)进去,最后不用了释放(free)。

大家可能在循环中会经常的使用 i++ 这样的操作。在不影响逻辑的前提下,我建议使用 ++i ,虽然这点的优化非常的小。

最后,感谢 小马 的指出。

分享两本 Javascript 书籍

https://friable.rocks/_/2008_04_18/1208501592.jpg

PPK on Javascript

PPK 的这本书其实我 很早以前就在关注 。这本书适合刚入门 Javascript 以后,在继续提升自身水平的真空期内观看。

感谢 小马 等人的翻译, 这里 还有中文前两个章节的样张下载, 勘误表在这里

英文 CHM 格式,点击 这里下载

https://friable.rocks/_/2008_04_18/1208501801.gif

Pro JavaScript Techniques

此书原先由 mozart0 翻译,并在 蓝色理想上发布 ,后来由 Realazy 兄继续翻译出版 ,所以翻译质量会让人比较的放心。本书的 勘误表在这里

这本书我认为适合在消化 PPK 这本书以后,再看。这本书比 PPK 那本要深奥一点(不过并没有你想象的那么多)。

英文 PDF 格式,点击 这里下载

_声明:本人仅提供链接到其他站点的下载链接,且并不对此造成的任何后果负责。_大家可能更习惯看中文(这两本书的中译本已经出版),如有条件的,请支持译者购买正版纸质书籍。

批量 Javascript 压缩器

https://friable.rocks/_/2009_11_05/402955604787.jpg

上次写了个 批量的 CSS 压缩器 ,总想着实现 Javascript 压缩。

在公司加班无聊,于是现在就又有了个 批量 Javascript 压缩器 (小心被老板看见)。

这个工具技术上非常的简单。本人偷懒,就是将原有的 CSS 压缩器代码,使用 JSMin 库 替换了下。

地址如下

http://friable.rocks/javascript_compresser/

等此工具稳定以后,再将源代码放出来,欢迎大家测试反馈。

「阻挠」用户下载图片

昨天写的篇文章 中,无意间发现 从 Flickr 右键下载的图片 竟然不是原图。好奇心起,于是就分析起其机制。

https://friable.rocks/_/2009_11_05/0115255fba53.jpg

原来在它的原图上层,再浮动了与其同宽高的一个像素的透明 GIF 图片。这样,当用户右键点击「图片另存为」时,保存的就是其一像素的 GIF 图片。

这个方法虽然是能防「君子」,但相比 Flash (甚至 ActiveX)等措施,对于客户端的资源占用少了许多。职业病,我考虑的是脚本上的实现。

在不长的时间,这个脚本就实现了, 看下 DEMO 或者 打包下载 (用法参见页面)。

不过还是出现了几个问题,在这里提下

var m = document.createElement('img');
var element = document.getElementById(element).getElementsByTagName("img");
for(var i = element.length - 1; i >= 0; i--) {
    this.insertAfter(element[i], m.cloneNode(true));
}

本来的写法是

var m = document.createElement('img');
var element = document.getElementById(element).getElementsByTagName("img");
for(var i = 0; i < element.length; i++) {
    this.insertAfter(element[i], m.cloneNode(true));
}

出现的问题是 新创建的图片只会插入到第一章图片的后面。

感谢 圆心 同志的排查,原来是插入图片时,新插入的图片节点被加入,导致原先图片节点 length 发生变化

换个迭代方式就能解决这个问题。

if (document.documentElement.getBoundingClientRect)  {
    var box = targetElement.getBoundingClientRect();
    maskImage.style['top']  = box.top + "px";
    maskImage.style['left'] = box.left + "px";
} else {
    maskImage.style['top']  = targetElement. + "px";
    maskImage.style['left'] = targetElement.offsetLeft + "px";
}

依旧 很「暴力」的一段代码,主要功能是获取元素在页面中的位置。PPK 告诉我们,尽量避免因兼容性问题,而去检测浏览器类型。

附,看下 YUI 在这方面是怎么做的

Javascript 悬停弹出框

由于项目的需要,要做一个鼠标悬停显示信息的效果。坦白说,我这个部件我不想使用框架实现,原因是太臃肿了。

在代码库里面找到了些类似的代码(本人为业余的 Javascript 开发人员),但发现都非常的散乱,于是我就尝试重写它们。

https://friable.rocks/_/2009_11_05/95824556d667.jpg

先看下 DEMO ,打包以后的文件可以在 这里 下载。

用法很简单,就是在函数参数中选择容器的 id(或者是节点集合),然后代码就会将容器中 a 元素的 title 和链接以泡框的形式弹出。

下面,说下碰到的些值得回味的代码(格式是我重写以后的)。

_addCssFile : function (css_file) {
    var l = document.createElement("link");
    l.setAttribute("type",  "text/css");
    l.setAttribute("rel",   "stylesheet");
    l.setAttribute("href",  css_file);
    l.setAttribute("media", "screen");
    document.getElementsByTagName("head")[0].appendChild(l);
},

用 Javascript 载入外部样式文件,建议在 DOM Ready 以后运行。

_setOpacity: function (oNode) {
    oNode.style.filter       = "alpha(opacity:85)";
    oNode.style.KHTMLOpacity = "0.85";
    oNode.style.MozOpacity   = "0.85";
    oNode.style.opacity      = "0.85";
},

强行设置元素的属性,不像 YUI 这样 小心翼翼的先判断后操作 ,再设置。我等草根的写出来代码,虽然「暴力」,但是实用。

类似的,还有

var posx = 0, posy = 0;
if(e == null) {
    e = window.event;
}

if(e.pageX || e.pageY) {
    posx=e.pageX; posy=e.pageY;
} else if(e.clientX || e.clientY) {
    if(document.documentElement.scrollTop){
        posx = e.clientX + document.documentElement.scrollLeft;
        posy = e.clientY + document.documentElement.scrollTop;
    } else {
        posx = e.clientX + document.body.scrollLeft;
        posy = e.clientY + document.body.scrollTop;
    }
}

获取当前元素的坐标 -- 写过类似功能的朋友,应该对此段代码很熟悉。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章