前端知识点

前端知识点

HTML5与 CSS3.0 新特性?

html5的新特性:

添加了video，radio标签

添加了canvas画布和svg,渲染矢量图片

添加了一些列语义化标签header,footer,main,section,aside,nav等

input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）

添加了地理位置定位功能

CSS3新特性:

媒体查询（可以查询设备的物理像素然后进行自适应操作）

transform，transition，translate,scale,skelw，rotate等相关动画效果

box-shadow,text-shadow等特效

CSS3 @font-face规则,设计师可以引入任意的字体了

CSS3 @keyframes规则，可以自己创建一些动画等

2D、3D转换

添加了border-radius，border-image(图片边框)等属性(添加了圆角边框,将图片规定为包围div元素的边框)

Flex布局:

Flex布局，可以简便、完整、响应式地实现各种页面布局。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

Rem布局:

rem是 css 的长度单位，它是相对于 元素的 font-size 的相对值。假设 html { font-size: 20px; }，那么 1rem 就等于 20px。

ES6新特性:

块级变量let

块级常量const

箭头函数

模板字面量

解构赋值

const与 let :

使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明

使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值

箭头函数: =>

模板字面量: ( )

模板字面量用倒引号 ( `` )（而不是单引号( '' )或双引号( "" )）表示，可以包含用 ${expression} 表示的占位符

解构赋值:解构数组用[ ],解构对象用{ };解构赋值语法是一种Javascript表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

Vue: vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

Vue CLI: Vue CLI是一个基于 Vue.js 进行快速开发的完整系统 (脚手架)

Vuex: Vuex是一个专为 Vue.js 应用程序开发的状态管理模式

Vue-router: Vue Router是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

Axios: Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

从浏览器中创建 XMLHttpRequests

从node.js创建 http请求

支持Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF

ElementUI常用组件: 开关滑块弹框通知消息提示框分页走马灯面包屑

模块化、组件化开发:

模块化：是从代码的角度来进行分析，把一些可复用的代码，抽离为单个的模块；便于项目的维护和开发

组件化：是从UI角度来进行分析的，把一些可复用的 UI 元素，抽离为单独的组件；便于项目的维护和开发

组件化的好处：随着项目规模的增大，手里的组件越来越多；很方便就可以把现在的组件，拼接为一个完整的页面

微信小程序的开发流程:

1、注册

2、信息完善

3、开发小程序

4、提交审核和发布

mpvue框架: mpvue 继承自Vue.js，其技术规范和语法特点与 Vue.js 保持一致。

WeUI : WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

Vue

Vue的核心思想：组件化开发和数据驱动。

Vue生命周期的理解？8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

Vue数据双向绑定主要是指：

数据变化更新视图，视图变化更新数据;

组件之间的传值通信

1.父组件给子组件传值

使用props，父组件可以使用props向子组件传递数据。

2.子组件向父组件通信

父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。

Vue组件之间的通信

父子组件通信,props、emit、ref调用函数

兄弟组件通信，vuex、eventBus

你使用过Vuex吗？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

vuex有哪几种属性？

vuex具有五种属性: state、getter、mutation、action、module

vuex的state特性是？

vuex就是一个仓库，仓库里面放很多对象。state就是数据存放地，对应于一般vue对象里面的data；state里面存放的数据是响应式的

vuex的getter特性是？

getters可以对state进行计算操作，可以在多组件之间复用

vuex的mutation特性是？

action类似于mutation，action提价的是mutation，而是不是直接变更状态；

action可以包含任何异步操作

不用vuex会带来什么问题？

可维护性会下降，你要想修改数据，你得维护三个地方

可读性下降，因为一个组件里的数据，你根本看不出来是从哪来的

增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

Vue 3.0正走在发布的路上，Vue 3.0 的目标是让 Vue 核心变得更小、更快、更强大

说说你对SPA单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

基于上面一点，SPA相对对服务器压力小；

前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

初次加载耗时多：为实现单页Web应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；

SEO难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

v-if和 v-show 区分使用场景

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。

所以，v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

computed和 watch 区分使用场景

computed：是计算属性，依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch：更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

v-for遍历必须为 item 添加 key，且避免同时使用 v-if

（1）v-for 遍历必须为 item 添加 key

在列表数据进行遍历渲染时，需要为每一项item设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。

（2）v-for 遍历避免同时使用 v-if

v-for比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

vue-router路由模式有几种？

vue-router有3种路由模式：hash、history、abstract

hash:使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；

history :依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；

abstract :支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

路由守卫

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route提供的 可以方便地实现导航守卫（navigation-guards）。导航守卫（navigation-guards）

全局前置守卫

守卫方法接收三个参数：

to：即将要进入的目标路由对象

from：当前导航正要离开的路由

next：执行下一步

路由独享的守卫

使用方法与全局守卫相同

不同的是：全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由

MVC MVP MVVM的区别？

MVC: MVC之间的数据通信都是单向的。View(视图层)发送指令到controller(控制层)，完成业务逻辑后，要求Model(模型层)改变状态，匠心的数据发送到(view)视图层，用户得到反馈。

MVP:在MVP中，view和model之间没有任何通信关系，所有的通信和业务逻辑都放在presenter层中。View层发送指令到presenter层，presenter层处理业务逻辑，要求model层改变状态，完成状态修改之后，发送指令到presenter层，之后再通知view层做出改变。

MVVM: Model专门用来处理数据模型。View专门用来处理用户视图，ViewModel用来使view和model双向绑定，view的任何变化都会通知ViewModel,而model的任何变化也会通知ViewModel，无论哪一项发生改变，都会使对应的视图/数据模型同时发生改变。

MVVM框架是什么？它和其它框架（Jquery）的区别是什么？哪些场景适合？

MVVM分为Model、View、ViewModel三者

Model代表数据模型，数据和业务逻辑都在Model层中定义

View代表UI视图，负责数据展示

ViewModel负责监听Model中数据的改变并且控制视图更新，处理用户交互操作：

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步

区别：这种模式实现了Model和 View的数据自动同步，因此开发时这需要要专注对数据的维护操作即可，而不需要自己操作dom 场景：数据操作比较多的场景，更加便捷

组件中data为什么是一个函数？

因为组件是用来复用的，且JS里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

封装vue组件的过程？

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模快，解决了我们传统项目开发：效率低、难维护、复用性等问题。

然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据递给父组件。可以采用emit方法。

html css js jQ Es6 ajax

简述javascript的优缺点。

优点：简单易用，与Java有类似的语法，可以使用任何文本编辑工具编写，只需要浏览器就可执行程序，并且事先不用编译，逐行执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；缺点：不适合开发大型应用程序；

JavaScript原型，原型链 ? 有什么特点？

①原型对象也是普通的对象，是对象一个自带隐式的 proto属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。②原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

事件绑定和普通事件有什么区别

①事件绑定就是针对dom元素的事件，绑定在dom元素上②普通事件即为非针对dom元素的事件

事件委托是什么

利用事件冒泡的原理，让自己的所触发的事件，由他的父元素代替执行！

new操作符具体干了什么呢?

①创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。②属性和方法被加入到 this 引用的对象中。③新创建的对象由 this 所引用，并且最后隐式的返回 this 。

你使用过jQuery吗？如果有，你为什么要使用jQuery呢？

1.用过。2.如果使用原生javascript开发的话，会面临很多问题，如浏览器兼容、Ajax数据解析、Dom、事件注册操作等都非常烦锁，而jQuery正好解决了这些问题。3.当然jQuery还有非常有用的其它特性，如为dom对象绑定数据、动画、等。并且jQuery还非常容易扩展，在它的基础上开发非常灵活，也有众多的插件可用，如jQueryUI

Javascript与jQuery有什么区别？

jquery就对javascript的一个扩展，封装，就是让javascript更好用，更简单。

在jQuery中如何注册事件？

使用bind()方法注册事件，但通常我们使用与事件同名的方法注册更方便，如：click()、hover()等。

说一下this

JavaScript函数中的 this 指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。

==和 === 的区别？

==会进行隐式转换，比较前将两个被比较的值转换为相同类型。然后比较两个值是否相等

===不进行隐式转换，会比较类型和值

null和undefined的区别？

undefined：类型只有一个，即undefined，当声明变量还未被初始化时就是undefined

null：类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

正则的i标记与g标记各有何用途？

i：不区分大小写；g：全局匹配。

如何阻止表单提交？

在onsubmit事件中返回false

输入框的验证用什么事件?

change(fn)

如何判断一个变量的值是否为数字？以及有哪些手段判断变量值的数据类型？

全局函数isNaN可以判断一个变量的值是否为数字。

src与href的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

如何获取一个元素的实际位置？

使用position()或offset()都可以。

bind()、unbind()、hover()有何用途？

bind()：注册特定事件。unbind()：删除特定事件。hover()：同时注册鼠标移入、移出事件。

什么是Ajax？

Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。

谈你对JSON的理解。

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。所以它往往在AJAX中替代XML，交换数据。

你的项目中有使用到跨域吗？你在项目中是如何处理JS跨域问题的？

①有。②主要是使用其它网站提供的javascript api如QQ。使用script的src可以直接读取跨域资源。③当然跨域还有其它处理方式：如代理服务器、改变domain、JSONP等。

解释jsonp的原理，以及为什么不是真正的ajax

①Ajax与JSONP这两种技术看起来很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery等框架都把JSONP作为Ajax的一种形式。②实际上Ajax与JSONP有着本质上的不同。Ajax的核心是通过XMLHttpRequest获取数据，而JSONP的核心则是动态添加