Common JavaScript Technical points

Today I saw a blog explaining a few JavaScript technical points, feeling very practical.

Original address:JavaScript common technical points

1. JavaScript Object-oriented inheritance implementation

JavaScript's object-oriented inheritance implementations generally use constructors and prototype prototype chains, with the following simple code:

 <span style= "Font-family:microsoft Yahei; font-size:12px" > function   Animal (name) { this . Name =< Span style= "color: #000000;"          > name;  } Animal.prototype.getName  = function   ()                {Alert ( this  .name)}           function   Dog () {};          Dog.prototype  = new  Animal ("Buddy"  = Dog;   var  dog = new  dog ();</span> 

2. Write out 3 Typical applications that use this(1) used in HTML element event properties, such as

<span style= "Font-family:microsoft Yahei; font-size:12px ">
<input type= "button" onclick= "Showinfo (this);" Value= "click"/></span>

(2) constructors

<span style= "Font-family:microsoft Yahei; font-size:12px ">function  Animal (name, color) {     this. Name = name;       this. color = color;  }

(3)

    <span style= "Font-family:microsoft Yahei; font-size:12px "><input type=" button "id=" Text "value=" click "/>      <script type=" Text/javascript ">      var btn = document.getElementById ("text");       function () {      alert (this// Here is the button element       }      </ Script></span>  

(4) Use the This keyword in CSS expression expressions

<span style= "Font-family:microsoft Yahei; font-size:12px "><table width=" 100px "height=" 100px ">    <tr>      <td>      <div style=" Width:expression (this.parentNode.width); " >div element</div>      </td>    </tr>  

3. How to deeply clone an object in JavaScript

<span style= "Font-family:microsoft Yahei; font-size:12px ">functionCloneobject (o) {if(!o | | ' Object '!==typeofo) {returno; }          varc = ' function ' = = = =typeofO.pop? [] : {}; varp, v;  for(pincho) {if(O.hasownproperty (p)) {v=O[p]; if(v && ' object ' = = = =typeofv) {C[p]=Ext.ux.clone (v); } Else{C[p]=v; }              }          }          returnC; };</span>

4. What is AJAX? The interaction model of Ajax? What are the differences between synchronous and asynchronous? How do I troubleshoot cross-domain issues?

ajax is a browser and server interaction technology combined with a variety of technologies, and the basic idea is to allow an Internet browser to make asynchronous HTTP calls to a remote page/service, and to update a current Web page with the received data without having to refresh the entire page. This technology can improve the client experience. Technologies included:  
XHTML: The XHTML specification corresponding to the XHTML1.0.  
CSS: The corresponding CSS specification, currently css2.0 
Dom: The DOM here mainly refers to the HTML Dom,xml DOM included in the following XML  
JavaScript: ECMAScript specification   corresponding to the ECMA;
XML: XML DOM, XSLT, XPath, and so on, which correspond to the  
XMLHttpRequest: The web that corresponds to WHATWG Applications1.0 specification (http://whatwg.org/specs/web-apps/current-work/)  

Ajax interaction Model  
Synchronization: The script pauses and waits for the server to send a reply before continuing  
Async: The script allows the page to continue its process and handle possible replies  

Cross-domain problem simple understanding is because of the JS homologous policy limitations, A.com domain name JS can not operate B.Com or c.a.com under the object, the specific scenario is as follows:  
PS: (1) If it is a port or protocol caused by cross-domain problem front end is powerless  

(2) on cross-domain issues, The domain is only identified by the header of the URL and does not attempt to determine the corresponding domain of the same IP address or whether two domains correspond to a ip 
Front end for cross-domain resolution:  
(1) document.domain+iframe 
(2) dynamically create the script tag  

5. What is a closure? Below this UL, how to click on each column when alert its index?

    <span style= "Font-family:microsoft Yahei; font-size:12px "><ul id=" Test ">      <li> This is the first </li>      <li> This is the second one </li>      < Li> This is section three </li>      </ul></span>  

A closure is generated when an intrinsic function is called by the outer region of the function that defines it.

<span style= "Font-family:microsoft Yahei; Font-size:12px "> (functionA () {varindex = 0; varUL = document.getElementById ("Test")); varobj = {};  for(vari = 0, L = ul.childNodes.length; I < L; i++) {        if(ul.childnodes[i].nodename.tolowercase () = = "Li") {           varLi =Ul.childnodes[i]; Li.onclick=function() {index++;           alert (index); }        }     }  })();</span>

The first time to see this code is skeptical, run it again, sure enough, there is a problem, each click, index is added 1, instead of returning the index value of each column.

6, please give the asynchronous loading JS scheme, not less than two

By default JavaScript is loaded synchronously, that is, JavaScript loading is blocked, after the elements to wait for the JavaScript to be loaded before loading, for some meaning is not very large javascript, if placed in the page header will cause the load is very slow , it can seriously affect the user experience.
Asynchronous Load Mode:
(1) Defer, only IE support
(2) Async:
(3) Create script, insert into DOM, callback after loading, see code:

<span style= "Font-family:microsoft Yahei; font-size:12px ">functionloadscript (URL, callback) {varScript = document.createelement ("Script") Script.type= "Text/javascript"; if(script.readystate) {//IEScript.onreadystatechange =function() {                  if(Script.readystate = = "Loaded" | |script.readystate= = "complete") {Script.onreadystatechange=NULL;                  Callback ();          }              }; } Else{//Others:firefox, Safari, Chrome, and OperaScript.onload =function() {callback ();          }; } script.src=URL;      Document.body.appendChild (script); }</span>

7, please design a set of programs to ensure that the page JS loaded completely.

<span style= "Font-family:microsoft Yahei; font-size:12px ">varn = document.createelement ("Script"); N.type= "Text/javascript"; //omit part of the code above    //IE supports script's ReadyStateChange attribute (ie support the ReadyStateChange event for script and CSS nodes)    if(ua.ie) {N.onreadystatechange=function() {              varrs = This. readyState; if(' loaded ' = = = = RS | | ' complete ' = = =RS) {N.onreadystatechange=NULL; F (ID, url); //callback function            }          }; //omit part of the code        //Safari 3.x supports the Load event for script nodes (DOM2)N.addeventlistener (' Load ',function() {f (id, url);          }); //Firefox and Opera support OnLoad (but not dom2 on FF) handlers for        //script Nodes Opera, but no FF, support the OnLoad event for link        //nodes. }Else{n.onload=function() {f (id, url);      }; }</span>

8. How to define class in JS, how to extend prototype?

Ele.classname = "* * *"; defined in CSS in the following form:. * * * {...}
a.prototype.b = C;
A is the name of a constructor
B is the property of this constructor
C is the value of the property you want to define

9. The difference between Documen.write and innerHTML

Document.Write can only redraw the entire page
innerHTML can redraw part of a page

10. Optimization problem of front-end development

(1) Reduce the number of HTTP requests: CSS Spirit,data URI
(2) Js,css source compression
(3) Front-end template js+ data, reduce the bandwidth wasted due to HTML tags, front-end with variables to save AJAX request results, each operation of local variables, no request, reduce the number of requests
(4) Use innerHTML instead of DOM operation, reduce DOM operation times, optimize JavaScript performance
(5) Use settimeout to avoid page loss response
(6) using hash-table to optimize the search
(7) Set classname instead of directly manipulating style when you need to set a lot of styles
(8) Use less global variables
(9) The result of caching DOM node lookups
(10) Avoid using CSS Expression
(11) Picture Pre-load
(12) Avoid using table,table in the main layout of the page to wait for the content to be fully downloaded before it appears, showing slower than the div+css layout

Common JavaScript Technical points