需求：某dom節點在正常情況下，有設置其transition-duration為1s，在mousemove時候，要去掉其transition-duration設置的時間，在mouseup時候，恢復其transition-duration時間為1s。

考慮到兼容性，故設置的屬性相關屬性有：

　　transition-duration

　　-moz-transition-duration

　　-webkit-transition-duration

　　-o-transition-duration

最初代碼邏輯：

switch(evt.type) {
                case "mousedown":
                    
 
//XXXX
                    break;

                case "mousemove":
                    dom1.setStyle(‘transition-duration‘, ‘0s‘);
                    dom1.setStyle(‘-moz-transition-duration‘, ‘0s‘);
                    dom1.setStyle(‘-webkit-transition-duration‘, ‘0s‘);
                    dom1.setStyle(
 
‘-o-transition-duration‘, ‘0s‘);

                    dom2.setStyle(‘transition-duration‘, ‘0s‘);
                    dom2.setStyle(‘-moz-transition-duration‘, ‘0s‘);
                    dom2.setStyle(‘-webkit-transition-duration‘, ‘0s‘);
                    dom2.setStyle(‘-o-transition-duration‘, ‘0s‘);
                    
 
//XXXX
                    break;

                case "mouseup":
                    dom1.setStyle(‘transition-duration‘, ‘1s‘);
                    dom1.setStyle(‘-moz-transition-duration‘, ‘1s‘);
                    dom1.setStyle(‘-webkit-transition-duration‘, ‘1s‘);
                    dom1.setStyle(‘-o-transition-duration‘, ‘0s‘);

                    dom2.setStyle(‘transition-duration‘, ‘1s‘);
                    dom2.setStyle(‘-moz-transition-duration‘, ‘1s‘);
                    dom2.setStyle(‘-webkit-transition-duration‘, ‘1s‘);
                    dom2.setStyle(‘-o-transition-duration‘, ‘1s‘);
                    //XXXX
                break;   
} 

明顯看到上述代碼特別冗余，故抽出一個函數來幹這些事情

setTransitionDuration: function(element, seconds) {
            if (!element) {
                return;


            }
            seconds = (seconds ? seconds : 0) + ‘s‘;

            element.setStyle(‘transition-duration‘, seconds);
            element.setStyle(‘-moz-transition-duration‘, seconds);
            element.setStyle(‘-webkit-transition-duration‘, seconds);
            element.setStyle(‘-o-transition-duration‘, seconds);
}

//則上述代碼可直接調用：
case "mousemove":
    this.setTransitionDuration(dom1, 0);
    this.setTransitionDuration(dom2, 0);
    break;
case "mouseup":
    this.setTransitionDuration(dom1, 1);
    this.setTransitionDuration(dom2, 1);
    break;

相對於第一種方案，明顯好很多了，再繼續優化，將設置的屬性寫在一個class中，然後直接addClass/removeClass即可，這樣，樣式的代碼放置於css文件中，js代碼關註與自己的邏輯，更加清晰

//css樣式代碼
.transition-duration-stop {
  transition-duration: 0s;
  -moz-transition-duration: 0s;
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
}

//js代碼
case "mousemove":
      dom1.addClass(‘transition-duration-stop‘);
      dom2.addClass(‘transition-duration-stop‘);
      break;
case ‘mouseup‘:
      dom1.removeClass(‘transition-duration-stop‘);
      dom2.removeClass(‘transition-duration-stop‘);
      break;

大功告成

設置dom節點屬性的代碼優化