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

用纯JavaScript替代jQuery之技巧篇

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

>>>>Array Each

jQuery
1$.each(array, function(i, item){
2 
3});

谷歌浏览器,火狐浏览器,IE8+
1function forEach(array, fn) {
2  for (i = 0; i < array.length; i++)
3    fn(array[i], i);
4}
5 
6forEach(array, function(item, i){
7 
8});

谷歌浏览器,火狐浏览器,IE9+
1array.forEach(function(item, i){
2 
3});

>>>>深度扩展

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

谷歌浏览器,火狐浏览器,IE8+
01var deepExtend = function(out) {
02  out = out || {};
03 
04  for (var i = 1; i < arguments.length; i++) {
05    var obj = arguments[i];
06 
07    if (!obj)
08      continue;
09 
10    for (var key in obj) {
11      if (obj.hasOwnProperty(key)) {
12        if (typeof obj[key] === 'object')
13          deepExtend(out[key], obj[key]);
14        else
15          out[key] = obj[key];
16      }
17    }
18  }
19 
20  return out;
21};
22 
23deepExtend({}, objA, objB);

>>>>Bind

jQuery
1$.proxy(fn, context);

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

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

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

谷歌浏览器,火狐浏览器,IE8+
01var extend = function(out) {
02  out = out || {};
03 
04  for (var i = 1; i < arguments.length; i++) {
05    if (!arguments[i])
06      continue;
07 
08    for (var key in arguments[i]) {
09      if (arguments[i].hasOwnProperty(key))
10        out[key] = arguments[i][key];
11    }
12  }
13 
14  return out;
15};
16 
17extend({}, objA, objB);

>>>>Index Of

jQuery
1$.inArray(item, array);

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

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

>>>>Is Array

jQuery
1$.isArray(arr);

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

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

>>>>Map

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

谷歌浏览器,火狐浏览器,IE8+
01function map(arr, fn) {
02  var results = [];
03  for (var i = 0; i < arr.length; i++)
04    results.push(fn(arr[i], i));
05  return results;
06}
07 
08map(array, function(value, index){
09 
10});

谷歌浏览器,火狐浏览器,IE9+
1array.map(function(value, index){
2 
3});

>>>>Now

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

谷歌浏览器,火狐浏览器,IE9+
>>>>Parse Html

jQuery
1$.parseHTML(htmlString);

谷歌浏览器,火狐浏览器,IE8+
1var parseHTML = function(str) {
2  var el = document.createElement('div');
3  el.innerHTML = str;
4  return el.children;
5};
6 
7parseHTML(htmlString);

谷歌浏览器,火狐浏览器,IE9+
1var parseHTML = function(str) {
2  var tmp = document.implementation.createHTMLDocument();
3  tmp.body.innerHTML = str;
4  return tmp.body.children;
5};
6 
7parseHTML(htmlString);

>>>>解析 Json

jQuery
1$.parseJSON(string);

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

>>>>Trim

jQuery
1$.trim(string);

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

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

>>>>Type

jQuery
1$.type(obj);

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