home > webfront > ECMAS > javascript >

摒弃jquery坚持原生—不要再为你的懒惰找借口

Author:[email protected] Date: Hits:

很多前端工程师都是外行(非计算机行业)转入的,学点html+css,其中关键的js,只知道个大概,然后看下jquery文档,然后就干活了!搞了几年

很多前端工程师都是外行(非计算机行业)转入的,学点html+css,

其中关键的js,只知道个大概,然后看下jquery文档,然后就干活了!

搞了几年的前端,js还是,low……

一旦开始使用纯JavaScript来完成所有工作的时候你确实会变得对他们很熟悉。

下面,是汇总一些常用的的方法,

Document Ready 事件

在jQuery中,你们中的许多人可能过去常常像这样使用 document.ready :

$(document).ready(function() {
  // Code
});

但是你知道,你可以将所有的JavaScript放在页面的底端,但他们确实是一回事吗?JavaScript同样拥有一个DOM内容加载事件的侦听器,而不是使用jQuery的document.ready:

document.addEventListener("DOMContentLoaded", function() {
  // Code
}, false);

添加事件

// jQuery
$('.el').on('event', function() {

});

// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) {
  el.addEventListener('event', function() {

  }, false);
});

添加和移除样式Class


DOM元素本身有一个可读写的className属性,可以用来操作class。

HTML 5还提供一个classList对象,功能更强大(IE 9不支持)。

// jQuery
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');

// Native
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');

尾部追加元素:

// jQuery
$('.el').append($('<div/>'));

// Native
document.querySelector('.el').appendChild(document.createElement('div'));

头部追加元素:

//jQuery
$(‘.el’).prepend('<div></div>')

//Native
var parent = document.querySelector('.el');
parent.insertBefore("<div></div>",parent.childNodes[0])

移除元素

Remove
// jQuery
$('.el').remove();

// Native
remove('.el');

function remove(el) {
  var toRemove = document.querySelector(el);

  toRemove.parentNode.removeChild(toRemove);
}

数据储存

jQuery对象可以储存数据。

$("body").data("foo", 52);


HTML 5有一个dataset对象,也有类似的功能(IE 10不支持),不过只能保存字符串。

element.dataset.user = JSON.stringify(user);
element.dataset.score = score;

判断一个元素是否在视图窗口中

通过使用getBoundingClientRect方法,你可以获取页面中任何元素的位置。以下是一个简单的函数来表明它有多简单和多强大。这个函数有一个参数,那就是你想要检查的元素。当元素为可见时,函数将返回true:

// Determine if an element is in the visible viewport
function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );
}

清空子元素

//jQuery
$("#elementID").empty()
 
//Native
var element = document.getElementById("elementID")
while(element.firstChild) element.removeChild(element.firstChild);


参考文章:

http://ourjs.com/detail/535556a1ed9add0e26000002

http://www.cnblogs.com/xiaopen/p/5540884.html





转载本站文章《摒弃jquery坚持原生—不要再为你的懒惰找借口》,
请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2017_0110_7937.html