Web前端开发面试题集锦(附答案)

2014-10-25 08:30:05 · 作者: · 浏览: 51

1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20


var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;


reg.test(“a1a__a1a__a1a__a1a__”);


2,截取字符串abcdefg的efg


var str = “abcdefg”;


if (/efg/.test(str)) {


var efg = str.substr(str.indexOf(“efg”), 3);


alert(efg);


}


3,判断一个字符串中出现次数最多的字符,统计这个次数


//将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数


var str = “abcdefgaddda”;


var obj = {};


for (var i = 0, l = str.length; i < l; i++) {


var key = str[i];


if (!obj[key]) {


obj[key] = 1;


} else {


obj[key]++;


}


}


/*遍历这个hash table,获取value最大的key和value*/


var max = -1;


var max_key = “”;


var key;


for (key in obj) {


if (max < obj[key]) {


max = obj[key];


max_key = key;


}


}


alert(“max:”+max+” max_key:”+max_key);


4,IE与FF脚本兼容性问题


(1) window.event:


表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象


(2) 获取事件源


IE用srcElement获取事件源,而FF用target获取事件源


(3) 添加,去除事件


IE:element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)


FF:element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)


(4) 获取标签的自定义属性


IE:div1.value或div1["value"]


FF:可用div1.getAttribute(“value”)


(5) document.getElementByName()和document.all[name]


IE;document.getElementByName()和document.all[name]均不能获取div元素


FF:可以


(6) input.type的属性


IE:input.type只读


FF:input.type可读写


(7) innerText textContent outerHTML


IE:支持innerText, outerHTML


FF:支持textContent


(8) 是否可用id代替HTML元素


IE:可以用id来代替HTML元素


FF:不可以


这里只列出了常见的,还有不少,更多的介绍可以参看java script在IE浏览器和Firefox浏览器中的差异总结


5,规避java script多人开发函数重名问题


(1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀


(2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就ok


6,java script面向对象中继承实现


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


function Animal(name) {


this.name = name;


}


Animal.prototype.getName = function() {alert(this.name)}


function Dog() {};


Dog.prototype = new Animal(“Buddy”);


Dog.prototype.constructor = Dog;


var dog = new Dog();


7,FF下面实现outerHTML


FF不支持outerHTML,要实现outerHTML还需要特殊处理


思路如下:


在页面中添加一个新的元素A,克隆一份需要获取outerHTML的元素,将这个元素append到新的A中,然后获取A的innerHTML就可以了。


SPANDIV


SPAN


P


8,编写一个方法 求一个字符串的字节长度


假设:


一个英文字符占用一个字节,一个中文字符占用两个字节


function GetBytes(str){


var len = str.length;


var bytes = len;


for(var i=0; i


if (str.charCodeAt(i) > 255) bytes++;


}


return bytes;


}


alert(GetBytes(“你好,as”));


9,编写一个方法 去掉一个数组的重复元素


var arr = [1 ,1 ,2, 3, 3, 2, 1];


Array.prototype.unique = function(){


var ret = [];


var o = {};


var len = this.length;


for (var i=0; i


var v = this[i];


if (!o[v]){


o[v] = 1;


ret.push(v);


}


}


return ret;


};


alert(arr.unique());


10,写出3个使用this的典型应用


(1)在html元素事件属性中使用,如


(2)构造函数


function Animal(name, color) {


this.name = name;


this.color = color;


}


(3)


(4)CSS expression表达式中使用this关键字


div element


12,如何显示/隐藏一个DOM元素


el.style.display = “”;


el.style.display = “none”;


el是要操作的DOM元素


13,java script中如何检测一个变量是一个String类型 请写出函数实现


String类型有两种生成方式:


(1)Var str = “hello world”;


(2)Var str2 = new String(“hello world”);


function IsString(str){


return (typeof str == “string” || str.constructor == String);


}


var str = “”;


alert(IsString(1));


alert(IsString(str));


alert(IsString(new String(str)));


14,网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示”××年还剩××天××时××分××秒”


15,补充代码,鼠标单击Button1后将Button1移动到Button2的后面


16,java script有哪几种数据类型


简单:Number,Boolean,String,Null,Undefined


复合:Object,Array,Function


17,下面css标签在java script中调用应如何拼写,border-left-color,-moz-viewport


borderLeftColor


mozViewport


18,java script中如何对一个对象进行深度clone


function cloneObject(o) {


if(!o || ‘object’ !== typeof o) {


return o;


}


var c = ‘function’ === typeof o.pop [] : {};


var p, v;


for(p in o) {


if(o.hasOwnProperty(p)) {


v = o[p];


if(v && ‘object’ === typeof v) {


c[p] = Ext.ux.clone(v);


}


else {


c[p] = v;


}


}


}


return c;


};


19,如何控制alert中的换行


\n alert(“p\np”);


20,请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性)


SPANDIV


SPAN


P


21,请编写一个java script函数 parseQueryString,它的用途是把URL参数解析为一个对象,如:


var url = “http://witmax.cn/index.php key0=0&key1=1&key2=2″;


function parseQueryString(url){


var params = {};


var arr = url.split(“ ”);


if (arr.length <= 1)


return params;


arr = arr[1].split(“&”);


for(var i=0, l=arr.length; i


var a = arr[i].split(“=”);


params[a[0]] = a[1];


}


return params;


}


var url = “http://witmax.cn/index.php key0=0&key1=1&key2=2″;


var ps = parseQueryString(url);


alert(ps["key1"]);


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


Ajax是多种技术组合起来的一种浏览器和服务器交互技术,基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用,并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术:


XHTML:对应W3C的XHTML规范,目前是XHTML1.0。


CSS:对应W3C的CSS规范,目前是CSS2.0


DOM:这里的DOM主要是指HTML DOM,XML DOM包括在下面的XML中


java script:对应于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标签


23,什么是闭包 下面这个ul,如何点击每一列的时候alert其index


这是第一条


这是第二条


这是第三条


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


(function A() {


var index = 0;


var ul = document.getElementById(“test”);


var obj = {};


for (var i = 0, l = ul.childNodes.length; i < l; i++) {


if (ul.childNodes[i].nodeName.toLowerCase() == “li”) {


var li = ul.childNodes[i];


li.onclick = function() {


index++;


alert(index);


}


}


}


})();


24,请给出异步加载js方案,不少于两种


默认情况java script是同步加载的,也就是java script的加载时阻塞的,后面的元素要等待java script加载完毕后才能进行再加载,对于一些意义不是很大的java script,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。


异步加载方式:


(1) defer,只支持IE


(2) async:


(3) 创建script,插入到DOM中,加载完毕后callBack,见代码:


function loadScript(url, callback){


var script = document.createElement(“script”)


script.type = “text/java script”;


if (script.readyState){ //IE


script.onreadystatechange = function(){


if (script.readyState == “loaded” ||


script.readyState == “complete”){


script.onreadystatechange = null;


callback();


}


};


} else { //Others: Firefox, Safari, Chrome, and Opera


script.onload = function(){


callback();


};


}


script.src = url;


document.body.appendChild(script);


}


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


var n = document.createElement(“script”);


n.type = “text/java script”;


//以上省略部分代码


//ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes)


if(ua.ie){


n.onreadystatechange = function(){


var rs = this.readyState;


if(‘loaded’ === rs || ‘complete’===rs){


n.onreadystatechange = null;


f(id,url); //回调函数


}


};


//省略部分代码


//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 in ff) handlers for


//script nodes. opera, but no ff, support the onload event for link


//nodes.


}else{


n.onload = function(){


f(id,url);


};


}


26,js中如何定义class,如何扩展prototype


Ele.className = “***”; //***在css中定义,形式如下:.*** {…}


A.prototype.B = C;


A是某个构造函数的名字


B是这个构造函数的属性


C是想要定义的属性的值


27,如何添加html元素的事件,有几种方法.


(1) 为HTML元素的事件属性赋值


(2) 在JS中使用ele.on*** = function() {…}


(3) 使用DOM2的添加事件的方法 addEventListener或attachEvent


28,documen.write和 innerHTML的区别


document.write只能重绘整个页面


innerHTML可以重绘页面的一部分


29,多浏览器检测通过什么


(1) navigator.userAgent


(2) 不同浏览器的特性,如addEventListener


30,js的基础对象有那些, window和document的常用的方法和属性列出来


String,Number,Boolean


Window:


方法:setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open


属性:name,parent,screenLeft,screenTop,self,top,status


Document


方法:createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln


属性:cookie,doctype,domain,documentElement,readyState,URL,


31,前端开发的优化问题


(1) 减少http请求次数:css spirit,data uri


(2) JS,CSS源码压缩


(3) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数


(4) 用innerHTML代替DOM操作,减少DOM操作次数,优化java script性能


(5) 用setTimeout来避免页面失去响应


(6) 用hash-table来优化查找


(7) 当需要设置的样式很多时设置className而不是直接操作style


(8) 少用全局变量


(9) 缓存DOM节点查找的结果


(10) 避免使用CSS Expression


(11) 图片预载


(12) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢


32,如何控制网页在网络传输过程中的数据量


启用GZIP压缩


保持良好的编程习惯,避免重复的CSS,java script代码,多余的HTML标签和属性


33,Flash、Ajax各自的优缺点,在使用中如何取舍


Ajax的优势


(1) 可搜索型


(2) 开放性


(3) 费用


(4) 易用性


(5) 易于开发


Flash的优势


(1) 多媒体处理


(2) 兼容性


(3) 矢量图形 比SVG,Canvas优势大很多


(4) 客户端资源调度,比如麦克风,摄像头