Skip to content

Latest commit

 

History

History
483 lines (411 loc) · 11.1 KB

README.md

File metadata and controls

483 lines (411 loc) · 11.1 KB
Raw

vanilla-javascript

You just wrote some awesome vanilla JavaScript code?
Feel free to add it and send PR to me. The toc below is generated with doctoc.

Table of Contents

Selector

// works like $('#id') but do $('id')
var $  = document.getElementById.bind(document);
// works like $('.class') but do $$('.class')
var $$ = document.querySelectorAll.bind(document);

Get dom elements by element name and specfic attribute value

http://jsbin.com/zesiro/1/edit?html,js,console

function domSelector(name='input', attr='type', value='text') {
  var els = document.querySelectorAll(name);
  els = Array.prototype.slice.call(els).filter(function(el){
    if (el.getAttribute(attr) === value) {
      return true;
    }
  });
  return els;
}

var elements = domSelector('input', 'type', 'text');
Array.prototype.forEach.call(elements, function(el, i) {
  console.log(el.id);
});

Clone object

function clone(obj) {
  if(obj === null || typeof(obj) !== 'object')
    return obj;

  var temp = obj.constructor();

  for(var key in obj) {
    if(Object.prototype.hasOwnProperty.call(obj, key)) {
      temp[key] = clone(obj[key]);
    }
  }
  return temp;
}

Get unique values in an array

// my implement
function ArrayUnique(array) {
  var u = {},
    a = [];
  for (var i = 0, l = array.length; i < l; ++i) {
    if (u.hasOwnProperty(array[i])) {
      continue;
    }
    a.push(array[i]);
    u[array[i]] = 1;
  }
  return a;
}
// alternative
function ArrayUnique(array) {
  return array.reduce(function(previous, current) {
    if (previous.indexOf(current) < 0) previous.push(current);
    return previous;
  }, []);
}

Each loop

// for an array
function each(arr, fn) {
  for(var i in arr) {
    fn(i, arr[i]);
  }
}
// for dom element, works like $.each
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i) {
    // your action
});

// or if you want to convert dom nodelist into array,
// do like this:
// var els = document.querySelectorAll('something')
// els = Array.prototype.slice.call(els)

Remove a specific element from an array

http://jsbin.com/nawapa/edit?js,console

var array = ['mikasa', 'saber', 'yurei', 'inori', 'chris'];
// if you know the index of the element, like you want to remove the third item
var index = 2;
// or you don't know the actual index but the value, you can:
var index = array.indexOf('yurei');

if(index > -1) {
  array.splice(index, 1);
}
console.log(array);

Get Object length

function ObjectLength(obj) {
  var length = 0, key;
  for (key in obj) {
    if (obj.hasOwnProperty(key)) length++;
  }
  return length;
}

Get keys of an object

var obj = {a:1, b:2, c:3};
// native api, returns the keys
Object.keys(obj);
// alternative, store keys in `arr` variable
var arr = [], i = 0;
for(arr[i++] in obj){}

Dom classList manipulation

// classList is much faster than className as we know, ref: http://t.cn/RAYkuEr
// addClass
function addClass(el, className) {
  if (el.classList)
    el.classList.add(className);
  else
    el.className += ' ' + className;
}
// removeClass
function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className);
  else
    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
// toggleClass
function toggleClass(el, className) {
  if (el.classList) {
    el.classList.toggle(className);
  } else {
    var classes = el.className.split(' ');
    var existingIndex = classes.indexOf(className);

    if (existingIndex >= 0)
      classes.splice(existingIndex, 1);
    else
      classes.push(className);

    el.className = classes.join(' ');
  }
}

Trim

// works like $.trim(string)
var string = ' ai shi te ru    ';
string.trim(); // print 'ai shi te ru'

Get element offset

function getOffset(el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return {
    top: _y,
    left: _x
  };
}
// example: var offset = getOffset(document.getElementById('yourElId'));

Check

// detect browsers
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6

Cookie

// ref: https://github.com/filamentgroup/cookie
function cookie( name, value, days ){
	// if value is undefined, get the cookie value
	if( value === undefined ){
		var cookiestring = "; " + window.document.cookie;
		var cookies = cookiestring.split( "; " + name + "=" );
		if ( cookies.length === 2 ){
			return cookies.pop().split( ";" ).shift();
		}
		return null;
	}
	else {
		// if value is a false boolean, we'll treat that as a delete
		if( value === false ){
			days = -1;
		}
		var expires;
		if ( days ) {
			var date = new Date();
			date.setTime( date.getTime() + ( days * 24 * 60 * 60 * 1000 ) );
			expires = "; expires="+date.toGMTString();
		}
		else {
			expires = "";
		}
		window.document.cookie = name + "=" + value + expires + "; path=/";
	}
}

Flatify an array

// the .push way
var arr = [1, 2, [3, [4, 5]], 6]
var result = []
var flat = function(arr) {
  var i, l = arr.length
  for (i = 0; i < l; i++) {
    if (!Array.isArray(arr[i])) {
      result.push(arr[i])
    } else {
      flat(arr[i])
    }
  }
  return result
}
arr = flat(arr) // result is [1,2,3,4,5,6]

// the .reduce & .concat way
function flatten(arr) {
  return arr.reduce((current, next) => {
    return current.concat(Array.isArray(next) ? flatten(next) : next);
  }, [])
}

var a = [1, 2, [3, [4, 5]], 6, 7, ['a', [1, [3, 6]]], {a: 1}, null]

a = flatten(a)

console.log(a)

Check contains

function contains (obj, item) {
  // @type obj: Array, String

  if (typeof obj === 'string') {
    return obj.indexOf(item) > -1
  }

  for(var i in obj) {
    if (obj[i] === item) {
      return true
    }
  }
  return false
}

Parse url

// parse url queries to an array, http://example.com/?q=words&ord=desc => ['words', 'desc']
var query = location.search.substring('1').split('&')
for (var i in query) {
  query[i] = query[i].split('=')[1]
}
// parse url queries to an object, http://example.com/?q=words&ord=desc => {q: 'words', ord: 'desc'}
var query = location.search.substring('1').split('&')
var params = {}
for (var i in query) {
  var key = query[i].split('=')[0],
    value = query[i].split('=')[1]
  params[key] = value
}

Get number between $start and $end

// NumberBetween(0, 100) return a ( 0 <= number < 100 )
function NumberBetween(start, end) {
  return Math.floor(Math.random() * end) + start
}

Make an array random ordered (shuffle)

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;
  // 当数组不为空时
  while (0 !== currentIndex) {
    // 随机选择
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    // 和当前元素交换
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

Make HTML elements (Divs) random ordered

// I haven't checked this
function randomDivs(el) {
  var newDivs = []
  for (var i = 0, dom = document.querySelectorAll(el); i < dom.length; i++) {
    var randomIndex = NumberBetween(0, dom.length)
    newDivs[newDivs.length] = dom[randomIndex].cloneNode(true)
    dom[randomIndex].parentNode.removeChild(dom[randomIndex])
  }
  return newDivs
}

Count words with CJK support

var string = '我爱你，你呢？ me too!'
var count = string.match(/[\u00ff-\uffff]|\S+/g).length //returns 9

Executes function when document ready

ready(function () {
  console.log('I am ready!')
})

function ready(fn) {
  if (document.readyState != 'loading'){
    fn()
  } else {
    document.addEventListener('DOMContentLoaded', fn)
  }
}

Class

Generally two ways to create JavaScript Class, sure there're more ways.

// ES5
function classFn () {

}
classFn.prototype = {
  constructor: classFn,
  someMethod: function () {
    // blahblah...
  }
}

// ES6
class classFn {
  constructor () {
    this.name = 'myname'
  }
  someMethod () {
    // blahblah...
  }
}

Convert to unicode string

// utf8str -> jsstr
function utf8StrToStr(str) { 
  return decodeURIComponent(escape(str));
}
// jsstr -> utf8str
function strToUtf8str(str) {
  return unescape(encodeURIComponent(str));
}

Convert to hex

// str -> hex
function strToHex(str) {
  var hex = '';
  for (var i=0; i<str.length; i++) {
    var str1 = str.charCodeAt(i).toString(16);
    str1 = str1.length == 0 ? "00" :
    str1.length == 1 ? "0" + str1 : 
    str1.length == 2 ? str1 :
    str1.substring(str1.length-2, str1.length);
    hex += str1;
  }
  return hex;
}
// hex -> str
function hexToStr(hexx) {
  var hex = hexx.toString();
  var str = '';
  for (var i = 0; i < hex.length; i += 2) {
    str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
  }     
  return str;
}