Js tips for a week. For more information about js learning, see.
1. Talk about custom events today
We all know about events, but many frameworks have implementation of custom events. I wrote a simple one and shared it with you,
The Code is as follows:
Script
Var cusEvent = function (){
Var cache = {};
Return {
AddEvent: function (type, fn ){
Cache [type]? Cache [type]. push (fn) :( cache [type] = [fn]);
},
RemoveEvent: function (type, fn ){
If (cache [type]) {
If (fn ){
For (var I = 0, ci; ci = cache [type] [I]; I ++ ){
Ci === fn & cache [type]. splice (I, 1 );
}
} Else {
Delete cache [type];
}
}
},
// E can be a custom object or a string
Fire: function (e ){
If (typeof e = 'string '){
E = {type: e}
};
Var t = cache [e. type];
If (t ){
For (var I = 0, ci; ci = t [I]; I ++ ){
// E can have its own target. If not, use this instead.
Ci.call(e.tar get | this, e)
}
}
}
}
}()
// Use
CusEvent. addEvent ('start', function (e) {alert (e. type )})
CusEvent. addEvent ('start', function (e) {alert (e. type + "1 ")})
CusEvent. fire ('start ')
CusEvent. removeEvent ('start ')
Script
2. innerHTML is used by all users. It is very helpful, but it may not work in ie sometimes. For example, if you want to use option in select, it will not work because the select innerHTML is read-only, besides tr, table, and so on, I have written a small method to be compatible with the use of innerHTML in ie. I hope to give you some inspiration.
The Code is as follows:
Untitled
Hello World!
SdfsdfSdfsdf
Script
Var html = function (){
Var p = document. createElement ('P ');
Return document. all? Function (pN, h ){
P. innerHTML =''+ H +'';
For (var I = 0, ci; ci = pN. firstChild;) pN. removeChild (ci)
Debugger;
For (; ci = p. firstChild. firstChild;) pN. appendChild (ci );
}: Function (pN, h ){
PN. innerHTML = h;
}
}()
Script
The principle is that in ie, I use a temporary element p to skip the problem that innerHTML cannot be used. I can write another load point, that is, to judge that the uploaded data is tr, apply the table with the corresponding elements,
This method can also solve the problem that option cannot be added or modified in select.
3.
In js, the global g-add variable is a devil and is definitely not recommended. However, sometimes you may need to write a static variable, which accumulates with the execution of the function, for example
The Code is as follows:
Var a = 1;
Function fn (){
Alert (++ );
}
Fn ()
Fn ()
I want to change with the execution of the function.
This is a good way to write.
The Code is as follows:
Script
Var fn = function (){
Var a = 1;
Return function (){
Alert (++ );
}
}()
Fn ();
Fn ();
Script
As a closure, a can be accessed by internal functions, but it does not generate a global
Of course, if you want to directly modify a, you can also
The Code is as follows:
Script
Var fn = function (){
Var a = 1;
Return function (p ){
A = p = undefined? A + 1: p;
Alert ();
}
}()
Fn ();
Fn (0 );
Script
4.
In the traditional method, el. offsetParent and el. offsetLeft are used for traversal.
But the easy way to follow is getBoundingClientRect.
The Code is as follows:
The Code is as follows:
Untitled
Script
Var offset = function (o ){
Var d = document, m = Math. max, bl = m(d.body.clientLeft,d.doc umentElement. clientLeft), st, sl,
Bt = m(d.body.clientTop,d.doc umentElement. clientTop), B, bb = document. getElementById ('bb ');
Return function (o ){
B = o. getBoundingClientRect ();
St = m(d.body.scrollTop,d.doc umentElement. scrollTop), sl = m(d.body.scrollLeft,d.doc umentElement. scrollLeft );
Bb.style.css Text + = "; top:" + (B. top + st-bt) + 'px; left: '+ (B. left + sl-bl) + "px ";
}
}()
Script
When you click the gray p at the bottom, the red on the top will completely overlap with the gray one.
5.
We have used outerHTML in ie, which is easy to use. In addition to returning html under a certain element, you also want to return the html of this element.
However, this attribute can only be used in ie. other browsers do not have this attribute. What should I do,
Js tips help you solve this problem
The Code is as follows:
Untitled
Sdf
Script
Var html = function (){
Var d = document, p = d. createElement ('P ');
Return function (id ){
Var o = d. getElementById (id );
If (o. outerHTML)
Return o. outerHTML;
Else {
P. innerHTML =''
Var h = '';
P. appendChild (o. cloneNode (true ));
Return p. innerHTML
}
}
}()
Alert (html ('A '))
Alert (html ('bb '))
Script
