First, let's look at a very common event-binding code below:
Copy Code code as follows:
Example
$ (' #dom '). Click (function (e) {
Do something
});
$ (' #dom2 '). Click (function (e) {
Do something
});
This code has some drawbacks in event-binding processing:
Excessive event binding can consume memory
Post-build HTML will have no event bindings and need to be rebind
The grammar is too complicated
Solution
For the 1, 22 point solution, let's first look at the event bindings for jquery
The event bindings for jquery have multiple methods to invoke, with the Click event as an example:
click Method
Bind method
Delegate method
On method
Whether you're using the method in (Click/bind/delegate), and ultimately the jquery, the bottom is calling the on method to complete the final event binding. Therefore, in some ways, in addition to the convenience of writing and the selection of habits, the direct use of the On method to the happy and direct.
For a detailed explanation of the methods and use cases, please visit the jquery website directly, not to be explained here. Api.jquery.com
Performance
First we need to have a clear understanding of the memory footprint gap between the different event binding methods.
The performance analysis will be based on the chrome developer Tools.
Profiles--> Take Heap Snapshot, with this tool we can see the memory occupied by JavaScript and can analyze performance problems.
DEMO HTML
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
$ (' #btn-add '). Click (function () {
$ ('. UL '). Prepend (' <li><a href= "javascript:;" >text</a></li> ');
});
});
</script>
<body>
<button id= "Btn-add" >create element</button>
<ul class= "ul" >
<li><a href= "javascript:;" >text</a></li>
<!--...-->
<li><a href= "javascript:;" >text</a></li>
</ul>
</body>
Method 1
Copy Code code as follows:
$ (function () {
$ ('. UL a '). Click (function (e) {
Alert (' click event ');
});
});
The following is a memory analysis diagram of Method 1
Memory footprint of about 3.4M
Method 2
Copy Code code as follows:
$ (function () {
$ ('. UL '). On (' Click ', ' a ', function (e) {
Alert (' click event ');
});
});
The following is a memory analysis diagram of Method 2
Memory footprint of about 2.0M
Conclusions
Method 1 significantly consumes 1.4M more memory than Method 2
Method 1 cannot bind an event to the new DOM that is added by clicking the button, and Method 2 can.
As long as the delegate object on is the original element of the HTML page, because the event trigger is monitored by the JavaScript event bubbling mechanism, all event monitoring is effective for all child elements, including elements generated later by JS. And because there is no event binding on multiple elements (in this example for 2000+a tags), can effectively save memory loss.
thinking about
Code like poetry, but it's easy to become code like crap. How to improve the elegance of the code is also a very interesting thing.
Here is a very common and common JS file code fragment (for general website)
Copy Code code as follows:
$ (' #btn-add '). Click (function () {
Do something
});
$ ('. Action-box #btn-delete '). Click (function () {
Do something
});
$ ('. Action-box #btn-sort '). MouseEnter (function () {
Do something
});
/**
**more Same Code
*/
It is no exaggeration to say that when a JS file hundreds of lines, similar to the above code, you can hardly find the rules from inside.
1, may a like to write #btn-add, and b like to write. Action-box #btn-add as a selector.
2, piling up a lot of different types of events, there is no order to speak
3, did not apply to what we have just talked about using event bubbling to do event binding
Improved
Let's take a step by step to improve the previous JS code
Version 1
Copy Code code as follows:
$ ('. Action-box '). On (' Click ', ' #btn-add ', function () {
Do something
});
$ ('. Action-box '). On (' Click ', ' #btn-delete ', function () {
Do something
});
Although the use of event bubbling, but the feeling is still a bit cumbersome,. Action-box appear many times, feel uncomfortable, let us continue to improve
Version 2
Copy Code code as follows:
$ ('. Action-box '). On (' Click ', ' #btn-add, #btn-delete ', function () {
if ($ (this). attr (' id ') = = ' Btn-add ') {
Do something
} else{
Do something
}
});
Feel better than just, but still need to determine the elements to make the appropriate treatment, acceptable, but not perfect.
Inspiration
First look at the enhanced version of CSS sass for CSS syntax improvements
Copy Code code as follows:
/*bed CSS code*/
. action-box {width:100%; color: #000;}
#btn-add {Color:blue}
#btn-delete {color:red}
/*good CSS code*/
. action-box {width:100%; color: #000;}
. Action-box #btn-add {color:blue;}
. Action-box #btn-delete {color:red;}
/*sass code*/
. action-box {
width:100%;
Color: #000;
#btn-add {
Color:blue;
}
#btn-delete {
color:red;
}
}
We can see the document structure clearly in good CSS code and SASS Code:. Action-box has two button below.
Does this allow the sass code structure to be used in JS? The answer, of course, is OK.
Copy Code code as follows:
$ ('. Action-box '). Coffee ({
Click: {
' #btn-add ': function () {
Do something
},
This is a method that supports jquery ': Last/[attr]/: eq (0) ' etc.
' #btn-delete ': function () {
Do something
}
},
MouseEnter: {
' #btn-sort ': function () {
Do something
}
}
});
Do you like the structure?
1. Clear and concise document structure
2, the use of event bubbling, effectively reduce memory consumption
3, the first level by the event name to divide
4, the second level of the property name is equivalent to the selector.
Coffee function of the source code
Copy Code code as follows:
$.fn.coffee = function (obj) {
for (var ename in obj)
for (var selector in Obj[ename])
$ (this). On (ename, selector, obj[ename][selector]);
}
Talk a few lines of code, you can make a wonderful grammatical sugar
Enjoy yourself! ^_^
Author: coffeedeveloper
