欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript最基本的函數(shù)匯總

 更新時(shí)間:2015年06月25日 11:40:17   投稿:hebedich  
這篇文章主要給大家匯總介紹了javascript最基本的7個(gè)函數(shù),十分的實(shí)用,有需要的小伙伴可以參考下。

我記得早期的 JavaScript ,要完成任何事情幾乎都繞不開一些簡單的函數(shù),因?yàn)闉g覽器提供商實(shí)現(xiàn)功能有所差異,而且不只是邊緣功能,基礎(chǔ)功能也一樣,如 addEventListener 和 attachEvent。雖然時(shí)代變了,但仍有一些函數(shù)是每個(gè)開發(fā)者都應(yīng)該掌握的,以便于完成某些功能和提高性能。

debounce

對于高耗能事件,debounce 函數(shù)是一種不錯(cuò)解決方案。如果你不對 scroll、resize、和 key* 事件使用 debounce  函數(shù),那么你幾乎等同于犯了錯(cuò)誤。下面的 debounce 函數(shù)能讓你的代碼保持高效:

// 返回一個(gè)函數(shù),如果它被不間斷地調(diào)用,它將不會(huì)得到執(zhí)行。該函數(shù)在停止調(diào)用 N 毫秒后,再次調(diào)用它才會(huì)得到執(zhí)行。如果有傳遞 ‘immediate' 參數(shù),會(huì)馬上將函數(shù)安排到執(zhí)行隊(duì)列中,而不會(huì)延遲。
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);
  };
};
 
// 用法
var myEfficientFn = debounce(function() {
    
// 所有繁重的操作
}, 250);
window.addEventListener('resize', myEfficientFn);

debounce 函數(shù)不允許回調(diào)函數(shù)在指定時(shí)間內(nèi)執(zhí)行多于一次。當(dāng)為一個(gè)會(huì)頻繁觸發(fā)的事件分配一個(gè)回調(diào)函數(shù)時(shí),該函數(shù)顯得尤為重要。

poll

盡管上面我提及了 debounce 函數(shù),但如果事件不存在時(shí),你就不能插入一個(gè)事件以判斷所需的狀態(tài),那么就需要每隔一段時(shí)間去檢查狀態(tài)是否達(dá)到你的要求。

function poll(fn, callback, errback, timeout, interval) {
  var endTime = Number(new Date()) + (timeout || 2000);
  interval = interval || 100;
 
  (function p() {
      
// 如果條件滿足,則執(zhí)行!
      if(fn()) {
        callback();
      }
      
// 如果條件不滿足,但并未超時(shí),再來一次
      else if (Number(new Date()) < endTime) {
        setTimeout(p, interval);
      }
      
// 不匹配且時(shí)間消耗過長,則拒絕!
      else {
        errback(new Error('timed out for ' + fn + ': ' + arguments));
      }
  })();
}
 
// 用法:確保元素可見
poll(
  function() {
    return document.getElementById('lightbox').offsetWidth > 0;
  },
  function() {
    
// 執(zhí)行,成功的回調(diào)函數(shù)
  },
  function() {
    
// 錯(cuò)誤,失敗的回調(diào)函數(shù)
  }
);

Polling 在 web 中已被應(yīng)用很長時(shí)間了,并在將來仍會(huì)被使用。

once

有時(shí)候,你想讓一個(gè)給定的功能只發(fā)生一次,類似于 onload 事件。下面的代碼提供了你所說的功能:

function once(fn, context) { 
  var result;
 
  return function() { 
    if(fn) {
      result = fn.apply(context || this, arguments);
      fn = null;
    }
 
    return result;
  };
}
 
// 用法
var canOnlyFireOnce = once(function() {
  console.log('Fired!');
});
 
canOnlyFireOnce(); 
// "Fired!"
canOnlyFireOnce(); 
// nada 
          
// 沒有執(zhí)行指定函數(shù)

once 函數(shù)確保給定函數(shù)只能被調(diào)用一次,從而防止重復(fù)初始化!

getAbsoluteUrl

從一個(gè)字符串變量得到一個(gè)絕對 URL,并不是你想象中這么簡單。對于某些 URL 構(gòu)造器,如果你不提供必要的參數(shù)就會(huì)出問題(而有時(shí)候你真的不知道提供什么參數(shù))。下面有一個(gè)優(yōu)雅的技巧,只需要你傳遞一個(gè)字符串就能得到相應(yīng)的絕對 URL。

var getAbsoluteUrl = (function() {
  var a;
 
  return function(url) {
    if(!a) a = document.createElement('a');
    a.href = url;
 
    return a.href;
  };
})();
 
// 用法
getAbsoluteUrl('/something'); 
// http://davidwalsh.name/something

a 元素的 href 處理和 url 處理看似無意義,而 return 語句返回了一個(gè)可靠的絕對 URL。

isNative

如果你想知道一個(gè)指定函數(shù)是否是原生的,或者能不能通過聲明來覆蓋它。下面這段便于使用的代碼能給你答案:

;(function() {
 
 
// 用于處理傳入?yún)?shù) value 的內(nèi)部 `[[Class]]` 
 var toString = Object.prototype.toString;
 
 
// 用于解析函數(shù)的反編譯代碼
 var fnToString = Function.prototype.toString;
 
 
// 用于檢測宿主構(gòu)造器 (Safari > 4 ;真的輸出特定的數(shù)組)
 var reHostCtor = /^[object .+?Constructor]$/;
 
 
// 用一個(gè)標(biāo)準(zhǔn)的原生方法作為模板,編譯一個(gè)正則表達(dá)式。
 
// 我們選擇 'Object#toString' 因?yàn)樗话悴粫?huì)被污染。
 var reNative = RegExp('^' +
  
// 將 'Object#toString' 強(qiáng)制轉(zhuǎn)為字符串 
  String(toString)
  
// 轉(zhuǎn)義所有指定的正則表達(dá)式字符
  .replace(/[.*+?^${}()|[]/]/g, '$&')
  
// 用 '.*?' 替換提及的 'toString' ,以保持模板的通用性。
  
// 將 'for ...' 之類的字符替換掉,以兼容 Rhino 等環(huán)境,因?yàn)檫@些環(huán)境添加了額外的信息,如方法參數(shù)數(shù)量。
  .replace(/toString|(function).*?(?=()| for .+?(?=])/g, '$1.*?') + '$'
 );
 
 function isNative(value) {
  var type = typeof value;
  return type == 'function'
   
// 用 'Function#toString' (fnToString)繞過了值(value)本身的 'toString' 方法,以免被偽造所欺騙。
   ? reNative.test(fnToString.call(value))
   
// 回退到宿主對象的檢查,因?yàn)槟承┉h(huán)境(瀏覽器)將類型數(shù)組(typed arrays)之類的東西當(dāng)作 DOM 方法,此時(shí)可能不遵循標(biāo)準(zhǔn)的原生正則表達(dá)式。
   : (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
 }
 
 
// 導(dǎo)出函數(shù)
 module.exports = isNative;
}());
 
// 用法
isNative(alert); 
// true
isNative(myCustomFunction); 
// false

這個(gè)函數(shù)雖不完美,但它能完成任務(wù)!

insertRule

我們都知道能通過選擇器(通過 document.querySelectorAll )獲取一個(gè) NodeList ,并可為每個(gè)元素設(shè)置樣式,但有什么更高效的方法為選擇器設(shè)置樣式呢(例如你可以在樣式表里完成):

var sheet = (function() {
    
// 創(chuàng)建 <style> 標(biāo)簽
  var style = document.createElement('style');
 
    
// 如果你需要指定媒介類型,則可以在此添加一個(gè) media (和/或 media query) 
  
// style.setAttribute('media', 'screen')
  
// style.setAttribute('media', 'only screen and (max-width : 1024px)')
 
  
// WebKit hack :(
  style.appendChild(document.createTextNode(''));
 
    
// 將 <style> 元素添加到頁面
  document.head.appendChild(style);
 
  return style.sheet;
})();
 
// 用法
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);

這對于一個(gè)動(dòng)態(tài)且重度依賴 AJAX 的網(wǎng)站來說是特別有用的。如果你為一個(gè)選擇器設(shè)置樣式,那么你就不需要為每個(gè)匹配到的元素都設(shè)置樣式(現(xiàn)在或?qū)恚?/p>

matchesSelector
我們經(jīng)常會(huì)在進(jìn)行下一步操作前進(jìn)行輸入校驗(yàn),以確保是一個(gè)可靠值,或確保表單數(shù)據(jù)是有效的,等等。但我們平時(shí)是怎么確保一個(gè)元素是否有資格進(jìn)行進(jìn)一步操作呢?如果一個(gè)元素有給定匹配的選擇器,那么你可以使用 matchesSelector 函數(shù)來校驗(yàn):

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);
}
 
// 用法
matchesSelector(document.getElementById('myDiv'), 'div.someSelector[some-attribute=true]')

就這樣啦,上述 7 個(gè) JavaScript 函數(shù)是每個(gè)開發(fā)者都應(yīng)該時(shí)刻記著的。有哪個(gè)函數(shù)我錯(cuò)過了呢?請把它分享出來!

以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。

相關(guān)文章

  • JS導(dǎo)出PDF插件的方法(支持中文、圖片使用路徑)

    JS導(dǎo)出PDF插件的方法(支持中文、圖片使用路徑)

    下面小編就為大家?guī)硪黄狫S導(dǎo)出PDF插件的方法(支持中文、圖片使用路徑)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-07-07
  • Javascript原型鏈和原型的一個(gè)誤區(qū)

    Javascript原型鏈和原型的一個(gè)誤區(qū)

    這篇文章主要介紹了Javascript原型鏈和原型的一個(gè)誤區(qū),需要的朋友可以參考下
    2014-10-10
  • 真正好用的js驗(yàn)證上傳文件大小的簡單方法

    真正好用的js驗(yàn)證上傳文件大小的簡單方法

    下面小編就為大家?guī)硪黄嬲糜玫膉s驗(yàn)證上傳文件大小的簡單方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-10
  • bootstrap日期插件daterangepicker使用詳解

    bootstrap日期插件daterangepicker使用詳解

    這篇文章主要為大家詳細(xì)介紹了bootstrap日期插件daterangepicker的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • js實(shí)現(xiàn)時(shí)間日期校驗(yàn)

    js實(shí)現(xiàn)時(shí)間日期校驗(yàn)

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)時(shí)間日期校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • Bootstrap顯示與隱藏簡單實(shí)現(xiàn)代碼

    Bootstrap顯示與隱藏簡單實(shí)現(xiàn)代碼

    這篇文章主要為大家詳細(xì)介紹了bootstrap顯示與隱藏的簡單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • 如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表

    如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表

    如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表?下面小編就為大家?guī)硪黄狫avaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表的方法。希望對大家有所幫助。一起跟隨小編過來看看吧
    2016-05-05
  • js實(shí)現(xiàn)音樂播放控制條

    js實(shí)現(xiàn)音樂播放控制條

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)音樂播放控制條,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-09-09
  • 最新評論