Shulou(Shulou.com)06/02 Report--

This article introduces whether WebApp really needs jQuery, the content is very detailed, interested friends can use it for reference, I hope it can be helpful to you.

First of all, we have to admit that the powerful charm of jQuery is that jQuery accompanies us through every day of desktop browser development, and its light use is well known, which is one of the mainstream frameworks commonly used in desktop browser projects. But in mobile browser projects, such as WebApp, would you really like to reference such a large and swollen front-end framework? Do you really need it? In fact, you don't need it, because the API in high-end mobile devices is enough.

Let's talk about the reasons why you should give up jQuery on mobile devices.

Why do front-end engineers need to care about the front-end framework on mobile devices?

As we all know, the most obvious difference between mobile devices and fixed devices is the bandwidth problem. Loading external resources on mobile devices is certainly much slower than loading external resources on fixed devices. We lead the problem to the front-end framework, and the min version of the jQuery*** version is 77KB, which alone requires a compromise by the front-end engineer.

Sizzle selector accounts for a large proportion of jQuery, which is an open source framework of javascript selector compatible with multiple platforms, but in mobile devices, we really don't need this Sizzle selector. The other part is the animation class library of jQuery, which is also compatible with multi-platform animation class library. But in WebApp, we also do not need, we need translate and animation of CSS 3 to complete the requirements. * An OOP that can be regarded as jQuery This is not needed at all, and developers can encapsulate a set of OOP methods according to their professional skills.

First let's take a look at javascript selector.

When we do DHTML websites, we usually operate on DOM. JQuery can be said to be a very light and powerful JavaScript framework for flexible operation of DOM. When you use jQuery to operate DOM, it is as magical as magic, which is exactly the original intention of jQuery.

But when your current user base is Iphone, Android, Ipad, Blackberry and other high-end users, you should not introduce such a huge JavaScript framework in order to use selectors, you should:

Document.querySelector (DOM)

QuerySelector is an easier, faster, and more reliable local selector engine. You can also use selectors by encapsulating a function like jQuery in three lines of code.

Function $(query) {return document.querySelectorAll (query);}

Here is your favorite $, just 3 lines of code to do it! You might ask that using getElementById to get DOM is faster, which is good. GetElementById method to get DOM is indeed faster, but this method is suitable for more elements in the page, you can feel its pleasure, but WebApp can not have many elements in the same page, it will not be the same as Web products. So here I don't recommend that front-end engineers give up using querySelectorAll/querySelector and use getElementById repackaging for the sake of this unperceived speed. And in actual project development, you can also save the acquired DOM in variables, which also reduces access to DOM.

DOMReady Function

Of course, there are times when we may have to wait for the DOM to load before we execute our function. JQuery has a ready method, and we can also have our own ready method.

Function ready (fn) {document.addEventListener ('DOMContentLoaded', fn, false);}

All functions will be executed immediately after the DOM element is loaded, excluding image | audio | video.

Ready (function () {alert ($('# demo') [0] [xss_clean]);})

As you may have found, this ready method is not very flexible. First of all, you cannot unload the DOMContentLoaded event, each time the ready method is called, the DOMContentLoaded event is registered for the document; second, when the DOM is loaded, only one call to the function is performed. This is not what we want, we need to improve it.

Var readyFuns = []; function DOMReady () {for (var item0 recording lounge readyFuns.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.