1. <em id="2qvri"><tr id="2qvri"></tr></em>
      1. 首頁»JavaScript»WEB開發者必備的7個JavaScript函數

        WEB開發者必備的7個JavaScript函數

        來源:webhek 發布時間:2016-02-29 閱讀次數:

          我記得數年前,只要我們編寫JavaScript,都必須用到幾個常用的函數,比如,addEventListener 和 attachEvent,并不是為了很超前的技術和功能,只是一些基本的任務,原因是各種瀏覽器之間的差異造成的。時間過去了這么久,技術在不斷的進步,仍然有一些JavaScript函數是幾乎所有Web程序員必備的,或為了性能,或為了功能。

         防止高頻調用的debounce函數

          這個 debounce 函數對于那些執行事件驅動的任務來說是必不可少的提高性能的函數。如果你在使用scroll, resize, key*等事件觸發執行任務時不使用降頻函數,也行你就犯了重大的錯誤。下面這個降頻函數 debounce 能讓你的代碼變的高效:

        // 返回一個函數,that, as long as it continues to be invoked, will not
        // be triggered. The function will be called after it stops being called for
        // N milliseconds. If `immediate` is passed, trigger the function on the
        // leading edge, instead of the trailing.
        function debounce(func, wait, immediate) {
        	var timeout;
        	return function() {
        		var context = this, args = arguments;
        		var later = function() {
        			timeout = null;
        			if (!immediate) func.apply(context, args);
        		};
        		var callNow = immediate && !timeout;
        		clearTimeout(timeout);
        		timeout = setTimeout(later, wait);
        		if (callNow) func.apply(context, args);
        	};
        };
        
        // Usage
        var myEfficientFn = debounce(function() {
        	// All the taxing stuff you do
        }, 250);
        window.addEventListener('resize', myEfficientFn);
        

          這個 debounce 函數在給定的時間間隔內只允許你提供的回調函數執行一次,以此降低它的執行頻率。當遇到高頻觸發的事件時,這樣的限制顯得尤為重要。

         設定時間/頻率循環檢測函數

          上面提到的 debounce 函數是借助于某個事件的觸發。但有時候并沒有這樣的事件可用,那我們只能自己寫一個函數來每隔一段時間檢查一次。

        function poll (fn, callback, err, timeout, interval) {
            var startTime = (new Date()).getTime();
            var pi = window.setInterval(function(){
                if (Math.floor(((new Date).getTime() - startTime) / 1000) <= timeout) {
                    if (fn()) {
                        callback();
                    }
                } else {
                    window.clearInterval(pi);
                    err();
                }
            }, interval)
        }
        

         禁止重復調用、只允許執行一次的once 函數

          很多時候,我們只希望某種動作只能執行一次,就像是我們使用 onload 來限定只在加載完成時執行一次。下面這個函數就能讓你的操作執行一次后就不會再重復執行。

        function once(fn, context) { 
        	var result;
        
        	return function() { 
        		if(fn) {
        			result = fn.apply(context || this, arguments);
        			fn = null;
        		}
        
        		return result;
        	};
        }
        
        // Usage
        var canOnlyFireOnce = once(function() {
        	console.log('Fired!');
        });
        
        canOnlyFireOnce(); // "Fired!"
        canOnlyFireOnce(); // nada
        

          這個 once 函數能夠保證你提供的函數只執行唯一的一次,防止重復執行。

         獲取一個鏈接的絕對地址 getAbsoluteUrl

          獲取鏈接的絕對地址并不像你想象的那么簡單。下面就是一個非常實用的函數,能根據你輸入的相對地址,獲取絕對地址:

        var getAbsoluteUrl = (function() {
        	var a;
        
        	return function(url) {
        		if(!a) a = document.createElement('a');
        		a.href = url;
        
        		return a.href;
        	};
        })();
        
        // Usage
        getAbsoluteUrl('/something'); // http://www.webhek.com/something
        

          這里使用了 a 標簽 href 來生成完整的絕對URL,十分的可靠。

         判斷一個JavaScript函數是否是系統原生函數 isNative

          很多第三方js腳本都會在全局變量里引入新的函數,有些甚至會覆蓋掉系統的原生函數,下面這個方法就是來檢查是不是原生函數的:

        ;(function() {
        
          // Used to resolve the internal `[[Class]]` of values
          var toString = Object.prototype.toString;
          
          // Used to resolve the decompiled source of functions
          var fnToString = Function.prototype.toString;
          
          // Used to detect host constructors (Safari > 4; really typed array specific)
          var reHostCtor = /^\[object .+?Constructor\]$/;
        
          // Compile a regexp using a common native method as a template.
          // We chose `Object#toString` because there's a good chance it is not being mucked with.
          var reNative = RegExp('^' +
            // Coerce `Object#toString` to a string
            String(toString)
            // Escape any special regexp characters
            .replace(/[.*+?^${}()|[\]\/\\]/g, '\\$&')
            // Replace mentions of `toString` with `.*?` to keep the template generic.
            // Replace thing like `for ...` to support environments like Rhino which add extra info
            // such as method arity.
            .replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
          );
          
          function isNative(value) {
            var type = typeof value;
            return type == 'function'
              // Use `Function#toString` to bypass the value's own `toString` method
              // and avoid being faked out.
              ? reNative.test(fnToString.call(value))
              // Fallback to a host object check because some environments will represent
              // things like typed arrays as DOM methods which may not conform to the
              // normal native pattern.
              : (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
          }
          
          // export however you want
          module.exports = isNative;
        }());
        
        // Usage
        isNative(alert); // true
        isNative(myCustomFunction); // false
        

          這個方法雖然不是那么的簡潔,但還是可以完成任務的!

         用JavaScript創建新的CSS規則 insertRule

          有時候我們會使用一個CSS選擇器(比如 document.querySelectorAll)來獲取一個 NodeList ,然后給它們每個依次修改樣式。其實這并不是一種高效的做法,高效的做法是用JavaScript新建一段CSS樣式規則:

        // Build a better Sheet object 
        Sheet = (function() {
        	// Build style
        	var style = document.createElement('style');
        	style.setAttribute('media', 'screen');
        	style.appendChild(document.createTextNode(''));
        	document.head.appendChild(style);
        
        	// Build and return a single function
        	return function(rule){ style.sheet.insertRule( rule, style.sheet.cssRules.length ); } ;
        })();
        
        // Then call as a function
        Sheet(".stats { position: relative ; top: 0px }") ;
        

          這些做法的效率非常高,在一些場景中,比如使用ajax新加載一段html時,使用上面這個方法,你不需要操作新加載的html內容。

         判斷網頁元素是否具有某種屬性和樣式 matchesSelector

        function matchesSelector(el, selector) {
        	var p = Element.prototype;
        	var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
        		return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
        	};
        	return f.call(el, selector);
        }
        
        // Usage
        matchesSelector(document.getElementById('myDiv'), 'div.someSelector[some-attribute=true]')
        

          就是這7個JavaScript函數,每個Web程序員都應該知道怎么用它們。你可以在評論里寫出其它你認為必備的函數,分享出來,謝謝。

        QQ群:WEB開發者官方群(515171538),驗證消息:10000
        微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
        提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
        網友評論(共1條評論) 正在載入評論......
        理智評論文明上網,拒絕惡意謾罵 發表評論 / 共1條評論
        登錄會員中心
        江苏快3投注技巧