web前端第一次面试题

1、说一下css盒子模型。

• 由内到外顺序依次为：content->padding->border->margin
  

2、说一下盒子都有哪些属性？（追问）

• 内容（content）、内边距（padding）、边框（border）、外边框（margin）

3、解释下闭包？

• 函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。（拓：为什么要用闭包？因为它允许将函数与其所操作的某些数据（环境）关联起来。）

4、说一下promise的用法？

先了解什么是promise？Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。

Promise的作用：简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

• Promise是一个构造函数，自己身上有all、reject、resolve的方法，原型上有then、catch等的方法。
• 具体用法先略写

5、vue生命周期？

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

6、简单说一下es6里的应用或都有哪些东西？

• let和const命令

• 变量的解构赋值

• es6允许按照一定的模式从数组和对象中提取值，再对变量赋值，这被称为解构。（类似于映射）

• 使用箭头函数

• 箭头函数的优点：不绑定this、arguments；简化代码语法

• 不适用场景：对象的方法；不能作为构造函数；定义原型方法。

• Map数据结构（键值对的集合）

  Map常用属性及方法：

• size-返回Map结构的成员总数；

• set-存在便更新，不存在便创建；

• get-读取key对应的键值，找不到key，返回undefined。

• delete-删除某个键，成功返回true；失败返回false。

• 遍历：Map结构原生提供了3个遍历器生成函数和一个遍历方法。

1. keys()
2. values()
3. entries()
4. forEach()

• Module的语法

• export：使外部能够读取模块内的某个变量

• import命令：用于加载其他文件，并从中输出变量

• export default命令

• Promise对象

7、如何让一个盒子垂直居中？

• flex方法：
• .box {
  display: flex;
  align-items: center;
  }

8、flex布局都用到那些东西？

• justify-content:center;

  align-items:center;

9、如何让网页适配所有的设备屏幕？

• 使用响应式布局
• 采用流动布局
• 使用bootstrap框架
• 利用CSS的@media规则

10、== 与 ===的区别是什么？

• == 表示相等 （值相等）
  ===表示恒等（类型和值都要相等）
  js在比较的时候如果是 == 会先做类型转换，再判断值得大小，如果是=类型和值必须都相等。

11、ajax的好处是什么？

• 不刷新页面就可以向服务器发请求，并获得数据进行显示

  补充：ajax的缺点
  1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。
  2、安全问题
  ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
  3、对搜索引擎的支持比较弱。
  4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。
  5、违背了url和资源定位的初衷。例如，有一个url地址，如果采用了ajax技术，也许在该url地址下面看到的和别人在这个url地址下看到的内容是不同的。
  6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，如手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的。

12、css应用的样式属性都有哪些？（举例说明）

• 从字体、背景、透明度、层级、滑动效果、内外边距等属性进行展开

13、var、let与const的区别？

• var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。（全局声明）
• let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。（局部声明，只在当前所在的代码块部分有效）
• const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

14、说一下对position的认识？（定位）

• static：默认的定位方式，应用该定位的元素在文案流内。此时 top, right, bottom, left 和 z-index属性无效。
• relative:应用该定位的元素在文档流内，他会占据原有的位置，从原有的位置进行偏移。
• absolute：应用该定位的元素会脱离文档流，他会自动向上级寻找定位的元素，当找到有定位的元素，就会以那个元素来进行相对定位，如果他的父级或祖先级没有定位的元素，就以body元素进行绝对定位，此定位会跟着页面滚动而滚动。
• fixed:应用该定位的元素会脱离文档流，此元素相对于屏幕视口的位置来定位，当页面滚动时，此元素不会随着页面滚动而滚动
• sticky：应用该定位的元素在文档流内，此元素会在文档的正常位置，此元素在它父元素的容器内是类似fixed定位，当他与后续的块级元素粘粘时，他会被顶走

15、说一下前端存储方式都有哪些？

• cookies、localstorage、sessionstorage、web SQL、indexedDB

16、追问：localstorage与sessionstorage的区别？

• localstorage：HTML5加入的以键值对为标准的方式。其优点是操作方便，永久性储存（除非手动删除），大小为5M，兼容IE8+。
• sessionstorage：与localstorage基本相似，区别是当sessionstorage当页面关闭后会被清理，而且与cookie、localstorage不同，它不能在所有同源窗口中共享，是会话级别的存储方式。

17、npm的作用？（包管理工具）

• 依赖包的安装、卸载，模块的更新、搜索及创建

18、绑定事件都有哪些？/如何通过什么实现事件的绑定？

• 1.原生dom事件的绑定,采用的是addEventListener实现
• 2.组件绑定事件采用的是$on方法（v-on或简写@）

19、怎么实现数据的双向绑定？

• 编译模板：包括v-model、v-text等
• 数据变化的时候，会动态更新到视图上，使用的Object.defineProperty()，进行数据劫持。
• 通过Watcher观察数据的变化，然后重新编译模板，渲染到视图上

20、用过哪些编译软件？

• vscode、HBuilder X、webstorm

21、你是如何调试网页css样式的？

• 利用web浏览器**F12开发者工具**或者是编译器插件

22、说一下vuex？

vuex是专门用来管理vue.js应用程序中状态的一个插件。它的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

vuex 中最关键的是store对象，这是vuex的核心。

store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数，这个参数中可以包含5个对象：

• 1.state – 存放状态
• 2.getters – state的计算属性
• 3.mutations – 更改状态的逻辑，同步操作
• 4.actions – 提交mutation，异步操作
• 5.mudules – 将store模块化

23、vue全家桶都有哪些东西？

• 脚手架vue-cli：官方定义为Vue.js 开发的标准工具。
• Vue Router 是：Vue.js 官方的**路由管理器**。
• Vuex：专为 Vue.js 应用程序开发的状态管理模式。它采用**集中式存储**管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
• Axios：一个**基于 promise 的 HTTP 库**，可以用在浏览器和 node.js 中，常用于处理ajax请求。
• 搭配**UI框架**如：iview、vant、elementUI
  • iview ：一套基于 Vue的高质量UI 组件库(分为小程序和pc端等不同版本)
  • vant ：轻量、可靠的移动端 Vue 组件库,是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库,旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。
  • Ant Design Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
  • elementUI ：基于 Vue 2.0 桌面端中后台组件库。