一、立即执行匿名函数,详细内容请参考:JavaScript中的立即执行函数表达式
方法一:
(function(){
console.log("test");
})();
方法二:
(function(){ console.log("test"); }());
jQuery和一些流行库的方法:
(function( window, undefined ) { // code here }) ( window );
其他方法:
// 如果本身就是expression,那么根本不需要做任何处理 var i = function(){ return 10; }(); true && function(){ /* code */ }(); 0, function(){ /* code */ }(); // 如果你不在乎返回值,可以这么做 !function(){ /* code */ }(); ~function(){ /* code */ }(); -function(){ /* code */ }(); +function(){ /* code */ }(); // 还有更奇葩的方式,但是不知道性能如何,来自 // http://twitter.com/kuvos/status/18209252090847232 new function(){ /* code */ } new function(){ /* code */ }()
二、根据URL来判断当前页面用的语言,调用预设好的样式;
var pathname = location.pathname; if (pathname.indexOf("/ru/") === 0) { document.getElementsByClassName("navigation")[0].className = "navigation lang_ru"; } else if (pathname.indexOf("/es/") === 0) { document.getElementsByClassName("navigation")[0].className = "navigation lang_es"; } else if (pathname.indexOf("/it/") === 0) { document.getElementsByClassName("navigation")[0].className = "navigation lang_it"; } else if (pathname.indexOf("/fr/") === 0) { document.getElementsByClassName("navigation")[0].className = "navigation lang_fr"; } else if (pathname.indexOf("/pt/") === 0) { document.getElementsByClassName("navigation")[0].className = "navigation lang_pt"; } else if (pathname.indexOf("/de/") === 0) { document.getElementsByClassName("navigation")[0].className = "navigation lang_de"; }
三、内部函数可以使用外部的$(this)对象,直接在后面加.bind(this)
!function(){ var hoverTimer, outTimer; $(document).on('mouseenter', '.myac', function(){ clearTimeout(outTimer); hoverTimer = setTimeout(function(){ $(this).addClass('myac_show').find('.myac_list').slideDown(); }.bind(this), 300) } ) $(document).on('mouseleave', '.myac', function(){ clearTimeout(hoverTimer); outTimer = setTimeout(function(){ $(this).removeClass('myac_show').find('.myac_list').slideUp('fast'); }.bind(this), 150) } ) }()
四、ajax替换html内容后,原先写的时间无效:
修改前代码:
$('.myac').hover( function(){ $(this).find('.myac_list').slideDown(); $(this).addClass('myac_show'); }, function(){ $(this).find('.myac_list').slideUp(); $(this).removeClass('myac_show'); });
解决方法一:
ajax替换html内容不能替换改变.myac层的内容,可以替换修改 里面的子元素内容,例如.myac_list的;因为.myac拿来触发事件了;
解决方法二:
把.hover()事件用.on()绑定 document,具体代码如下:
$(document).on('mouseenter', '.myac', function(){ /*function code*/ } ); $(document).on('mouseleave', '.myac', function(){ /*function code*/ } );