前端面试题及答案2019
--------------------------------------面试题-----------------------------------------
1 vuex的五个状态
VueX 是一个专门为Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成vue 组件里的某些data )。
Vue有五个核心概念，state, getters, mutations, actions, modules。
state => 基本数据==data
getters => 从基本数据派生的数据==computed
mutations => 提交更改数据的方法，同步！==methods
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
2 vue周期(钩子函数) created可获取数据Mounted可操作DOM
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
分为三个阶段：初始化、运行中、销毁。
beforeCreate：实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作
Created：挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
beforeMount：接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
Mounted：接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom 等事情...
beforeUpdate：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom 机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
Updated：当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
beforeDestroy：当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
Destroyed：组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以
钩子函数的的实际应用
beforecreate : 举个栗子：可以在这加个loading事件
created：在这结束loading，还做一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy：你确认删除XX吗？destroyed ：当前组件已被删除，清空相关内容
3 cookie、localstroge、localSeesion的区别
共同点：都是保存在浏览器端，且同源的。
区别：安全性、大小、有效期、作用域
1 cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
4 get和post区别
get参数通过url传递，post放在request body中。传递路径
get请求在url中传递的参数是有长度限制的，而post没有。长度限制
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。安全
get请求只能进行url编码，而post支持多种编码方式编码方式
get请求会浏览器主动cache，而post支持多种编码方式。
get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。保存
GET和POST本质上都是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
5 你是如何操持登录
1利用Token实现
APP登录成功后，服务器以某种方式，如随机生成N位的字符串作为Token，同时设置一个有效期，存储到服务器中，并返回Token给APP。
后续APP发送请求时，都要带上该Token，每次服务器端收到请求时，都要验证Token和有效期，Token数值对且在有效期内，服务器返回所需要的结果，否则返回错误信息，提示用户重新登录。
(这种方式目前使用的最多)
2利用Cookie实现
APP登录成功后，服务器创建一个包含session_id和Expires两个属性值的Cookie，存储在服务器中，并发送给APP。
后续APP发送请求时，都要带上一个包含此session_id的Cookie，每次服务器端收到请求时，都要验证session_id和有效期，session_id数值对且在有效期内，服务器返回所需要的结果，否则返回错误信息，提示用户重新登录。
6 vue怎么实现双向数据绑定
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter。这也正是Vue不兼容IE8以下的原因。
发布者-订阅者模式：订阅是请求在某些事件(event)到达时可以通知它并执行对应的动作(action)，而发布则相对的是向订阅告知事件(event)已经到达，你可以执行对应的动作(action)了。
7 promise 的简述
Promise 是异步编程的一种解决方案，通俗的来讲Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。
应用场景
1 解决回调地狱比如我们经常可能需要异步请求一个数据之后作为下一个异步操作的入参
2 promise 可以实现在多个请求发送完成后再得到或者处理某个结果
最简单的实现
基于上面的应用场景发现promise可以有三种状态，分别是pending 、Fulfilled、Rejected。
Pending Promise对象实例创建时候的初始状态
Fulfilled 可以理解为成功的状态
Rejected可以理解为失败的状态
构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject。
Promise上还有then方法，then 方法就是用来指定Promise 对象的状态改变时确定执行的操作，resolve 时执行第一个函数（onFulfilled），reject时执行第二个函数（onRejected）当状态变为resolve时便不能再变为reject，反之同理。
基本api
(1)new Promise
(2)PromiseObj.then(resolveFn,rejectFn)
resolveFn：就是Promise对象成功的回调处理函数，指向resolve
rejectFn：就是Promise对象失败的回调处理函数
(3)Promise.all() 这个静态方法的参数是一个可迭代的对象,这个对象的item应该都是promise 对象，若不是的话，就会先调用上面的Promise.resolve(item)方法转换成新的promise对象。Promise.all()方法返回的也是一个promise对象。
(4)PromiseObj.resolve() 将一个值，数字，字符串...转换为Promise对象
(5)Promise.reject(reason) 方法返回一个用reason拒绝的Promise。你可以这样理解，返回的这个promise对象在初始化的时候，什么都没有做，直接给reject(‘your reject reson’)
8 es6的了解
es6是一个新的标准，它包含了许多新的语言特性和库，是JS实质性的一次升级。
新增模板字符串` `（为JavaScript提供了简单的字符串插值功能）
箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）for-of（用来遍历数据—例如数组中的值。）
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
arguments对象可被不定参数和默认参数完美代替。
ES6将promise对象纳入规范，提供了原生的Promise对象。
增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用
域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令
class命令声明的全局变量，不属于全局对象的属性。
还有就是引入module模块的概念
9 路由拦截
主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。
* to: Route: 即将要进入的目标路由对象 \$route (常用)
* from: Route: 当前导航正要离开的路由
* next: Function: 一定要调用该方法来resolve 这个钩子。执行效果依赖next 方法的调用参数。
* next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed （确认的）。
* next(false): 中断当前的导航。如果浏览器的URL 改变了（可能是用户手动或者浏览器后退按钮），那么URL 地址会重置到from 路由对应的地址。
* next(‘/’) 或者next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
10 vue路由传值（主要使用三种方法）$router.push/ name+params/ path+query
方案一
getDescribe(id) {
// 直接调用$router.push实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
// 方案一，需要对应路由配置如下：{
path: '/describe/:id',
name: 'Describe',
component: Describe
}// 很显然，需要在path中添加/:id来对应$router.push 中path携带的参数。
// 在子组件中可以使用$route.params.id来获取传递的参数值。
方案二
// 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
// 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。{
path: '/describe',
name: 'Describe',
component: Describe
}
//子组件中: 这样来获取参数$route.params.id
方案三
// 父组件：使用path来匹配路由，然后通过query来传递参数这种情况下query传递的参数会显示在url后面?id=？
this.$router.push({
path: '/describe',
query: {
id: id
}
})
// 对应路由配置：{
path: '/describe',
name: 'Describe',
component: Describe
}
// 对应子组件: 这样来获取参数$route.query.id
// 这里要特别注意在子组件中获取参数的时候是$route.params 而不是$router
11 从输入URL到页面加载的过程
1 DNS解析
2 TCP连接
3发送HTTP请求
4服务器处理请求并返回HTTP报文
5浏览器解析渲染页面
6连接结束
12 js冒泡排序（双重for循环+if判断+交换位置）
204 （无内容）服务器成功处理了请求，但没有返回任何内容。
205 （重置内容）服务器成功处理了请求，但没有返回任何内容。
206 （部分内容）服务器成功处理了部分GET 请求。
3xx （重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。
300 （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者(user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对GET 或HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置）请求者应当对不同的位置使用单独的GET 请求来检索响应时，服务器返回此代码。
304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305 （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
4xx（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
400 （错误请求）服务器不理解请求的语法。
401 （未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403 （禁止）服务器拒绝请求。
404 （未找到）服务器找不到请求的网页。
405 （方法禁用）禁用请求中指定的方法。
406 （不接受）无法使用请求的内容特性响应请求的网页。
407 （需要代理授权）此状态代码与401（未授权）类似，但指定请求者应当授权使用代理。408 （请求超时）服务器等候请求时发生超时。
409 （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
410 （已删除）如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度）服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的URI 过长）请求的URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型）请求的格式不受请求页面的支持。
416 （请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值）服务器未满足"期望"请求标头字段的要求.
5xx（服务器错误）
这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
500 （服务器内部错误）服务器遇到错误，无法完成请求。
501 （尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持）服务器不支持请求中所用的HTTP 协议版本。
HttpWatch状态码Result is
200 - 服务器成功返回网页，客户端请求已成功。
302 - 对象临时移动。服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
304 - 属于重定向。自上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
401 - 未授权。请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
404 - 未找到。服务器找不到请求的网页。
2xx - 成功。表示服务器成功地接受了客户端请求。
3xx - 重定向。表示要完成请求，需要进一步操作。客户端浏览器必须采取更多操作来实现请求。
例如，浏览器可能不得不请求服务器上的不同的页面，或通过代理服务器重复该请求。
4xx - 请求错误。这些状态代码表示请求可能出错，妨碍了服务器的处理。
5xx - 服务器错误。表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
14 js中的原型链
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype 又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
应用：
原型链是实现继承的主要方法。
15 闭包是什么，有什么特性，对页面有什么影响
通俗的讲：就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。
闭包的特性：
①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非
闭包主动向外界提供访问接口；
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被
调用之后，闭包结构依然保存在
系统中，闭包中的数据依然存在，从而实现对数据的持久使用。
优点：
①减少全局变量。
②减少传递函数的参数量
③封装；
缺点：
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等.
16怎么实现跨域请求
1、jsonp
最常见的一种跨域方式，其背后原理就是利用了script 标签不受同源策略的限制，在页面中动态插入了script，script 标签的src 属性就是后端api 接口的地址，并且以get 的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去。jsonp 只能发送get 请求。
2、CORS
Cross-Origin Resource Sharing（跨域资源共享）是一种允许当前域（origin）的资源（比如html/js/web service）被其他域（origin）的脚本请求访问的机制。
当使用XMLHttpRequest 发送请求时，浏览器如果发现违反了同源策略就会自动加上一个请求头origin，后端在接受到请求后确定响应后会在Response Headers 中加入一个属性
Access-Control-Allow-Origin，值就是发起请求的源地址(http://127.0.0.1:8888)，浏览器得到响应会进行判断Access-Control-Allow-Origin 的值是否和当前的地址相同，只有匹配成功后才进行响应处理。
现代浏览器中和移动端都支持CORS（除了opera mini），IE 下需要8+
3、服务器跨域
在前后端分离的项目中可以借助服务器实现跨域，具体做法是：前端向本地服务器发送请求，本地服务器代替前端再向真实服务器接口发送请求进行服务器间通信，本地服务器其实充当个「中转站」的角色，再将响应的数据返回给前端
缺点：服务器跨域需要另起服务器
4、postmessage跨域
在HTML5 中新增了postMessage 方法，postMessage 可以实现跨文档消息传输Cross Document Messaging，IE8，Firefox 3，Opera 9，Chrome 3 和Safari 4 都支持postMessage。
该方法可以通过绑定window 的message 事件来监听发送跨文档消息传输内容。
使用postMessage 实现跨域的话原理就类似于jsonp，动态插入iframe标签，再从iframe 里面拿回数据
，私认为用作跨页面通信更加适合
总结
当然还有其他实现跨域的方式比如在ie8、9下XDR 跨域方案，flash 方案，以上是一些常用的跨域方案，都各有利弊，比如：jsonp 只能发送get 请求、服务器跨域需要另起服务器等等，大家可以根据自己项目需求选择适合的解决方案，
17 介绍一下js的同源策略---安全
同源策略是由Netscape 提出的著名安全策略，是浏览器最核心、基本的安全功能，它限制了一个源（origin）中加载文本或者脚本与来自其他源（origin）中资源的交互方式
，所谓的同源就是指协议、域名、端口相同。
当浏览器执行一个脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域
18 引入样式表的方式
内样式、内部样式表、外部样式表。
一行内样式
使用style属性引入CSS样式。
二内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
三外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
19 面向对象、面向过程的区别
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。
面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。
面向过程
优点：性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源;比如单片机、嵌入式开发、Linux/Unix等一般采用面向过程开发，性能是最重要的因素。
缺点：没有面向对象易维护、易复用、易扩展。
面向对象
优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护
缺点：性能比面向过程低
20 面向对象的特点
1.封装
所谓封装，就是将客观事物封装成抽象的类，并且类可以把数据和方法让可信的类或者对象进行操作，对不可信的类或者对象进行隐藏。类就是封装数据和操作这些数据代码的逻辑实体。
在一个类的内部，某些属性和方法是私有的，不能被外界所访问。通过这种方式，对象对内部数据进行了不同级别的访问控制，就避免了程序中的无关部分的意外改变或错误改变了对象的私有部分。
2.继承
继承有这样一种能力，就是能使用现有的类的所有功能，并无须重新编写原来的这些类的基础上对这些功能进行扩展。通过继承创建的新类称为子类或派生类，被继承的称为基类。继承有两种，一种是实现继承，另外一种是接口继承。实现继承可以直接使用基类的属性和方法而无需额外编码，接口继承是指使用属性和方法的名称，但是子必须提供实现的能力。
3.多态
所谓多态就是对一个实例的相同方法在不同的情形下有不同的表现形式。多态机制使得不同内部结构的对象可以共享相同的外部接口，这就意味着，虽然不同的类的内部操作不同，但可以通过一个公共的类，它们可以通过相同的方式予以调用。
21 jquery动画
jQuery animate() 方法用于创建自定义动画。
语法：$(selector).animate({params},speed,callback);
必需的params 参数定义形成动画的CSS 属性。
可选的speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的callback 参数是动画完成后所执行的函数名称。
22 数组去重
1.遍历数组法它是最简单的数组去重方法（indexOf方法）
实现思路：新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中；
var arr=[2,8,5,0,5,2,6,7,2];
function unique1(arr){
var hash=[];
for (var i = 0; i < arr.length; i++) {
if( hash.indexOf(arr[i])==-1){
hash.push(arr[i]);
}
}
return hash;
}
2.数组下标判断法调用indexOf方法，性能和方法1差不多
实现思路：如果当前数组的第i 项在当前数组中第一次出现的位置不是i，那么表示第i 项是重复的，忽略掉。否则存入结果数组。
function unique2(arr){
var hash=[];
for (var i = 0; i < arr.length; i++) {
if(arr.indexOf(arr[i])==i){
hash.push(arr[i]);
}
}
return hash;
}
3.排序后相邻去除法
实现思路：给传入的数组排序，排序后相同的值会相邻，然后遍历排序后数组时，新数组只加入不与前一值重复的值。
function unique3(arr){
arr.sort();
var hash=[arr[0]];
for (var i = 1; i < arr.length; i++) {
if(arr[i]!=hash[hash.length-1]){
hash.push(arr[i]);
}
}
return hash;
}
4.优化遍历数组法（推荐）
实现思路：双层循环，外循环表示从0到arr.length，内循环表示从i+1到arr.length
将没重复的右边值放入新数组。（检测到有重复值时终止当前循环同时进入外层循环的下一轮判断）
function unique4(arr){
var hash=[];
for (var i = 0; i < arr.length; i++) {
for (var j = i+1; j < arr.length; j++) {
if(arr[i]===arr[j]){
++i;
}
}
hash.push(arr[i]);
}
return hash;
}
5.ES6实现
ES6中新增了Set数据结构，类似于数组，但是它的成员都是唯一的，其构造函数可以接受一个数组作为参数，如：
let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
let set = new Set(array);
console.log(set);
// => Set {1, 2, 3, 4, 5}
ES6中Array新增了一个静态方法Array.from，可以把类似数组的对象转换为数组，如通过
querySelectAll方法得到HTML DOM Node List，以及ES6中新增的Set和Map等可遍历对象，如：let set = new Set();
set.add(1).add(2).add(3);
let array = Array.from(set);
console.log(array);
// => [1, 2, 3]
23 盒子居中
1）使用CSS方法：
父盒子设置：display：table-cell；text-align：center；vertical-align：middle；
Div设置：display：inline-block；vertical-align：middle；
2）使用CSS3 transform：
父盒子设置：display：relative
Div设置：transform：translate(-50%，-50%)；position：absolute；top：50%；left：50%；
24 jsonp的使用
最常见的一种跨域方式，其背后原理就是利用了script 标签不受同源策略的限制，在页面中动态插入了script，script 标签的src 属性就是后端api 接口的地址，并且以get 的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去。
25 vue组件之间的传值问题
组件关系可分为父子组件通信、兄弟组件通信。
1、父组件向子组件：
父组件可以使用props 把数据传给子组件。
2、子组件向父组件：
子组件可以使用$emit 触发父组件的自定义事件。
子组件用$emit （）来触发事件，父组件用$on（）来监昕子组件的事件。
父组件可以直接在子组件的自定义标签上使用v-on 来监昕子组件触发的自定义事件。
3、兄弟之间的通信：
通过实例一个vue实例Bus作为媒介const bus = new Vue()，要相互通信的兄弟组件之中都引入Bus，之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。
26 性能优化
（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN 托管，data缓存，图片服务器。
（2）前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部。或者懒加载。
（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
27 深拷贝
28 vue中ref的作用是什么？
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的$refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例
注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册怎么防止元素重复绑定事件
29 Proxy
Vue 框架开发的时候，会遇到跨域的问题，可在config/index.js 里配置proxyTable内容，使用proxy 代理。
// config/index.js 文件
proxyTable: {
'/api': {
target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号
changeOrigin: true, // 跨域
pathRewrite: {
'^/api': '/'
}
}
},
这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替比如我要调用'http://192.168.149.90:8080/xxx/duty?time=2017-07-07 14:57:22'，直接写
‘/api/xxx/duty?time=2017-07-07 14:57:22'即可
在dev.env.js 里配置开发环境请求地址
// config/dev.env.js 文件
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
ADMIN_SERVER: '"/api/"',
});
若请求插件用的axios，配置如下
const adminServer = axios.create({
baseURL: process.env.ADMIN_SERVER,
});
30 写一个函数，来验证是否为有效的手机号
// 判断是否为手机号
isPoneAvailable: function (pone) {
var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!myreg.test(pone)) {
return false;
} else {
return true;
}
},
// 判断是否为电话号码
isTelAvailable: function (tel) {
var myreg = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
if (!myreg.test(tel)) {
return false;
} else {
return true;
}
},
31 用html，css实现一个品字布局的页面display:inline-block margin-left:-200px
32 写一个函数解析url中参数的部分，并返回解析后的js对象const parseQueryString = url=>{
var json = {};
var arr = url.substr(url.indexOf('?') + 1).split('&');
arr.forEach(item=>{
var tmp = item.split('=');
json[tmp[0]] = tmp[1];
});
return json;
33 写一个函数对数组由大到小的排序
//创建数组元素arr
var arr=[7,13,34,3,200,100,4];
//创建每次循环存储最大值得变量
var max;
//遍历数组，默认arr中的某一个元素为最大值，进行逐一比较
for(var i=0; i //外层循环一次，就拿arr[i] 和内层循环arr.legend次的arr[j] 做对比 for(var j=i; j if(arr[i] //如果arr[j]大就把此时的值赋值给最大值变量max max=arr[j]; arr[j]=arr[i]; arr[i]=max; } } } document.write(arr.toString()+" //200,100,34,13,7,4,3 34 css position有哪些值他们的作用和定位原点是什么 1 fixed 固定定位，相对于浏览器窗口进行定位 2 absolute 绝对定位，相对于值不为static的第一个父元素进行定位。 3 relative 相对定位, 相对于其正常位置进行定位。 4 static 默认值。没有定位，元素出现在正常的流中。 5 inherit 规定从父元素继承position 属性的值。 35 简述css3实现动画的方式 1、设置transition设置过渡，添加transform设置形状，形成动画效果，如下： .divadd { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; transform:rotate(360deg); -ms-transform:rotate(360deg); /* IE 9 */ -webkit-transform:rotate(360deg); /* Safari and Chrome */ } 此种方式比较小众，不易控制 2、添加animation属性，设置动画效果，如下： .a1 { position: absolute; animation: a1 3s; opacity: 0 } @keyframes a1 { 0% {left: 10px;opacity: 0} 30% {left: 60px;background-color: pink;font-size:23px;opacity: 1} 90% {left: 100px;background-color: red;opacity: 1} 100% {left: 10px;opacity: 0} } 36 什么是css预处理器、后处理器 CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件 二、分类(重点) Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS CSS 后处理器是对CSS 进行处理，并最终生成CSS 的预处理器，它属于广义上的CSS 预处理器。我们很久以前就在用CSS 后处理器了，最典型的例子是CSS 压缩工具（如clean-css），只不过以前没单独拿出来说过。还有最近比较火的Autoprefixer，以Can I Use 上的浏览器支持数据为基础，自动处理兼容性问题。 CSS 后处理器框架Rework 37 简述一下你了解的html5的新特性 1、离线缓存。可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。 2、音频视频自由嵌入，多媒体形式更为灵活。 3、地理定位。地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。 4、Canvas绘图，提升移动平台的绘图能力。使用Canvas API可以简单绘制热点图收集用户体验资料，支持图片的移动、旋转、缩放等常规编辑。 5、丰富的交互方式。提升互动能力：拖拽、撤销历史操作、文本选择等。 6、开发及维护成本低，这个相对于原生APP开发来说。更低的开发及维护成本;?使页面变得更小，减少了用户不必要的支出;而且，性能更好使耗电量更低。 7、CSS3 视觉设计师的辅助利器的支持。CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。 8、html5调用手机摄像头和手机相册、通讯录等功能。 38 浏览器的内核分别是什么 IE:trident内核 Firefox：gecko内核 safari：webkit内核 opera：以前是presto内核，现在改用google chrome的Blink内核 Chrome：Blink（基于webkit，google与opera software共同开发） 39 开发过程中内存泄漏情况，如何解决的 1、全局变量：由于JavaScript对未声明变量的处理方式是在全局对象上创建该变量的引用。如果在浏览器中，全局对象就是window对象。变量在窗口关闭或重新刷新页面之前都不会被释放，如果未声明的变量缓存大量的数据，就会导致内存泄露。 (1). 未声明变量：a = '我是未声明的变量a，我缓存了数据，如果数据足够大的话，就会内存泄漏' (2). 通过this也会创建全局变量，当在全局作用域中调用一个函数，这个函数内部用this.var的方式创建了一个变量，此时this指向的是全局对象(window)，而不是'undefined'如： function leak() { this.variable = "potential accidental global" } leak() 2、闭包(closures): js函数内可以直接读取全局变量，但是函数外不能读取函数内的局部变量。这时候在函数f1内再声明一个函数f2调用局部变量，然后返回函数f2，在f1的外部声明一个变量result赋值为f1，再调用result，就是一个闭包的例子。 function f1(){ var n = 999; function f2(){ alert(n); }return f2; }var result = f1(); result(); // 999 闭包可以读取函数内部的变量，然后让这些变量始终保存在内存中。如果在使用结束后没有将局部变量清除，就可能导致内存泄露。 3、事件监听(EventListener)对同一个事件重复监听，但是忘记移除，会导致内存泄露。 4、其他原因 console.log打印的对象不能被垃圾回收，可能会导致内存泄露。 setInterval也可能会导致内存泄露。 前端如何检查内存泄露？ (1).使用Chrome的开发者工具profiles来进行快照对比。 (2).如果是在Node环境下，可以用Node提供的process.memoryUsage()方法来检查内存泄露: Web前端开发笔试题集锦 HTML/CSS篇 1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a__a1a__a1a__a1a__"); 2，截取字符串abcdefg的efg var str = "abcdefg"; if (/efg/.test(str)) { var efg = str.substr(str.indexOf("efg"), 3); alert(efg); } 3，判断一个字符串中出现次数最多的字符，统计这个次数 //将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数 var str = "abcdefgaddda"; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } } /*遍历这个hash table，获取value最大的key和value*/ var max = -1; var max_key = ""; var key; for (key in obj) { if (max < obj[key]) { max = obj[key]; max_key = key; } } alert("max:"+max+" max_key:"+max_key); 4，IE与FF脚本兼容性问题 (1) window.event： 表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象 (2) 获取事件源 1、常用那几种浏览器测试？有哪些内核(Layout Engine)? 答： (Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。 (Q2) 内核：Trident，Gecko，Presto，Webkit。 2、说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）答： (Q1) 行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。 (Q2) 兼容性：display:inline-block;*display:inline;*zoom:1; 3、清除浮动有哪些方式？比较好的方式是哪一种？ 答： (Q1) （1）父级div定义height。 （2）结尾处加空div标签clear:both。 （3）父级div定义伪类:after和zoom。 （4）父级div定义overflow:hidden。 （5）父级div定义overflow:auto。 （6）父级div也浮动，需要定义宽度。 （7）父级div定义display:table。 （8）结尾处加br标签clear:both。 (Q2) 比较好的是第3种方式，好多网站都这么用。 4、box-sizing常用的属性有哪些？分别有什么作用？ 答： (Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度 之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内 进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的 宽度和高度。 5、Doctype作用？标准模式与兼容模式各有什么区别? 答： (Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不 存在或格式不正确会导致文档以兼容模式呈现。 (Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防 止站点无法工作。 6、HTML5 为什么只需要写？ 2019年教师招聘考试面试常见试题及答案（卷一） 1、现在常常提的“以学生为本”或“以学生为主体”，你怎样理解? 答：现在强调以学生为本、发挥学生的主体性，有利于激发学生学习的积极性和创造性。但是并不是什么事情都是根据学生的喜好来确定，怎样才能做到真正的“以学生为本”呢?我有如下的看法：教师在教学的过程中起主导作用。因为教师经过专门训练，对于所教育的知识具有一定的权威性，对于课程经过专门的培训，知道自己任教的课程需要掌握到什么样的程度。在教育过程中先进行仔细去分析，了解学生学习中已有的水平，在学习中将会有哪些困难等都做到心中有数。因为从事过多年的教学，对于内容的处理，已经把握做到心中有数。教师是成人，很多事情考虑问题都比学生全面，学生表现出来的不成熟性等也决定了教师的主导作用。教师的主导作用表现在对教学活动的领导、组织、指导和检查。在课堂教学中老师在课前对一节的内容，以及要达成什么样的目标要做到心中有数。对学生的情况要进行详细的了解，以及可能存在的问题进行分析。合理组织教学使学生能更好理解教学的内容，对于学生中存在的问题要进行相应的指导，为了巩固教学那样还要布置学生作业，并进行检查。同时还要充分发挥评价的激励功能和检查指导功能。 2、你为什么想做老师? 我选择做老师主要是有以下几方面的原因： 首先，我热爱教师这个职业，咱们国家就有自古倡导尊师重教的 思想，作为教师，会受到更多的社会认同和尊重。 第二，我有有能力胜任这个岗位。我应聘的是会计老师，我本科和硕士均修的会计学专业，对这么学科涉及的理论知识有很好的理解和把握。我有6年的上市公司财务工作经验，对财务工作的业务流程十分熟悉，负责过资产、税务、成本、总账等各个模块的会计工作，对接过审计，还曾负责编写了公司2014及2015年两年的同期资料，先后使用过浪潮、用友以及更为先进的oracle等财务软件，对软件的操作十分熟练，会计这门学科是以实务操作为主要应用目的的学科，因此我认为实践经验的丰富是我的一大优势，我一定能发挥好自己的所长，做个好老师。 第三，我的性格也很适合做老师，我喜欢和学生们相处，做事踏实，有耐心，这些也都符合教师的职业特点。通过对自我的深度剖析，我认为我是适合做老师的，所以我来参加此次考试，希望能够有幸走上讲台。 3、做好一个教师固然离不开敬业、爱生、专业知识扎实，除了这些，你认为教学的最重要特质是什么? 做好一个教师除了有敬业、爱生、专业知识扎实这些特质外，我认为教学最重要的特质还有以下一些：1 乐业2高尚的师德，人品，个人修养3良好的表达能力，为人处事能力 1、你如何理解职业教育? 职业教育是指让受教育者获得某种职业或生产劳动所需要的职业知识、技能和职业道德的教育。包括各类高等职业教育，中等职业 1. 要动态改变层中内容可以使用的方法有（AB ） a)innerHTML b)innerText c)通过设置层的隐藏和显示来实现 d)通过设置层的样式属性的display属性 2. 在javascript里，下列选项中不属于数组方法的是（B）； a)sort() b)length() c)concat() d)reverse() 3 、var emp = new Array(3); for(var i in emp) 以下答案中能与for循环代码互换的是: （选择一项）。(D ) A for(var i =0; i c)getElementsByName() d)bgColor() 6. 、display属性值的常用取值不包括(C ) a)inline b)block c)hidden d)none 7. 以下有关pixelTop属性与top属性的说法正确的是。(D ) a)都是Location对象的属性 b)使用时返回值都是字符串 c)都是返回以像素为单位的数值 d)以上都不对 8. 使用open方法打开具有浏览器工具条,地址栏,菜单栏的窗 口，下列选项正确的是__D__ a)open("x.html","HI","toolbas=1,scrollbars=1,status=1"); b)open("HI","scrollbars=1,location=1,status=1"); c)open("x.html","status=yes,menubar=1,location=1"); d)open("x.html","HI","toolbas=yes,menubar=1,location=1"); 9. 、javascript中表达式parseInt(“X8X8”)+paseFloat(‘8’)的结果是什么?( C) a)8+8 b)88 c)16 d)“8”+’8 10. 关于setTimeout(“check”,10)中说法正确的是( D) 前端开发的面试题 web前端面试题 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题，通过对知识的整理以及经验的总结，重新巩固自身的前端基础知识。 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面 内容、提供打印版本而不需要复制内容、提高网站易用性; 2.xhtml和html有什么区别 HTML是一种基本的WEB语言，XHTML是一个基于XML的置标语言 最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 用于声明文档使用那种规范(html/Xhtml)一般为严格过度基于框架的html文档 加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug 4.行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素：div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:内容，border ,margin，padding 5.CSS引入的方式有哪些? link和@import的区别是? 内联内嵌外链导入 区别：同时加载 前者无兼容性，后者CSS2.1以下浏览器不支持 Link 支持使用script改变样式，后者不可 6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高? 标签选择符类选择符 id选择符 继承不如指定 Id>class>标签选择 后者优先级高 7.前端页面有哪三层构成，分别是什么?作用是什么? 结构层 Html 表示层 CSS 行为层 js 8.css的基本语句构成是? 选择器{属性1:值1;属性2:值2;……} 9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto) 10.写出几种IE6 BUG的解决方法 1.双边距BUG float引起的使用display 2.3像素问题使用float引起的使用dislpay:inline -3px 3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active 4.Ie z-index问题给父级添加position:relative 5.Png 透明使用js代码改 6.Min-height 最小高度 !Important 解决’ 7.select 在ie6下遮盖使用iframe嵌套 1. 如何显示/隐藏一个DOM元素？ 更改元素的css style，设为display: none。此外还可以将visibility设为hidden，透明度设为0，或长、宽设为0。 2. 一个定宽网页在浏览器（IE6，IE7，Firefox，IE5）中横向居中对齐的布局， 请写出主要的HTML标签及CSS。 1. 2. 3. 15. 3. CSS中margin和padding的区别 margin是外边距，属于元素之外，相邻元素的margin可以融合。 padding是内边距，在元素之内，相邻元素的padding不可融合。 4. JavaScript中如何检测一个变量是一个String类型？请写出函数实现 function(obj) { returntypeof(obj) == ”string”; } 5. 网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态 显示“××年还剩××天××时××分××秒” 这个看我论坛右上角的就知道了… 6. 如何控制网页在网络传输过程中的数据量 题目貌似有问题，应该是减少数据量吧。 最显著的方法是启用GZIP压缩。此外保持好的编码习惯，避免重复和css、 JavaScript代码，多余的HTML标签和属性。 7. 补充代码，是鼠标单击后Button1到Button2的后面 2019年特岗教师招聘面试面试题及答案 1、新课改与新课程标准的价值取向是什么？ 新课程标准的价值取向是要求教师成为决策者而不是执行者，要求教师创造出班级气氛、创造出某种学习环境、设计相应教学活动并表达自己的教育理念等等。 2、为什么学生会偏科？ 学生偏科有很多因素，专家认为兴趣、态度是最主要的。你有心去学一门功课，无论周围有什么影响你，你都可以坚持下去。兴趣也是主要的，但只有你有这个心去学习，不管你是否喜欢这门功课，你都会变得比以前更加感兴趣。老师也只能叫你如何去学，即使他教得不好，但只有你有心，还是回学好的。 3、做好一个教师固然离不开敬业、爱生、专业知识扎实，除了这些，你认为教学的最重要特质是什么？ 首先、敬业、爱生、专业知识扎实，我认为一个好教师还要乐业，这一点也很重要。其次，健康尤其是心理和精神健康、再有就是需要得到社会的认可和支持。学生满意，喜欢听！专家个人认为师德、人品及个人的修养。良好的表达能力及为人处事能力；爱心与责任心。 4、你赞同“教学有法、但无定法、贵在得法”这种提法吗？为什么？ 同意“教学有法、但无定法、贵在得法”这种提法，教学的方法有很多，但要因材施教。专家很赞同，因为学生是人，作为个体，都有其特殊性。老师要想教好学生，一定要有扎实的基本功，同时也要注意方法，好的方法和得体的方法可以让学生更好的接受老师传授的知识，如孔子也提出了因材施教的主张。 5、学生记忆有什么特点，学科教学如何提高学生的识记能力？ 动机的诱发——培养记忆能力的基础二、兴趣的培养——提高记忆能力的前提三、方法的指导——提高记忆能力的关键。 6、你认为一种科学的备课方法是什么？平时你是怎样备课的？ 备课是教师的一项基本功。备出一份好的教案是上好一堂课的重要前提，也能使教师教学更有底气，甚至变得胸有成竹。同时，好的教案设计也直接影响学生的学习兴趣、方式、效率等多个方面，最终对整个课堂课的教学效果起到决定性的作用。专家认为无论是哪门学科，教师真正要备好一堂课，就必须脚踏实地，并结合自身和学生的实际，进行创造性地研究和设计。 （1）“研读”是备课的必要前提； （2）“博学”是备课的重要基础； （3）“细致”是备课的基本要求； （4）“创新”是备课的成功亮点。 7、你同意“没有不合格的学生，只有不合格的教师”这句话吗？ 1. 要动态改变层中内容可以使用的方法有( AB ) a) i nn erHTML b) i nn erText c) 通过设置层的隐藏和显示来实现 d) 通过设置层的样式属性的 display 属性 2. 当按键盘 A 时，使用onKeyDown 事件打印event.keyCode 的结果是(A ) a) 65 b) 13 c) 97 d) 37 3.在javascript 里，下列选项中不属于数组方法的是( B )； a) sort() b) l e ngth() c)con cat() d) r everse( ) 4.下列哪一个选项可以用来检索被选定的选项的索引号 ?(B) a)disabled b) selectedl ndex c) opti on d) multiple 5.希望图片具有”提交”按钮同样的功能，该如何编写表单提交？(A ) 6. 使div 层和文本框处在冋一行的代码正确的是 (D ); a) b) c) d) 7. 下列选项中，描述正确的是(选择两项)。(AD ) a)options.add(new Option(,a?,'A?))可以动态添加一个下拉列表选项 b)option.add(new Option(,a?,'A?))可以动态添加一个下拉列表选项 c) n ew Optio n(,a?,'A?)中？a 表示列表选项的值,?A 用于在页面中显示 d) n ew Option(,a?,'A?)中?A 表示列表选项的值,?a 用于在页面中显示 8. 、 var emp = new Array(3); for(var i in emp) 以下答案中能与for 循环代码互换的是：(选择一项)。(D ) A for(var i =0; i 2019年教师招聘面试题 一、问题：当在你上课时，一个学生在传纸条，你怎么办？ 答案： 1、用眼神暗示他，引起他的注意，让他聚精会神的听课。 2、边讲课边走到他的课桌边，用手敲打他的书桌，提示他，让他聚精会神的听课。 3、课后把他叫到办公室，给他讲清楚，传纸条的危害，让他今后注意上课认真听讲。 其实这是一个开放性试题，答案不唯一，只要围绕这三个要点，说法正确就可以。 二、问题：学生早恋怎么办？你支持学生早恋吗？ 参考答案：“不支持，但也不生硬地反对。先了解学生情况，分析早恋的原因。通过在班上开展讨论，让学生明白青春的可贵，爱情的神圣——很多人只是因为空虚，寂寞，贪玩而随便、不负责任地把爱情当游戏……有必要的话，可以找学生单独谈话，动之以情，晓之以理。” 讨论：我会和他/她讨论如何对待这种“爱慕”，而不能叫爱情。 我比较喜欢私下沟通，上升到班级讨论会不会让孩子难为情呢？ 这也是人生一道彩虹! 三、问题：你对工资和福利有什么期望? 回答：我对工资没有硬性要求。我相信贵公司有一个薪酬标准，在处理我的问题上会友善合理。我注重的是找对工作机会，所以只要条件公平，我则不会计较太多。 四、问题：“为什么要选择教师这个行业”、“你是怎么看教师这个工作的”? 回答：我读的就是师范类的专业，做教师符合自己的专业，而且现在公司之类的工作不够稳定，教师稳定性比较高，现在好的学校对教师的培养很好，也能为教师提供很大的发展空间等。 对孩子的爱心、耐心和责任心，更多了一份成熟和自信。教师这个职业是神圣而伟大的，他要求教师不仅要有丰富的知识，还要有高尚的情操。因此，在读师范时，我就十分注重自身的全面发展，广泛地培养自己的兴趣爱好，并学有专长，做到除擅长绘画和书法外，还能会唱、会说、会讲。“学高仅能为师，身正方能为范”，在注重知识学习的同时我还注意培养自己高尚的道德情操，自觉遵纪守法，遵守社会公德，没有不良嗜好和行为。我想这些都是一名教育工作者应该具备的最起码的素养。 五、问题：教师要耐得住寂寞、清贫、教师要守住这片净土，你为什么选择教师这个行业？参加教师招考进行教师队伍你的动机是什么？你觉得做教师的伟大之处在哪里？ 回答：做一名光荣的人民教师一直以来是我的梦想，也是我最真实的理想，虽然我从教已经有十几年了，但我还没有成为真正意义上的教师，所以我要报考教师这个职业，并不是因为听了“教师是太阳底下最光辉的职业”这句话，而是因为我非常了解这个职业，也非常热爱这个写满奉献、充满挑战的职业，因为在这里有着可爱的孩子，令人敬佩的同事们，他们都已成为人生路上不可磨灭的一笔。 教师在精神上是富裕的，是其它行业所不能比拟的，因为我们从事的是伟大的事业，是令人尊敬的事业，至少我们的灵魂是幸福的。如果上天要我选择财富的富有和灵魂的幸福，我想我会毫不犹豫地选择后者，这可能就是我选择教师这个职业的根本原因吧！ 六、问题：做班主任吃亏吗？回答： 根据我十多年的教学经历来说，我觉得做班主任还是比较合算的。我的想法有以下几点：（一）、能吸取先进的教育理念，提高自己的教学管理水平。班主任既要完成学科教学任务，又要做好管家，大事小情都要做到有的放矢。从直观上来说可能学习的时间相对较少。但是从另一方面，为了能经常吸取先进的教育理念，我经常收看、收集与教育有关的信息，在潜移默化中提高了自己的管理水平。 （二）、交流经验，加快自己的成长步伐。班主任工作纷繁复杂，为了取得较好的管理效果，我经常和其他班主任互相交流自己的育人经验，有失误的败笔，也有成功的喜悦。大家在互相交谈中多了几份留意和思考，多了几份关注和细心。同行间的交流与思考似一道强劲的催化剂，加快了我成长的步伐。 （三）、增强了反思精神。学一学，听一听是班主任积累经验的过程，现代信息条件下的网络技术为班主任发展提供了平台，我写教育札记、教育日记，写同孩子们相处的成长故事，并粘贴在网络上进行交流，后来干脆建立了自己的教育博客，成立了自己的家园。写一写，让我品尝到了交流带来的成功和快乐，班主任工作极大的炼就了我的反思精神。 所以说，做班主任虽然辛苦，但对我快速成长为一名优秀的教师却有些不可估量的作用。 七、问答：谈谈你的缺点 常规思路：①不宜说自己没缺点；②不宜把那些明显的优点说成缺点；③不宜说出严重影响所应聘职位的缺点；④不宜说出令人不放心、不舒服的缺点；⑤可以说出一些对于所应聘职位“无关紧要”的缺点，甚至是一些表面上看似“缺点”，从工作的角度看却是优点的“缺点”。 点评：这个问题上是各种教人面试技巧中，最“害人”的。考官问这个问题，是想测试一个人的成熟度、对自己的判断、和学习改进能力。说出自己有什么缺点，其实一点都不重要。这里重点测评的是面试者是不是真正的对自己有一个正确的评价，而且一般在问这类问题的时候，我喜欢让面试者举出一两件具体事例，这样更具有真实性。尤其是用上面的思路5来回答，纯粹是把面试官当成XXX，难道他们听不出来吗？如果这样回答，应聘者在面试官心中一定减分不少。 八、问答：请你自我介绍一下 常规思路：①介绍内容要与个人简历相一致；②表述方式上尽量口语化；③要切中要害，不谈无关、无用的内容；④条理要清晰，层次要分明；⑤事先最好以文字的形式写好背熟。 点评：我个人在面试中一般喜欢用这个作开场白，这个问题其实已经心里有数，只是作开场白而已，然后对阅读简历中发现的问题，在开场白的时候找机会了解。在回答这个问题的时候一定要想好细节，考官在这个时候一般都会追问几个细节。一般编造的简历和经历在这个过程中都会“穿帮”。 九、问答：你有什么业余爱好？ 常规思路：①业余爱好能在一定程度上反映应聘者的性格、观念、心态，这是招聘单位提问的主要原因；②最好不要说自己没有业余爱好；③不要说自己有那些庸俗的、令人感觉不好的爱好；④最好不要说自己仅限于读书、听音乐、上网，否则可能令面试官怀疑应聘者性格孤僻； ⑤最好能有一些户外的业余爱好来“点缀”你的形象。 点评：这个问题一般也问的不多，在面试大学生时提问的概率高些。如果在面试有工作经验人 第1页（共6页）第2页（共6页） 1)display:inline兼容所有的浏览器。请判断这句话的正确与否。 T F 2)从四个选项选出不同的一个。 a.
");Web前端开发笔试题集锦(已读)
最新web前端面试题(及答案)
2019年教师招聘考试面试常见试题及答案(卷一)
前端工程师面试题题及答案(全面综合)
前端开发的面试题
WEB前端面笔试题总结
2019年特岗教师招聘面试面试题及答案
web前端研发工程师笔试题选择题带答案
2019年教师招聘面试题
前端面试题第二套