JS開發中的幾個彰顯水準的技巧
阿新 • • 發佈:2019-02-14
1.使用requestAnimationFrame
JavaScript建立動畫時使用requestAnimationFrame幀動畫,它很類似於setTimeOut函式,並且當標籤頁失去焦點時,它就不再執行
一般用法:
function render(){ //TODO requestAnimationFrame(render); } render();
啟動/停止的用法之一:
//啟動/停止的方法: var requestId; function loop() { ... // do stuff ... requestId = window.requestAnimationFrame(loop, canvas); } function start() { if (!requestId) { loop(); } } function stop() { if (requestId) { window.cancelRequestAnimationFrame(requestId); requestId = undefined; } }
2.使用while迴圈
我們經常使用倒序迴圈:
for(var i=0; i< array.length; i++){ //Do Something }
使用while迴圈效率更高:
var i = array.length; while(i--) { //Do Something }
3.禁用選中
當canvas佔據了整個螢幕,我們想在Canvas控制元件中禁用選中,可是有如下程式碼:
// 禁用滑鼠選中DOM元素 document.onselectstart = function() { return false; };
4.定義回撥
我們經常這樣設定回撥函式:
$("#id").click(function() { // 回撥函式 // 返回false在JQuery中會阻止訊息的傳遞和預設行為的放生 return false; });
或者:
$("#id").click(myFunction); function myFunction(event) { //Do Something return false; }
我們應儘量像如下方式設定回撥函式,這樣不僅可以輕易將函式從事件上解除,而且可以避免汙染全域性變數空間,同時增加程式碼的可維護性:
$("#id").click(callbacks.myFunction); //所有的回撥函式都在callbacks物件中 var callbacks = { myFunction:function(event) { //Do Something return false; } } // 解除某個函式的繫結 $("#someid").unbind('click', callbacks.myFunction);
5.鏈式三元運算
我們經常這樣做:
var number = a > 5 ? 200 : 38;
其實我們還可以這樣做:
var number = a < 5 ? 200 : a < 7 ? 38 : a < 11 ? 15 : a < 15 ? 49 : 64; //比使用when效率更高 //when a >=15