DOM是哪种基本数据结构
树
DOM节点的attribute和property有何区别
-
property：是一个对象的属性的修改
-
attribute：是对html标签属性的修改
如何检测浏览器的类型/内核/是否移动端
navigator.userAgent
拆解url各部分
location
// URL:http://www.example.com/test.html?key=value＃PART
location.href //返回完整的URL
// https://www.example.com/test.html?key=value＃PART
location.protocol //返回一个URL协议
// https
location.hostname //返回URL的主机名
// www.example.com
location.port //返回一个URL的端口号
// 如果端口号是80,则返回空
location.host //返回一个URL的主机名和端口
// www.example.com(如果端口号是80,则不显示)
location.pathname //返回的URL路径名
// test.html
location.search //返回一个URL的查询部分
// ?key=value
location.hash //返回一个URL的锚部分
// ＃PART
事件
事件级别：
DOM0:element.onclick=()=>{}
DOM2:element.addEventListener('click',()=>{},false)
DOM3:DOM2基础上增加支持更多事件类型
事件模型：
- 捕获：从顶层一直往下至目标元素
- 冒泡：从目标元素一直往上至顶层
描述事件流机制
即事件发生顺序
捕获阶段=>目标阶段=>冒泡阶段
自定义事件
new Event()
手写ajax
var xhr=new XMLHttpRequest()
xhr.open('GET','/api',false);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
conse.log(xhr.responseText)
}
}
xhr.send(null);
描述cookie，sessionStorage和localStorage的区别
都是本地存储
cookie本身用于客户端和服务器的通信。存储量少，约4k。
每次请求都会携带，会影响获取资源的效率。
sessionStoragelocalStorageH5的本地存储技术，存储容量大。
sessionStorage一个会话结束后储存数据会被销毁
localStorage则不会，不手动清除则能永久保存
AMD,CMD,CommonJS的区别
-
AMD：require.js，异步的，依赖前置
-
CMD：swa.js，同步的，就近依赖
-
CommonJS：服务端模块化规范，
module.exports={key:value}匿名输出（暴露），exports.key=value对象输出
-
ES6模块化：export/import
詳細原理參考：很全很全的JavaScript的模块讲解
跨域
原因：同源策略，cookie、localstorage、indexdb无法读取、dom无法操作、ajax无法发送
前后端通信方式：ajax、websocket、CORS
解决：
- JSONP：网页动态插入
<script>元素由它向跨源网址发出请求，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。只能发get请求 - window.postMessage：window对象新增了一个方法，允许跨窗口通信
- CORS：跨源资源共享。服务器配置
- websocket：是HTML5提供的一种在单个 TCP 连接上进行全双工通讯的协议。
- Nginx反向代理
