不常见的技术问题
1.white-space:描述如何处理元素中空格。初始值normal,适用于所有元素,有继承性。
取值为normal | nowrap | pre | pre-wrap | pre-line;
2.考试的时候遇见的
<div>文本</div>
div{
box-sizing:border-box;
width:100px;
padding:10px;
background-color:red;
background-clip:content-box;
}
box-sizing:用来改变css盒模型对于宽高的计算方式,默认值为content-box,适用于所有元素,没有继承性。
取值 content-box | border-box
content-box
默认值,标准盒模型。width和height只包括内容的宽高,不包括padding+border+margin。比如如果设置width:350px;border:10px
solid black;那么在浏览器中渲染的实际宽度为370px。
border-box
width和height包括padding和border,不包括margin。这是IE怪异模式使用的盒模型(在IE5可查看)。
background-clip: 设置元素的背景(背景图片或颜色)是否延伸到边框下面。默认值为border-box,适用于所有元素,没有继承性。
取值 border-box | padding-box | content-box
border-box 背景延伸到边框外沿但是在边框之下。
3.js作用域的题
1.var a=2; //全局变量a=2
var func=(function(){
var a=3;//内部变量3
return function(){//返回函数引用
a++;
alert(a);
}
})();
func();
func();
前两句是赋值语句,全局变量a=2,经立即执行的匿名函数表达式执行后初始化了括号里面那个函数的活动对象AO和作用域链同时确定了this对象,增加了内部变量a=3,返回了一个函数引用。全局变量func指向返回的这个函数的引用(这就是闭包)。第一次执行func(),func指向的内存堆中某个函数对象,经过执行a++,在本函数的作用域中的AO中寻找a变量未果沿着作用域链查找外层作用域的AO,找到a=3,执行a++后a=4,alert(4)。再执行func(),还是执行的是内存堆中的那个函数对象,又一次初始化内存堆中的这个函数的作用域链和AO等,寻找a未果沿着作用域链找外层AO找到a=4,执行a++后a=5,alert(5),完毕!
2.var foo = 1;
function bar() {
foo = 10;
return;
function foo() {}
}
bar();
console.log(foo);//console.log(1);
3.for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
},0);
};此代码无任何效果、输出或存在错误
4.javascript是面向对象的,怎么体现javascript的继承关系?
使用prototype来实现。
5.js中的3种弹出式消息提醒(警告窗口,确认窗口,信息输入窗口)的命令式什么?
alert
confirm
prompt
6. 请写出js内存泄漏的问题。
循环引用:一个DOM对象被多个Javascript对象引用就可能会引发内存泄露
js闭包的应用:
DOM插入顺序:
7.浏览器的对象模型?
window
顶级对象
window.alert(msg)
window.prompt()
window.confirm()
if(window.confirm()){
...
}
window.open()
window.close()
document
document.write()
history
8.JavaScript 中包含以下 7 个全局函数,用于完成一些常用的功能:
escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、parseInt( )、unescape( )。
9.JavaScript的数据类型都有什么?
引用数据类型:Object(Array,Date,RegExp,Function)
那么问题来了,如何判断某变量是否为数组数据类型?
- 方法一.判断其是否具有“数组性质”,如slice()方法。可自己给该变量定义slice方法,故有时会失效
- 方法二.obj instanceof Array 在某些IE版本中不正确
- 方法三.方法一二皆有漏洞,在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性,最好的方法如下:
1
2
3
4
5
6
|
if(typeof Array.isArray==="undefined")
{
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]"
};
}
|
10.Javascript的事件流模型都有什么?
- “事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
- “事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
- “DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡
11.什么是Ajax和JSON,它们的优缺点。
Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。
优点:
- 可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量
- 避免用户不断刷新或者跳转页面,提高用户体验
缺点:
- 对搜索引擎不友好(
- 要实现ajax下的前后退功能成本较大
- 可能造成请求数的增加
- 跨域问题限制
JSON是一种轻量级的数据交换格式,ECMA的一个子集
优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)
12.在元素被设置成浮动之后,他们的block属性还是和原来的一致么?
原来display:inline的元素,浮动后,display值也被设置成block