javascript's most basic function summary

I remember in the early days of JavaScript, it was almost impossible to get anything done without a few simple functions, because browser providers implemented things differently, not just at the edges but also at the base, like addEventListener and attachEvent. Although times have changed, there are still a few functions that every developer should master in order to perform certain functions and improve performance.

debounce

For energy-intensive events, the debounce function is a good solution. If you don't use the debounce function for scroll, resize, and key* events, then you've almost made a mistake. The following debounce functions keep your code efficient:

//  return 1 If it is called continuously, it will not be executed. This function is called at stop  N  Milliseconds later, it is called again before it is executed. If there is a transmission   ' immediate'  Parameter, which immediately queues the function to execution without delay. 
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 heavy operations 
}, 250);
window.addEventListener('resize', myEfficientFn);

The debounce function does not allow callback functions to execute more than one time. This function is particularly important when assigning a callback function to an event that frequently fires.

poll

Although I mentioned the debounce function above, if an event does not exist, you cannot insert an event to determine the desired state, and you need to check every once in a while to see if the state meets your requirements.

function poll(fn, callback, errback, timeout, interval) {
  var endTime = Number(new Date()) + (timeout || 2000);
  interval = interval || 100;
 
  (function p() {
      
//  If the condition is met, execute! 
      if(fn()) {
        callback();
      }
      
//  If the condition is not met, but it doesn't run out of time, try again 1 time 
      else if (Number(new Date()) < endTime) {
        setTimeout(p, interval);
      }
      
//  If it does not match and takes too long, reject it! 
      else {
        errback(new Error('timed out for ' + fn + ': ' + arguments));
      }
  })();
}
 
//  Usage: Make sure the element is visible 
poll(
  function() {
    return document.getElementById('lightbox').offsetWidth > 0;
  },
  function() {
    
//  Execute, successful callback function 
  },
  function() {
    
//  Error, failed callback function 
  }
);

Polling has been used in web for a long time and will continue to be used in the future.

once

Sometimes you want a given feature to occur only once, similar to the onload event. The following code provides the functionality you say:

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 
          
//  The specified function is not executed 

The once function prevents duplicate initialization by ensuring that a given function can only be called once!

getAbsoluteUrl

Getting an absolute URL from a string variable is not as simple as you might think. For some URL constructors, it can be a problem if you don't provide the necessary parameters (and sometimes you really don't know what to provide). Here's an elegant trick where you just pass a string to get the corresponding absolute URL.

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

The a element's href processing and url processing seem meaningless, while the return statement returns a reliable absolute URL.

isNative

If you want to know if a specified function is native, or if you can override it declaratively. This easy-to-use piece of code will give you the answer:

;(function() {
 
 
//  Used to handle incoming parameters  value  The interior of the  `[[Class]]` 
 var toString = Object.prototype.toString;
 
 
//  Decompiled code to parse the function 
 var fnToString = Function.prototype.toString;
 
 
//  Used to detect host constructors   ( Safari > 4 ; Really output a specific array) 
 var reHostCtor = /^[object .+?Constructor]$/;
 
 
//  with 1 The standard native methods are compiled as templates 1 A regular expression. 
 
//  We choose  'Object#toString'  Because it 1 It won't be polluted. 
 var reNative = RegExp('^' +
  
//  will  'Object#toString'  Force to string  
  String(toString)
  
//  Escapes all specified regular expression characters 
  .replace(/[.*+?^${}()|[]/]/g, '$&')
  
//  with  '.*?'  Substitution referred to  'toString'  To keep the template universal. 
  
//  will  'for ...'  Such characters are replaced to be compatible  Rhino  , because these environments add additional information, such as the number of method parameters. 
  .replace(/toString|(function).*?(?=()| for .+?(?=])/g, '$1.*?') + '$'
 );
 
 function isNative(value) {
  var type = typeof value;
  return type == 'function'
   
//  with  'Function#toString'  ( fnToString ) bypasses the value ( value ) itself  'toString'  Method, so as not to be deceived by forgery. 
   ? reNative.test(fnToString.call(value))
   
//  Back to the host object check because some environments (browsers) will put an array of types ( typed arrays "(" As if  DOM  Method, which may not follow the standard native regular expression at this point. 
   : (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
 }
 
 
//  The export function 
 module.exports = isNative;
}());
 
//  usage 
isNative(alert); 
// true
isNative(myCustomFunction); 
// false

This function isn't perfect, but it does the job!

insertRule

We all know that you can get an NodeList through selectors (via document.querySelectorAll) and style each element, but what's a more efficient way to style selectors (for example, you can do this in a stylesheet) :

var sheet = (function() {
    
//  create  <style>  The label 
  var style = document.createElement('style');
 
    
//  If you need to specify the media type, you can add it here 1 a  media ( and / or  media query) 
  
// style.setAttribute('media', 'screen')
  
// style.setAttribute('media', 'only screen and (max-width : 1024px)')
 
  
// WebKit hack :(
  style.appendChild(document.createTextNode(''));
 
    
//  will  <style>  Elements are added to the page 
  document.head.appendChild(style);
 
  return style.sheet;
})();
 
//  usage 
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);

This is especially useful for a site that is dynamic and heavily reliant on AJAX. If you style 1 selector, you don't need to style every element that matches (now or in the future).

matchesSelector
We often do input validation before the next step to make sure it is a reliable value, or that the form data is valid, etc. But how do we normally make sure that an element is qualified for the next step? If an element has a selector given a match, you can use the matchesSelector function to verify:

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]')

So there you have it, seven JavaScript functions that every developer should keep in mind all the time. What function did I miss? Please share it!

This is the end of this article, I hope you enjoy it.