使用原生 JavaScript 进行开发

      很多的 JavaScript 开发人员，包括我在内，都很喜欢 jQuery。因为它的简单，因为它有很多丰富的插件可供使用，和其它优秀的工具一样，jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。
      然而，另一方面，作为前端开发的基础框架，jQuery 包含大量的兼容性代码和扩展功能，其中有很多在你的整个项目中可能都不会用到。其实如果你只是针对现代浏览器，很多功能使用原生的 JavaScript 就可以实现，即使是拖后腿的低版本 IE 浏览器，兼容性也是很容易处理的。

       下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能。如果你打算自己开发一个小的基础框架，可以好好参考一下这些代码的实现。 

Ajax Post

jQuery：

$.ajax({

  type: 'POST',

  url: '/my/url',

  data: data

});

IE8+：

var request = new XMLHttpRequest();

request.open('POST', '/my/url', true);

request.send(data);

Ajax Get

jQuery：

$.ajax({

  type: 'GET',

  url: '/my/url',

  success: function(resp) {

 

  },

  error: function() {

 

  }

});　

IE8+：

request = new XMLHttpRequest();

request.open('GET', '/my/url', true);

 

request.onreadystatechange = function() {

  if (this.readyState === 4){

    if (this.status >= 200 && this.status < 400){

      // Success!

      resp = this.responseText;

    } else {

      // Error :(

    }

  }

}

 

request.send();

request = null;

加载 JSON

jQuery：

$.getJSON('/my/url', function(data) {

 

});

IE8+：

request = new XMLHttpRequest();

request.open('GET', '/my/url', true);

 

request.onreadystatechange = function() {

  if (this.readyState === 4){

    if (this.status >= 200 && this.status < 400){

      // Success!

      data = JSON.parse(this.responseText);

    } else {

      // Error :(

    }

  }

}

 

request.send();

request = null;

淡入效果

jQuery：

$(el).fadeIn();　　

IE8+：

function fadeIn(el) {

  var opacity = 0;

 

  el.style.opacity = 0;

  el.style.filter = '';

 

  var last = +new Date();

  var tick = function() {

    opacity += (new Date() - last) / 400;

    el.style.opacity = opacity;

    el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';

 

    last = +new Date();

 

    if (opacity < 1) {

      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);

    }

  };

 

  tick();

}

 

fadeIn(el);

显示和隐藏

jQuery：

$(el).show();

$(el).hide();

IE8+：

el.style.display = '';

el.style.display = 'none';

添加 Class

jQuery：

$(el).addClass(className);

IE8+：

if (el.classList)

  el.classList.add(className);

else

  el.className += ' ' + className;

插入 HTML

jQuery：

$(el).before(htmlString);

$(parent).append(el);

$(el).after(htmlString);

IE8+：

el.insertAdjacentHTML('beforebegin', htmlString);

parent.appendChild(el);

el.insertAdjacentHTML('afterend', htmlString);

获取子节点

jQuery：

$(el).children();

IE8+：

var children = [];

for (var i=el.children.length; i--;){

  // Skip comment nodes on IE8

  if (el.children[i].nodeType != 8)

    children.unshift(el.children[i]);

}

循环节点

jQuery：

$(selector).each(function(i, el){

 

});

IE8+：

function forEachElement(selector, fn) {

  var elements = document.querySelectorAll(selector);

  for (var i = 0; i < elements.length; i++)

    fn(elements[i], i);

}

 

forEachElement(selector, function(el, i){

 

});

清空节点

jQuery：

$(el).empty();

IE8+：

while(el.firstChild)

  el.removeChild(el.firstChild)

过滤节点

jQuery：

$(selector).filter(filterFn);

IE8+：

function filter(selector, filterFn) {

  var elements = document.querySelectorAll(selector);

  var out = [];

  for (var i = elements.length; i--;) {

    if (filterFn(elements[i]))

      out.unshift(elements[i]);

  }

  return out;

}

 

filter(selector, filterFn);

查找元素

jQuery：

$(el).find(selector);

$('.my #awesome selector');

IE8+：

el.querySelectorAll(selector);

document.querySelectorAll('.my #awesome selector');

获取属性、HTML或者文本

jQuery：

$(el).attr('tabindex');

$(el).html();

$('

').append($(el).clone()).html();

$(el).text();

IE8+：

el.getAttribute('tabindex');

el.innerHTML

el.outerHTML

el.textContent || el.innerText

判断是否包含某个 css class

jQuery：

$(el).hasClass(className);

IE8+：

if (el.classList)

  el.classList.contains(className);

else

  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);　

选择器匹配

jQuery：

$(el).is('.my-class');

IE8+：

var matches = function(el, selector) {

  var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector);

 

  if (_matches) {

    return _matches.call(el, selector);

  } else {

    var nodes = el.parentNode.querySelectorAll(selector);

    for (var i = nodes.length; i--;)

      if (nodes[i] === el) {

        return true;

    }

    return false;

}

 

matches(el, '.my-class');

前一个节点

jQuery：

$(el).prev();

IE8+：

// prevSibling can include text nodes

function previousElementSibling(el) {

  do { el = el.previousSibling; } while ( el && el.nodeType !== 1 );

  return el;

}

 

el.previousElementSibling || previousElementSibling(el);

后一个节点

jQuery：

$(el).next();

IE8+：

// nextSibling can include text nodes

function nextElementSibling(el) {

  do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );

  return el;

}

 

el.nextElementSibling || nextElementSibling(el);

外部高度

jQuery：

$(el).outerHeight()

IE8+：

function outerHeight(el, includeMargin){

  var height = el.offsetHeight;

 

  if(includeMargin){

    var style = el.currentStyle || getComputedStyle(el);

    height += parseInt(style.marginTop) + parseInt(style.marginBottom);

  } 

  return height;

}

 

outerHeight(el, true);

外部宽度

jQuery：

$(el).outerWidth()

IE8+：

function outerWidth(el, includeMargin){

  var height = el.offsetWidth;

 

  if(includeMargin){

    var style = el.currentStyle || getComputedStyle(el);

    height += parseInt(style.marginLeft) + parseInt(style.marginRight);

  } 

  return height;

}

 

outerWidth(el, true);

判断是否数组

jQuery：

$.isArray(arr);

IE8+：

isArray = Array.isArray || function(arr) {

  return Object.prototype.toString.call(arr) == '[object Array]';

}

isArray(arr);

数组转换

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){

 

})

【使用原生 JavaScript 进行开发】相关文章

1. 使用原生 JavaScript 进行开发

2. 原生体验挡不住！JavaScript开源跨平台框架NativeScript

3. 忘掉jQuery，使用JavaScript原生API

4. 忘掉jQuery，使用JavaScript原生API

5. 使用 HTML5 canvas 进行 Web 绘图

6. 移动Web技术的春天来了？Facebook发布React Native，用JavaScript开发移动原生应用 ...

7. 用JavaScript开发移动原生应用，Facebook正式开源React Native！

8. Intention.js：通过HTML进行响应式开发

9. JavaScript开源跨平台框架NativeScript

10. RapydScript：将特定代码转换成JavaScript的预编译器

本文来源：https://www.51html5.com/a3540.html