JS面试：JS-Web-API

题目一

DOM是哪种基本的数据结构？：树
DOM操作常用的API有哪些
DOM节点的attr和property有何区别

property 和attribute

property：只是一个js对象的属性的修改

var obj = {x:100, y:200}
console.log(obj.x)  //100

var p = document.getElementsByTagName('p')[0]
console.log(p.nodeName)  // P   这是字符串

//nodeName就是js对象p的一个property,js对象的标准属性

Attribute：是对html标签的属性的修改

//attribute 更改的是文档代码中的属性，如style，class,src等
var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name', 'imooc')

其实dom操作获取的就是js的对象，是个对象格式

题目二

如何检测浏览器类型
解析url各部分

navigator &screen&location & history

//screen
console.log(screen.width)
console.log(screen.height)

//history
history.back()  //返回
history.forward()  //前进

题目三

编写一个通用的事件监听函数
描述时间冒泡过程
对一个无限下拉加载图片的页面，如何给每个图片绑定事件

代理

`
<div id="div1">
	<a href="#">a1</a>
	<a href="#">a2</a>
	<a href="#">a3</a>
	<a href="#">a4</a>
</div>
`
var div1 = document.getElementById('div1')
//根据事件冒泡机制
div1.addEventListener('click', function (e) {
    var target = e.target
    if (target.nodeName === 'A') {
        alert(target.innerHITML)
    }
})

编写一个通用的事件绑定函数

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
            //matches判断dom节点是否和选择器匹配的
            if (target.matches(selector)){
                fn.call(traget, e)
            }
        }else{
            //不是代理
            fn(e)
        }
            
    })
}

var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function(e){
    e.preventDefault()
    console.log(this.innerHTML)
})

题目四

手动编写一个ajax，不依赖第三方库
跨域的几种实现方式

手写一个ajax

var xhr = new XMLHttpRequest()
xhr.open('GET', '/api', false) //false表示是异步请求
xhr.onreadystatechange = function () {
    if (xhr.readystate == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)

状态码说明readyState

0-未初始化，还没有调动send方法

1-载入，已经调用send方法，正在发送请求

2-载入完成，send方法执行完成，已经接收到全部响应内容

3-交互，正在解析响应内容

4-完成，响应内容解析完成，可以在客户端调用了
状态码status说明

2xx-表示成功处理请求。如200

3xx-表示需要重定向，浏览器直接跳转

4xx-客户端请求错误，如404

5xx-服务端错误

什么是跨域

浏览器有同源策略，不允许ajax访问其他域接口
跨域条件：协议、域名、端口，有一个不同就算跨域

解决跨域的方法

jsonp
服务端设置http header

题目五

请描述下cookie，sessionStorage和localSttorage的区别

cookie

本身用于客户端和服务端通信
但是他有本地存储的功能，于是就被‘借用’
使用document.cookie = ... 获取和修改即可

cookie用于存储的缺点

存储量太小，只有4KB
所有http请求都带着，会影响到获取资源的效率
API简单，需要封装才能用

localStorage 和 sessionStorage

HTML5专门为存储和设计，最大容量5M
API加单易用
localStorage.setItem(key, value), localStorage.getItem(key)
俩区别：

1、localStorage只要不清，会一直存在

2、sessionStorage，是浏览器关了，就会清除
ios safari 隐藏模式下，localStorage.getItem 会报错，统一建议使用try-catch包一下

AMD（异步模块定义）

require.js
全局define函数
全局require函数
依赖js会自动、异步加载

CommonJS

nodejs模块化规范，现在被大量用在前端
前端开发依赖的插件和库，都可以从npm获取
构建工具的高度自动化，使得使用npm的成本非常低
CommonJS不会异步加载js，而是同步一次性加载出来

AMD和commonjs的使用场景

需要异步加载js，使用AMD
使用npm之后建议使用commonjs

webpack安装好之后配置webpack.config.js

var path  = require('path') 
var webpack = require('webpack')

module.exports = {
    context:path.resolve(__dirname, './src'),
    //入口文件
    entry: {
        app: './app.js'
    },
    //打包输出文件
    output: {
        path: path.resoleve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    //文件压缩
    plugins: [
            new webpack.optimize.UglifyJsPlugin()
    ]
}

Linux基本命令得掌握好

加载一个资源的过程

浏览器根据DNS服务器得到域名的IP地址
向这个ip的机器发送http请求
服务器收到，处理并返回http请求
浏览器得到返回的内容

浏览器渲染页面的过程

根据HTML结构生成DOM Tree
根据css生成CSSOM
将DOM和CSSOM整合生成RenderTree（渲染树）
根据RenderTree开始渲染和展示
遇到script时候，会执行并阻塞渲染

xss跨站请求攻击

在新浪博客写一篇文章，同时偷偷插入一段script
攻击代码中，获取cookie（一般会有账户啥的），发送自己的服务器
发布博客，有人查看博客内容，会把查看者的cookie发送到攻击者的服务器
预防：前端替换文字：例如替换< 为&lt；> 替换为 &gt ;

XSRF

你已登录一个购物网站，正在浏览器商品
该网站的付费接口是'xxx.com/pay?id=100',但是没有任何验证
然后你收到一封邮件，隐藏着'<img src=xxx.com/pay?id=100>'
你查看邮件的时候，就已经悄悄的付费购买了
方法：增加验证流程，如输入指纹、密码、短信验证码等

简历

简介明了，重点突出项目经历和解决方案
把个人博客放在简历中，并且定期维护更新博客
把个人开源项目放在简历中，并维护开源项目
不要造假，保持能力和经历上的真实性
谈谈缺点：说说最近在学的什么就行
遇到不会回答得问题，说出你知道的就行