Categories
Uncategorized

[Original] we also need to learn jQuery do?

introduction

Recently line and Vue project, feeling a bit tired heart. Happens Recently, some letters from readers, is to consult

Smoke brother, and now it is also necessary to learn jQuery?

I understand that now MVVM framework gradually occupied the main market, a lot of old projects gradually shifted from MVVM framework jQuery!
    For example, well-known sites in 2018-09-06 github made an article called “Removing jQuery from GitHub.com frontend” just mentioned, has been revised and abandoned jQuery.

So there are some readers this question it!
    so, address this issue, a no-brainer!
    jQuery must learn!

text

JQuery of those things

光阴似箭,岁月如梭…时间回到了2005年8月!
一个帅气的小伙子John Resig(不用说了,比烟哥帅多了,这是我男神),如下图所示

He made a article on his blog, on Prototype’s “Behavior” section of the syntax of some improvements. Then it was not long before he developed a jQuery, and quickly swept the world!
    ps: Prototype is a JavaScript library foundation.

OK, well, let’s take a look at what jQuery reason was quickly swept the world!
    I thought, nothing less than the following three
    (1) Excellent packaging operation DOM
    For example, you want to change the style of the original, native JavaScript is so written

var dom = document.getElementById('test');
dom.style.color = 'blue';

Spend jQuery, and his party get

$('#test').css('color', 'blue');

(2) easy operation Ajax
    Native JavaScript code on ajax request, ah, I do not paste the code! Specifically how complicated the front understand people understand.
    Spend a jQuery, simple and a lot! As follows

 $.ajax({url:"/guduyan",
    success:function(result){
        //dosomething
    }});

(3) Excellent animation
    For example, we need a

element is moved to the left until the left attribute equal to 250 pixels so far.
    Use jQuery, we can write

$("div").animate({left:'250px'});

All in all, jQuery as a JavaScript library. The library has many functions that can simplify your DOM
    Operation, providing some special effects functions … and so on! Its purpose is to make something that you can not write, do not want to write, no time to write the code, then you are ready for some help library function interface, allows you to directly call completion.

MVVM framework

And Vue, React the like, which are JavaScript framework, the assembly is introduced and modular concept, the original virtual DOM substituted DOM operations! In such Vue MVVM framework, and data come completely separated views. The data are no longer needed to reference the appropriate DOM object, to achieve the purpose of decoupling!

For several advantages of the original jQuery
    (1) for jQuery in Dom convenient operation
    React Vue and MVVM in such framework, the concept rendering employs a binding element, how do basic operations Dom, except for some special operations.

ps: Dom operations can not completely disappear, otherwise Vue no need to provide $ refs property. Some say you can completely replace the article, I beg to differ.

(2) in jQuery animations for good
    This has CSS 3 can be replaced. In addition, there are special animation library Velocity.js may be responsible for these animation effects!

(3) for convenient operation jQuery Ajax
    This is completely replaced Axios and other libraries and API are similar, the same function.

In addition to the above points. Like Vue MVVM framework for this kind of performance, let the developers directly manipulate the DOM tree, introducing the concept of virtual DOM.
    Some readers may not understand this virtual DOM, pull it over the virtual DOM.
    Traditional DOM operations there is a problem, assuming a js method where you update operation involves ten nodes, as shown below

node1.style.marginTop=50+'px'; 
node2.style.width=50+'px';
node3.style.height=50+'px';
.......10次

So, every time the DOM change, need to be rendered in the browser. Every DOM changes, the browser will need to recalculate CSS, layout processing, and then re-render the page. This will take time.

Virtual DOM is to solve this problem browser performance is designed. Examples of previous example, if there is one operation to update the DOM action 10 times, virtual DOM DOM will not operate immediately, but save these 10 to update the contents of a local js object, the object will eventually be the one-time js attach to the DOM tree, tells the browser to perform rendering work, so to avoid a lot of duplication of work. After all js object is a memory object, direct operating js objects, than the real operation DOM, much faster.

可能还是比较抽象,我拿vue来说明。
如下图所示(图片出自浪里行舟)

如上图所示,在Vue的底层实现上,Vue将模板编译成虚拟DOM渲染函数。结合Vue自带的响应系统,在状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应到DOM操作上。
那么,实例图如下

OK, after reading the above two pictures, Vue should be able to understand the benefits of using this type of MVVM framework of a virtual DOM. I will not continue to expand. because
    Further details go, I can pull some of how to write such a virtual DOM, how to map the real DOM. Taking into account also no one to write, I do not write.

Um, um, um, what spots! ! ! !
    Talking about this, think about

Interviewer: “Why can talk about your project with Vue this MVVM framework it?”

Now, it will be answered?

Next we come to talk about, since MVVM framework so good, then why should it learn jQuery?

Necessities of jQuery

(1)目前大量网站在用jQuery
虽然目前大量文章鼓吹什么jQuery不行啦,要退出潮流啦!
然而,各位随便去个网站,按f12输入一个$,大部分还是会返回一个
“function(a,b){return new r.fn.init(a,b,h)}”
烟哥在写这段话的时候,特意跑去京东试了一下,返回值如下

As for the other blog park ah, barabara of their own to try and see the return value is valid!
    This time you should ask

Le me go, say yes to withdraw from the stage of history it? How so many sites still use jQuery!

Very simple, because jQuery has occupied the market. If a product has stabilized, let him change another set architecture is a sum of the cost.
    It is precisely because the current market is still large number of sites and then jQuery, jQuery learn it is still very necessary!

(2) jQuery supports the following versions of IE8
    Since the frame Vue and the like, can support more than IE8 version. So to be honest, I do not know now what the advocate, the market is what IE8 browser ah.
    The reality is, a lot of the kind of institutions inside the antique computers, many of them still IE7, like in this case, using MVVM framework vue like obviously not suitable.

ps: you take the project to the government with Vue try, absolutely make money by finding fault is the focus of technical services for the money!!!

(3) jQuery for quick start
    I remember once I had a colleague, will point jQuery, just to brag about that whole stack. For these people, we should be: “ah, you are awesome, we can teach them!” Yes, he is to make the expansion, then let him interested in studying!

Of course, this reflects that, in fact, jQuery good to get started. Of course, if the occupation is a front end, of course, to understand mvvm, but more companies do not even make the front end, back-end processing, back-end processing that are actually jQuery.

to sum up

Any article advocating jQuery to leave the stage, can not believe, absolutely fooled everyone. jQuery is still necessary to learn.

Leave a Reply