简介:现在各种类库满天飞,说jQuery有多快多快,可是对前端大牛来说,更定不会止步于jQuery,因而常常听到高级的前端工程师追求原生js,为何?答案是原生JS要更快,原因是JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
现在各种类库满天飞,说jQuery有多快多快,可是对前端大牛来说,更定不会止步于jQuery,因而常常听到高级的前端工程师追求原生js,为何?答案是原生JS要更快,原因是JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗。 当然,我不是提倡写代码纯用原生JS实现,请记住:“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”。 下面直接用代码示例:流行的常用的JQuery功能用原生JS实现。 选择器 JQuery选择器的强大无需赘言,然而在大多数的情况下,我们可以使用相同的代码量用原生JS轻易实现。 1.获取页面所有的div /* jQuery */ $("div") /* native equivalent */ document.getElementsByTagName("div") 2.获取某类名相同的一群元素 /* jQuery */ $(".my-class") /* native equivalent */ document.querySelectorAll(".my-class") /* FASTER native equivalent */ document.getElementsByClassName("my-class") 3.更复杂的一些选择器 /* jQuery */ $(".my-class li:first-child") /* native equivalent */ document.querySelectorAll(".my-class li:first-child") /* jQuery */ $(".my-class").get(0) /* native equivalent */ document.querySelector(".my-class") DOM操作 JQuery频繁功能就是操作DOM元素,诸如插入或删除一个元素。当然,如果使用原生JS实现这些功能,代码量肯定是会有所增加的,不过我们也可以将这些功能封装成函数,下面是一些常用的DOM操作的原生JS实现。 1.插入HTML元素 /* jQuery */ $(document.body).append("<div id="myDiv"><img src="im.gif"/></div>"); /* CRAPPY native equivalent */ document.body.innerHTML += "<div id="myDiv"><img src="im.gif"/></div>"; /* MUCH BETTER native equivalent */ var frag = document.createDocumentFragment(); var myDiv = document.createElement("div"); myDiv.id = "myDiv"; var im = document.createElement("img"); im.src = "im.gif"; myDiv.appendChild(im); frag.appendChild(myDiv); document.body.appendChild(frag); CSS操作 在JQuery中可以轻松实现对css的操作,增加属性、删除属性或是检测是否存在某个类。那么你是否觉得使用原生JS实现会很麻烦呢?其实不然,因为有classList。下面是一些关于JQuery css操作的JS原生实现。 // get reference to DOM element var el = document.querySelector(".main-content"); //----Adding a class------ /* jQuery */ $(el).addClass("someClass"); /* native equivalent */ el.classList.add("someClass"); //----Removing a class----- /* jQuery */ $(el).removeClass("someClass"); /* native equivalent */ el.classList.remove("someClass"); //----Does it have class--- /* jQuery */ if($(el).hasClass("someClass")) /* native equivalent */ if(el.classList.contains("someClass")) 当我们简单地逐个设置Css的属性,而并非将它们全部传递给JQuery的Css函数时,性能明显会快很多。而且,真的不会添加什么额外的代码。 // get reference to a DOM element var el = document.querySelector(".main-content"); //----Setting multiple CSS properties---- /* jQuery */ $(el).css({ background: "#FF0000", "box-shadow": "1px 1px 5px 5px red", width: "100px", height: "100px", display: "block" }); /* native equivalent */ el.style.background = "#FF0000"; el.style.width = "100px"; el.style.height = "100px"; el.style.display = "block"; el.style.boxShadow = "1px 1px 5px 5px red"; show与hide show()与hide()应该也是JQuery中十分常用的方法,原生JS实现同样轻松。 // get reference to a DOM element var el = document.querySelector(".main-content"); //----show() or hide()---- /* jQuery */ $(el).show(); $(el).hide(); /* native equivalent */ el.style.display = ""; el.style.display = "none"; 事件绑定 // get reference to a DOM element var el = document.querySelector(".main-content"); //----Event Listener off---- /* jQuery */ $(el).off(eventName, eventHandler); /* native equivalent */ el.removeEventListener(eventName, eventHandler); //----Event Listener on---- /* jQuery */ $(el).on(eventName, eventHandler); /* native equivalent */ el.addEventListener(eventName, eventHandler); jQuery的确是个了不起的库,如果同样轻松的使用JS实现jQuery,尽量使用JS。即使优化有点吹毛求疵,由于html5游戏的迅速崛起,这点优化就显得格外的宝贵。 文/丁向明 做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833 http://dingxiangming.com 本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。 |