jquery chain call and show knowledge analysis _jquery

The previous article introduced the jquery framework, the basic knowledge of jquery can be referenced.

jquery has been in use for a long time, but there are some APIs that don't make sense. The following will be introduced using simplified code, focusing on the implementation of jquery.

Compared to the previous article, the code has been updated: 21~78

(Function (window, undefined) {function jQuery (SEL) {return new JQuery.prototype.init (SEL);} jquery.prototype = {Constru Ctor:jquery, Init:function (SEL) {if (typeof sel = = "string") {var, = this; var nodelist = Document.queryselectorall (
SEL);
Array.prototype.forEach.call (NodeList, function (val, i) {that[i] = val;}) This.selector = sel;
This.length = Nodelist.length;
}, Show:function () {Array.prototype.forEach.call (this, function (node) {//if (Node.style) continue;//textnode has no style
Delete the display:none var display = Node.style.display on the style; if (display = = = ' None ') {//dispaly is empty, CSS if there is display then the CSS is in effect//otherwise the default is in effect Node.style.display = ';}//element display value is not a default value. Need to revert to olddisplay:div->display:inline-block//or detect if display on CSS is none-if (node.style.display=== ' | | | ishidden (node) {///has olddispaly to set if (node.olddisplay) Node.style.display = Node.olddisplay;//not set to element default or element current value else
Node.style.display = getdisplay (node);
})//chained call return this; }, Hide:function () {Array.prototype.forEach.calL (This, function (node) {if (!ishidden (node)) {//jquery uses its cache mechanism to store information, simplify//directly mount under the corresponding DOM Node.olddisplay =
Getdisplay (node);
Node.style.display = ' None ';
}) return this; The function Getdisplay (node) {var display = window.getComputedStyle (node, null). GetPropertyValue (' Display '); if ( display = = = ' None ') {var dom = document.createelement (node.nodename);//INSERT INTO Body document.body.appendChild (DOM);
To get the default value of the element display var display = window.getComputedStyle (DOM, null). GetPropertyValue (' Display ');
Document.body.removeChild (DOM);
return display; function Ishidden (node) {//Ignore elements not append into document this is hidden: $ (' <div>block</div> ') not append return
window.getComputedStyle (node, null). GetPropertyValue (' display ') = = ' None ';
} jQuery.prototype.init.prototype = Jquery.prototype;
window.$ = JQuery;  }) (window);

First, warm up with the hide function. As mentioned in the previous article, jquery handles the nodelist of the acquired array, so on the first step, we use foreach to process each node in the set.

Next, we just need to put the style.display of each node to ' none ' to hide. It's simple, isn't it? (⊙0⊙). Olddisplay and return this first regardless of ╰ (￣▽￣)

Hide:function () {
Array.prototype.forEach.call (this, function (node) {
if (!ishidden (node)) {
// jquery uses its cache mechanism to store information, simplifying
//directly mounting under the corresponding DOM
node.olddisplay = getdisplay (node);
Node.style.display = ' none ';
}
}
return this;

Where the Ishidden is to determine whether the element is hidden: the elements that have been hidden are not necessary to deal with, skip directly

function Ishidden (node) {
//ignore elements that are not append into document this is hidden: $ (' <div>block</div> ') not append
Return window.getComputedStyle (node, null). GetPropertyValue (' display ') = = = ' None ';
}

--------------------------

Next, a little tedious show. Throw a question first to raise a series of questions:

Hide an element only need to be display:none, then show?

Display:block, is that all you got? This will actually show the elements. But what if the original value of the element is Display:inline?

Can you keep the original value in the Hide? Just like the following code:

What if you didn't do the hide before you performed the show? such as the following situation, there is no olddisplay it (⊙0⊙)

<style>
div{display:none;}
</style>

OK, here's the key: Can we get the default value for the element display? For example div default is block,span default is inline.

With the idea, the next question is: How do I get the default value for the element display ?

Hey, you know what? Here need to use a little trick, the general idea is as follows: Create a new tag through nodename, and then get it.

There is a place that can be optimized, and Getdisplay gets to the element display defaults, you can save it using the cache mechanism of jquery (which is actually what jquery does).

function Getdisplay (node) {
var display = window.getComputedStyle (node, null). GetPropertyValue (' Display ');
if (display = = ' None ') {
var dom = document.createelement (node.nodename);
Insert INTO Body
document.body.appendChild (DOM);
To get the default value of the element display
var display = window.getComputedStyle (DOM, null). GetPropertyValue (' Display ');
Document.body.removeChild (DOM);
}
return display;
}

Then, the combination of these two situations:

A olddispaly is set
if (node.olddisplay) node.style.display = Node.olddisplay;
is not set to the element default value or the element current value

Think this is the end? The No,show function is quite complex, and we have to deal with these situations in general:

<style>
#none, #none2 {display:none;}
</style>
<body>
<div id= "div" > Default value is block</div>
<span id= "span" > The default value is inline</span>
<div id= "Div2" style= "Display:inline-block;" > Modified to inline-block</div>
<div id= "None" > Hidden through CSS </div>
<div id= "None2" style= " Display:none "> Hides </div> through CSS and style

In the end, the show function becomes the ghost-like Ψ (╰_╯). The general idea is as follows:

Show:function () {
Array.prototype.forEach.call (this, function (node) {
//if (node.style) continue; Textnode no style
//delete Display:none
var display = node.style.display on style;
if (display = = = ' None ') {
//dispaly is empty, CSS if there is display then the CSS takes effect
//Otherwise the default is in effect
node.style.display = ';
}
The element display value is not a default and needs to be restored to olddisplay:div->display:inline-block
///or detect if display on the CSS is None
if ( node.style.display=== ' ' | | Ishidden (node)) {
//olddispaly is set
if (node.olddisplay) node.style.display = Node.olddisplay;
is not set to the element default or current value
else Node.style.display = getdisplay (node);
}
)

--------------------------

chained calls are similar to this:

$ (' div '). Show (). Hide (). css (' height ', ' 300px '). Toggle ()

It's very simple to implement, just return it at the back of each function

--------------------------

A classmate said: Hello! Is this show,hide wrong? Is the time parameter missing? Use settimeout yourself to realize it ~>_<~+.

The main thing in this section is to let you know that jquery has a lot to think about (lots of dirty work). Instant simplification of the code, still so long.

After writing, I found that there was still one situation in which show was not considered:

div{display:none!important;}
<div> open your own brain hole, how to deal with it (⊙0⊙) </div>