您的位置: 首页  >  IT文章  >  Javascript常见技术点 1、javascript面向对象中继承实现 2、写出3个使用this的典型应用 3、JavaScript中如何对一个对象进行深度clone 4、ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题? 5、什么是闭包？下面这个ul，如何点击每一列的时候alert其index? 6、请给出异步加载js方案，不少于两种 7、请设计一套方案，用于确保页面中JS加载完全。 8、js中如何定义class,如何扩展prototype? 9、documen.write和 innerHTML的区别 10、前端开发的优化问题

Javascript常见技术点 1、javascript面向对象中继承实现 2、写出3个使用this的典型应用 3、JavaScript中如何对一个对象进行深度clone 4、ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题? 5、什么是闭包？下面这个ul，如何点击每一列的时候alert其index? 6、请给出异步加载js方案，不少于两种 7、请设计一套方案，用于确保页面中JS加载完全。 8、js中如何定义class,如何扩展prototype? 9、documen.write和 innerHTML的区别 10、前端开发的优化问题

分类: IT文章 • 2023-11-08 17:14:38

javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下： 

[javascript] view plaincopyprint?
 
  1. <span style="font-family:Microsoft YaHei; font-size:12px">  function Animal(name) {  
  2.         this.name = name;  
  3.     }  
  4.     Animal.prototype.getName = function() {  
  5.         alert(this.name)  
  6.     }  
  7.   
  8.     function Dog() {};  
  9.     Dog.prototype = new Animal("Buddy");  
  10.     Dog.prototype.constructor = Dog;  
  11.     var dog = new Dog();</span>  

2、写出3个使用this的典型应用

（1）在html元素事件属性中使用，如 

[javascript] view plaincopyprint?
 
  1. <span style="font-family:Microsoft YaHei; font-size:12px"><input type=”button” onclick=”showInfo(this);” value=”点击一下”/></span>  

（2）构造函数 

[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="点击一下" />  
  2. <script type="text/javascript">  
  3. var btn = document.getElementById("text");  
  4. btn.onclick = function() {  
  5. alert(this.value); //此处的this是按钮元素  
  6. }  
  7. </script></span>  

（4）CSS expression表达式中使用this关键字 

[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="expression(this.parentNode.width);">div element</div>  
  5.     </td>  
  6.   </tr>  
  7. </table></span>  

3、JavaScript中如何对一个对象进行深度clone

[javascript] view plaincopyprint?
 
  1. <span style="font-family:Microsoft YaHei; font-size:12px">function cloneObject(o) {  
  2.     if (!o || 'object' !== typeof o) {  
  3.         return o;  
  4.     }  
  5.     var c = 'function' === typeof o.pop ? [] : {};  
  6.     var p, v;  
  7.     for (p in o) {  
  8.         if (o.hasOwnProperty(p)) {  
  9.             v = o[p];  
  10.             if (v && 'object' === typeof v) {  
  11.                 c[p] = Ext.ux.clone(v);  
  12.             } else {  
  13.                 c[p] = v;  
  14.             }  
  15.         }  
  16.     }  
  17.     return c;  
  18. };</span>  

4、ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

Ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术： 
XHTML：对应W3C的XHTML规范，目前是XHTML1.0。 
CSS：对应W3C的CSS规范，目前是CSS2.0 
DOM：这里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中 
JavaScript：对应于ECMA的ECMAScript规范 
XML：对应W3C的XML DOM、XSLT、XPath等等规范 
XMLHttpRequest：对应WhatWG的Web Applications1.0规范（http://whatwg.org/specs/web-apps/current-work/） 

AJAX交互模型 
同步：脚本会停留并等待服务器发送回复然后再继续 
异步：脚本允许页面继续其进程并处理可能的回复 

跨域问题简单的理解就是因为JS同源策略的限制，a.com域名下的JS无法操作b.com或c.a.com下的对象，具体场景如下： 
PS：（1）如果是端口或者协议造成的跨域问题前端是无能为力的 

(2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP 
前端对于跨域的解决办法： 
(1) document.domain+iframe 
(2) 动态创建script标签 

5、什么是闭包？下面这个ul，如何点击每一列的时候alert其index?

[html] view plaincopyprint?
 
  1. <span style="font-family:Microsoft YaHei; font-size:12px"><ul id=”test”>  
  2. <li>这是第一条</li>  
  3. <li>这是第二条</li>  
  4. <li>这是第三条</li>  
  5. </ul></span>  


内部函数被定义它的函数的外部区域调用的时候就产生了闭包。 

[javascript] view plaincopyprint?
 
  1. <span style="font-family:Microsoft YaHei; font-size:12px">(function A() {  
  2.    var index = 0;  
  3.    var ul = document.getElementById("test");  
  4.    var obj = {};  
  5.    for (var i = 0, l = ul.childNodes.length; i < l; i++) {  
  6.       if (ul.childNodes[i].nodeName.toLowerCase() == "li") {  
  7.          var li = ul.childNodes[i];  
  8.          li.onclick = function() {  
  9.             index++;  
  10.             alert(index);  
  11.          }  
  12.       }  
  13.    }  
  14. })();</span>  

6、请给出异步加载js方案，不少于两种

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。 
异步加载方式： 
(1) defer，只支持IE 
(2) async： 
(3) 创建script，插入到DOM中，加载完毕后callBack，见代码： 

[javascript] view plaincopyprint?
 
  1. <span style="font-family:Microsoft YaHei; font-size:12px">function loadScript(url, callback) {  
  2.     var script = document.createElement("script")  
  3.     script.type = "text/javascript";  
  4.     if (script.readyState) { //IE  
  5.         script.onreadystatechange = function() {  
  6.             if (script.readyState == "loaded" ||  
  7.                 script.readyState == "complete") {  
  8.                 script.onreadystatechange = null;  
  9.                 callback();  
  10.             }  
  11.         };  
  12.     } else { //Others: Firefox, Safari, Chrome, and Opera  
  13.         script.onload = function() {  
  14.             callback();  
  15.         };  
  16.     }  
  17.     script.src = url;  
  18.     document.body.appendChild(script);  
  19. }</span>  

7、请设计一套方案，用于确保页面中JS加载完全。

[javascript] view plaincopyprint?
 
  1. <span style="font-family:Microsoft YaHei; font-size:12px">var n = document.createElement("script");  
  2. n.type = "text/javascript";  
  3. //以上省略部分代码  
  4. //ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes)  
  5. if (ua.ie) {  
  6.     n.onreadystatechange = function() {  
  7.         var rs = this.readyState;  
  8.         if ('loaded' === rs || 'complete' === rs) {  
  9.             n.onreadystatechange = null;  
  10.             f(id, url); //回调函数  
  11.         }  
  12.     };  
  13.     //省略部分代码  
  14.     //safari 3.x supports the load event for script nodes(DOM2)  
  15.     n.addEventListener('load', function() {  
  16.         f(id, url);  
  17.     });  
  18.     //firefox and opera support onload(but not dom2 in ff) handlers for  
  19.     //script nodes. opera, but no ff, support the onload event for link  
  20.     //nodes.  
  21. } else {  
  22.     n.onload = function() {  
  23.         f(id, url);  
  24.     };  
  25. }</span>  

8、js中如何定义class,如何扩展prototype?

Ele.className = “***”; //***在css中定义，形式如下：.*** {…} 
A.prototype.B = C; 
A是某个构造函数的名字 
B是这个构造函数的属性 
C是想要定义的属性的值 

9、documen.write和 innerHTML的区别

document.write只能重绘整个页面 
innerHTML可以重绘页面的一部分 

10、前端开发的优化问题

（1） 减少http请求次数：css spirit,data uri 
（2） JS，CSS源码压缩 
（3） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 
（4） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能 
（5） 用setTimeout来避免页面失去响应 
（6） 用hash-table来优化查找 
（7） 当需要设置的样式很多时设置className而不是直接操作style 
（8） 少用全局变量 
（9） 缓存DOM节点查找的结果 
（10） 避免使用CSS Expression 
（11） 图片预载 
（12） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢 

相关推荐