标签归档:JavaScript

没事翻了翻网页源码

看网页源码是一件挺有意思的事情。平时买互联网公司的股票的时候,我都会扒开他们网站的代码看下,大体就能知道在做事的是一群怎样的人,然后决定是不是要上他们的贼船 🙂

嗯,今天我翻了下微博的首页代码,简单看了下,发现开头的一些JS还蛮有趣的。


//第一段
(function(){
var l=location;
var r=new RegExp('^(?:([A-Za-z]{1,5}):?(\\/{2,3}))?('+l.hostname.replace(/\./g,'\\.')+')?(?::(\\d+))?(?:\\/([^?#]*))?(?:\\?([^#]*))?(?:#(.*))?$');
var s;
((s=(l=l.toString()).indexOf('#!')) != -1 && r.test(l=l.substr(s+2)))&&l.indexOf('//') != 0 ? location.replace(l) : 0;})();
//第二段
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}


第一段JS看起来复杂,其实就做了一件很简单的事情。
在浏览器里点开这个链接:http://weibo.com?#!http://weibo.com/tomheng,就明白了。

第二段JS是让IE6缓存北京图片的。

就这样,具体细节感兴趣的,自己打捞吧~

哦,对啦,新浪微博改名叫“微博”啦~

javascript中scroll 事件的优化

最近再做项目时遇到的问题,如果给window绑定一个scoll事件,在chrome和firefox下都没有问题,但是在IE下面可能会比较影响效率,页面会比较卡。这是因为IE下面scroll事件触发的更频繁,如果在事件处理函数中做一些比较昂贵的处理(比如DOM的增删),那么就会影响页面的响应。不过我们可以通过一定的方法来优化scrooll事件,让他触发的不是那么频繁。


var timer = 0,
delay = 50; //这个值越小触发的越频繁
var handler = function() {
timer = 0;
//scroll事件发生时要做的事情
}

$(window).scroll(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
timer = setTimeout(handler, delay);
});

PS:不过在项目中最后发现其实不是scroll事件造成的页面卡,还在寻觅中···
参考:JQuery: My ‘scroll’ event is CRAZY slow. What am I doing wrong?

this.length >>> 0 的作用(Javascript)?

在Javascript代码有时候会看到this.length >>> 0 这样的类似代码,那么this.length >>> 0这样的代码有什么用呢?
要弄明白this.length >>> 0的作用,关键是要搞清楚 >>> 这个运算符是干什么的?

>>>在Javascript中代表无符号右移元算符,详细说明见:ECMAScript 位运算符

Github问了 lifesinger给出了一个this.length >>> 0 的作用更简易的总结

  • 所有非数值转换成0
  • 所有大于等于 0 数取整数部分

update:2012-04-24

移位运算分为左移和右移,其中左移运算都是丢弃最高位,在右端补零。而右移预算则分为逻辑右移和算术右移动,逻辑右移在左端补零,算术右移则在左端扑最高有效位的值。

比如:x = 101101

x逻辑右移2位:001011

x算术右移2位:111011

javascript在这里的无符号右移即逻辑右移动,这个参照了JAVA中关于右移预算的规范。

seajs 使js开发模块化

seajs一个js类库,主要实现对js的模块化开发。

对于一个大项目或者是一个需要团队协作的项目,模块化开发

可以使得对代码的管理更规范和高效。seajs就是为了满足这种需求来的。

不过我个人可能会更需要js可以按需加载,因为有些类库不是所有的页面都

需要的,我的预期是js类库只有在需要的时候才去加载。

seajs可以通过require.async来实现按需加载。

最近在关注HTML5、CSS3的相关内容,这两个东西确实会给我们带来很不一样的体验。

还有js也很活跃,后端出了nodejs,前段有各种基础类库,还有MVC框架。

还有在js上发展起来的新语言 coffee scriptdart,令人目不暇接。

确实很多东西(以论坛为主的网站将如何转型?)需要从底层变革一下了,因为他们周围的东西已经变了。

矛盾促使了这样的变革和发展。

更多内容:seajs.com

placeholder在非标准(IE)浏览器的实现

题目写得好拗口啊:)

placeholder是HTML5的一个新特性,今天在考虑如何提示表单输入内容格式的时候,左思右想还是把提示内容放在input中最好。刚开始还不知道有placeholder这个东西,想要找一些js实现同样的效果,不久就发现原来HTML5中有placeholder这个标签属性,恰好支持这种效果。

高兴了没有一会,万恶的IE就把我拉回了现实。

方法就是比问题要多,找了N多用JS实现的placeholder的效果,最后发现一个相对完美的实现。

源码:

// HTML5 placeholder plugin version 1.01
// Copyright (c) 2010-The End of Time, Mike Taylor, http://miketaylr.com
// MIT Licensed: http://www.opensource.org/licenses/mit-license.php
//
// Enables cross-browser HTML5 placeholder for inputs, by first testing
// for a native implementation before building one.
//
//
// USAGE:
//$('input[placeholder]').placeholder();

//
(function($){
//feature detection
var hasPlaceholder = 'placeholder' in document.createElement('input');

//sniffy sniff sniff -- just to give extra left padding for the older
//graphics for type=email and type=url
var isOldOpera = $.browser.opera && $.browser.version < 10.5; $.fn.placeholder = function(options) { //merge in passed in options, if any var options = $.extend({}, $.fn.placeholder.defaults, options), //cache the original 'left' value, for use by Opera later o_left = options.placeholderCSS.left; //first test for native placeholder support before continuing //feature detection inspired by ye olde jquery 1.4 hawtness, with paul irish return (hasPlaceholder) ? this : this.each(function() { //TODO: if this element already has a placeholder, exit //local vars var $this = $(this), inputVal = $.trim($this.val()), inputWidth = $this.width(), inputHeight = $this.height(), //grab the inputs id for the

//stuff in some calculated values into the placeholderCSS object
options.placeholderCSS['width'] = inputWidth;
options.placeholderCSS['height'] = inputHeight;

// adjust position of placeholder
options.placeholderCSS.left = (isOldOpera && (this.type == 'email' || this.type == 'url')) ?
'11%' : o_left;
placeholder.css(options.placeholderCSS);

//place the placeholder
$this.wrap(options.inputWrapper);
$this.attr('id', inputId).after(placeholder);

//if the input isn't empty
if (inputVal){
placeholder.hide();
};

//hide placeholder on focus
$this.focus(function(){
if (!$.trim($this.val())){
placeholder.hide();
};
});

//show placeholder if the input is empty
$this.blur(function(){
if (!$.trim($this.val())){
placeholder.show();
};
});
});
};

//expose defaults
$.fn.placeholder.defaults = {
//you can pass in a custom wrapper
inputWrapper: '',

//more or less just emulating what webkit does here
//tweak to your hearts content
placeholderCSS: {
'font':'0.75em sans-serif',
'color':'#bababa',
'position': 'absolute',
'left':'5px',
'top':'3px',
'overflow-x': 'hidden'
}
};
})(jQuery);

源码:https://github.com/miketaylr/jQuery-html5-placeholder/blob/master/html5placeholder.jquery.js

Javascript 中怎样用变量调用函数(想PHP中那样)

在PHP中可以用变量调用函数,比如:


今天在测试Javascript程序的时候,想起来JS中能不能也像PHP中那样用变量来调用函数呢?

function say(w){
alert(w);
}
var f = 'say';
f('hello');

这样做显然是行不通的,程序提示f函数不存在。

后来想到了可以借用eval函数来实现,修改程序:

function say(w){
alert(w);
}
var f = 'say';
eval(f)('hello');
//或者:eval(f+'("hello")');

这次程序按照预期的运行了, 其实这都是eval函数的功劳,到这里应该想起PHP中也有eval函数,他们的作用类似,都可以在自己的环境中把字符串当作代码运行出来,所以就有了上面的效果。
最后再放出网上找到的一个例子代码,但是这个例子和我要表达的不是一个意思,可得看仔细了。

function say(w){
alert(w);
}
(function a(b){
b('hello');
})(say);