web前端面试题

摘要

自己整理的面试题,有网上找的,还有自己遇到的,
感觉这些还不错,就整理了。
还有几个没有写答案,自己水平不够
有能力的帮着写下,可能也有错误的,

web前端面试题

自己整理的,又补充了些,自己也不怎么懂

1、Js里的事件的三个阶段

捕获、目标、冒泡

捕获:即事件由页面元素接收,逐级向下,传播到最具体的元素。低版本IE不支持捕获阶段

目标:就是触发事件的元素

冒泡:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面。

2、IE和W3C不同绑定事件解绑事件的方法有什么区别,参数分别是什么,以及事件对象e有什么区别

绑定事件:

W3C:target.addEventListener(event, listener, useCapture);

event —— 事件类型;listener —— 事件触发时执行的函数;useCapture —— 指定事件是否在捕获或冒泡阶段执行,为true时事件句柄在捕获阶段执行,为false(默认false)时,事件句柄在冒泡阶段执行。btn.addEventListener('click',function(){//do something...},false)

事件移除removeEventListener(event,function,capture/bubble);

IE:target.attachEvent(type, listener);

type - 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。 listener —— 实现了 EventListener 接口或者是 JavaScript 中的函数。

btn.attachEvent('onclick',function(){//do something...})

对应的事件移除:detachEvent(event,function);

3、DOM、jQ、NG三者的关系

DOM:查找元素,操作元素

jQ:查找元素,操作元素,底层封装了DOM函数

NG:创建数据,操作数据,底层封装的是jQ

4、事件的委托(代理 Delegated Events)的原理以及优缺点

委托(代理)事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的,

优点是:

(1)可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒

(2)可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适

缺点是:

事件代理的应用常用应该仅限于上述需求下,如果把所有事件都用代理就可能会出现事件误判,即本不应用触发事件的被绑上了事件。

5、GET和POST的区别?何时使用POST?

GET是从服务器上获取数据,POST是向服务器传送数据。get 请求返回 request - URI 所指出的任意信息。
Post 请求用来发送电子邮件、新闻或发送能由交互用户填写的表格。这是唯一需要在请求中发送body的请求。使用Post请求时需要在报文首部 Content - Length 字段中指出body的长度。
get 是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址,用户看不到这个过程。
对于 get 方式,服务器端用Request.QueryString获取变量的值,对于 post 方式,服务器端用Request.Form获取提交的数据。
get 传送的数据量较小,不能大于2KB。post 传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。 用IIS过滤器的只接受get参数,所以一般大型搜索引擎都是用get方式。

get 安全性非常低,post 安全性相对较高。如果这些数据是中文数据而且是非敏感数据,那么使用 get;如果用户输入的数据不是中文字符而且包含敏感数据,那么还是使用 post 为好。

6、闭包原理及应用

闭包:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。通俗的来讲,JavaScript中所有的function都是闭包,不过一般来说,嵌套的function所产生的闭包更为强大,也就是大部分我们所说的“闭包”

闭包的作用:简而言之,闭包的作用就是在函数执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回执行的函数所占用的资源,因为的内部函数b的执行需要依赖a中的变量

闭包的用途:可以读取函数内部的变量,让这些变量的值可以始终保持在内存中

使用闭包的注意点

由于闭包会使得函数中的变量都保存在内存中,内存消耗很大,否则会造成网页性能的问题,在IE中可能会造成内存泄漏,

解决方法:在退出函数前,将不使用的局部变量全部删除,

闭包的应用场景:保护局部变量不被污染

JavaScript的垃圾回收机制:

在JavaScript中,如果一个对象不再被引用,那么这个对象就会被GC回收,如果两个对象相互引用,而不被第三者所引用,那么这两个相互引用的对象也会被回收,。。。。

7、手写function.bind函数:

解释这个函数的作用:

什么场景下需要:

8、手写数组去重/快速排序

数组去重:


var arr=[2,3,4,5,6,3,4,5,6,7,8,3,4,5,6,7,8];
function two(array){
for(var i= 0,array1=[];i<array.length;i++){
for(var r=0;r<array1.length;r++){
if(array1[r]==array[i]){
break;
}
}
if(r==array1.length){
array1.push(array[i]);
}
}
console.log(String(array1));
}
two(arr);

数组快速排序:

window.onload = function(){

var array = [0,1,2,44,4,

324,5,65,6,6,

34,4,5,6,2,

43,5,6,62,43,

5,1,4,51,56,

76,7,7,2,1,

45,4,6,7,8];

//var array = [4,2,5,1,0,3];

array = sorting.shellSort(array);

alert(array);

}

 

var sorting = {

//利用sort方法进行排序


systemSort: function(arr){

return arr.sort(function(a,b){

return a-b;

});

},

 

//冒泡排序


bubbleSort: function(arr){

var len=arr.length, tmp;

for(var i=0;i<len-1;i++){

for(var j=0;j<len-1-i;j++){

if(arr[j]>arr[j+1]){

tmp = arr[j];

arr[j] = arr[j+1];

arr[j+1] = tmp;

}

}

}

return arr;

},

 

//快速排序


quickSort: function(arr){

var low=0, high=arr.length-1;

sort(low,high);

function sort(low, high){

if(low<high){

var mid = (function(low, high){

var tmp = arr[low];

while(low<high){

while(low<high&&arr[high]>=tmp){

high--;

}

arr[low] = arr[high];

while(low<high&&arr[low]<=tmp){

low++;

}

arr[high] = arr[low];

}

arr[low] = tmp;

return low;

})(low, high);

sort(low, mid-1);

sort(mid+1,high);

}

}

return arr;

},

 

//插入排序


insertSort: function(arr){

var len = arr.length;

for(var i=1;i<len;i++){

var tmp = arr[i];

for(var j=i-1;j>=0;j--){

if(tmp<arr[j]){

arr[j+1] = arr[j];

}else{

arr[j+1] = tmp;

break;

}

}

}

return arr;

},

 

//希尔排序


shellSort: function(arr){

console.log(arr);

var h = 1;

while(h<=arr.length/3){

h = h*3+1;  //O(n^(3/2))by Knuth,1973

}

for( ;h>=1;h=Math.floor(h/3)){

for(var k=0;k<h;k++){

for(var i=h+k;i<arr.length;i+=h){

for(var j=i;j>=h&&arr[j]<arr[j-h];j-=h){

var tmp = arr[j];

arr[j] = arr[j-h];

arr[j-h] = tmp;

}

}

}

}

return arr;

}

}

 

9、js的call和apply有什么区别?

JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。
先来看看JS手册中对call的解释:
call 方法
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2,  , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
说明白一点其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。
<input type="text" id="myText"   value="input text">
<script>
function Obj(){this.value="对象!";}
var value="global  变量";
function Fun1(){alert(this.value);}

window.Fun1();   //global 变量
Fun1.call(window);  //global 变量
Fun1.call(document.getElementById('myText'));  //input text
Fun1.call(new Obj());   //对象!
</script>
call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。
运行如下代码:
<script>
var func=new function(){this.a="func"}
var myfunc=function(x){
var a="myfunc";
alert(this.a);
alert(x);
}
myfunc.call(func,"var");
</script>
可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。

对于apply和call两者在作用上是相同的,但两者在参数上有区别的。
对于第一个参数意义都一样,但对第二个参数:
apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])
同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入

10、JSONP原理

利用<script>标签可以跨域,让服务器端返回可执行的Javascript函数,参数为要回发的数据。

11、函数节流

函数节流技术的主要思路是,通过一个定时器,阻断连续重复的函数调用。对于我们自己内部使用的函数,这通常意义不大,也不推荐使用这个技术,它可能会丢失对某些数据的处理。但是对于在用户界面调用的函数,却非常有意义。

12、设计模式

设计者模式分类

总体来说设计模式分为三大类:

创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

行为型模式,共十一种:策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。

设计模式的六大原则

1、单一职责原则

不要存在多于一个导致类变更的原因,也就是说每个类应该实现单一的职责,如若不然,就应该把类拆分。

2、里氏替换原则(Liskov Substitution Principle)

里氏代换原则(Liskov Substitution Principle LSP)面向对象设计的基本原则之一。 里氏代换原则中说,任何基类可以出现的地方,子类一定可以出现。 LSP是继承复用的基石,只有当衍生类可以替换掉基类,软件单位的功能不受到影响时,基类才能真正被复用,而衍生类也能够在基类的基础上增加新的行为。里氏代换原则是对“开-闭”原则的补充。实现“开-闭”原则的关键步骤就是抽象化。而基类与子类的继承关系就是抽象化的具体实现,所以里氏代换原则是对实现抽象化的具体步骤的规范。—— From Baidu 百科

历史替换原则中,子类对父类的方法尽量不要重写和重载。因为父类代表了定义好的结构,通过这个规范的接口与外界交互,子类不应该随便破坏它。

3、依赖倒转原则(Dependence Inversion Principle)

这个是开闭原则的基础,具体内容:面向接口编程,依赖于抽象而不依赖于具体。写代码时用到具体类时,不与具体类交互,而与具体类的上层接口交互。

4、接口隔离原则(Interface Segregation Principle)

这个原则的意思是:每个接口中不存在子类用不到却必须实现的方法,如果不然,就要将接口拆分。使用多个隔离的接口,比使用单个接口(多个接口方法集合到一个的接口)要好。

5、迪米特法则(最少知道原则)(Demeter Principle)

就是说:一个类对自己依赖的类知道的越少越好。也就是说无论被依赖的类多么复杂,都应该将逻辑封装在方法的内部,通过public方法提供给外部。这样当被依赖的类变化时,才能最小的影响该类。

最少知道原则的另一个表达方式是:只与直接的朋友通信。类之间只要有耦合关系,就叫朋友关系。耦合分为依赖、关联、聚合、组合等。我们称出现为成员变量、方法参数、方法返回值中的类为直接朋友。局部变量、临时变量则不是直接的朋友。我们要求陌生的类不要作为局部变量出现在类中。

6、合成复用原则(Composite Reuse Principle)

原则是尽量首先使用合成/聚合的方式,而不是使用继承。


<strong>13、css垂直居中方法</strong>
<ol>
 	<li> 只能是单行文本居中(可适用于所有浏览器):</li>
</ol>
.content{

height:100px;

line-height:100px;

}
<ol start="2">
 	<li>    跟水平居中一样,垂直也可以用定位的方法:</li>
</ol>
.content{

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

}

或者

.content{

position:absolute;

top:50%;

}

定位的方法,它的缺点是当没有足够的空间时,元素会消失。
<ol start="3">
 	<li>对此,浮动也是可以的:</li>
</ol>
.content{

float:left;

height:50%;

margin-bottom:-120px;

}

.footer{

clear:both;

height:240px;

position:relative;

}

对于浮动,我们需要在之后清除,并显示在中间。
<ol start="4">
 	<li>也可以使用vertical-align属性:</li>
</ol>
.content{

display:table-cell;

vertical-align:middle;

}

&nbsp;

<strong>14、如何实现对节点的拖拽效果,会用到哪些方法</strong>

&lt;!DOCTYPE   html &gt;

&lt;html &gt;

&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

&lt;title&gt;无标题文档&lt;/title&gt;

&lt;style type="text/css"&gt;

*{

margin:0; padding:0;

}

#dragDiv{

width:200px;

height:200px;

position:absolute;

top:100px;

left:100px;

background:#ddd;

}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="dragDiv"&gt;&lt;/div&gt;

&lt;script&gt;

var dragDiv=document.getElementById('dragDiv');//找到id为dragDiv的元素

//鼠标按下动作

dragDiv.onmousedown=function(event){

var e=event||window.event,

t=e.target||e.srcElement,

//鼠标按下时的坐标x1,y1

x1=e.clientX,

y1=e.clientY,

//鼠标按下时的左右偏移量

dragLeft=this.offsetLeft,

dragTop=this.offsetTop;

document.onmousemove=function(event){

var e=event||window.event,

t=e.target||e.srcElement,

//鼠标移动时的动态坐标

x2=e.clientX,

y2=e.clientY,

//鼠标移动时的坐标的变化量

x=x2-x1,

y=y2-y1;

dragDiv.style.left=(dragLeft+x)+'px';

dragDiv.style.top=(dragTop+y)+'px';

}

document.onmouseup=function(){

this.onmousemove=null;

}

}

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

15、移动端自适应

       实现移动端自适应的方法

1 在HTML头部增加viewport标签。

在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:

<meta name="viewport" content="width=device-width, initial-scale=1" />

这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog,WordPress相关标签名称只需修改一下即可。
代码如下:
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局宽度使用相对宽度。
网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度,实际上更麻烦。
4、页面使用相对字体
在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用 em = px/16 换算,例如16px就等于1em。

 

16、前段性能优化

1 减少http请求次数

2 减少dns查询次数

3 避免页面跳转

4 缓存Ajax

5 延迟加载

6 减少DOM元素数量

7 根据域名划分内容

8 减少iframe数量

9 避免空的图片的src

10 减少cookie大小

11 将样式表置顶

12 将js脚本放在页面下

13 使用外部js和css文件

14精简js和css

15 优化图片

16 不要在html中缩放图片

 

17、css3有哪些新特性

Css3实现圆角(border-radius),阴影(box-shadow),

对文字加特效(text-shadow),线性渐变(gradient),旋转(transform)

Transform:rotate(9deg)scale(0.98,0.90)translate(0px,-20px)skew(-9deg,0deg)                     旋转         缩放           定位                倾斜

18、为什么要初始化css样式

因为浏览器的兼容性,不同的浏览器对有些标签的默认值不同,如果没有对css初始化往往会出现浏览器之间的页面显示差异

当然,初始化样式会对seo有一定的影响,但是鱼和熊掌不可兼得,但力求影响最小的情况下初始化

19、说说你对语义化的理解

1 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2 有利于seo:和搜索引擎建立良好的沟通,有助于爬虫抓取等多有效信息

3 方便其他设备解析,(如屏幕阅读器,盲人阅读器,移动设备),以意义的方式来渲染页面

4 便于团队开发和维护,语义化更具有可读性,可以减少差异化

20、HTML和XHTML二者的区别

1 所有的标记都必须要有一个相应的结束标签

2 所有标签的元素和属性的名字都必须使用小写

3 所有的XHTML标记都必须合理嵌套

4 所有的属性都必须用引号括起来

5 把所有的<和&特殊符号用编码表示

6 给所有的属性赋一个值

7 不要再注释内容中使用—

8 图片必须有说明文字

21、解释下浮动和他工作的原理,清除浮动的技巧

浮动的元素回脱离文档流,不占页面空间,浮动的元素碰到包含它的边框或者浮动元素的边框停留

清除浮动:

1 使用空标签清除浮动(定义css clear:both)

弊端:增加了无意义的标签

2 使用overflow(定义css属性 overflow:auto;zoom:1;)[zoom用于兼容IE6]

3 使用after伪对象清除浮动(只适用与非IE浏览器)

22、浮动元素引起的问题

1 父元素的高度无法撑开,影响与父元素同级的元素

2 与浮动元素同级的非浮动元素会跟随其后

3 若非第一个元素浮动,则之前的元素也需要浮动,否则会影响页面的显示结构

23、DOM怎么添加、移除、移动、复制、创建和查找节点

1 创建新节点

createDocumentFragment() 创建文档片段

createElement()           创建一个具体的元素

createTextNode()                 创建一个文档节点

2 添加、移除、替换、插入

appendChild()                     添加一个子节点

removeChild()                     移除一个子节点

replaceChild()                      替换一个子节点

insertBefore()                      在已有的子节点前插入一个新的子节点

3 查找

getElementsByTagName()    通过标签名查找

getElementsByName()         通过元素的name属性

getElementByID()           通过元素的ID查找

24、HTML5有哪些新特性,移除了哪些元素,如何处理HTML5新标签的浏览器兼容性?如何区分HTML和HTML5

HTML5已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加

拖拽释放(Drag and drop)API

       语义化更好的内容标签(header nav footer aside article section)

画布(canvas)API

地理(Geolcation)API

本地离线存储localStorage长期存储数据,浏览器关闭数据不丢失,sessionStorage的数据在浏览器关闭后自动删除

表单控件:calender date time email url search

移除的元素

纯变现元素:basefont big center font s strike tt u

对可用性产生负面影响的元素:frame frameset noframes

IE6/IE7/IE8支持通过document,craeteElement方法产生的标签

浏览器支持新的标签后,还需要添加默认的样式

当然最好的方式还是直接使用成熟的框架,使用最多的是html5shim框架

25、你如何对网站的文件和资源进行优化

文件合并

文件最小化,文件压缩

使用CDN托管

缓存的使用(多个域名来提供缓存)

26、说出三种减少页面加载事件的方法

1 优化图片

2 优化css(压缩合并css)

3 图像格式的选择(gif:提供的颜色比较少,可用一些对颜色要求不高的地方)

减少http请求(合并文件,合并图片)

27、json的了解

Json(JavaScript object Notation)是一种轻量级的数据交换格式,它时基于JavaScript的一个子集,数据格式简单,易读写,占用宽带小

28、js延迟加载的方式有哪些

defer和async,动态创建DOM方式,按需异步载入js

29、如何解决跨域问题

       什么是跨域:在一个域下的页面中通过js访问另一个不同域下的数据对象,

动态创建script(因为script标签不受同源策略的限制)

30、什么是同源

URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。
同源策略:
浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。
从一个域上加载的脚本不允许访问另外一个域的文档属性。

31、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

       行内元素:<a> <span> <b> <img> <input>

块级元素:<p> <div> <table> <h1>~<h6>

空元素:<hr> <br>

32、简述一下src与href的区别

src是引入,href是引用

33、HTML5的本地存储有哪些?

1、LocalStorage

  • Cookie
  • Indexed Database API
  • FileSystem API
  • Application Cache

34、一个页面上有大量图片,哪些方式优化图片的加载速度?

把所有的图片组成一张大的图片,然后以背景图片的方式加载。

35、CSS有哪些常见的选择器,他们的优先级是什么样的?

通用选择器 类选择器 伪类选择器 元素选择器

优先级:1 元素选择器

10 (伪)类选择器

  • 选择器

1000行内样式

36、display:none与visibility:hidden有什么区别?

前者隐藏后不会占据页面的的空间;后者隐藏后还会占据页面的空间。

37、typeof与instanceof有什么区别?

typeof运算的返回值是一个字符串,该字符串说明运算数的类型

instanceof运算是判断一个变量是否是一个对象的实例,返回值是布尔类型。

38、Null与undefined有什么区别?

null表示一个空值;undefined表示未声明的变量或者声明的变量未赋值。

39、http常用状态码有哪些?分别表示什么意思

200 服务器成功处理了请求并且提供了请求的页面

203 服务器成功的处理了请求但是没有返回内容

301 请求的网页永久移动到了新的位置

302 请求的网页临时移动到了新的位置

400 服务器不认识请求的语法

403 服务器拒绝请求

404 服务器找不到请求的网页

410 服务器的资源被永久的删除

500 服务器遇到错误,无法完成请求

  • 服务器目前无法使用

40、==与===有什么区别?

==是判断值是否相等

===是判断值是否全等(要求数据类型首先相等)

41、Canvas与svg有什么区别?

svg绘制的是矢量图,可以修改大小但是不会失真。

canvas绘制的是一整张的画布图,不能修改图形的大小,放大以后会失真。

42、简述一下ajax的执行过程?

就是调用浏览器的发送请求的对象 发一个请求到后台  后台的servlet处理完以后 返回前台 前台有一个回调函数 回调函数中有后台返回的响应结果 虽然发送了请求 但是并没有刷新页面 因为他的请求是异步请求调用的

43、如何操作cookie

HttpCookie UserDes = HttpRequest.Cookies["你存储的名称"]; 获取cookies设置
HttpCookie NewCookie = new HttpCookie("你存储的名称");
NewCookie.Value ="你的值"                           HttpContext.Current.Response.AppendCookie(NewCookie);
DateTime dt = DateTime.Now;
TimeSpan ts = new TimeSpan(0, 0, 120, 0, 0);//过期时间为120分钟
NewCookie.Expires = dt.Add(ts);//设置过期时间

44、有几种方法创建JavaScript对象,有几种实现继承的方法?

方法一

var Cat  = {};//JSON
Cat.name="kity";//添加属性并赋值
Cat.age=2;
Cat.sayHello=function(){
alert("hello "+Cat.name+",今年"+Cat["age"]+"岁了");//可以使用“.”的方式访问属性,也可以使用HashMap的方式访问 }
Cat.sayHello();//调用对象的(方法)函数

方法二

var wcDog =new Object();
wcDog.name="旺财";
wcDog.age=3;
wcDog.work=function(){
alert("我是"+wcDog.name+",汪汪汪......");
}

wcDog.work();

继承方法:

1、原型链继承:

var Base = function() { this.level = 1; this.name = "base"; this.toString = function(){ return "base"; }; }; Base.CONSTANT = "constant"; var Sub = function() { }; Sub.prototype = new Base(); Sub.prototype.name = "sub";

优点:从instanceof关键字来看,实例既是父类的实例,又是子类的实例,看起来似乎是最纯粹的继承。

缺点:子类区别于父类的属性和方法,必须在Sub.prototype = new Base();这样的语句之后分别执行,无法被包装到Sub这个构造器里面去。例如:Sub.prototype.name = “sub”;无法实现多重继承。

2、构造继承:

var Base = function() { this.level = 1; this.name = "base"; this.toString = function(){ return "base"; }; }; Base.CONSTANT = "constant"; var Sub = function() { Base.call(this); this.name = "sub"; };

优点:可以实现多重继承,可以把子类特有的属性设置放在构造器内部。

缺点:使用instanceof发现,对象不是父类的实例。

3、实例继承:

var Base = function() { this.level = 1; this.name = "base"; this.toString = function(){ return "base"; }; }; Base.CONSTANT = "constant"; var Sub = function() { var instance = new Base(); instance.name = "sub"; return instance; };

优点:是父类的对象,并且使用new构造对象和不使用new构造对象,都可以获得相同的效果。

缺点:生成的对象实质仅仅是父类的实例,并非子类的对象;不支持多继承。

4、拷贝继承:

var Base = function() { this.level = 1; this.name = "base"; this.toString = function(){ return "base"; }; }; Base.CONSTANT = "constant"; var Sub = function() { var base = new Base(); for(var i in base) Sub.prototype[i] = base[i]; Sub.prototype["name"] = "sub"; };

优点:支持多继承。

缺点:效率较低;无法获取父类不可枚举的方法。

45、聊聊常见布局?

网页常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。

1.“国”字形布局

也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列两小条内容,中间是主要部分,与左右一起罗列到底,最下面

var cpro_psid ="u2572954"; var cpro_pswidth =966; var cpro_psheight =120;

是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

2.“匡”字形布局

这种结构与上一种其实只是形式上的区别,它去掉了“国”字形布局的最右边的部分,给主内容区释放了更多空间。这种布局上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。

3.“三”字形布局

这是一种简洁明快的网页布局,在国外用的比较多,国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分,色块中大多放置广告条与更新和版权提示。如图所示即是一种三字形布局的网页。

4.“川”字形布局

整个页面在垂直方向分为三列,网站的内容按栏目分布在这三列中,最大限度地突出主页的索引功能。

5.海报型布局

这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。

6.Flash布局

这种布局是指整个网页就是一个Flash动画,它本身就是动态的,画面一般比较绚丽、有趣,是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的,不同的是由于Flash强大的功能,页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当,会是一种非常有魅力的布局。

7.标题文本型布局

标题文本型布局是指页面内容以文本为主,这种类型页面最上面往往是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这一类。

8.框架型布局

采用框架布局结构,常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素,这种布局目前专业设计人员采用的已不多,不过在一些大型论坛上还是比较受青睐的,有些企业网站也有应用。

9.变化型布局

即上述几种类型的结合与变化。

46、CSS3动画功能有哪些?JS动画效果的原理是什么?如何手动写动画?

 

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
nimation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3

Js的动画原理是定时器

47、如何理解Dom的事件冒泡机制(可以举例说明)

当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的四件将会在那个与阿奴的所有的祖先元素中被触发,这个过程被称为冒泡,这个事件从原始元素开始一致冒泡到DOM树的最上层

48、在css样式中,关于定位方式position的可选值,请描述static、relative、absolute、fixed的区别

static:默认值,没有定位,元素出现在正常的流中(忽略top、z-index等声明)

relative:定位层总是相对于其最近的父元素,无论其父元素是何种定位方式

absolute:定位层总是相对于其最近的定义为absolute或relative的父层,而这个父层不一定是其直接父层,如果其父层都没有定义absolute或relative,则其相对于body定位

fixed:生成绝对定位的元素,相对于浏览器窗口进行定位

49、导致无样式内容闪烁的原因是?如何避免?

FOUC - Flash Of Unstyled Content 文档样式闪烁

原因有:

1、使用@import方法导入CSS时,例如:

<style type="text/css" media="all">@import "../fouc.css";</style>

此方式由于IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。

2、将样式表链接放在页面不同位置时,在IE5/6下某些页面会无样式显示内容且瞬间闪烁,这现象就是文档样式短暂失效(Flash Of Unstyled Content),即FOUC。

解决方法:避免使用@import方法导入CSS,且将样式表链接都放在head中即可避免此问题。

50、css选择器,给出代码示列

 

选择器 例子 例子描述 CSS
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 <p> 元素。 1
element,element div,p 选择所有 <div> 元素和所有 <p> 元素。 1
element element div p 选择 <div> 元素内部的所有 <p> 元素。 1
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2
[attribute]/td>

[target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个 <p> 元素的首字母。 1
:first-line p:first-line 选择每个 <p> 元素的首行。 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
:before p:before 在每个 <p> 元素的内容之前插入内容。 2
:after p:after 在每个 <p> 元素的内容之后插入内容。 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 2
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 <input> 元素。 3
:disabled input:disabled 选择每个禁用的 <input> 元素 3
:checked input:checked 选择每个被选中的 <input> 元素。 3
:not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
::selection ::selection 选择被用户选取的元素部分。 3

51、em和rem是什么?两者的区别是什么?

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。1em=16px

EM特点

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。

rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

52、请分别写出IE与W3C的CSS的盒子模型

W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

53、分别列出至少四种“可继承样式”与“不可继承样式”

可继承样式font-size , color , font-family , font-weight , text-align , text-indent , line-height

不可继承样式:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi.

54、如何处理IE中浮动元素产生的双倍间距问题?

加上display:inline,使浮动忽略

解释一下block,inline两个元素。

block:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);

inline:和其他元素在同一行上,高度,宽度,行高,边距不可控制(行内元素);
#box{ display:block; //可以为行内元素模拟为块元素 display:inline; //实现同一行排列的的效果

55、如何解决链接点击过后失去hover属性的问题?

CSS文件中关于超链接的四个属性的一般正常顺序为:link,visited,hover,active。

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */

a:active {color: #0000FF} /* 被选择的链接 */

注释:为了产生预期的效果,在CSS定义中,a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后。

56、请写出至少三种jQuery选择器

选择器 实例 选取
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
:header $(":header") 所有标题元素 <h1> - <h6>
:animated 所有动画元素
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子(元素)节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素

57、简述一下你对“优雅降级和渐进增强”的理解

渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

 

 

 

李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:17   其中:访客  9   博主  8

  1. avatar 热腾网 5

    不懂前端的设计,只能修修改改别人的了。

  2. avatar 纯洁 2

    哎哟,这个不错

    • avatar 李东辉博客

      @纯洁 自己整理的。可能有一些不对,还有一些没有写完

  3. avatar 米粒博客 3

    很厉害的说!

  4. avatar 麦谦生博客 0

    谢谢博主的分享,欢迎多多互访

  5. avatar 网站推广运营 0

    太专业 了,了解下

  6. avatar 小钊 0

    有点的感觉

  7. avatar 情天 4

    很专业,只能看个热闹。

  8. avatar 辉煌网 1

    重点新闻 * 以人为本 * 关注民生 欢迎访问 辉煌网→ http://www.hhrq.com/