インタビューのフロントエンドを終えビル、

HTML、CSS関連

どのように浮動要素が垂直方向に中央揃え

• 親のボックスには、その幅を持っています

トップ親要素、子要素の絶対位置、相対位置：50％;左：50％。約半分の高さ、幅の負のマージン

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

• いいえアスペクト親ボックスありません

上下決定サブボックスが全て0、余裕ある位置決め親ボックスの相対位置、オート。

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

CSSは、3つのプロパティとセレクタの優先順位についての話します

CSS 3つの特徴：継承の優先順位、積層
セレクタの優先順位:!重要>インラインスタイル> IDセレクタ>クラスセレクタ>タグ>ワイルドカード>継承されています

ボックスモデルについて簡単に説明

ボックスモデル：コンテンツ+パディング+ボーダー+マージン

私はこのことをあらかじめコンパイルのレスを使用している？それは、これらのメソッドを使用しました

CSSは、事前にコンパイラの少ないCSSの文章のスタイルを再定義し、スタイルはネストされただけでなく、変数や関数を定義することができます

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

これら2色のグラデーションCSS3があります。

線形勾配プロパティが使用されlinear-gradien
、半径方向勾配プロパティが使用されていますradial-gradient

C3 H5て、コメントを追加し、それらの機能についての話

H5は、主のようないくつかの意味タグを追加header、nav、mainなどだけでなく、オーディオ、ビデオ、およびその他のローカルストレージ技術。
CSS3は、いくつかの属性セレクタ、擬似クラスセレクタ、過度の添加transition、2D3D回転transform、アニメーションanimation、等

ページ間の通信を達成するための方法は何、その違いは何ですか

あなたは新しいネイティブH5ストレージ・テクノロジーを使用することができますlocalstorageローカルのハードディスクにデータを格納し、
使用するcookieストレージを、sessitionStorageの
違い：cookieより良い互換性はなく、わずかなストレージボリュームは、セッションデータの終わりには、4キロバイト、短いライフサイクルを消失し、安全ではない可能性が高いときハイジャック。他の2つは、同じ、大規模なストレージ容量、長い貯蔵時間ではありませんが、手動で削除しない限り、それ以外の場合は消えません。

レムのEMとの違いについての話

CSSの単位主PX、EMは、レム
PXユニットは、固定画素であるが、ページサイズが変更に適応することはできません設定
それらは相対的長さの単位であり、より柔軟に関連してEMとPXのREMを、長さではないことを意味します応答性のレイアウトのためのより適切な、死んで与えられました。
EM 親要素に対して、REM ルート要素は、（HTMLを参照します）

フレックスの弾性特性のレイアウトについてのトーク

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 //换行 

制御要素は、それらの隠された道を示し、違いは何ですか

display:noneそして、visibility:hidden
display:none制御隠し要素がの位置占有していない
visibility:hidden隠された要素を、しかし、スペースの要素を保持します

JS-関連

どのように、追加、削除、移動、コピー、作成、およびノー​​ドを検索します

1）创建新节点

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

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

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

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

文字列の配列を操作するのJS話法

私は、以前の記事でこれを持っていることは要約したものの上に

クロージャのご理解についての講演

変数のスコープにJSの閉鎖は、ローカル変数のスコープに分割されているので、理由として、グローバル変数とローカル変数関数JSでは、外部のグローバル変数へのアクセスは、定義されたが、機能が外部機能にアクセスすることができません内部に定義されたローカル変数。したがって、クロージャは内部機能にアクセスすることができない機能外部ローカル変数を解くために使用されます。
クロージャは内部関数で、サブルーチンのサブルーチンの戻りは、親関数で定義されたローカル変数にアクセスすることができます。これらの変数の値が記憶に残っていることを、避けるように、それは、関数内の変数を読み取ることができ、変数のグローバル汚染を。その結果としてガベージコレクションのブラウザを再利用することができない、ページがパフォーマンス上の問題を引き起こす可能性があり、メモリリーク

ガーベジコレクション

メモリリークを防ぐために、JSガベージコレクションのメカニズムは、意味がメモリリークがこのメモリブロックがまだ存在しているメモリを必要としないとき、ガベージコレクションは、もはや、断続的に使用見つけることに時間までの時間から変数であるということである、と彼らは、メモリを指して安心。

メモリにそれが指す変数のライフサイクルの終了後に解放されなければなりません。JS二つの変数、生成された関数でグローバルとローカル変数。機能の実行が終わった後に、ローカル変数のライフサイクルは、それはメモリ解放（すなわちごみ）を参照することができますが、ブラウザが閉じられたページになるまで、グローバル変数のライフサイクルが継続されます。

プロトタイプとプロトタイプチェーンについての講演

• プロトタイプ

JavaScriptは別のオブジェクトに、各コンストラクタは、prototypeプロパティを持っています。私たちは、インスタンスはプロトタイプオブジェクトに直接定義されたプロパティとメソッドを共有するために必要なすべてのオブジェクトを置くことができます。このオブジェクトのすべてのプロパティとメソッドは、所有権のコンストラクタになります。
Prototypeオブジェクトの内部プロパティとして、我々はによって、一般的に、直接アクセスすることはできません__proto__。このプロパティにアクセスします。
プロトタイプオブジェクトの属性でありconstructor、プロトタイプコンストラクタのインスタンスにすべてのポイントを作成するために、対応する属性

プロトタイプオブジェクトは、公共エリアに相当し、同じクラスのすべてのインスタンスは、プロトタイプオブジェクトにアクセスすることができ、我々はコンテンツをターゲットにすることができプロトタイプオブジェクトに共通する、統一されたセットです。

 

コンストラクタ - プロトタイプ.pngの関係 - 例

• プロトタイプチェーン

JavaScriptではすべてが対象であるが、被験者と物体との間の関係、孤立して存在しません。それは、このようにチェーンにプロトタイプのポイントを形成し、Objectオブジェクトを指しているまでJavaScriptでのオブジェクト間の継承関係は、親クラスのプロトタイプオブジェクトを指し示すことにより、オブジェクトである
私たちの訪問のオブジェクトのプロパティまたはメソッドは、それが最初のターゲットになるとき直接使用した場合には、プロトタイプオブジェクトを見つけるために、意志なしに、直接使用されている場合、自分自身を見つけるために。まだObjectプロトタイプで見つからない場合は、オブジェクトのプロトタイプオブジェクトを見つけるまで、プロトタイプ探しのプロトタイプに行かない場合は、プロトタイプオブジェクトはプロトタイプオブジェクトん、それはundefinedを返します。

 

少し醜いのプロトタイプチェーン.PNG画像

イベントメカニズムとイベントデリゲート

イベントフローの三段階：
イベントのキャプチャ
対象のステージでの
イベントバブリング

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

说一下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使用,比较臃肿,小型项目不建议使用