云天常见问题 -- 面试部分

自我介绍

• 成就
  
  • 我之前做一名运营，辞职后自学半年多，入职现公司
  • 作为公司唯一一名前端，与产品与后端工程师配合
  • 独立完成了公司 拼团 分销 移动端重构等项目的前端工作
  • 最近又完成了基于微信公众号的小程序
• 突出技能：
  
  • Javascript，熟练使用 ES5、6 语法
  • css，熟悉基本使用方法，熟悉 css3 一些特性
  • html 可以使用语义化的标签书写 html
  • Vue 熟练使用全家桶
  • 小程序 熟悉小程序各组件、API的使用
• 性格优势
  
  • 除了技术方面的工作能力与良好的学习能力
  • 做过运营作为需求方
  • 现在在做技术为实现方
  • 遇到需求更能够有条理的理解需求，完成产品
  • 也能找出需求中不清晰的地方

遇到问题的案例：

技术相关的：

• 在 vue 框架使用 swiper.js 组件的时候遇到了的问题
  
  • 在 有数据 和 mounted 准备好 html 模板之后才能初始化
  • 循环时在首尾会复制一个 dom，没有绑定上点击事件
  • 去 github issue 里面找到了解决办法
  • 修复了
  • 在项目结束后重新读了 vue 生命周期教程
  • 研究了swiper.js 的原理，只复制了 html 没有绑定事件
  • 用 vue 虽然可以将事件绑在每个循环的元素上
  • 但不能忘了事件委托的思路，用来解决一些类似的问题，也能提高性能
• 与产品沟通时的问题
  
  • 小公司，流程其实比较简单和混乱
  • 需求变动频繁
  • 效率高，可能刚改完一个版本，就有改需求了
  • 为了解决问题，我跟产品一起制定了一份常见需求模板
  • 实行一段时间之后又加了一项新的：需求的目的
  • 结果是将改需求的从一版活动改5-6遍，降低到1-2遍。

离职原因

• 前年冬天在北京遇到的雾霾，让我咳嗽了两个月，决定换个城市
• 今年年初的时候换了行业，所以没有换工作，原计划就是明年年初跳槽
• 在线上交流的时候遇到了蘑菇街的朋友说我的技术栈与项目经历跟他们部门十分吻合，又缺人，问我要不要换
• 我就找她内推了。

稳定性问题

技术层面

• 在小公司历练之后发现自己还缺一些团队配合的经验
• 之前跟面试官了解了他们组的业务，有基础也有组件团队
• 使用的技术栈是我熟悉的
• 团队，写的业务都是我后续想要学习和获得的

蘑菇街在做的项目

• Min 小程序组件化解决方案
• 在小程序的红利期
• 所以非常希望加入蘑菇街前端团队

职业规划

• 首先还是做好本职工作，服从安排，希望从基础业务开始做起
• 另外自己对基础业务支持感兴趣，不管是完成一些通用的业务组件
• 在自己短期的学习目标是：系统的学习 node.js
• 目标：能有所用，自己建自己的站也好，为工作上做一些前端中间件的数据处理也好。也能提升自己的一些思维。

更多问题

Q 想了解一下这个岗位的发展如何
Q 公司的培训体系如何

未解决

// 原型链的构建
// REST(Representational State Transfer) 可重新表达的状态迁移
// RESTful API
// 六个具体约束：
// 1. 通信只能由客户端发后面发起，表现为请求-相应的形式
// 2. 无状态： 通信的会话状态应该有客户端负责维护
// 3. 缓存：相应内容可以在通信链的某处被缓存，以改善网络效率
// 4. 统一接口：通信连的组件之间通过统一的接口相互通信，以提高交互的可见性
// 5. 分层系统：通过限制组件的行为（即每个组件只能看到与其交互的相邻层），将架构分解为若干等级的层
// 6. 按需代码：支持通过下载并执行一些代码，对客户端的功能进行扩展

HTML5 部分

HTML语义化

• 语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

浏览器内部，不同页面数据通信

localStorage、sessionStorage、cookies 的区别

localStorage 本地存储，长期存在，大小一般为 10Mb，同源策略，因此可以用来跨页面交互数据
sessionStorage 同上，但关闭浏览器就会消失

• 属性

Storage.length // 返回一个整数，数据项数量

• 方法

Storage.setItem(key, value) // 储存 / 更新
Storage.getItem(key) // 读取
Storage.removeItem(key) // 删除
Storage.clear() // 清空

cookies

• 服务器发送到用户浏览器并保存在浏览器上的一块数据，会在下次发送请求时携带，并发送给服务器
• 分为会话期 cookie，持久 cookie，持久 cookie 可以设置过期时间Expires或者有效期Max-Age
• 可以设置作用域domain、路径path(子路径可用)
• secure标记https协议传输
• 大小为 4kb
• 访问方法

    document.cookie = "yummy_cookie=choco"
    document.cookie = "tasty_cookie=strawberry"
    console.log(document.cookie)

FormData 表单对象

• 可以用一些key来模拟一系列表单控件
• 用XMLHttpRequest的send()方法来异步提交表单
• 跟普通ajax相比, FormData最大的优点就是可以异步上传一个二进制文件

var formData = new FormData(form)
formData.append('username', 'Chris');
// 在 html 中 name 是必须的
<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
<input type="submit" value="Submit!">
</form>
var myForm = document.getElementById('myForm')
formData = new FormData(myForm)

File API 预览图片使用

• File 对象一般来自于input元素上，选择文件之后返回的FileList对象
• 也可以是自由拖放操作生成的DataTransfer对象
• 或者是来自HTMLCanvasElement mozGetAsFile() 方法
• File对象是特殊类型的Blob,可以在 XMLHttpRequest.send()中处理
• 属性

File.lastModified // 最后修改时间
File.lastModifiedDate // 最后修改时间的 Date 对象
File.name // File 引用文件的名字
File.size // 文件大小
File.path // path 或者 Url
File.type // 文件扩展类型

CSS 部分

px rem em 的区别

• px 是像素，绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精确dpi。
• em是相对长度单位，相对于当前对象内文本的字体尺寸。如果未对当前行内文本的字体尺寸进行设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
• rem 是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
• 区别：IE无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放。rem 相对的只是HTML根元素，这个单位可谓是集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素字体大小就可以成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持 rem。

选择器优先级 权重

• 行内样式 1000 id +100 属性选择器/class + 10 :hover伪类 + 10 body元素+1

css 的实现原理 stacking block ？

• 层叠上下文 stacking block
  层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
  文档中的层叠上下文由满足以下任意一个条件的元素形成：
  
  1. 根元素 (HTML),
  2. z-index 值不为 "auto"的 绝对/相对定位，
  3. 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
  4. opacity 属性值小于 1 的元素（参考 the specification for opacity），
  5. transform 属性值不为 "none"的元素，
  6. mix-blend-mode 属性值不为 "normal"的元素，
  7. filter值不为“none”的元素，
  8. perspective值不为“none”的元素，
  9. isolation 属性被设置为 "isolate"的元素，
  10. position: fixed
  11. 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
  12. -webkit-overflow-scrolling 属性被设置 "touch"的元素

在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠。特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

总结:

• 给一个 HTML 元素定位和 z-index 赋值创建一个层叠上下文，（opacity 值不为 1 的也是相同）。
• 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个有层级的层叠上下文。
• 每个层叠上下文完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
• 每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会 在父层叠上下文中 按顺序进行层叠。

float 略

position 略

display 略

两栏布局

<div style="float:left;width:200px;"></div>
<div style="margin-left: 200px;"></div>

三栏布局

<div style="float:left;width:200px;"></div>
<div style="float:right;width:200px;"></div>
<div style="margin-left: 200px;margin-right: 200px;"></div>

水平居中

• 知道子元素的宽度

son {
    width: 200px;
    margin: 0 auto;
}

• 老方法—表格法

father {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
son {
    display: inline-block;  
    vertical-align: middle;
}

• 万能方法 1

father {
    display: flex;
    justity-content: center;
}

• 万能方法 2

father {
    position: relative
}
son {
    position: absolute
    left: 50%;
    trnasform: translateX(-50%;)
}

垂直居中

• 单行文本居中

div {
    line-height: 30px;
    height: 30px;
}

• flex法 / 父relative 子 absolute + transform 法
• father定高的话，子元素 relative;top: 50%;trnasform: translateY(-50%);

讲一下浮动吧？和 absolute 的区别？

• 浮动：指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，但仍然保持部分的流动性（与绝对定位相反）。
  多元素共同浮动时，按照顺序向同方向排列，宽度不够则下降，高度不同时会出现被前面一个元素挡住的情况
  如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
  在js中使用float、class、for时，要改写成styleFloat、className、htmlFor，因为在js中为保留字
  清除浮动(clear)：规定元素的哪一侧不允许其他浮动元素。

清除浮动有哪些方法？

• 增加一个子元素，设置 clear: both
• 给最后一个元素设置伪元素 :after{content:'',clear:both}
• 设置父元素 overflow: hidden auto

margin 合并

- 相邻的两个块级元素，间距是两者 margin 的最大值
- 父子两个块级元素： 若第一个子元素的 top 上没有 border padding ,上方没有 inlineBlock  清除浮动的话，那么父子两元素的 margin 将合并，取两者的max

box-sizing 盒模型

- 标准 content-box width 只是 content 部分
- 怪异 border-box width 包含 margin+padding+border+content 部分

CSS3 动画

div {
    transition: 1s 1s height ease, 1s 1s width ease;
}
// 可以通过增减 class 设置 transform 效果
// 持续时间 延迟时间 方向/属性 弹性效果
div {
    animation: 1s 1s rainbow linear 3 forwards normal;
}
// 持续时间 延迟时间 动画名称 时间线性弹性 循环次数(infinite) 播放方向
@keyframes rainbow {
    0% { background: #c00; }
    50% { background: orange; }
    100% { background: yellowgreen; }
}

JS 部分

值类型与引用类型

• 基本类型：Undefined、Null、Boolean、Number、String、Symbol (new in ES 6)
  
  • 基本类型的数据存在栈内存上
• 引用类型：Object Array Function Date
  
  • 栈内存中保存了变量标识符和指向堆内存中该对象的指针
  • 堆内存保存了对象的值
• typeof 可以判断基本类型
• a instanceof b 判断 a 是不是 b 类型的对象

var a = {
    v: 1
}
var b = a
console.log(b.v) // 1
a.v = 2
console.log(b.v) // 2
a = {
    v: 3
}
console.log(b.v)  // 2 b指向了 a 之前的对象，重置了 a，b 的指向没有变化

变量声明提升

console.log(a)  // undefined
var a = 1
// 相当于
// var a
// console.log(a)
// a = 1

console.log(b()) // 2  变量提升了
function b() {
    return 2
}

console.log(c())  // c is not a function 
var c = function() {
    return 3
}
// 相当于
// var c 
// console.log(c()) 
// c = function() {return 3}

• 注意，let 或者 const 声明的变量不具备声明提升的特性

console.log(d)
let d = 4

this

• 简单的 this 题目

var x = 0
function test() {
    console.log(this.x)
}
var o = {}
o.x = 1
o.m = test
o.m.apply() // 0 apply 需要指定一个 this，null 或者 undefined 则指向了 window 所以是 0
o.m() // 1 谁调用，指向谁

• 复杂的 this 题目

var foo = {
    bar: function() {
        return this.baz
    },
    baz: 1,
}
(function() {
    return typeof arguments[0]()
})(foo.bar)

call, apply, bind 的区别

• call和apply都可以改变一个函数调用的环境(不改变原来的this)，并立即调用
• 若第一个参数是 null / undefined 则 this 指向 window
• 区别是call后面可以跟更多用逗号分隔开的参数apply的第二个参数必须是一个数组
• bind 方法是 return 一个改写过this和参数的函数，这个函数可以稍后调用

const log = console.log.bind(console)

简单的构造函数

function Foo() {
    this.name = 'a'
}
var f1 = new Foo()
f1.name = 'b'
console.log(f1.name) // 'b'
var f2 = new Foo()
console.log(f2.name) // 'a'

原型链 prototype

继承时，JavaScript 只有一种结构：对象。每个对象都有一个私有属性（称之为 [[Prototype]]），它持有一个连接到另一个称为其 prototype 对象（原型对象）的链接。该 prototype 对象又具有一个自己的原型，层层向上直到一个对象的原型为 null。（译者注：Object.getPrototypeOf(Object.prototype) === null; // true）根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

function Foo() {
    this.name = 'a'
}
Foo.prototype.logName = function() {
    console.log('name is', this.name)
}
var f1 = new Foo()
f1.logName() // name is a  没有修改原型 Foo 的 name
var f2 = new Foo()
f2.logName = function() {
    console.log('name')
}
f2.logName() // name 覆盖了 原型链上的 logName() 函数
var f3 = new Foo()
f3.name = 'c'
f3.logName() // name is c    只覆盖了 Foo 上的 name

arguments 函数隐含的参数，是所有参数构成的一个类数组

(function() {
    return typeof arguments
})()

setTimeout 和 setInterval 两者的区别

• setTimeout是过一定时间之后执行 function， 然后终止

• setInterval 是每过一段时间之后执行 function，清除用 clearInterval(id) 的方法

• setTimeout 与循环结合

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date(), i)
    }, 1000)
}
console.log(new Date(), i)
// 00:00:00 5
// 00:00:01 5
// 00:00:01 5
// 00:00:01 5
// 00:00:01 5
// 00:00:01 5

事件捕获, 事件冒泡, 事件委托

// 讲清楚这三个概念
addEventListener(event, callback, useCapture)

• event 事件名称 'click'
• callback 事件监听函数，监听到事件后执行的函数，第一个参数为事件本身
• useCapture 默认 false 是否是捕获方式
• 可以调用 event.stopPropagation(); 即可阻止事件继续传播
• 事件委托: 利用冒泡原理，在父元素或者祖先元素上绑定事件监听函数，当事件传递到该元素上之后，callback 查询 e.target.id 或者 dataset 等其他标记，来判断事件并处理函数；优点是不需要给每一个子元素都绑定事件，节省内存，可以处理后期渲染的元素

闭包

• Closures (闭包)是使用被作用域封闭的变量，函数，闭包等执行的一个函数的作用域。通常我们用和其相应的函数来指代这些作用域。(可以访问其他函数内部变量的函数)
• 使用闭包实现如下程序: 函数每调用一次，该函数的返回值加 1

var bibao = function() {
    var i = 0
    var addI = function() {
        i++
        return i
    }
    return addI
}
var a = bibao() // 这个 a 就是闭包
// 改写一下
var a = (function() {
    var i = 0
    return function() {
        i++
        return i
    }
})()

浅拷贝 clone 和深拷贝 deepClone

// 实现 deepClone 函数，JSON
JSON.parse(JSON.stringify(obj))  // 一般业务数据够用了
// 或者用 jQuery
var newObject = jQuery.extend(true, {}, oldObject);
//lodash 的 
_.clone(true, obj)
// 浅复制数组
var a = b.slice()
var a = b.concat([])

实现原生的 ajax 函数

var ajax = function(method, path, data, responseCallback) {
    var r = new XMLHttpRequest()
    // 设置请求方法和请求地址
    r.open(method, path, true)
    // 设置发送的数据的格式
    r.setRequestHeader('Content-Type', 'application/json')
    // 注册响应函数
    r.onreadystatechange = function() {
        if(r.readyState === 4) {
            responseCallback(r)
        }
    }
    // 发送请求
    r.send(data)
}
// 0 1 2 3 4 各代表什么含义
// 0 代理被创建，但并未 open()
// 1 已经调用 open()
// 2 已经调用 send()  并且头部和状态已经获得了
// 3 正在下载
// 4 下载完成

HTTP 请求方法, 常见状态码, 头部常见字段

• HTTP 有哪些常见请求方法
  
  • GET获取 POST提交 PUT替换取代 DELETE删除 OPTIONS查看性能
• HTTP 常见状态码有哪些
  
  • 1xx 代表请求已被接受，需要继续处理
    
    • 100 Continue 已接收到请求头
    • 101 服务器已理解，但需要切换协议
    • 102 Processing 服务器已经收到并在处理，但暂无相应可用
  • 2xx 请求成功，服务器接收、理解、并接受
    
    • 200 OK 请求已成功
    • 202 Accepted 服务器已接收，但尚未处理，也可能不会执行
    • 204 No Content 成功处理，但是没有任何返回内容
  • 3xx 重定向
    
    • 301 被请求的资源已经永久移动到新位置
    • 302 Found 要求客户端执行临时重定向
    • 304 表示资源未被修改，不重新传输
    • 305 需要使用代理才可以访问
  • 4xx 客户端错误
    
    • 400 错误请求，服务器不能或者不会处理
    • 401 未认证，用户没有必要的凭据
    • 403 访问被拒绝
    • 404 请求失败，资源未在服务器上发现
    • 405 请求方法不能用于获取请求的资源
    • 408 请求超时
  • 5xx 服务器错误
    
    • 500 通用错误，但是没有错误信息
    • 501 服务器不支持
    • 502 Bad Gateway 网关或者代理的服务器执行请求时，从上游服务器接收到无效的响应
    • 504 Gateway Timeout 网关超时
• HTTP 头部常见字段有哪些
  
  • Accept 期望的 MIME 类型列表
  • Accept-Charset 期望的字符集
  • Accept-Encoding 支持的压缩方法
  • Connection
  • Content-Length 请求长度
  • Content-Type 内容类型
  • Host 服务器
  • Origin 访问的地址
  • Referer 来自
  • User-Agent
  • Accept-Language 期望的页面语言
  • Request Method 请求方法

跨域（jsonp, postMessage, cors, 用服务器(比如 node)转发请求和响应）

• 跨域有哪些常见的解决方式

  • cors 设置被跨域服务器，可以接受来自 a.com 的请求
  • jsonp ，用 script src 去引用，获取信息
  • 架设 node 本地转发请求，或者请求后端转发请求

• 网络安全: xss, csrf

  • xss 和 xsrf 的原理是什么
    
    • xss 是 html 注入，用户在输入的地方插入 script元素,浏览器会识别为js代码，如果这个代码有访问外部服务器，就是 xss 攻击
    • 防治措施是 不信任用户的输入，将 < > 转译为 < &rt; 来处理内容
    • csrf 是跨站攻击，拿到了用户的信息之后，伪造用户请求去访问接口

DOM 操作（查找, 添加, 删除, 修改）

// DOM 查找/添加/删除/修改对应的 API 是什么

// 新建
document.createElement('div') // 创建节点
document.createTextNode('我是新增的文本节点') // 创建文本节点
document.querySelector('#div1').cloneNode(true) // true 深度克隆一个节点
// 修改
parent.appendChild(child)  // 在 parent 最后位置插入 child
a.insertBefore(b,c) // 在 a 的 c 元素之前插入 b，若 c 不存在会插入在最后
a.insertAdjacentHTML('beforebegin', b) // 在 a 的第一个子元素之前加入 afterbegin beforeend afterend
// 删除
a.removeChild(b) 删除 a 中的 b 并返回 b 这个 dom
parent.replaceChild(newNode,oldNode)
// 设置
a.setAttribute(prop, value) 给 a 元素的 prop 元素设值 value
a.innerHTML  获取/设置 dom
a.innerText 获取文本
a.value  获取/设置 input/select 的值
// 查找
document.querySelector('.test')
document.querySelectorAll('.test')[0]
element.childNodes // 子节点
element.parentNode // 子节点
ele.previousElementSibling 前一个节点
ele.nextElementSibling 后一个节点
closet(query) 可以用递归实现
// 监听事件
addEventListener('type', 函数名称, true/false) // 事件类型 回调函数 是否有捕获
removeEventListener('type', 函数名称)

jQuery 常见 Apihttp://www.jianshu.com/p/8a26e66254ed

数据结构

Array 数组 [1,2,3,4]

• 属性

Array.length // 数组长度
Array.prototype //数组原型

• 方法

Array.from(a)  // 从类数组或迭代对象中创建一个新的数组实例
Array.isArray(a) // 判断 a 是否是数组
// 改变原数组的方法
arr.push(b) // 尾部增加 b，并返回新数组长度
arr.pop() // 尾部删除并返回删除的元素
arr.unshift(b,c) // 头部增加 b,c 并返回新 length
arr.shift() // 删除第一个元素，并返回该元素
arr.reverse() // 数组倒序排列
arr.sort((a,b)=>{return Number} //按照比较两个元素，最后根据返回值排序
 //返回值  <0 a,b   >0 b,a  =0  保持原顺序
arr.splice(index, num, a,b,c) // 在 index 位置开始删除 num 个元素，并用后续参数代替
// 不改变原数组，但返回值为期望值
arr1.concat(arr2) // 返回 arr1 后续 arr2 的数组
arr.inculudes(b) // 返回布尔值，arr是否包含 b 元素
arr.join(str=',') // 返回一个用 str 分隔开的 字符串
arr.slice(index1, index2) // 返回 arr 从 index1 开始，到 index2 前一个元素的数组
arr.indexof(b) // 返回第一个等于 b 的元素的 index，若不含有则返回 -1
arr.lastIndexof(b) // 返回倒数第一个等于 b 的元素的 index，不含有则返回 -1
// 遍历方法
arr.forEach((item, index)=> {
    console.log(item, index)
}) // 为arr 的每个元素执行一次函数，改变原数组
arr.map((item, index)=>{
    return 
}) // 返回每个回调函数的返回值组成的数组
arr.every((item)=>{
    return Boolean
}) // 函数遍历每个元素返回值为 true，返回 true 否则 false
arr.some((item)=>{
    return Boolean
}) // 函数遍历每个元素，返回值有一个 true ，则返回 true 否则 false
arr.find((item)=>{
    return Boolean
}) // 函数遍历每个元素，返回值为 true 的元素，会被返回，否则 undefined
arr.findIndex((item)=>{
    return Boolean
}) // 函数遍历每个元素，返回值为 true 的元素的 index 会被返回，否则 -1

var arr2 = arr1.slice() // 浅复制一个数组

• 队列 先进先出 array 可以实现 push() shift()
• 栈 后进先出 array 可以实现 push() pop()
• 数组、对象、字符串的想换转化
  比如 a=1&b=2&c=3 怎样转成对象, 复习基础课程的作业就可以

// 有这样一个 url： http://vip.qq.com/a.php?a=1&b=2&c=3&d=xxx&e
// 写一段 JS 程序将 url 的参数转成对象的形式
{
    a: 1,
        b: 2,
    c: 3,
    d: 'xxx',
    e: '',
}

ES6

• let 和 const
  
  • 有一个 TDZ (暂时性死区) 原因没有变量提升
  • const obj = {a:1,b:2} obj 的属性可以更改，但是不允许改变 obj 指针的指向
• 箭头函数 () => {}
• 解构 [a,b] = [11,22]
• 剩余参数

var test = function(a,b, ...args) {
    // 参数 a b 可以直接用
    // args = [c,d,e ……]
    // 一个真实的数组
}

• Promise

promise
    .then((res)=>{})
    .catch((err)=>{})
    .done()
    .finally()
// Promise.all() 将多个 Promise 实例打包成新的 Promise，当所有都resolved 才回 resolved    
// 有一个 Promise 变成 rejected 则会变成 rejected
var p1 = new Promise
var p2 = new Promise
var p = Promise.all([p1,p2])
// Promise.race([p1,p2,p3])  返回值是第一个发生改变的 promise 的返回值
// Promise.resolve(res) 返回一个返回值是 res，且 resolved 的 Promise 实例
// Promise.reject() 返回一个 reject 的 Promise 实例
// 一个实际面试题，不过谁这么写代码我抽谁
// 判断输出结果
const a = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('hhh')
        }, time)
        setTimeout(() => {
            reject('gua')
        }, 1000)
    })
}
a(500)
    .then((res) => {
        console.log(res)
    }, (err) => {
        console.log(err)
    })
    .then((res) => {
        console.log(res, 2)
    }, (err) => {
        console.log(err, 2)
    })
    .catch((res) => {
        console.log('catch', res)
    })
// 两个 then 会先后执行，第一个 then 可以拿到 res，第二个 then 拿不到
// 因为没有抛出的错误，所以 catch 拿不到任何信息
a(1200)
    .then((res) => {
        console.log('resolved 1200', res)
    }, (err) => {
        console.error('rejected 1200', err)
    })
    .then((res) => {
        console.log('res2', res)
    }, (err) => {
        console.log('err2', err)
    })
    .catch((res) => {
        console.log('catch2', res)
    })
// promise 变成rejected，执行第一个rejected 1200
// 然后第二个 then 会执行resolved 函数，但是拿不到 res
// 没有抛出错误，所以 catch 不执行
// rejected 1200 gua
// res2 undefined
a(2000)
    .catch((res) => {
        console.log('catch2000, 1', res)
    })
    .catch((res) => {
        console.log('catch2000, 2', res)
    })
// 第一个 catch 接住了抛出的错误，所以第二个没有得到
// catch2000 1 gua
a(3000)
    .catch((res) => {
        console.log('catch3000', res)
    })
    .then((res) => {
        console.log('then 3000', res)
    })
// 第一个 catch 接住了 错误（默认返回了一个resolved promise），然后 then 可以继续接

• promise 链式调用总结
  
  1. promise 的 then 方法里面可以继续返回一个新的 promise 对象
     2.下一个 then 方法的参数是上一个 promise 对象的 resolve 参数
  2. catch 方法的参数是其之前某个 promise 对象的 rejecte 参数
  3. 一旦某个 then 方法里面的 promise 状态改变为了 rejected，则promise 方法连会跳过后面的 then 直接执行 catch
  4. catch 方法里面依旧可以返回一个新的 promise 对象
  5. 需要在某个then 之中直接停止，那么返回一个 Promise.rejected()，来跳过之后的 then

构造函数

• 最常用的一个构造函数

function Person(a,b,c) {
    this.a = a
    this.b = b
    this.c = c
    this.friends = [1,2,3]
}
Person.prototype = {
    constructor: Person,
    sayName: function() {
        console.log(this.a)
    },
}

• 最常用的继承

function Man(a,b,c,d) {
    Person.call(this, a, b, c)
    this.d = d
}
Man.prototype = new Person()
Man.constructor = Man
Man.prototype.logD = function() {
    console.log(this.d)
}

class

// 定义类
class Point {
    // 构造函数
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    get prop() { // Point.prop 的 getter 函数，调用时返回值
        // do something
        return 'hahaha'
    }
    set prop(value) { // Point.prop 的 setter 函数，在赋值的同时执行
        console.log('设置 prop 为' + value)
    }
    static method1() {
        // 一个静态方法，不会被实例获取的，但是会被子类继承调用
        console.log('静态函数 method1，可被类调用，不可被实例调用')
    }
    method2() {
        console.log('这里是 method 2，可被实例调用，可被子类继承')
        return '(' + this.x + ', ' + this.y + ')';
    }
}
// 继承类
class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y) // 调用父类的constructor(x, y)
        this.color = color
    }
    method3() {
        return this.color + ' ' + super.method2(); // 调用父类的toString()
    }
}

ES6 模块中 export 与 export default 的区别

1. export与export default 均可用于导出常量、函数、文件、模块等
2. 你可以在其它文件或模块中通过import a from '/path/b'的方式，将其导入，以便能够对其进行使用
3. 在一个文件或模块中，export、import可以有多个，export default仅有一个
4. 通过export方式导出，在导入时要加{ }，export default则不需要

import defaultExport from "module-name" // export default
import "module-name" // export default
import * as name from "module-name" // export，引用时 name.a
import { a as alias } from "module-name"; //export
// alias 别名

Set Map

从输入 url 到页面加载的过程

https://zhuanlan.zhihu.com/p/23155051

其他

同源策略限制

从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
- 不同端口 不同协议(http https) 不同域名

#

如何检测audio video 的播放状况？

监听媒体元素的事件 onplay onpause onended 等等

AMD CMD 区别

amd 是 requireJS 推广时的定义模块规范，提前执行
cmd 是 seaJS 推广时的定义模块规范，延迟执行

webpack 模块打包器

yarn 和 npm 有什么本质区别

- yarn 并发安装，安全可靠，非常快 yarn.lock
- npm 允许安装 packages 时执行代码
- yarn 并非想要完全取代 npm ，它只是一个新的 CLI 工具，拉取的 packages 依然来自 npm。
- 都是通过 package.json 记录项目需要拉取的依赖文件。

前端优化： 雅虎 35 条军规

- 内容  
    - 减少 http 请求次数
    - 减少 DNS 查询
    - 减少重定向次数
    - ajax 可以缓存 Expires Cache Control Header 头
    - 首屏以外的组件延迟加载
    - 猜测用户的使用倾向，预加载
    - 减少 html 的 dom 数量
    - 跨域分离组件， 可以多服务器并行
    - 杜绝 404
    - 少用 iframe
- CSS:
    - 样式表放在顶部
    - 引入 css 时使用 link 不用 import
    - 避免使用滤镜
- JS :
    - script 放在最后
    - 少操作 dom，避免重绘
    - 去除重复的 script
    - 多用事件委托
- 图片：
    - 压缩图片
    - 使用雪碧图 / base64
    - 不用 html css 设置图片的大小，而尽量使用原图的大小
- cookie:
    - 给 cookie 减肥
    - 把静态资源放在与 cookie 无关的域名下

React

• react 的广告 生命是 组件化 一次学习随处编写
• virtual dom
• diff 算法的原理
• state 和 props
• 组件生命周期
• 组件通信：父组件 -> 子组件, 子组件 -> 父组件, A 组件 -> B 组件
• React Router（react 路由）
• Redux/MobX
• react ui 框架有两套很流行: Material UI 和 Ant Design, 国内流行的是 Ant Design

Vue

• 易用 灵活 高效 组件化 渐进式 Javascript 框架
• v-if v-show 区别
• 生命周期： 4 * 2 个钩子 create mount update destroy * before after
• 双向绑定实现原理： getter setter
• 组件之间信息传递： props $emit('event-name', props) bus vuex
• vue-router 原理：
  
  • 利用 hash #
    
    • window.addEventListener("hashchange", funcRef, false)
  • HTML5 的 History.pushstate()
  -
• vue-router 钩子：
  
  • 全局
    
    • router.beforeEach((to, from, next) => {})
    • router.afterEach((to, from) => {})
  • 组件上配置
    
    • beforeRouteEnter
    • beforeRouteUpdate
    • beforeRouteLeave
• Vuex 的 state 可否更改
• Vuex 的状态改变图
  
  • Vue Components dispatch Actions commit Mutations mutate State render VueComponents
• Vuex 何时适合使用？
  
  • 大型单页应用(电商网站/管理后台)
  • 多组件都需要使用数据的情形（用户身份、购物车）
  • Flux 架构就像眼镜：您自会知道什么时候需要它。（数据管理不过来）

小程序相关

1px 分割线怎么处理？

先设置 height:1px transform:scaleY(0.5)

小程序组件