## js-web-api
#### 回顾js基础知识
1. 变量类型和计算
2. 原型和原型链
3. 闭包和作用域
4. 异步和单线程
5. 其他（日期，Math，各种常用api）
* 特点：表面看来并不能用于工作中开发代码
* 内置函数 Object，Array，Boolean，String..
* 内置对象：Math，JSON
* JS基础知识：**ECMA 262标准**
* JS-WEB-API：**W3C标准**
### W3C标准中关于js的规定
* DOM 操作
* BOM操作
* 事件绑定
* ajax请求（包括http协议）
* 存储
页面弹框是window.alert(123),浏览器需要做：
1. 定义一个window全局变量，对象类型
2. 给它定义一个alert属性，属性值是一个函数
获取元素document.getElementById(id),浏览器需要：
1. 定义一个document全局变量，对象类型
2. 给它定义一个getElementById的属性，属性值是一个函数
因此浏览器依据js基础知识（ECMA标准的语法）上，再依据W3C标准，内置更多的东西，去进行bom,dom，存储等
但是，
* W3C标准没有规定任何JS基础相关的东西
* 不管什么是变量类型、原型、作用域和异步（ECMA规定的）
* W3C只管定义用于浏览器中JS操作页面的API和全局变量
不同浏览器遵循同一套标准，才能一套代码在各个浏览器上运行。
#### 全面考虑，JS内置的全局函数和对象有哪些？
* Object,Array,Boolean,String,Math,JSON等
* 刚刚提到的window document
* 还有更多：所有未定义的全局变量(可以直接用)，如navigator.userAgent#
#### 总结
1. 常说的JS（浏览器执行的js）包含两个部分
* js基础知识（ECMA262标准）
* JS-Web-API(W3C标准)
### DOM操作（Document Object Model文档对象模型）
1. DOM是那种基本的数据结构？
2. DOM操作常用API
3. DOM节点的attr和property有何区别
#### 知识点
1. DOM本质
2. DOM节点操作
3. DOM结构
#### DOM的本质
xml：灵活性很高的可扩展语言,html是特殊的xml（W3C标准）
~~~
<!DOCTYPE html>
<html>
<header>
<meta>
<title></title>
</header>
<body>
</body>
</html>
~~~
结构化（有规则），字符串不是
浏览器拿到html代码，把html代码结构化成js和浏览器可识别的代码（DOM）
DOM：**浏览器将html结构化成浏览器和js可识别的模型**（js能识别和操作dom（获取，操作，识别））
#### DOM节点操作
1. 获取DOM节点
~~~
var div1 = document.getElementById("div1"); //元素
var divList = docunent.getElementsByTagName('div') //(集合)
//divList.length divList[0]
var containerList = document.getElementsByClassName(".container") //集合
var pList = document.querySelectorAll('p'); //集合
~~~
用起来很熟，但不知其原理
2. prototype
js对象的标准属性
~~~
var pList = document.querySelectorAll('p'); //集合
var p = pList[0];
console.log(p.style.width); //获取样式(p.style:对象属性，p本质是一个对象)
p.style.width = "100px";//修改样式
console.log(p.className); //获取class
p.className="p1" //修改class
获取nodeName和nodeType
console.log(p.nodeName); //undefined
console.log(p.nodeType)
类似于
var obj = {x:100,y:10}
console.log(obj.x)
~~~
3. Attribute
data-xx class style src(获取的attribute是html标签上的，并不是js对象上的)
~~~
var pList = document.querySelectorAll('p'); //集合
var p = pList[0];
p.getAttribute("data-name");
p.setAttribute("data-name","xxx");
p.getAttribute("style");
p.setAttribute("style","font-size:300px")
~~~
#### DOM结构（树结构）操作
1. 新增节点
~~~
var div1 =document.getElementById("div1");
//添加节点
var p1 = document.createElement('p');
p1.innerHTML = 'this is p1';
div1.appendChild(p1);//添加创建的元素
//移动已有节点
var p2 = document.getElementById('p2');
div1.appendChild(p2) //注意！！p2只有一个，移动后原来的位置就没有了
~~~
**注意！！p2只有一个，移动后原来的位置就没有了**
2. 获取父节点
~~~
var div1 = document.getElementById("div1");
var parent = div1.parentElement;
var child = div1.childNodes;//(会有文本节点)
console.log(child[0].nodeType) //元素类型 text 3
console.log(child[1].nodeType) //元素类型 p 1
console.log(child[0].nodeName) //元素名称 text #text
console.log(child[1].nodeName) //元素名称 p p
div1.removeChild(child[0])
~~~
3. 获取子节点（递归）
4. 删除节点
#### 解答
1. DOM是那种基本的数据结构？
* 树（子节点，父节点，删除）
2. DOM操作常用API
* 获取dom节点，以及节点的property和Attribute
* 获取父节点，获取子节点
* 新增和删除
3. DOM节点的attr和property有何区别
* **property只是一个js对象的属性的修改**
* **Attribute是对html标签属性的修改和获取**
#### 重点总结
* DOM本质
* DOM节点操作
* DOM结构操作
### BOM（Browser Object Model浏览器对象模型）操作
#### 题目
1. 检测浏览器的类型（andriod和ios，app，）
2. 拆解url的各部分
#### 知识点
1. navigator
~~~
var ua = navigator.userAgent;
var isChrome = ua.indexOf('Chrome');
console.log(isChrome)
~~~
2. screen
~~~
screen.width
screen.heigth
~~~
3. location
~~~
location.href
location.protocol//http: https:
location.port
location.pathname
location.search//参数
location.hash//#后面 哈希
~~~
4. history
~~~
history.back()
history.forward()
~~~
### 解答
1. 检测浏览器的类型（andriod和ios，app，）
~~~
var ua = navigator.userAgent;
var isChrome = ua.indexOf('Chrome');
console.log(isChrome)
~~~
2. 拆解url的各部分
### 事件
1. 编写一个通用的事件监听函数
2. 描述事件冒泡流程
3. 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
#### 知识点
1. 通用事件绑定
2. 事件冒泡
3. 代理
#### 通用事件绑定
~~~
var btn= document.getElementById('btn1');
btn.addEventListener('click',function(event){
console.log('click')
})
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn);
}
var a = document.getElementById('link1');
bindEvent(a,'click',function(e){
e.preventDefault();//阻止默认事件
alert('clicked')
})
~~~
#### 关于IE低版本兼容性
1. IE低版本使用attachEvent绑定事件，和W3C标准不一样
2. IE低版本使用量非常少，很多网站都早已不支持（IE8以下）
3. 建议对IE低版本的兼容性，了解即可，无需深究
4. 如果遇到对IE低版本要求苛刻的面试，果断放弃（他们项目版本低）
5. 现在是移动端的天下，对安卓ios版本兼容
#### 事件冒泡（往上）
~~~
<body>
<div id ="div1">
<p id ="p1">激活</p>
<p id ="p2">取消</p>
<p id ="p3">取消</p>
</div>
<div id="div2">
<p id ="p4">取消</p>
<p id ="p5">取消</p>
</div>
</body>
var p1 = document.getElementById("p1");
var body = document.body
bindEvent(p1, 'click', function(e){
e.stopPropatation();
alert('激活')
})
bindEvent(body, 'click', function(e){
alert('取消')
})
~~~
点击激活：激活
点击取消：取消
#### 代理
~~~
<div id="div1">
<a href="#">a1</a>
<a href="#">a1</a>
<a href="#">a1</a>
<a href="#">a1</a>
<--会随时新增更多的a标签 -->
</div>
var div1 = document.getElementById("div1");
div1.addEventListener('click',function(e){
var target = e.target;
if(target.nodeName === "A"){
alert(target.innerHTML);
}
})
~~~
代理原理：冒泡机制；上层属性中拿到真正触发的target元素，不管里面新增多少标签，都能拿到
#### 完善通用绑定事件的函数
~~~
function bindEvent(elem,type,selector,fn){
//如果三个参数 没有selector
if(fn == null){
console.log(fn)
fn= selector
selector = null
}
elem.addEventListener(type,function(e){
var target;
if(selector){
target = e.target;
if( target.matches(selector)){ //dom节点是否和选择器匹配
fn.call(target,e);//this绑定target 拿到点击的对象标签
}
}else{
//不使用代理
fn(e)
}
})
}
//使用代理
var div1 = document.getElementById('div1');
bindEvent(div1, 'click', 'a',function(e){
console.log(this.innerHTML)//this!!指向target
})
//不使用代理
var a = document.getElementById('a1');
bindEvent(div1,'click',function(e){
console.log(a.innerHTML)
})
~~~
#### 代理的好处
1. 代码简洁
2. 减少浏览器内存占用（绑定一次事件，内存会记一次）
### 解答
1. 编写一个通用的事件监听函数（已封装）
2. 描述事件冒泡流程
* DOM树形结构
* 事件冒泡
* 阻止冒泡
* 冒泡应用
3. 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件（代理）
* 使用代理
* 两个优点：代码简洁；浏览器压力小
#### 重点总结
1. 通用事件绑定
2. 事件冒泡
3. 代理
### Ajax
和服务端交互
#### 题目
1. 手动编写一个ajax，不依赖第三方库
2. 跨域的几种实现方式（imooc.com，m.imooc.com coding.imooc.com）
#### 知识点
1. XMLHttpRequest
2. 状态码说明
3. 跨域
##### XMLHttpRequest
~~~
var xhr = new XMLHttpRequest();
xhr.open('GET','/api',false);
xhr.onreadystatechange = function(){
//这里的函数异步执行，可参考之前基础中的异步模块
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}
}
xhr.send(null);
~~~
#### IE兼容性问题
* IE低版本使用ActiveXObject,和W3C标准不一样
* IE低版本使用量已非常少，很多网站都早已不支持
* 建议对IE版本的兼容性，了解即可，无需深究
* 要求苛刻，果断放弃（个人发展）
#### 状态码说明
1. readyState
* 0 -（未初始化），还没调用send方法
* 1 -（载入），以调用send方法，正在发送请求
* 2 - （载入完成），send方法执行完成，已经接收到全部响应内容
* 3 -（交互）正在解析响应内容
* 4 - （完成）响应内容解析完成，可以在客户端调用了
2. status （http标准的码）
* 2xx - 表示成功处理请求。如200
* 3xx - 需要重定向，浏览器直接跳转
* 4xx - 客户端请求错误，如404
* 5xx - 服务器端错误
### 跨域
1. 什么是跨域
2. JSONP
3. 服务器端设置http header
#### 什么是跨域（安全，不允许别人访问自己的网址后台接口）
1. 浏览器有同源策略，不允许ajax访问其他域接口
* 跨域条件：协议，域名，端口，有一个不同就算跨域
2. 可以跨域的三个标签
* img src=“xxxx” （浏览器不会处理） （也防盗链处理（仅。。。可用））
* link href=“xxx” 加载css文件
* script src="xx"
3. 3个标签使用的场景】
* 用于打点统计，统计网站可能是其他域（不受跨域，兼容浏览器）
* link script可以使用CDN，cdn也是其他与（bootCDN）
* script可以用于JSONP
4. 跨域请求注意事项
* 所有跨域请求都必须经过信息提供方允许
* 如果未经允许即可获取，那是浏览器同源策略出现漏洞
### JSONP 实现原理
* 加载xxx.classindex.html
* 不一定服务器端真正有一个classindex.html文件
* 服务器可以根据请求，动态生成一个文件，返回
* 同理与 script src=“../api.js”(服务器端也可以自己拼一个文件)
* 例如网站要跨域访问慕课网一个接口
* 慕课网给你一个地址 /api.js
* 返回内容格式如`callback({x:100,y:200})`(可动态生成)
~~~
<script>
window.callback = function(data){
//这是我们跨域得到的信息
console.log(data)
}
</script>
<script src="...api.js"/><script>
//以上将返回callback({x:100,y:200})
~~~
#### 服务器端设置http header
1. 另外一个解决跨域的简洁方法，需要服务器端来做
2. 但是作为交互方，我们需知道
3. 是将来解决跨域问题的一个趋势
#### 解答
1. 手动ajax
2. 跨域的实现方式（jsonp 后端）
### 存储
1. 请描述一下cookie，sessionStorage和localStorage的区别
#### cookie
1. 本身用于客户端和服务器端通信
2. 但是它有本地存储的功能，于是被“借用”
3. 使用document.cookie = ...获取和修改即可（用时比较麻烦，字符串）
ajax请求中，Request Headers中有Cookie，通信使用
Application中也会有Cookies存储
##### cookie用于存储的缺点
1. 存储量太小，只有**4kb**（请求中不能太大）
2. 所有http请求都带有，会影响获取资源的效率
3. api简单，需要封装才能用 document.cookie = ..(拆解封装)
#### locationStorage 和sessionStorage
1. html5专门为存储而设计，最大容量约**5M**（不用在请求中带着，）
2. API简单易用
3. localStorage.setItem("key,value");localStorage.getItem(key)
4. 区别：sessionStorage会话结束会清除，localStorage存储在本地，不会被清除
##### 注意：
* IOS safari隐藏模式下
* localStorage.getItem会报错
* 建议统一使用try-catch封装
#### 解答
* 请描述一下cookie，sessionStorage和localStorage的区别
1. 容量
2. 是否会携带ajax中
3. api易用性
- 空白目录
- 双樾
- JS基础知识
- JS-WEB-API
- 开发环境
- 运行环境
- ES6
- 原型
- 异步
- 虚拟dom
- mvvm
- 组件化和React
- hybrid
- 其他
- 补充
- 技巧
- 快乐动起来呀
- css
- 掘金小册子
- js基础知识
- ES6知识点
- JS异步
- JS进阶知识
- 思考题
- DevTools Tips
- 浏览器基础知识
- 浏览器缓存机制0
- 浏览器渲染原理
- 安全防范知识点0
- 从V8中看JS性能优化0
- 性能优化琐碎事
- Webpack性能优化0
- 实现小型打包工具0
- React和Vue
- Vue生命周期
- vue基础知识点
- Vue响应式
- vue高级
- React基础
- Vue.js技术解密
- 准备工作
- 数据驱动
- new Vue()
- vue实例挂载
- 组件化
- 深入响应式原理
- 编译
- 扩展
- Vue Router
- Vuex