設置dom節點屬性的代碼優化
阿新 • • 發佈:2017-10-13
stop 相對 方案 關註 cnblogs 很多 top switch 優化
需求:某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節點屬性的代碼優化