最近做的一些JS代码

一、立即执行匿名函数,详细内容请参考: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*/
     }
 );