共计 3419 个字符，预计需要花费 9 分钟才能阅读完成。
常说的 JS（浏览器执行的 JS）包含两部分
JS 基础知识（ECMA 262 标准）
JS-Web-API（W3C 标准）
JS-Web-API 的内容包括
DOMBOM 事件绑定 ajax 请求（包括 http 协议）存储
W3C 标准没有规定任何 JS 基础相关的东西。W3C 不管变量类型、原型、作用域和异步，只管定义于浏览器中 JS 操作页面的 API 和全局变量。
DOM
DOM(Document Object Model) 文档对象模型 DOM 可以理解为：浏览器把拿到的 html 代码，结构化成浏览器能识别并且 JS 可操作的一个模型
DOM 是哪种基本的数据结构？
树
DOM 操作的常用 API 有哪些？
获取节点，以及节点的 property 和 attribute 获取父节点，获取子节点新增节点，移动节点，删除节点
DOM 节点的 attribute 和 property 有何区别？
attribute 是对 html 标签属性的操作 property 是对 js 对象属性的操作
BOM
BOM(Browser Object Model) 浏览器对象模型
如何检测浏览器的类型？
// navigator
var ua = navigator.userAgent;
var isChrome = ua.indexOf(‘Chrome’);
console.log(isChrome);
如何拆解 url 的各部分？
// location
console.log(location.href); // 整个地址
console.log(location.protocol); // 协议 ‘http:’ ‘https:’
console.log(location.host); // 域名 ‘172.24.1.99’
console.log(location.pathname); // path ‘/home/subject’
console.log(location.search); // ‘?uid=99’
console.log(location.hash); // ‘#mid=100’
如何获取当前设备的屏幕分辨率？
// screen
console.log(screen.width);
console.log(screen.height);
浏览器的后退和前进功能？
// history
history.back(); // 后退
history.forward(); // 前进
事件绑定
事件冒泡的过程？
事件冒泡是指，触发内层的事件之后，事件会按照 DOM 的树形结构像水泡一样不断的向上触发直至顶端。
示例：
<div id=”div1″>
<p id=”p1″> 激活 </p>
<p id=”p2″> 取消 </p>
<p id=”p3″> 取消 </p>
<p id=”p4″> 取消 </p>
</div>
<div id=”div2″>
<p id=”p5″> 取消 </p>
<p id=”p6″> 取消 </p>
</div>
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn);
}
// 冒泡的应用
var p1 = document.getElementById(‘p1’);
var body = document.body;
bindEvent(p1, ‘click’, function (e) {
e.stopPropagation();
alert(‘ 激活 ’);
});
bindEvent(body, ‘click’, function (e) {
alert(‘ 取消 ’);
});
对于一个无限下拉加载图片的页面，如何给每个图片绑定事件？
<div id=”div3″>
<a href=”#”>a1</a>
<a href=”#”>a2</a>
<a href=”#”>a3</a>
<!– 会随时新增更多 a 标签 –>
</div>
// 使用代理
var div3 = document.getElementById(‘div3’);
div3.addEventListener(‘click’, function (e) {
var target = e.target;
if (target.nodeName === ‘A’) {
alert(target.innerHTML);
}
});
一个通用的事件监听函数（通用事件绑定）
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector;
selector = null;
}
elem.addEventListener(type, function (e) {
var target;
if (selector) {
target = e.target;
if (target.matches(selector)) {
fn.call(target, e);
}
} else {
fn(e);
}
});
}
// 使用代理
var div1 = document.getElementById(‘div1’);
bindEvent(div1, ‘click’, ‘a’, function (e){
console.log(this.innerHTML);
});
// 不使用代理
var a1 = document.getElementById(‘a1’);
bindEvent(a1, ‘click’, function (e){
console.log(a1.innerHTML);
});
ajax
手动编写一个 ajax，不依赖第三方库
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘http://api.douban.com/v2/movie/top250’, false); // false => 异步
xhr.onreadystatechange = function () {
// 这里的函数异步执行
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
}
};
xhr.send(null);
状态码说明
readyState0 – (未初始化) 还没有调用 send() 方法 1 – ( 载入) 已调用 send() 方法，正在发送请求 2 – ( 载入完成) send() 方法执行完成，已经接收到全部响应内容 3 – ( 交互) 正在解析响应内容 4 – (完成) 响应内容解析完成，可以在客户端调用了
status http 状态码 2xx – 表示成功处理请求。如 2003xx – 需要重定向，浏览器直接跳转 4xx – 客户端请求错误，如 4045xx – 服务端错误
跨域
什么是跨域？
浏览器有同源策略，不允许 ajax 访问其他域的接口跨域条件：协议、域名、端口，有一个不同就算跨域
跨域的几种实现方式？
前端：JSONP，vue proxyTable 设置代理服务器端：设置 http header
JSONP 简单示例
<script>
window.callback = function (data) {
// 这是我们跨域得到的信息
console.log(data);
}
</script>
<script src=”http://www.yourname.com/api.js”></script>
<!– 以上将返回 callback({x:100.y:200})–>
<!– 模拟调用了 js 的 callback 方法 –>
可以跨域的标签？
<img> 用于打点统计，统计网站可能是其他域 <link> <script> 可以使用 CDN，CDN 的也是其他域 <script> 可以用于 JSONP
跨域注意事项：所有的跨域请求都必须经过信息提供方允许。如果未经允许即可获取，那是浏览器同源策略出现了漏洞。
存储
描述 cookie,sessionStorage,localStorage 的区别？
1. 容量不同 2. 是否会携带到 ajax 中 3.API 的易用性
cookie
本身用于客户端和服务端通信但是它有本地存储的功能，于是就被“借用”使用 document.cookie = … 获取和修改即可
cookie 用于存储的缺点
存储量太小，只有 4KB 所有 http 请求都带着，会影响获取资源的效率 API 过于简单，需要封装才能用 document.cookie = …
sessionStorage，localStorage
HTML5 专门为存储而设计，最大容量 5MAPI 简单易用 sessionStorage.setItem(key, value);sessionStorage.getItem(key);sessionStorage：浏览器关闭清空数据 localStorage：只要不手动清空，就一直在
