首页 > 建站教程 > JS、jQ、TS >  用纯JavaScript替代jQuery之技巧篇正文

用纯JavaScript替代jQuery之技巧篇

        接上一篇:用纯JavaScript替代jQuery之事件篇

>>>>Array Each

jQuery
$.each(array, function(i, item){

});

谷歌浏览器,火狐浏览器,IE8+
function forEach(array, fn) {
  for (i = 0; i < array.length; i++)
    fn(array[i], i);
}

forEach(array, function(item, i){

});

谷歌浏览器,火狐浏览器,IE9+
array.forEach(function(item, i){

});

>>>>深度扩展

jQuery
$.extend(true, {}, objA, objB);

谷歌浏览器,火狐浏览器,IE8+
var deepExtend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    var obj = arguments[i];

    if (!obj)
      continue;

    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (typeof obj[key] === 'object')
          deepExtend(out[key], obj[key]);
        else
          out[key] = obj[key];
      }
    }
  }

  return out;
};

deepExtend({}, objA, objB);

>>>>Bind

jQuery
$.proxy(fn, context);

谷歌浏览器,火狐浏览器,IE8+
fn.apply(context, arguments);

谷歌浏览器,火狐浏览器,IE9+
fn.bind(context);

jQuery
$.extend({}, objA, objB);

谷歌浏览器,火狐浏览器,IE8+
var extend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    if (!arguments[i])
      continue;

    for (var key in arguments[i]) {
      if (arguments[i].hasOwnProperty(key))
        out[key] = arguments[i][key];
    }
  }

  return out;
};

extend({}, objA, objB);

>>>>Index Of

jQuery
$.inArray(item, array);

谷歌浏览器,火狐浏览器,IE8+
function indexOf(array, item) {
  for (var i = 0; i < array.length; i++) {
    if (array[i] === item)
      return i;
  }
  return -1;
}

indexOf(array, item);

谷歌浏览器,火狐浏览器,IE9+
array.indexOf(item);

>>>>Is Array

jQuery
$.isArray(arr);

谷歌浏览器,火狐浏览器,IE8+
isArray = Array.isArray || function(arr) {
  return Object.prototype.toString.call(arr) == '[object Array]';
}

isArray(arr);

谷歌浏览器,火狐浏览器,IE9+
Array.isArray(arr);

>>>>Map

jQuery
$.map(array, function(value, index){
});

谷歌浏览器,火狐浏览器,IE8+
function map(arr, fn) {
  var results = [];
  for (var i = 0; i < arr.length; i++)
    results.push(fn(arr[i], i));
  return results;
}

map(array, function(value, index){

});

谷歌浏览器,火狐浏览器,IE9+
array.map(function(value, index){

});

>>>>Now

jQuery
$.now();

谷歌浏览器,火狐浏览器,IE8+
new Date().getTime();

谷歌浏览器,火狐浏览器,IE9+
Date.now();

>>>>Parse Html

jQuery
$.parseHTML(htmlString);

谷歌浏览器,火狐浏览器,IE8+
var parseHTML = function(str) {
  var el = document.createElement('div');
  el.innerHTML = str;
  return el.children;
};

parseHTML(htmlString);

谷歌浏览器,火狐浏览器,IE9+
var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

parseHTML(htmlString);

>>>>解析 Json

jQuery
$.parseJSON(string);

谷歌浏览器,火狐浏览器,IE8+
JSON.parse(string);

>>>>Trim

jQuery
$.trim(string);

谷歌浏览器,火狐浏览器,IE8+
string.replace(/^\s+|\s+$/g, '');

谷歌浏览器,火狐浏览器,IE9+
string.trim();

>>>>Type

jQuery
$.type(obj);

谷歌浏览器,火狐浏览器,IE8+
Object.prototype.toString.call(obj)
                .replace(/^\[object (.+)\]$/, "$1")
                .toLowerCase();