面试问题总结

HTML5兼容性问题

为了使HTML5兼容IE8及更早的IE版本浏览器，加入一段注释，读取html5shiv来解决兼容性问题。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

HTML5新特性

绘画 canvas;

用于媒介回放的 video 和 audio 元素;

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

语义化更好的内容元素，比如 article、footer、header、nav、section;

表单控件，calendar、date、time、email、url、search;

新的技术，Web Worker, Web Socket

Canvas

moveTo(x,y)：起点，(x, y)为指定点

lineTo(x,y)：从上一个指定点画到另一个点，指定点变成这个点

closePath()：从上一个指定点画回到起点

stroke()：真正画的动作（必须有它）

fillStyle：填充颜色

fillRect(x, y, width, height)：矩形填充方式，x y为填充的矩形的左上角坐标，后两个参数为填充的矩形的大小

HTML5拖放

1. 首先为了使元素可拖动，把draggable属性设置为true

<img id="drag1" src="img_logo.gif" draggable="true">

2. 然后规定当元素被拖动时发生的动作：ondragstart事件

ev.dataTransfer.setData()方法设置被拖动元素的数据类型和值（这里把它的id存到Text中）

var item = document.getElementById("drag1");
item.ondragstart = function(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

3. 接收的元素设置允许放置：ondragover事件

receiver.ondragover = function(ev)
{
ev.preventDefault();
}

4. 进行放置：ondrop事件

receiver.ondrop = function(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

调用ev.preventDefault来避免浏览器对数据的默认处理（ondrop事件默认是以链接形式打开）

通过ev.dataTransfer.getData(“Text”)重新拿回之前设置的值，即前边item的id

将被拖元素追加到接收元素中（receiver）

模块化

(function(){
var Widget = function(){....};

// AMD && CMD
if(typeof define === 'function'){
define(function(){
return Widget;
});
// CommonJS
}else if(typeof module !== "undefined" && module !== null){
module.exports = Widget;
// window
}else{
window.Widget = Widget;
}
})();

作者：Treri
链接：https://www.zhihu.com/question/23321329/answer/24199265
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

CommonJs

CommonJs 是服务器端模块的规范，Node.js采用了这个规范。

CommonJS中的require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。但在浏览器端，加载 JavaScript 最佳、最容易的方式是在 document 中插入<script> 标签。但脚本标签天生异步，传统 CommonJS 模块在浏览器环境中无法正常加载。

像Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。

参考

AMD

异步模块定义规范（Asynchronous Module Definition）制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）。

AMD推崇依赖前置，换句话说，在解析和执行当前模块之前，模块作者必须指明当前模块所依赖的模块。

define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// ...
b.doSomething()
// ...
});

代表：requireJS

参考：AMD规范

CMD

CMD（Common Module Definition）可以说是AMD的一种变体。它和AMD的主要区别是CMD推崇依赖就近（按需加载），可以把依赖写进你的代码中的任意一行。

define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
var b = require('./b')
b.doSomething()
})

代码在运行时，首先是不知道依赖的，需要遍历所有的require关键字，找出后面的依赖。具体做法是将function toString后，用正则匹配出require关键字后面的依赖。显然，这是一种牺牲性能来换取更多开发便利的方法。

参考：CMD规范 AMD和CMD的区别

CSS3

圆角：boader-radius

盒阴影：box-shadow

边界图片：boarder-image

背景图像大小：background-size

背景图像定位：background-image

线性渐变：linear-gradient 默认从上到下，0deg指从下到上，rgba(255,0,0,0)的最后一个0代表透明度，另外可以在颜色后面加上百分数代表渐变结点位置。

径向渐变：radial-gradient

变换：transform

transform: translate(50px, 100px) ：右移50px，下移100px

transform: rotate(30deg)：顺时针旋转30度

transform: scale(2, 4)：宽变为2倍，高变为4倍

过渡：transition: property, duration, timing, delay 属性，持续时间（不可省），快进慢出之类（可省），延迟（可省）

动画：

@keyframes：定义动画的名字、from和to

animation：哪个动画（上面定义的名字），持续时间

盒模型：

box-sizing: border-box：使宽高包括内边距和边框

box-sizing: content-box：默认值

圣杯布局和双飞翼布局

原生Ajax

1. 创建XHR对象

var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2. 向服务器发送请求

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

open的第三个参数：true——异步，false——同步

3. 服务器响应

onreadystatechange 事件：当 readyState 属性改变时，就会触发该事件

xmlhttp.readyState：XMLHttpRequest 的状态，从0到4发生变化（4代表全部数据接收完成）

xmlhttp.status：响应的HTTP状态（200表示成功）

xmlhttp.responseText：响应返回的文本

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}

4. 取消请求：xmlhttp.abort()

跨域

性能优化