前端面试汇总-20170512
2017-05-22 22:46
232 查看
1.Table在各个浏览器呈现有哪些兼容问题？
1）如果td的值为空，IE8以下的浏览器会出现边框丢失的状况；可设置单元格内容为空白“ ”，也可设置样式border-collpase:collapse解决。
2）table宽度为100%，在IE8以上以及FF、Chrome浏览器都正常工作，但IE6、IE7，表格始终会出现水平滚动条。
2.用五种方式呈现一个三角形？
3.CSS权重
从CSS代码存放位置看权重优先级：内联样式>内部样式表>外联样式表。其实这个基本可以忽略，大部分情况下CSS代码都是使用外联样式表。
从样式选择器看权重优先级：important>内联样式>ID>类>标签|伪类|属性选择>伪对象>继承>通配符。
important的权重为1000;
ID的权重为100;
类的权重为10;
标签的权重为1;
伪类的权重为10;
属性的权重为10;
伪对象的权重为1;
通配符的权重为0;
如果两个权重都一样，那么现实后面的样式。实例如下：
4.列举10个块元素
html5结构化元素：header、nav、article、section、aside、footer。
常用块元素：div。
列表元素：ul、ol、li。
表格：table。
5.列举JS10个保留关键字
Javascript的保留关键字不可以用作变量、标签、或者函数名。有些保留关键字是作为javascript以后扩展使用。例如：
case、catch、while、char、class、else、enum、eval、import、package、private、public、return等。
6.JQuery拷贝方法
Jquery提供了jQuery.extend函数由于拷贝对象，函数定义如下：
参数说明：
第一个参数deep:可选参数。如果第一个参数是为布尔类型的值，那么表示使用深(true)或者浅(false)拷贝。
第二个参数target:拷贝目标，其他对象的属性都会拷贝到这个目标对象上。
第三个参数object1一直到objectN：是拷贝的对象。把object1..objectN的对象全都拷贝到第一个对象中。
jQuery还提供了jQuery.fn.extend函数，这个函数用来扩展jQuery对象的函数。
7.JQuery事件委托
请查阅资料：http://www.cnblogs.com/w-wanglei/p/5662067.html
8.JS继承实现方式
假设现在有一个Person类型对象，现在我需要新增一个Student类型作为它的子类。并且Student需要重写Person的sayHello函数以及新增sayGoodBye函数。Person对象定义如下：
下面开始实现Student子类。
第一步，创建Student构造函数
代码的第一行，首先调用了执行Person.call并且上下文执行Student的this。这样，我们就可以把Person构造函数中的所有属性以及函数继承到Student子类。
第二步，重定向Student的原型，让其指向Person类的原型的一个实例化对象。
第三步，设置原型链的constructor指向Student。
由于原型链，以一层一层有继承关系的，我们不能破坏原型链，所有必须把Student原型的构造函数指向Student。当我们再创建Student的子类时才不会有异常。
9.CMD和AMD区别
首先CMD和AMD都是由CommonJS延伸而来。CommonJS是跟着node出现而出现的。是一个模块化解决方案，Node.js用于服务器编程，加载的模块文件一般都存在本地硬盘上，不用考虑异步加载问题，CommonjS加载模块是同步的。但浏览器不同于Node环境，需要考虑阻塞问题。基于以上，前端模块化迎来两种方案：AMD、CMD。
对于AMD与CMD规范，二者最大的区别在于依赖模块的执行时期，CMD规范中明确要求延迟执行（Execution must be lazy）。
AMD中deifne如下定义：
define(id?, dependencies?, factory)
id:String类型，执行模块定义时的id，可选。如果省略，模块id默认使用加载器请求的响应脚本的模块id。
dependencies:模块定义要求的依赖项的模块id的数组字面量。这些依赖项必须在factory方法执行前被解析，解析值应当被参数传递给factory函数。
factory: 是一个呗用来执行模块初始化的参数或者一个对象。如果factory是函数，它应当值能用来执行一次。如果factory是一个对象，用作模块的输出值。
一个模块使define函数来定义
1.define函数只接受一个模块工厂作为参数。
2.factory必须是一个函数或者其他有效值。
3.如果factory是一个函数，如果指定参数的话，前三个参数必须是require、exports、module。
4.如果factory不是一个函数，那么模块的exports属性被设置为那个有效对象。
需要提一下的是二者对待依赖模块的额加载都是一致的，在factory执行时，依赖模块都已被加载。从代码上看，AMD中的BEGIN处a、b的factory都是执行过的；而CMD中虽然a、b模块在BEGIN处已被加载，但尚未之心，需要调用require执行依赖模块。这就是CMD中着重强调的延迟执行。如果这个例子不明显，看下面的例子：
AMD：
CMD:
1）如果td的值为空，IE8以下的浏览器会出现边框丢失的状况；可设置单元格内容为空白“ ”，也可设置样式border-collpase:collapse解决。
2）table宽度为100%，在IE8以上以及FF、Chrome浏览器都正常工作，但IE6、IE7，表格始终会出现水平滚动条。
2.用五种方式呈现一个三角形？
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.triangle-1{
width: 0;
height: 0;
border-left: 30px solid #0f0;
border-right: 30px solid #00f;
border-bottom: 30px solid #f00;
}
</style>
</head>
<body>
<p>第一种方式:使用canvas绘制</p>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(250, 25);
ctx.lineTo(200, 200);
ctx.lineTo(300, 300);
ctx.closePath();
//空心三角形
ctx.strokeStyle = "red";
ctx.stroke();
//实心三角形
ctx.beginPath();
ctx.moveTo(350, 50);
ctx.lineTo(300, 200);
ctx.lineTo(400, 300);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
</script>
<p>第二种方式：使用border样式</p>
<div class="triangle-1"></div>
<p>第三种方式：编码图片</p>
<p>第四种方式：使用字体</p>
<p>第五种方式：CSS 旋转正方形</p>
<p>第六种方式：使用SVG</p>
</body>
</html>3.CSS权重
从CSS代码存放位置看权重优先级：内联样式>内部样式表>外联样式表。其实这个基本可以忽略，大部分情况下CSS代码都是使用外联样式表。
从样式选择器看权重优先级：important>内联样式>ID>类>标签|伪类|属性选择>伪对象>继承>通配符。
important的权重为1000;
ID的权重为100;
类的权重为10;
标签的权重为1;
伪类的权重为10;
属性的权重为10;
伪对象的权重为1;
通配符的权重为0;
如果两个权重都一样，那么现实后面的样式。实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#left {
color: black !important; /* 1000 + 100 = 1100*/
}
#container #left{
color: red; /* 100 + 100 = 200 */
}
#left{
color: green !important; /* 1000 + 100 = 1100 */
}
.container #left{
color: blue; /* 10 + 100 = 110 */
}
</style>
</head>
<body>
<div class="container" id="container">
<span id="left">这到底显示什么颜色。答案为：绿色</span>
</div>
</body>
</html>4.列举10个块元素
html5结构化元素：header、nav、article、section、aside、footer。
常用块元素：div。
列表元素：ul、ol、li。
表格：table。
5.列举JS10个保留关键字
Javascript的保留关键字不可以用作变量、标签、或者函数名。有些保留关键字是作为javascript以后扩展使用。例如：
case、catch、while、char、class、else、enum、eval、import、package、private、public、return等。
6.JQuery拷贝方法
Jquery提供了jQuery.extend函数由于拷贝对象，函数定义如下：
jQuery.extend([deep], target, object1, [objectN])
参数说明：
第一个参数deep:可选参数。如果第一个参数是为布尔类型的值，那么表示使用深(true)或者浅(false)拷贝。
第二个参数target:拷贝目标，其他对象的属性都会拷贝到这个目标对象上。
第三个参数object1一直到objectN：是拷贝的对象。把object1..objectN的对象全都拷贝到第一个对象中。
jQuery还提供了jQuery.fn.extend函数，这个函数用来扩展jQuery对象的函数。
7.JQuery事件委托
请查阅资料：http://www.cnblogs.com/w-wanglei/p/5662067.html
8.JS继承实现方式
假设现在有一个Person类型对象，现在我需要新增一个Student类型作为它的子类。并且Student需要重写Person的sayHello函数以及新增sayGoodBye函数。Person对象定义如下：
// 定义Person构造函数
var Person = function(firstName) {
this.firstName = firstName;
};
// 在Person.prototype原型上增加了walk和sayHello方法
Person.prototype.walk = function(){
console.log("I am walking!");
};
Person.prototype.sayHello = function(){
console.log("Hello, I'm " + this.firstName);
};下面开始实现Student子类。
第一步，创建Student构造函数
// 定义Student构造函数
function Student(firstName, subject) {
//调用父类构造函数，确保this是Student当前上下文。
Person.call(this, firstName);
// 初始化属性
this.subject = subject;
}代码的第一行，首先调用了执行Person.call并且上下文执行Student的this。这样，我们就可以把Person构造函数中的所有属性以及函数继承到Student子类。
第二步，重定向Student的原型，让其指向Person类的原型的一个实例化对象。
//创建一个Student的原型链指向Person的原型链。需要注意的是这里我们不能使用new Person()作为值， //而应该通过Object.create(Person.prototype)来指向。 Student.prototype = Object.create(Person.prototype); // See note below
第三步，设置原型链的constructor指向Student。
//设置原型链的"constructor"属性指向Student Student.prototype.constructor = Student;
由于原型链，以一层一层有继承关系的，我们不能破坏原型链，所有必须把Student原型的构造函数指向Student。当我们再创建Student的子类时才不会有异常。
9.CMD和AMD区别
首先CMD和AMD都是由CommonJS延伸而来。CommonJS是跟着node出现而出现的。是一个模块化解决方案，Node.js用于服务器编程，加载的模块文件一般都存在本地硬盘上，不用考虑异步加载问题，CommonjS加载模块是同步的。但浏览器不同于Node环境，需要考虑阻塞问题。基于以上，前端模块化迎来两种方案：AMD、CMD。
对于AMD与CMD规范，二者最大的区别在于依赖模块的执行时期，CMD规范中明确要求延迟执行（Execution must be lazy）。
AMD中deifne如下定义：
define(id?, dependencies?, factory)
id:String类型，执行模块定义时的id，可选。如果省略，模块id默认使用加载器请求的响应脚本的模块id。
dependencies:模块定义要求的依赖项的模块id的数组字面量。这些依赖项必须在factory方法执行前被解析，解析值应当被参数传递给factory函数。
factory: 是一个呗用来执行模块初始化的参数或者一个对象。如果factory是函数，它应当值能用来执行一次。如果factory是一个对象，用作模块的输出值。
define(["./a", "./b"], function(a, b) {
//BEGIN
a.doSomething();
b.doSomething();
}); CMD中模块如下定义：define(function(require, exports, module){
//这里执行模块的代码
});一个模块使define函数来定义
1.define函数只接受一个模块工厂作为参数。
2.factory必须是一个函数或者其他有效值。
3.如果factory是一个函数，如果指定参数的话，前三个参数必须是require、exports、module。
4.如果factory不是一个函数，那么模块的exports属性被设置为那个有效对象。
define(function(require, exports, module) {
//BEGIN
require("./a").doSomething();
require("./b").doSomething();
});需要提一下的是二者对待依赖模块的额加载都是一致的，在factory执行时，依赖模块都已被加载。从代码上看，AMD中的BEGIN处a、b的factory都是执行过的；而CMD中虽然a、b模块在BEGIN处已被加载，但尚未之心，需要调用require执行依赖模块。这就是CMD中着重强调的延迟执行。如果这个例子不明显，看下面的例子：
AMD：
define(["./a", "./b"], function(a, b){
//BEGIN
if(true){
a.doSomething();
}else{
b.doSomething();
}
});CMD:
define(function(require){
//BEGIN
if(some_condition){
require("./a").doSomething();
}else{
require("./b").doSomething();
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端资源系列-教程&模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试资源汇总
- 前端面试内容汇总
- Web前端面试题目汇总
- 汇总HTML5前端面试中常被问到的问题！
- web前端面试题目汇总
- 前端面试问题汇总
- Web前端面试问题汇总
- vue前端框架面试问题汇总
- 前端面试常见问题汇总
- WEB前端面试问题汇总2
- Web前端面试题目汇总
- 2016年Web前端面试题目汇总
- 开放式前端面试问题汇总
- 慕课网：Web前端面试题目及答案汇总
- Web前端面试题目汇总
- 2016年Web前端面试题目汇总
- Web前端面试题目汇总
- 前端知识汇总【面试用】（一）
- Web前端面试题目及答案汇总
- 互联网公司Web前端常见面试题目整理汇总