Common JavaScript 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:

[JavaScript]View Plaincopyprint?

2. <span style="Font-family:microsoft Yahei; font-size:12px "> function Animal (name) {
4. this.name = name;
6. }
8. Animal.prototype.getName = function () {
10. Alert (this.name)
12. }
16. function Dog () {};
18. Dog.prototype = New Animal ("Buddy");
20. Dog.prototype.constructor = Dog;
22. var dog = new Dog ();</span>

2. Write out 3 typical applications using this (1) in the HTML element event properties, such as [JavaScript]View Plaincopyprint?

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

(2) Constructors [JavaScript]View Plaincopyprint?

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

(3) [JavaScript]View Plaincopyprint?

1. <span style="Font-family:microsoft Yahei; font-size:12px "><input type=" button "id=" text "value=" click "/>
2. <script type="Text/javascript" >
3. var btn = document.getElementById ("text");
4. Btn.onclick = function () {
5. Alert (this.value); //The This here is a BUTTON element
6. }
7. </script></span>

(4) Use the This keyword in CSS expression expressions [JavaScript]View Plaincopyprint?

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

3. How to deeply clone an object in JavaScript [JavaScript]View Plaincopyprint?

2. <span style="Font-family:microsoft Yahei; font-size:12px ">function Cloneobject (o) {
4. if (!o | | ' object '!== typeof o) {
6. return o;
8. }
10. var c = ' function ' = = = = typeof o.pop?  [] : {};
12. var p, v;
14. For (p in o) {
16. if (O.hasownproperty (p)) {
18. v = o[p];
20. if (v && ' object ' = = = = typeof v) {
22. C[P] = Ext.ux.clone (v);
24. } Else {
26. C[p] = v;
28. }
30. }
32. }
34. return C;
36. };</span>

4. What is Ajax? An interactive model of Ajax? What is the difference between synchronous and asynchronous? How do I troubleshoot cross-domain issues?

Ajax is a browser and server interaction technology that combines 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 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 that corresponds to the XHTML1.0 is now a.
CSS: corresponding to the CSS specification, is 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: Specification of XML DOM, XSLT, XPath, etc.
XMLHttpRequest: Web Applications1.0 Specification (http://whatwg.org/specs/web-apps/current-work/) corresponding to WHATWG

Ajax Interaction Model
Synchronization: The script will stay and wait for the server to send a reply before continuing
Async: Script allows a page to continue its process and handle possible replies

Cross-domain problem simple understanding is because of the limitations of the JS homologous policy, 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 the cross-domain problem is caused by a port or protocol the front end is powerless

(2) on a cross-domain issue, the domain is only identified by the header of the URL and does not attempt to determine whether the same IP address corresponds to the domain or two domains corresponding to an IP
Front-end for cross-domain workarounds:
(1) Document.domain+iframe
(2) Dynamically create a script tag

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

2. <span style="Font-family:microsoft Yahei; font-size:12px "><ul id=" Test ">
4. <Li> This is the first </li>
6. <Li> This is the second </li>
8. <Li> This is the third </li>
10. </ul></span>

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

[JavaScript]View Plaincopyprint?

2. <span style="Font-family:microsoft Yahei; Font-size:12px "> (function A () {
4. var index = 0;
6. var ul = document.getElementById ("test");
8. var obj = {};
10. for (var i = 0, L = ul.childNodes.length; i < L; i++) {
12. if (ul.childnodes[i].nodename.tolowercase () = = "Li") {
14. var li = ul.childnodes[i];
16. Li.onclick = function () {
18. index++;
20. alert (index);
22. }
24. }
26. }
28. }) ();</span>

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:

[JavaScript]View Plaincopyprint?

2. <span style="Font-family:microsoft Yahei; font-size:12px ">function loadscript (URL, callback) {
4. var script = document.createelement ("script")
6. Script.type = "Text/javascript";
8. if (script.readystate) { //ie
10. Script.onreadystatechange = function () {
12. if (script.readystate = = "Loaded" | |
14. Script.readystate = = "complete") {
16. Script.onreadystatechange = null;
18. Callback ();
20. }
22. };
24. } else { //others:firefox, Safari, Chrome, and Opera
26. Script.onload = function () {
28. Callback ();
30. };
32. }
34. script.src = URL;
36. Document.body.appendChild (script);
38. }</span>

7, please design a set of programs to ensure that the page JS loaded completely. [JavaScript]View Plaincopyprint?

2. <span style="Font-family:microsoft Yahei;  font-size:12px ">var n = document.createelement (" script ");
4. N.type = "Text/javascript";
6. Omit part of the code above
8. IE supports script's ReadyStateChange attribute (ie support the ReadyStateChange event for script and CSS nodes)
10. if (ua.ie) {
12. N.onreadystatechange = function () {
14. var rs = this.readystate;
16. if (' loaded ' = = = = = RS | | ' complete ' = = = rs) {  
18. N.onreadystatechange = null;
20. F (ID, url); //callback function
22. }
24. };
26. //Omit part of the code
28. //safari 3.x supports the Load event for script nodes (DOM2)
30. N.addeventlistener (' load ', function () {
32. F (ID, url);
34. });
36. //firefox and Opera support onload (but not dom2 in FF) handlers for
38. //script Nodes Opera, but no FF, support the OnLoad event for link
40. //nodes.
42. } Else {
44. N.onload = function () {
46. F (ID, url);
48. };
50. }</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