html + css

CSS3有哪些新特性？

• CSS3实现圆角( border-radius ),阴影( box-shadow )
• 对文字加特效( text-shadow ),线性渐变( gradient ),旋转( transform )
• transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//
  旋转,缩放,定位,倾斜
• 增加了更多的CSS选择器 多背景 rgba
• 在CSS3中唯一引入的伪元素是 ::selection
• border-image

---

HTML5新特性

• 拖拽释放(Drag and drop) API
• 语义化更好的内容标签(header,nav,footer,aside,article,section)
• 音频、视频API (audio,video)
• 画布(Canvas)API
• 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除
• 表单控件，calendar,date,time,email,url,search, 还有个 placeholder
• 新的技术 webworker,websocket,Geolocation(地理API)

---

你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

• IE : trident 内核
• Firefox : gecko 内核
• Safari : webkit 内核
• Opera : 以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核
• Chrome : Blink ( 基于 webkit，Google 与 Opera Software 共同开发)

---

每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

• 告知浏览器文档使用哪种 HTML 或 XHTML 规范。
• （重点：告诉浏览器按照何种规范解析页面）

---

CSS伪类和伪元素的区别?

• 伪类：伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性

  • :link
  • :hover
  • :active
  • :visited
  • :focus

• 伪元素：伪元素是对元素中的特定内容进行操作

  • :first-letter 伪元素的样式将应用于元素文本的第一个字（母）。
  • :first-line 伪元素的样式将应用于元素文本的第一行。
  • :before 在元素内容的最前面添加新内容。
  • :after 在元素内容的最后面添加新内容。

---

盒模型有几种, 区别是什么, 怎么切换?

1. 两种, 标准盒模型和IE盒模型
2. 主要区别：对于宽高的定义不同

   标准盒模型: content + padding + border + margin
   IE盒模型: content + margin

3. box-sizing:border-box, 设置为IE盒模型
   
   

   ---

设置元素浮动后, 该元素的display值是多少?

• 变成display:block

---

flex-basic 和 width 区别

1. 如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小
2. 如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小

---

布局

1rem、1em、1vh、1px各自代表的含义?

---

移动端适配的方案有哪些?

1. px和视口
2. 媒体查询
3. 百分比
4. 自适应场景下的rem解决方案
5. 通过vw/vh来实现自适应

---

vw和vh有了解吗?

vw: 屏幕宽度(视口)分成100份
vh: 屏幕高度(视口)分成100份

JS

获取时间戳的方式有哪些? 项目中用来干什么?

方式:

1. Date.now()
2. new Date().getTime()

应用:

1. 解决时区造成的时差问题;
2. 在不使用分页时, 获取大量数据, 用事件戳定位, 传参给后端
3. 聊天市案例, 也要给后端传时间戳参数

---

判断数据类型的方式有哪些?分别有什么缺点?

1. typeof: 主要用于获取简单数据的类型，并返回类型名，但要注意的是复杂数据类型不准确。所以我们常用typeof获取简单数据类型。

   • null返回的是object
     console.log(typeof null); // -> ‘object’
   • 检查复杂数据类型返回的是 object
   • 检查函数返回的是function

2. instanceof: 主要用于检测对象是由哪种构造函数实例化所得, 返回boolean

   注意，(数组、函数、对象) instanceof Object 都会返回true

3. Array.isArray: 主要用于检测是否是数组。

---

call , apply , bind 三者的区别？

同：

1. 三者都是改变函数执行时的上下文，说人话就是改变this的指向。

异:

1. bind()返回的其实是一个函数，并不会立即执行,而call 和 apply 会立即执行

2. call()、apply()第二个参数有区别，call()的是一个值作为第二个参数，apply()的第二个参数则是一个数组

---

js的数据类型有哪些?

分两种

1. 基本: string、number、boolean、null、undefined|
2. 引用: object、array、function
3. 在ES6中增加了几种数据类型: Symbol、BigInt(基本); Set、Map(引用),

---

for in和for of和Object.keys()区别

1. for in, 除了遍历自身的可枚举属性, 还会遍历原型链上所有可枚举的属性, 性能差一些; 开发不推荐使用;
2. 支持遍历数组，类数组对象（DOM NodeList），字符串，Map 对象，Set 对象；不支持遍历普通对象；
3. Object.keys() 遍历对象自身可枚举属性, Symbol 属性不会遍历到, 以数组形式返回

---

箭头函数和普通函数区别

1. 语法上, 箭头函数更加简洁, 箭头函数省去了function关键字，采用箭头=>来定义函数。在一定的条件下, 也可以对箭头函数进行简化。
2. 箭头函数没有this
3. 箭头函数没有arguments
4. 箭头函数不能作为构造函数(没this)
5. 箭头函数没有原型prototype
6. 箭头函数不能用作Generator函数，不能使用yeild关键字

---

什么是闭包?

1. 闭包就是能够读取其他函数内部变量的函数
2. 可以把闭包简单理解成"定义在一个函数内部的函数"。

---

闭包解决了什么？

阮一峰在他的博客中写到：在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

务实一点的说法应该是下面这样:

由于闭包可以缓存上级作用域，那么就使得函数外部打破了“函数作用域”的束缚，可以访问函数内部的变量。以平时使用的 AJAX 成功回调为例，这里其实就是个闭包，由于上述的特性，回调就拥有了整个上级作用域的访问和操作能力，提高了极大的便利。开发者不用去学钩子函数来操作上级函数作用域内部的变量了

闭包最大的两个用处:

1. 可以读取函数内部的变量;
2. 让这些变量的值时始终保存在内存中
   
   

   ---

什么是promise

• 简单说就是一个容器，里面保存着某个未来才会结束的事件的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的API ，各种异步操作都可以用同样的方法进行处理，让开发者不用关注于时序和底层的结果。Promise 的状态具有不受外界影响和不可逆两个特点。

  promise的三种状态:

  • pending 未决
  • resolve 成功
  • reject 拒绝

---

ES6的常用数组方法

1. find()
2. filter()
3. forEach()
4. concat()
5. map()
6. every()
7. some()
8. reduce()

---

反转字符串怎么实现?

const res = "我爱前端".split("").reverse().join("")
conlose.log(res)
// -> 端前爱我

---

JS数组的map和forEach的区别

1. map有返回值, forEach没有返回值。
2. forEach()会改变原始数组。而map()方法会得到一个新的数组并返回。

---

Vue

简述 MVC 和 MVVC 区别

点击查看: 面试-MVC和MVVM区别-Vue为什么没有完全遵守MVVM?

---

axios拦截器和导航守卫的区别

1. axios拦截器是拦截ajax请求; 导航守卫是拦截路由跳转
2. axios拦截器一般来说是全局的, 导航守卫是局部的, 根据路由的元信息针对个别路由跳转

---

过滤器和计算属性的区别

1. 过滤器是对单个数据进行处理, 例如时间格式转换;
2. 计算属性: 解决单个vue实例数据渲染冗余问题;
3. 一般来说, 过滤器是通过一个原始数据处理而来, 而计算属性是多个原始数据处理而来

---

Vue的路由实现：hash模式 和 history模式 — TODO

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；

特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

---

vue__TODO_265">vue路由的钩子函数 — TODO

1. beforeEach, 有3个参数to，from，next：

   to： route即将进入的目标路由对象，
   from：route当前导航正要离开的路由,
   next：

---

Vuex有哪几种属性? 及作用

1. state: 存放的数据状态，不可以直接修改里面的数据。
2. mutations: 定义的方法动态修改Vuex 的 store 中的状态或数据。
3. getters: 类似vue的计算属性，主要用来提供对state中数据的快捷访问。
4. action: 异步操作数据, 通过 store.dispath 来分发 action。
5. modules
     (1) 项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
     (2) 与之配合使用的还有一个属性 namespaced: true, 设置该属性后, 表示开启 命名空间, 之后再想访问子模块中的任何属性, 都必须加 模块名。

---

写出你以往工作上, 自己封装过的组件及用途(不少于3个)

---

Vue中 keep-alive组件的作用

---

Vue中 keep-alive 怎么实现缓存组件?

---

Vue中 $nextTick 作用是什么?

---

Vue生命周期钩子函数有哪些?

1. beforeCreate（创建前）
2. created（创建后）
3. beforeMount（挂载前）
4. mounted（挂载后）
5. beforeUpdate（数据更新前）
6. updated（数据更新后）

---

computed与watch的区别

计算属性computed和监听器watch都可以观察属性的变化从而做出响应，不同的是：

• computed是根据一个或者多个data的属性变化, 生成一个新的值, 并且会把这个值进行缓存. 不支持异步
• watch是根据一个属性的变化, 生成一个新的值, 没有缓存, 支持异步

---

vue_323">vue生命周期的作用是什么？

• 它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

---

Vue实现数据双向绑定的原理 – TODO

• Object.defineProperty（）
• vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。

用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

js实现简单的双向绑定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

---

Vue组件间的参数传递 – 待补充

1. 父组件与子组件传值

   父组件传给子组件：子组件通过props方法接受数据;
   子组件传给父组件：$emit方法传递参数

2、非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

---

v-if 和 v-for 为什么不能连用? 如何解决?

为什么?

1. 因为v-for 会 v-if 优先级更高, 会先执行 v-for, 在判断 v-if 是否满足条件再渲染, 会造成性能浪费;

解决

1. 在使用 v-for 的标签外面或者里面加一个 templete 标签, templete 标签中写v-if(不能让这两个指令写在同一个标签)
2. 在js中, 对需要渲染的数组进行处理, 过滤出满足条件的数组

---

Vue子组件的data为什么是一个函数?

为什么?

• 当定义的子组件, 复用的时候, 默认情况下, 数据是共享的, 为了保证每一个组件的数据是独有的, 才把data定义为函数

同理:

• 父子传值, 子组件中的props中的值, 如果是引用数据类型且需要默认值, 组要写成 ()=> {}

---

Vue中 父组件 怎么调用 子组件 的方法?

---

v-if 和 v-show 区别

• v-if按照条件是否渲染
• v-show是display的block或none；

---

$route 和 $router的区别

1. $route是 “路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
2. $router是 “路由实例对象” 包括了路由的跳转方法，钩子函数等。

---

vue_426">vue几种常用的指令

• v-for 、 v-if 、v-bind、v-on、v-show、v-else

---

vue_431">vue常用的修饰符？

1. .prevent: 提交事件不再重载页面；
2. .stop: 阻止单击事件冒泡；
3. .self: 当事件发生在该元素本身而不是子元素的时候会触发；
4. .capture: 事件侦听，事件发生的时候会调用

---

vue_key__439">vue中 key 值的作用？

• key的作用主要是为了高效的更新虚拟DOM。
• 在diff算法中，key是为了在differ算法执行时更快的找到对应的节点(key具有唯一性),从而提高diff速度。

---

vue_445">vue等单页面应用及其优缺点

1. 优点： Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
2. 缺点： 不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

---

安全性能优化

懒加载的原理是什么?

• 不使用懒加载, webpack打包会把js代码放在一个文件, 文件体积相对大些, 第一次加载时间会多一些;
• 不使用懒加载, webpack打包会把懒加载的组件js, 单独放在一个文件, 文件体积相对小些, 加载时间会少一些

---

http + 浏览器

描述浏览器存储的几种方式, 以及特点

---

页面渲染html的过程

---

你所知道的http的响应码及含义?例如200、400、500

• 200 - 请求成功
• 301 - 资源(网页等) 被永久转移到了其它URL
• 304 - 客户端已经执行了GET，但文件未变化(刷新)
• 404 - 请求的资源(网页等) 不存在
• 500 - 内部服务器错误

---