Building, finishing the front end of the interview

html, css related

How a floating element vertically centered

• Parent box have its width

The relative positioning of the parent element, the sub-element absolute positioning, top: 50%; left: 50%. negative margin of about one-half the height, width

.content{
    position: absolute;
    top: 50%;
    left: 50%; width: 100px; float: left; height: 100px; background-color: #ff6700; margin-top: -50px; margin-left: -50px; } 

• No aspect parent box

Parent box relative positioning, positioning the sub-boxes determined, up and down are all 0, margin: auto;

.content{
    width: 200px;
    height: 200px; background-color: #ff6700; float: left; margin: auto; position: absolute; left: 0; top: 0; bottom: 0; right: 0; } 

Css talk about the three properties and selectors priority

css three characteristics: inheritance priority, lamination
selector priority:! Important> inline style> ID selector> class selector> tag> wildcard> Inherited

Briefly about the box model

Box model: Content + padding + border + margin

I have used less of this pre-compiled it? It used those methods

css is less for a pre-compiler, redefines css writing style, the style can be nested, as well as defining variables and functions

<!--定义变量-->
@color: #ccc;
.content{
  background-color:@color;
}
<!--定义函数-->
.textCenter(@marginT: 10px){
  text-align:center;
  margin-top:@marginT;
}

There are those two color gradient Css3

Linear gradient property is used linear-gradien
radial gradient property is usedradial-gradient

C3 H5 and talk about those features added

H5 mainly added some semantic tags, such as header, nav, mainetc., as well as audio, video, and other local storage technologies.
Css3 added some attribute selectors, pseudo-class selectors, excessive transition, 2D3D rotation transform, animation animation, etc.

What are the methods to achieve communication between the pages, what are their differences

You can use the new native H5 storage technology localstorage, storing data to a local hard disk
to use cookiestorage, sessitionStorage
difference: cookiebetter compatibility, but only a small storage volume when 4kb, short life cycle, the end of the session data disappears, and likely to be unsafe hijack. While the other two are not the same, large storage volume, long storage time, otherwise it will not disappear unless manually deleted.

Rem em and talk about the difference between the

Units in the css mainly px, em, rem
px unit is a fixed pixel, but set a page size will not be able to adapt to change
em and px rem in relation to more flexible, they are relative length units, meaning that length is not given the dead, more suitable for responsive layout.
em with respect to the parent element , rem with respect to the root element (refer to the html)

Talk about the layout of the elastic properties of flex

justify-content： //子元素水平排列的方式
                center  //居中
                space-between  //两端对齐
                space-around   // 子元素拉手分布
                flex-start     // 居左 flex-end //居右 align-items ： // 子元素的垂直居中的排列方式 enter // 居中 flex-end //底部 flex-start //开始 align-content : //多行的时候，子元素的垂直排列方式 center //居中 flex-end //底部 flex-start //开始 flx-direction： // 排列方式row 横向排列 row-reverse //横向反向排列 flex-wrap ： //子元素是否在一行显示 no-wrap //不换行 wrap //换行 

Control elements show those hidden way, what's the difference

display:noneAnd visibility:hidden
display:nonecontrol hidden element does not occupy the position of
visibility:hiddenhidden elements, but retains elements of space

js-related

How to add, remove, move, copy, create, and find nodes

1）创建新节点

      createDocumentFragment()    //创建一个DOM片段

      createElement()   //创建一个具体的元素

      createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() （3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性 

Js talk method of operating an array of strings

I also have this in the previous article summarizes over

Talk about your understanding of closures

The reason why is because js closure in a variable scope, divided into local variable scope global variables as and local variables in the function js, access to external global variable defined, but the function can not access functions outside local variables defined in the interior. Therefore, the closure is used to solve local variables outside the function can not access the internal functions.
Closure is an internal function, a subroutine return in the subroutine can access the local variables defined in the parent function. It can read a variable inside a function, so that the values of these variables remain in memory, avoid variable global pollution . Resulting in it can not be recycled garbage collection browser, the page is likely to cause performance problems, memory leaks

Garbage collection

JS garbage collection mechanism to prevent a memory leak, the meaning is that when memory leaks do not need a memory this memory block still exists, garbage collection is variable from time to time to find intermittent no longer used, and relieved they point to memory.

After the end of the life cycle of a variable it points to memory should be released. JS two variables, global and local variables in the function generated. The life cycle of a local variable after function execution is over, then it can be referenced memory release (ie garbage), but the global variable life cycle will continue until the browser is closed page.

Talk about prototype and prototype chain

• prototype

JavaScript provides each constructor has a prototype property, to a different object. We can put all object instances need to share properties and methods defined directly on the prototype object. All the properties and methods of this object will be the constructor of ownership.
PrototypeAs the internal properties of the object, can not be accessed directly, we generally by __proto__accessing this property.
There are in the prototype object attribute constructor, the attribute corresponding to create all point to an instance of the prototype constructor

Prototype object is equivalent to a public area, all instances of the same class can access to the prototype object, we can target content are common, unified set to the prototype object.

 

Constructor - the relationship between the prototype .png - Example

• Prototype chain

In JavaScript everything is an object, but also the relationship between subject and object, not exist in isolation. Inheritance relationships between objects in JavaScript is an object by pointing to the parent class prototype object, until it is pointing up Object object, thus forming a prototype points to the chain
when a property or method of the object of our visit, it will first target in to find itself, if it is used directly, without the will to find the prototype object, if found directly use. If not then go to the prototype of the prototype looking until you find Object prototype object, the prototype object Object no prototype, if still not found in the Object prototype, it returns undefined.

 

Prototype chain .png picture of a little ugly

Event mechanism and event delegate

Three phases of the event flow:
event capture
in the target stage
event bubbling

事件委托:
事件委托是利用了事件的冒泡原理实现的,子元素的事件通过冒泡形式委托父元素执行

说一下JS面对对象有那些特性,怎样实现

• 对象三大特性:封装,继承,多态

• 封装:将面向过程每一步进行推进:对同种对象的属性和方法进行抽象，成为一个类(js中没有类的概念，实际上也是一个对象)，然后通过类的方法和属性来访问类

• 继承:在封装的基础上，将同类事物继续抽象，继承时，子类拥有父类的属性和方法，同时拥有自己特有的属性和方法

js的继承实现方法：
1.属性拷贝（浅拷贝）
2.属性拷贝（深拷贝）
3.原型式继承
4.原型链继承
5.借用构造函数
6.组合继承

• 多态:不同对象对同一事物做出不同的回应，通常出现在继承后对方法的重写

特点：对于同一个操作（指令），不同的对象表现出不同的反应 隐藏不同

谈谈你对同步异步的理解

• 同步:在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的，只有接收到返回的值或消息后才往下执行其他的命令。

• 异步:执行完函数或方法后，不必阻塞性地等待返回值或消息

• 区别:同步会阻塞程序的执行,效率低。异步可以同时执行多个程序,效率高

一次完整的HTTP请求是怎样一个过程

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

Ajax原理

ajax是用来实现页面异步加载,同步刷新。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
XMLHttpRequest对象的属性：
open准备发送请求的数据
send发送请求

onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值

Ajax中get请求和post有什么区别

GET和POST请求方式的差异
GET请求没没有请求体，请求的数据在xhr.open()里面拼接，xhr.send(null)
POST请求数据在xhr.send()里面，在设置请求体之前需要设置请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

解决跨域

产生跨域是因为浏览器的同源策略：域名 协议 端口必须保持一致

• CORS

在服务器端设置响应头
header("Access-Control-Allow-Origin:*")
这种方式需要前后台的一个配后,而且相对而言不安全

• JSONP

利用script标签src天然支持跨域的特征,将请求的地址写在src,在script里面定义一个处理函数,并把函数名传递给后台,后台接收并返回这个函数的调用,将传递的参数以函数形参的方式传递给前端
这种通过src放送的是一个同步请求,而且只能发送get请求,和ajax不一样

• 方向代理

通过访问第三方服务器,让第三方服务器帮我们发送请求.

es6你知道多少

• 字符串扩展
  includes断字符串中是否包含子字符串,第一个参数表示要测试的子字符串,第二个参数表示从那个位置开始查找,不传默认从索引0开始。
  startsWith判断字符串是否以特定的字符串开始
  endsWith判断字符串是否以特定的字符串结束
  字符串填充:padStart()和padEnd()可以对字符串进行填充

• 解构赋值
  数组的结构赋值

    // 解构
    
    let [a,b,c] = [1,2,3]; console.log(a,b,c); // 1 2 3 // 解构时设置默认值 let [a = 1,b,c] = [,5,6]; console.log(a,b,c); // 1 5 6 // 解构时没有的数据为undefined let [a = 1,b,c] = [4,5,]; console.log(a,b,c); // 4 5 undefined 

对象的解构赋值

let {name,age} = {name:'zxx',age:18} console.log(name,age); // zxx 18 // 顺序无关 let {name,age} = {age:18,name:'zxx'} console.log(name,age); // zxx 18 // 属性别名,一旦设置了别名,原来的名字就无效了 let {name:tag,age} = {age:18,name:'zxx'} console.log(name,age); // ReferenceError: name is not defined console.log(tag,age); // zxx 18 // 解构赋值时设置默认值 let {name:tag='zxx',age} = {age:18} console.log(tag,age); // zxx 18 

字符串的解构赋值

let [a,b,c,d] = 'zxx';

console.log(a,b,c,d); // z x x undefined

let [a,b,c,d] = 'zxx'; console.log(a,b); z x // 得到字符串长度 let { length } = 'zxx'; console.log(length); // 3 

• 扩展运算符
  合并数组

let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2]; console.log(arr3); // [1,2,3,4,5,6] 

• 箭头函数

let f = function(v) {
    return v; }; let f = v => v; 

• Promise

Promise 是异步编程的一种解决方案.简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，可以从改对象获取异步操作的消息。

// 1. 创建promise实例,在实例中执行异步操作(比如发送网络请求)
// 2. 异步操作成功时,调用reslove函数传递数据
// 3. 异步操作失败时,调用reject函数传递错误信息

const promise = new Promise(function(resolve, reject) { // 异步操作 if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } }); // 使用promise实例then方法接收reslove或reject返回的数据 promise.then(function(value) { // 此处数据即为reslove回来的数据 // success }, function(error) { // 此处数据即为reject回来的数据 // failure }); 

VUE相关

vue有那些指令

v-text v-bind v-for v-if v-on

谈谈MVVM

MVVM是一种分层次开发思想,它是CommonJS规范的实现
M代表module模型层
V代码view视图层
VM模型层和视图层之间没有任何的联系,而VM会充当一个调度者,将他们联系起来,实现双向数据绑定

组件化

从页面视图的角度出发，对页面功能的封装，实现项目可独立维护，可复用性大大提高

什么是Vue双向数据绑定?原理?

v-model指令、数据视图同步更新、使用的是ES5提供的Object.defineProperty()这个方法实现数据劫持

数据如何从模型同步到视图?当模型中数据发生变化时会触发Object.defineProperty的set方法,在这个方法内部能够劫持到数据的改变,然后就可以在该方法内部通知视图更新

视图中的数据如何同步到模型中?(v-model指令是怎么实现改变了元素中的数据同步到模型中)监听表单元素的change事件,在change事件中可以拿到用户输入的数据,然后给模型中的数据赋值

v-if和v-show的区别

v-if和v-show都是用来控制元素的显示和隐藏,当值是true，元素显示，值为false,元素隐藏

区别: v-if当切换布尔值时,会创建/删除元素；v-show当切换布尔值时,会改变元素的样式,display:block

Vue生命周期函数的理解?

生命周期就是在vue实例执行过程中会触发的一批函数,这些函数可以帮助我们处理不同时间段的业务逻辑

• 创建阶段
  • beforeCreatevue实例被创建出来,此时仅仅只是分配了内存,属性和方法都还没有挂载到vue实例上
  • created此时vue实例已经创建完毕,data中的属性和methods中的方法都已经挂载到vue实例上
• 渲染阶段
  • beforeMountvue实例中的数据被解析渲染到内存中的虚拟DOM上,真实中的DOM指令还没有被解析
  • mountedvue实例中的数据已经完全被渲染到了真实DOM中
    -更新阶段
  • beforeUpdate模型中的数据已经改变,但视图中的数据还没有同步更新
  • updated此时模型中的数据改变,视图层数据已经同步更新
• 销毁阶段
  -beforeDestroyvue中的数据和方法还能继续使用,但是指令不能再被vue解析
  • destroyedvue中的数据和方法都已经被销毁

说一下单向数据流

组件之间的传值,数据从父级组件传递给子组件，只能单向绑定。

• 父组件向子组件传值

  在父组件中定义数据,通过属性绑定的形式绑定到子组件上,在子组件中定义props接收传递过来的变量

• 子组件向父组件传值

  在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据第一个参数就是自定义的方法名,第二个参数就是需要传递给父组件的数据

  this.$emit('func',this.msg)
  

  在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的方法名同名

  <div id='app'>
     <son @func = 'getmsg'></son> </div> 

vue-router路由模式有几种,原理分别是什么?

vue-router路由库是用哪种技术实现的,总共有两种,分别叫hash模式和history模式,默认是hash模式

• hash模式:地址上带有#号;url地址可以放在任意标签中打开;可以兼容低版本的浏览器

  hash模式原理:监听hashchange事件,可以调用window.location.hash获取到锚点值,和路由规则进行匹配,匹配到之后将路由规则中定义的组件渲染到页面
  history模式:地址上没有#号,更加符合URL形式;url地址不能重复打开;

• history模式原理:利用HTML5新提供的history.pushState API 来完成 URL 跳转而无须重新加载页面

  history模式需要后台进行相关配置:要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

Vuex怎么用,它相对与localstorage有什么优点和缺点

vuex的核心是：state,getter,actions,mutations

• state用来定义存放公共数据

  this.$store.state.msg
  

• mutations定义方法

  this.$store.commit('change','我是被修改的数据')
  

• getters用于获取数据 进行一些操作 类似于Vue实例中的过滤器和计算属性

   this.$store.getters.fixmsg
  

• actionactions和mutations都是定义对数据进行操作的方法,mutations中都是同步方法,mutations中定义异步方法

  this.$store.dispatch('asyncchange','我是被异步修改的数据')
  

区别
localstorage无法实现双向数据绑定,模型层的数据改变视图中数据不会发生改变,vuex数据不能持久化,需要结合localstorage使用,比较臃肿,小型项目不建议使用