HTML5面试选题白夜书生

10.行内元素和块级元素的区别，怎么相互转换？

块级元素：

1、块级元素会独占一行，其宽度自动填满其父元素宽度。

2、可以设置width,height属性。（即使设置了宽度，也是独占一行的，除非用float属性等特殊情况）

3、可以设置margin(外边距)和padding(内边距)。

行内元素：

1、行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化（其宽度由内容撑开）。

2、设置width,height属性无效。

3、水平方向上的padding-left,padding-right,margin-left,margin-right产生边距效果，

但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生效果。

转换：给行内元素加上display:block这样的属性，让行内元素也有每次都从新行开始的属性。

给块级元素加上display:inline这样的属性，让块级元素不具有从新行开始的属性。

给行内元素加上display:inline-block属性，仍为行内元素，但是可以设置width及height属性等

11.CSS3中新增了什么布局方式？

除了上述布局方式外还有什么常用的布局方式？

1、文档流布局方式：这是最基本的布局方式，就是按照文档顺序一个一个地显示，块元素独占一行，内联元素共享一行。

2、浮动布局方式：某个元素浮动之后，其后面的元素就当其不存在而占用其原来的地方，按照原来文档流布局方式布局。

3、定位布局方式：通过position属性定位。

4、框架布局方式：BootStrap

13.CSS中的calc()有什么作用？用于动态计算宽高。

14.什么时候使用mm、cm？一个是毫米，一个是厘米，都是绝对长度单位，看网页、打印的需要

15.如果一个页面即要在屏幕上显示，又要打印，怎么将这2种样式定义在一起？

一般用媒体查询@mediaprint{}{h1{color:black;}}

@mediaprint里面的内容只对打印出来的内容有效，之外的内容就是屏幕显示的样式

16.媒体查询除了在打印时使用还在什么情况下使用？响应式布局（不同宽度的设备上使用）

17.在手机页面上使用图片，宽度为80%，怎么让图片居中？

text-align：center；或将其设置为display：block；为其父元素设置margin：0auto；

18.手机页面底部工具条中4个图标，怎么均分空间？设边框后最后一个掉下去怎么办？

使用bootstrap里面的class="colcol-25"设置样式box-sizing:border-box;也可设置width：25%

19.viewport是什么？什么时候使用？有什么作用？

viewport是用户网页的可视区域，做手机页面或响应式设计时,这样设计，用户可以通过平移和缩放来看页面的不同部分

20.box-sizing什么时候用？常用的值都有什么？

做自适应网页时；区域的大小调整的时候（边框线占据位置），border-box，content-box，inherit

21.vertical-align什么时候使用？常用的值分别有什么作用？

vertical-align用来定义行内元素的极限相对于该元素所在行的基线的垂直对齐。text-top:把元素的顶端与父元素内容区域的顶端对齐;text-bottom:居下;middle,上下居中;top;bottom;

22.CSS3中的transform都支持哪些变换效果？

translate(x,y)平移到（x,y），scale(0.5)缩小0.5倍Rotate(30deg)旋转30度，skew()倾斜matrix()定义2D转换，matrix3d(x,y,z)定义3D转换prespective(n)为3D转换元素定义透视视图

23.CSS3中的transition能否过渡opacity能否过渡display？

css3中的transition可以过渡opacity，不能过渡display

24.什么时候使用transition什么时候使用animation？

当使用js灵活设定动画属性时使用transition；当使用灵活定制多个帧以及循环的时候使用animation

25.简述bootstrap的栅格系统的特点，

(1)所有的行必须放在容器中：.container或.container-fluid(2)分为多行(row)，一行中平均分为12列(col)

(3)网页内容只能放在列(col)中，不能直接放在行(row)(4)可以在col中再嵌套row

(5)col分为四大类：col-xscol-smcol-mdcol-lg

(6)col-md-**值可为1~12，值就为某个列的宽度(*/12)

(7)可以为一个列指定不同屏幕下的不同宽度

(8)col-lg-*只对大PC屏幕有效；col-md-*对普通PC和大PC屏幕都有效；

col-sm-*对平板、PC、大PC屏幕都有效；col-xs-*对手机、平板、PC大PC屏幕都有效

(9).hidden-lg当前列只在大PC屏幕下隐藏；.hidden-md当前列只在PC屏幕下隐藏

.hidden-sm当前列只在平板屏幕下隐藏；.hidden-xs当前列只在手机屏幕下隐藏

26.怎么实现桌面4列、平板2列、手机1列？

1、桌面4列：.col-lg-3.col-md-3；2、平板2列：.col-sm-6；3、手机1列：.col-xs-12；4、媒体查询

27.页面上有一个aside标签，在桌面上是显示的，但平板和手机是隐藏的，怎么实现？

媒体查询@media(max-width:@screen-sm-max){aside{display:none}}

28.用过Less吗？它与CSS有什么不同？

less是css预处理语言，增加了变量、函数等特性。将CSS赋予了动态语言的特性，如变量，继承，运算，函数LESS既可以在客户端上运行(支持IE6、Webkit和Firefox)，也可以借助Node.js或者Rhino在服务端运行。LESS是一个动态的标准CSS样式表语言扩展，其有精简的代码更容易维护，less相比于css更加灵活。

29.知道SASS/SCSS吗？它与Less有什么不同？

1.Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。

2.变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样

3.输出设置，Less没有；输出设置，Sass提供4中输出选项：nested,compact,compressed和expanded。

4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

less基于javascript，在客户端处理，sass基于ruby，是在服务端处理的

JavaScript部分

01.javascript有哪几种数据类型

六种基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、对象(Object)、空（Null）、未定义（undefined）

02.怎么判断一个变量是否是数组？

instanceof()或者Array.isArray()或者Object.prototype.toString.call(arr)==='[objectArray]'

03.从文本框是得到value，怎么转换成整数？怎么转换成小数？整数:parseInt()小数:parseFloat()

04.整数怎么保留2位小数？保留2位小数后是什么类型2.toFixed(2)类型:string

05.typeof(function(){})返回什么？typeof([])返回什么？Function/object

06.函数内部arguments变量有哪些特性,有哪些属性,如何将它转换为数组

arguments所有函数中都包含的一个局部变量，是一个类数组对象，对应函数调用时的实参。如果函数定义同名参数会在调用时覆盖默认对象

arguments[index]分别对应函数调用时的实参，并且通过arguments修改实参时会同时修改实参

arguments.length为实参的个数（Function.length表示形参长度）

arguments.callee为当前正在执行的函数本身，使用这个属性进行递归调用时需注意this的变化

arguments.caller为调用当前函数的函数（已被遗弃）

转换为数组：varargs=Array.prototype.slice.call(arguments,0);

07.怎样得到浏览器窗口的宽度和高度？（IE和标准下有哪些兼容性的写法）

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于InternetExplorer、Chrome、Firefox、Opera以及Safari：

window.innerHeight-浏览器窗口的内部高度；window.innerWidth-浏览器窗口的内部宽度

对于InternetExplorer8、7、6、5：

document.documentElement.clientHeight/document.documentElement.clientWidth

或者document.body.clientHeight/document.body.clientWidth

实用的JavaScript方案（涵盖所有浏览器）：

varw=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

varh=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

08.JS中事件传播过程是什么？怎么阻止事件传播？

事件捕获(事件挖洞)：事件由祖先元素向子元素传递;事件冒泡：事件由子元素向祖先元素传递;

事件捕获和事件冒泡是事件流中的两个阶段，任何事件产生时，如点击一个按钮，将从最顶端的容器开始（一般是html的根节点）。浏览器会向下遍历DOM树直到找到触发事件的元素，一旦浏览器找到该元素，事件流就进入事件目标阶段，该阶段完成后，浏览器会沿DOM树向上冒泡直到最顶层容器，看看是否有其它元素需要使用同一个事件。

通过使用preventDefault()方法只取消默认的行为。

通过使用event.stopPropagation()停止事件的传播，但不会影响同级别的事件监听者，。

通过使用event.stopImmediatePropagation()立即停止事件的传播，停止同级别的多个事件监听者的调用。

09.栈和堆的区别？

栈区（stack）：由编译器自动分配释放，存放函数的参数值，局部变量的值等。

堆区（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。

堆（数据结构）：堆可以被看成是一棵树，如：堆排序；

栈（数据结构）：一种先进后出的数据结构。

10.document的DOMContentLoaded事件什么时候发生？window的load事件什么时候发生？

document的DOMContentLoaded所有DOM解析完触发；window的load事件所有页面元素加载完触发包括图片

11.什么是原型和原型链，原型链的作用？

在JavaScript中，每个对象都有一个内部属性[prototype],我们通常称之为原型.访问一个对象的原型可以使用ES5中Object.getPrototypeOf方法,或者ES6中的__proto__属性;

JS运行时在查找可调用的属性和方法时并不只查找一层原型，因为原型本身也是对象，因此JS运行时还会查找原型对象的原型，一直查找到Object的原型为止。这样就构成了一个链式结构，称为原型链。

原型链的作用：通过原型链可以形成类似继承的效果。比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的。

JS的原型链在Angular中还被用于构造作用域链。

12.怎样建立原型链？

//Object.create(proto[,propertiesObject])是E5中提出的一种新的对象创建方式，第一个参数是要继承的原型

ObjFunc.prototype=object.create(baseFunc.prototype)

ObjFunc.prototype.constructor=ObjFunc

12.什么是构造函数？与普通函数有什么区别

构造函数：是一种特殊的方法、主要用来创建对象时初始化对象，总与new运算符一起使用，创建对象的语句中构造函数的函数名必须与类名完全相同。与普通函数相比只能由new关键字调用，构造函数是类的标示

13.什么是闭包？闭包有什性质？

闭包：指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

性质：1.函数内再嵌套函数2.内部函数可以引用外层的参数和变量3.参数和变量不会被垃圾回收机制回收

说说js中的闭包和变量作用域？

一、变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

varn=999;functionf1(){alert(n);}f1();//999

另一方面,在函数外部自然无法读取函数内的局部变量。

functionf1(){varn=999;}alert(n);//error

functionf1(){n=999;}f1();alert(n);//999

二、如何从外部读取局部变量？

出于种种原因,我们有时候需要得到函数内的局部变量。但是正常情况下,这是办不到的；只有通过变通方法才能实现。那就是在函数的内部,再定义一个函数。

functionf1(){varn=999；functionf2(){alert(n);//999}}

在上面的代码中,函数f2就被包括在函数f1内部;这时f1内部的所有局部变量,对f2都是可见的;但是反过来就不行,f2内部的局部变量,对f1就是不可见的;这就是Javascript语言特有的"链式作用域"结构（chainscope）;子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗！

functionf1(){

varn=999;

functionf2(){

alert(n);

}

returnf2;

varresult=f1();

result();//999

三、闭包的概念

上一节代码中的f2函数,就是闭包。

各种专业文献上的"闭包"（closure）定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个:一个是前面提到的可以读取函数内部的变量;另一个就是让这些变量的值始终保持在内存中。怎么来理解这句话呢？请看下面的代码。

nAdd=function(){n+=1}

nAdd();

result();//1000

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制（garbagecollection）回收。

这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,

1、首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量;

2、其次,nAdd的值是一个匿名函数（anonymousfunction）,而这个匿名函数本身也是一个闭包,

所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点

1、由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2、闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象（object）使用,把闭包当作它的公用方法（PublicMethod）,把内部变量当作它的私有属性（privatevalue）,这时一定要小心,不要随便改变父函数内部变量的值。

六、思考题

如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。（首先考虑作用域this的指向）

代码片段一。

varname="TheWindow";

varobject={

name:"MyObject",

getNameFunc:function(){

returnfunction(){

returnthis.name;

};

alert(object.getNameFunc()());

代码片段二。

varthat=this;

returnthat.name;

14.JSON的了解？XML和JSON的区别？

了解：JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小；

区别：(1).数据体积方面：JSON相对于XML来讲，数据的体积小，传递的速度更快些。

(2).数据交互方面：JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

(3).数据描述方面：JSON对数据的描述性比XML较差。

(4).传输速度方面：JSON的速度要远远快于XML。

15.哪些地方会出现css阻塞,哪些地方会出现js阻塞？

js的阻塞特性：所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载（例如.图片,css文件等）。

*由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。

*嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,2种方式都会阻塞其后资源的下载。

也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

CSS怎么会阻塞加载了？

CSS本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6下CSS都是阻塞加载）

*当CSS后面跟着嵌入的JS的时候,该CSS就会出现阻塞后面资源下载的情况;

*而当把嵌入JS放到CSS前面,就不会出现阻塞的情况了。

根本原因：

*因为浏览器会维持html中css和js的顺序,样式表必须在嵌入的JS执行前先加载、解析完。

*而嵌入的JS会阻塞后面的资源加载,所以就会出现上面CSS阻塞下载的情况。

嵌入JS应该放在什么位置？1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。

2、如果嵌入JS放在head中,请把嵌入JS放在CSS头部。3、使用defer（只支持IE）

16.js中的this指向有什么特点？

js中的this与其它编程语言中的不同，js中的this指向的对象不是固定的，而是可以改变的（通过function对象的call、apply、bind，jQuery的proxy等可以改变this指向）。以下是this的默认指向：

1.定义在全局作用域中的普通函数中的this指向window对象（严格模式下本条无效，参见后面严格模式的说明）

2.事件处理函数中的this指向触发事件的标签元素，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

3.构造函数中的this指向当前正在创建的对象（严格模式下必须使用new）

4.原型中的函数内的this指向当前实例

其它框架中的函数内的this都有特定的指向，如jQuery.each(func)中func中的this指向当前迭代的标签元素对象。

17.怎么改变this指向？call和apply的区别是什么？call和bind的区别是什么？

随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。This一般指向当前被调用者。

改变this指向：通过call、apply、bind。

他们的区别：

Call（object，object）调用一个对象的一个方法，以另一个对象替换当前对象。

Apply(thisObj，[argArray])应用某一对象的一个方法，用另一个对象替换当前对象。

bind()，它会创建一个函数的实例，其this值会被绑定到传给bind()函数的值。

18.break和return的区别？

break是用来跳出循环的，例如for，while，do-while都可以跳出，但不跳出函数

return是使整个函数返回的，后面的不管是循环里面还是循环外面的都不执行

break语句通常用在循环语句和开关语句中,当break语句用于do-while、for、while循环语句中时,可使程序终止循环而执行循环后面的语句,通常break语句总是与if语句联在一起,即满足条件时便跳出循环return语句是将函数的值返回主调函数。

还有一个continue语句的作用是跳过循环本中剩余的语句而强行执行下一次循环。continue语句只用在for、while、do-while等循环体中,常与if条件语句一起使用,用来加速循环

19.简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

20.创建一个长度为100，值等于索引的数组。

vararr=[0,1,2,…,99];

vararr=newArray(100)；for(vari=0;i

vararr=Object.keys(Array.from({length:100}));

vararr=Object.keys(Array.apply(null,{length:100}));

vararr=Object.keys(Array.from({length:100})).map(function(item){return+item;});

vararr=Array.from(newArray(100).keys());

vararr=[...Array(100).keys()];

vararr=[...Array.from({length:100}).keys()];

23.js跨域请求的方式，能写几种是几种？CORS

1、通过jsonp跨域

2、CORS（Cross-OriginResourceSharing）跨域资源共享,需要服务器设置header：Access-Control-Allow-Origin。

3、通过修改document.domain来跨子域

4、使用window.name来进行跨域

5、使用HTML5中新引进的window.postMessage方法来跨域传送数据（ie67不支持）

6、nginx反向代理这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求

跨域访问与同源策略

在浏览器中，通过JS代码访问不同域名下的URL（JS的XHR/AJAX）或者iframe（JS访问iframe内部的DOM）时，会被禁止访问。而不是通过JS代码进行的跨域访问不存在跨域问题！比如可以跨域加载图片、引用JS文件、下载各种文件、使用iframe跨域嵌入其它网站的页面都是允许的。

跨域访问被禁止有时会给应用开发带来阻碍，但在符合特定条件时也有相应的方法在保证安全的情况下能够解决跨域访问的问题。

1、跨域资源共享（CORS：Cross-OriginResourceSharing）

在对方的服务器中的响应头中添加Access-Control-Allow-Origin允许哪些域进行跨域访问它是值可以是域名，或者*。这种方案只有在对方信任或不在乎（安全）的情况下才能使用。

在用Ionic开发WebApp时，通常会遇到浏览器端和服务端分离的情况，这时可使用CORS浏览器插件自动在响应头中添加Access-Control-Allow-Origin头。这样可以轻松实现开发时的跨域。

2、如果域名都是同一个根域名的子域名，则可以使用document.domain="根域名"来统一JS执行环境中的域名。这种方案只能在同一个公司或组织的内部使用。

不同的框架之间是可以获取window对象的,但却无法获取相应的属性和方法。

这个页面与它里面的iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

functiontest(){

variframe=document.getElementById('ifame');

varwin=document.contentWindow;

//可以获取到iframe里的window对象,但该window对象的属性和方法几乎是不可用的

vardoc=win.document;//这里获取不到iframe里的document对象

varname=win.name;//这里同样获取不到window对象的name属性

这个时候,document.domain就可以派上用场了:

这两个页面的document.domain为相同的域名就可以了。

2、但要注意的是：document.domain的设置是有限制的,

我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。

document.domain='example.com';//设置成主域

//contentWindow可取得子窗口的window对象

alert(document.getElementById('iframe').contentWindow);

//在iframe载入这个页面也设置document.domain,使之与主页面的document.domain相同

document.domain='example.com';

**修改document.domain的方法只适用于不同子域的框架间的交互**

3、JSONP：JSONPadding，原理是：浏览器不限制通过script标签引入其它网站的脚本，所以可以通过JS向页面上动态添加一个script标签并且指定其src为一个特殊的url，对方的服务器针对这个url的请求，会进行特殊处理。

这种方案可以跨域任意域名，但是必是对方有意这样设计才能使用。如果对方不支持将JSON数据padding到函数名后面的()中，则JSONP无法使用。

在jQuery中$.getJSON()这个方法支持JSONP!!!

在url后面加callback=即可，jQuery会自动生成函数名并将调用转交给getJSON中的回调函数。

$.ajax()方法也支持JSONP，设置type:’GET’，dataType:’jsonp’即可

4、将要请求的URL发送给自己的服务端，让服务端发起请求（服务端没有跨域限制），服务端请求成功后，将数据再回传给浏览中的JS----服务端代理请求。

这种方式只要自己的服务端支持一下就可以了，是比较常用的方案，没有任何限制，而且这种方安还可以实现其它方案无法实现的功能：

通过服务端抓取别人的网页，将网页上的数据提取出来，变成JSON返回

在Node.js中，使用cheerio模块可以像使用jquery一样从HTML字符串中筛选并提取想要的数据。

5、使用任何可以利用的浏览器端中间机制实现跨域交换数据

如：window.name在代码中使用name变量时实际上使用的是window对象的name属性，但是name属性是window对象的内部属性。它只接受字符串值，如果给它赋其它值，将会直接被转换成字符串！！！！尤其是赋一个对象给name变量的时候，会导致数据丢失！！！(对象toString()后是[objectObject])。但是name有一特别性质可以被用来做跨域数据交换name值不会随全局作用域被销毁，不管窗口跳转到哪个页面，不管窗口打开了多少个页面，name的值都是通用的。其它的，诸如location.hash也可以用来做跨域数据交换（主要是iframe）

使用HTML5的window.postMessage方法跨域：

window.postMessage(message,targetOrigin)方法是html5新引进的特性；可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

24.null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

undefined是一个表示"无"的原始值，转为数值时为NaN；

undefined表示“缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

2.调用函数时，应该提供的参数没有提供，该参数等于undefined

3.对象没有赋值的属性，该属性的值为undefined

4.函数没有返回值时，默认返回undefined

null表示“没有对象”，即该处不应该有值。典型用法是：

2.作为对象原型链的终点

25.ES6有什么新特性？

ECMA于2015年6月发布的JS标准（也被称作ECMA2015，该版本于2016年6月小幅修订）、目前在Node.js和桌面浏览器上已经完成了支持（主流的现代浏览器都支持），移动端的支持较弱（支持约50%的特性，Android由于碎片化严重，老机型支持更差），目前获得最广泛支持的是ES5.1。ES7预计在2017年发布。

ES6为JS带来了大量的新特性，是JS语言升级最大的一个版本：

1.支持let块级变量和const常量2.支持变量解构赋值

3.扩展了JS的核心对象

4.增强了语言反射能力（通过代码获取代码自身信息的能力，如一个类包含哪些方法）

5.增加了Promise6.支持Class定义类extends继承类

7.支持Module模块化8.支持迭代接口和生成器等

由于ES6现在还没有被所有浏览器支持，如果想在项目中使用ES6，而且还想保证浏览器兼容性，就需要使用转换工具将ES6转码成ES5。常用的转换工具有：

Traceur：由谷歌提供，可以在网页上就地转换，也可以在线转换、还可以使用Node.js命令行本地转换；

Babel：支持ES6语法转换，如果要支持新增加的API，则还需要使用babel-core。Babel目前由Facebook支持（因为Facebook的React给JS扩展了一套新的组件语法jsx，而这个语法需要babel来转换成普通js）。Babel推荐使用webpack之类打包工具进行转换，Babel也提供了babel-standalone支持浏览器转换，但不应在商业正式环境中使用。

模块化

JS的作用域隔离机制较弱，因此使用不当时会产生命名冲突的问题，尤其是在单页应用日益复杂、使用的第三方框架越来越多的情况下更容易产生冲突问题。而且JS本身没有直接提供使用代码加载其它脚本文件的机制。因此产生了JS模块化概念。

JS模块化通常要解决2个问题：提供定义JS模块的办法和提供按需加载模块及其依赖模块的办法

常用的JS模块化方案有以下几种：

1、Node.js中的模块化方案（通常称为CommonJS规范，最简单易用，通过约定取消了配置）

2、浏览器中使用中RequireJs（称为AMD规范）和SeaJs（称为CMD规范），这两个都需要配置

3、ES6中的模块化方案（无需配置）

目前在浏览器端使用最广泛的是RequrieJs（jQuery、Underscore、Backbone、Angular、ionic等流行的库和框架都支持），RequireJs通过AMD规范描述了定义和使用模块的方法，本身支持JS文件的按需加载，另外RequireJs还有很多官方和第三方插件可以实现各种文件（如HTML、CSS、其它文本文件等）的动态加载。

另外还需要注意的是Webpack打包工具支持混合使用Nodejs中的require()导及ES6中的import…from…，还支持直接从npm模块包中导入js，因此使用Webpack+npm也越来越流行，尤其是在React阵营中几乎成为主流。

组件化技术

自从HTML产生之后，就以其简单易出成果而被广泛应用，HTML的功能也越来越强大，标签数量也越来越多，到H5标签已经超过100个。但是希望自定义HTML标签的人并不会因为HTML标签越来越多而止步，他们的期望更高，那就是可以自由地增加HTML标签。于是产生了各种支持自定义标签的技术，都可以称之为Web组件化技术，常见的有：

现代浏览器支持的直接自定义新标签的技术（可以理解为是XML），在HTML代码中直接写新标签，默认是inline的，通过CSS可以给予更多的控制。老浏览器不支持。

通过Angular的指令或组件自定义标签。成熟，功能强大，商业应用广泛。ionic中就通过Angular定义了大量的UI控件。

通过Vue.js的组件定义标签。Vue.js中可以定义componet（组件），然后在模版中可以像标签一样使用（Vue.js见下文第三方库及框架列表）。

通过React组件定义标签。这种其实算不上自定义标签，因为它不是HTML，而是JS（所谓的标签其实是jsx组件，编译后变成了js，与HTML关系不大）。

WebComponents技术，由W3C提出的技术，有望成为未来的标准。允许直接从DOM的HTMLElement类继承出新标签。这种技术是多种Web新技术的综合，包含自定义标签类、template模板、shadow封装、import导入等，目前还处于试验阶段，除了谷歌外大多数公司都还没有提供支持，离商业应用还很远。

26.异步编程Promise/Deferred、多线程WebWorker

长期以来JS都是以单线程的模式运行的，而JS又通常应用在操作用户界面和网络请求这些任务上。操作用户界面时不能进行耗时较长的操作否则会导致界面卡死，而网络请求和动画等就是耗时较长的操作。所以在JS中经常要进行异步编程。而最基本的异步编程方法是事件和回调函数。但无论是事件还是回调函数在遇到稍微复杂一点的场景时都会变得难以使用。如时机问题、等待问题等。这时就产生了Promise的概念。

Promise可以保证无论什么时候添加回调函数，都能使回调函数得到恰当的调用；还能保证异步任务的状态不会被篡改。JS中的Promise有多种实现方案，它们的API各有不同，但核心概念都是相似的（jQuery3.x的Deferred已经向ES6靠拢）。

ES6支持Promise、提供了resolve、reject、then、catch、race、all等最基本的API。

jQuery则通过Deferred额外提供了进度通知及在外部改变状态的API，支持resolve、reject、then、done、fail、always、progress、notify、state等，还有通过$.when()支持类似all的功能，支持通过promise()转换成Promise对象（不是ES6中的Promise，而是表示一种不可从外部更改状态的Deferred）

Angular则支持$q，它即兼有ES6中Promise和jQueryDefferred的特点。

使用Promise可以将异步任务本身与后续业务完全分离，因此可以简化异步编程。通过.then()的链式调用还可以减少回调函数嵌套的层级，使代码更加易于阅读和易于理解。

JS在H5时增加了多线程API，即WebWorker。WebWorker是一个真正的分线程，与其它系统线程一样。但与其它编程技术中的多线程不同，它是通过消息机制与主线程交互的。因此可以理解为是放入沙盒中的线程。因为没有开放其它API，避免了产生线程死锁的可能，但功能上要弱一些。

27.怎样将两个对象混合在一起？$.extend()、Object.assign()

28.怎么在网页上实现兼容性较好的音视频播放器，并且还能优先使用H5技术？

29.在手机页面上一打开页面就自动播放音频有什么问题？

部分手机浏览器没法自动播放，添加autoplay="autoplay"属性

30.添加、移除、移动、复制、创建和查找节点的方法

1）创建新节点：createElement()、createTextNode()

2）添加、移除、替换、插入：appendChild()、removeChild()、replaceChild()、insertBefore()

3）查找：getElementsByTagName()、getElementsByName()、getElementById()

jQuery部分

01.jQuery支持哪些动画效果？

隐藏/显示淡入淡出滑动还可以自定义动画

fadeIn/fadeOut/fadeToggle(渐入渐出)，hide/show/toggle(隐藏出现)

SlideUp/SlideDown/SlideToggle(上下滑动)，animate()(自定义)

02.点击显示和隐藏怎么实现？

$("#hide").click(function(){$("p").hide();})$("#show").click(function(){$("p").show();});

03.动画执行完毕之后需要执行一段代码该怎么做？

jQ中自定义动画的时候$(selector).animate({},1000,easing,function(){动画完成后执行的代码})

04.jQueryDeferred都有哪些常用的方法？分别是什么作用？

.Deferred()生成一个deferred对象。

deferred.done()指定操作成功时的回调函数

deferred.fail()指定操作失败时的回调函数

deferred.promise()没有参数时，返回一个新的deferred对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署deferred接口。

deferred.resolve()手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。deferred.reject()这个方法与deferred.resolve()正好相反，调.0用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。

deferred.then()有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。

deferred.always()这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。

jQuery开发团队就设计了deferred对象。简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，deffer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行,它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。

05.对Deferred的then进行链式调用时有什么要求，有什么作用？

Deferred.then()相当于Deferred.done()、Deferred.fail()、Deferred.progress()的合体，可以同时注册3个状态下的回调函数。

06.Deferred的then链式调用和非链式调用有什么区别？

前一个要向后一个传递deffered对象。

then()返回的是一个新deffered对象then注册的回调函数的返回值将作为这个新deffered的参数,then()的作用也是指定回调函数，它可以接受三个参数，也就是三个回调函数。第一个参数是resolve时调用的回调函数，第二个参数是reject时调用的回调函数，第三个参数是progress()方法调用的回调函数。

07.jQuery3.0有什么新变化？

（2）、简化了show/hide之前的show/hide是大兼容，比如show，无论元素的display是写在style，stylesheet里都能显示出来。3.0则不同了，写在stylesheet里的display:none调用show后仍然隐藏。3.0建议采用class方式去显示隐藏，或者完全采用hide先隐藏（不使用css代码），再调用show也可以。

（3）、data方法兼容data-name-11：$('#txt').data()3.0版本输出{"name-11":aa}，之前版本输出{}

（4）、jQuery3.0运行在StrictMode下

（5）、引进for...of循环

（6）、动画方面采用新的API

（7）、对包含特殊含义的字符串提供转义的新方法：jQuery.escapeSelector()提供了对在CSS中存在特殊含义的字符串或字符进行转义的方法：比如：页面中某个ID为“abc.def”的元素由于选择器将其解析为ID为“abc”且包含一个名为“def”的类的对象，而无法被$("#abc.def")选定。但是它可以由$("#"+$.escapeSelector("abc.def"))来进行选定。

（8）、类操作方法支持SVG：jQuery3现在还无法完整的支持SVG，但是对于操作CSS类名称的jQuery方法，如.addClass()和.hasClass()现在可以将SVG文档作为目标。

（9）、延迟对象现在与JSPromises兼容

08.jQuery怎样添加和移除事件监听函数？通过on添加通过off移除

09.JQuery中如果某事件只需处理一次怎样添加监听函数？one()该方法绑定的事件触发一次后自动删除.

10.如果希望事件监听对以后添加到页面上的新标签也有效，应该怎么做？使用事件委托.on是事件委托

11.文件框中输入的内容变化时立即获得事件通知应该监听什么事件？

onchange事件是文本框内容改变并失去焦点的时候才触发；比较完美的解决办法：oninput和onproper

oninput是HTML5的标准事件，对于检测textarea,input:text,input:password和input:search这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像onchange事件需要失去焦点才触发；

oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代；

12.表单中进行什么样的操作会导致表单提交？如果希望阻止表单提交怎么办？

在form标签中添加Action(提交的地址)和method(post)，且有一个submit按钮（）就可以进行数据的提交，每一个input标签都需要有一个name属性，才能进行提交。

点击提交按钮时阻止默认提交event.preventDefault()阻止默认提交，在form表单监听表单提交事件(onSubmit)

13.jQuery中的proxy方法有什么作用？

jQuery.proxy()函数用于改变函数的上下文。你可以将指定函数传入该函数，该函数将返回一个新的函数，其执行代码不变，但函数内部的上下文(this)已经被更改为指定值。

14.jQuery中执行一个动画后，隔2s后再执行一个动画应该怎么写？

$().animate();//执行一个动画；$().delay(2000).animate()//2s后执行另一个动画

15.jQuery中怎么停止动画？停止后参与动画的标签元素会处于什么状态？

stop()在当前位置停止动画。停止：$(this).stop(false,true).animate();//当前动画直接到达末状态

16.jQuery中能不能改变动画频率？

jQuery.fx.interval属性用于改变以毫秒计的动画运行速率。可操作该属性来调整动画运行的每秒帧数。

默认值是13毫秒。该属性常用于修改动画运行的每秒帧数。

降低这个值能够使动画在更快的浏览器中运行得更流畅，但这么做也行会影响性能。

17.jQuery中能否在color或background-color等颜色值上实施动画？

18.jQuery插件有2种类型，分别是哪2种？

（1）封装对象方法的插件$(obj).lightbox();（2）封装全局函数的插件$.函数名(参数)

19.你用过哪些jQuery插件？全屏滚动插件焦点图插件无缝滚动插件swipper

20.jQuery中的Callbacks是什么？有什么用？有哪些常用方法？

（1）用来管理一组有相同方法参数的回调函数

（2）主要用来进行函数队列的add、remove、fire、lock等操作

（3）add：向内部添加函数；fire：依次执行队列里的函数；empty：清空函数队列；has：判断函数队列中是否存在某个函数；remove：从内部队列中移除某些函数；disable：禁用回调列表；lock：锁定回调管理

22.使用jQuery在同一个页面发起多个Ajax请求时能否将共同的请求设置一次性设置好？能否用一个函数处理所有请求的失败？

可以$.ajaxSetup({type:请求方法})Promise.all().then().catch().finally()

23.JSONP是什么？jQuery是否支持JSONP？怎么支持的？

JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。支持jQuery-JSONP是一个支持JSONP调用的jQuery插件跨域请求(浏览器通过没有限制跨域的script标签，指定其src属性为特殊的url，对方的服务器针对这个url请求，会进行特殊处理)，$.getJson(),

不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如

data-main属性:规定了程序的主入口文件(默认名为main,可自定义)文件不需要加.js后缀，在requireJS中，默认加载的是js文件

03.RequireJs中怎么定义模块？怎么指定模块依赖项？

define（）定义一个模块:（define(id,[],function)

para1:默认的ModuleId是文件名，id是可选值(不写)

para2:[]当前JS文件的依赖项，只有一个依赖项，也是个数组

para3:function:依赖项加载完成之后的回调函数===当前JS的主要内容

04.RequireJs中怎么将数据或功能导出模块？

三种方法1.直接用return导出

2.加载一个module模块用module.exports导出

3.加载一个require模块在函数中写入varmodule=require（‘module’）再用module.exports导出

05.RequireJs中怎么加载模块，并在模块加载完成后执行代码？

在入口文件对js文件进行配置在当前的js文件中define的第一个参数为依赖数组将依赖项写入依赖数组中，这样就会在所需的模块加载完成后执行后面函数中的代码，其核心就是要确定依赖关系

06.RequireJs中如果要加载jQuery应该怎么做？

jQuery特殊引入方式：1、名字命名为jquery.js并且和入口文件在一个目录下

2、定义模块的方式。命名为：jquery，依赖项是jquery的路径，返回jQuery对象

define("jquery",["./js/jquery-2.0.3"],function($){returnjQuery;})

07.RequireJs中如果要加载jQuery插件应该怎么做？

这需要在入口文件中做配置先在paths中写入要加载的jQuery插件的js文件；如果有依赖jquery的可以在shim中做依赖jQyuery的配置

08.RequireJs除了能加载js脚本文件外，能否加载其它文件？怎么做？

引入require-css.js文件，在config中进行配置然后再define中用css!css/index!前面为插件的路径后面为文件的路径

09.ArtTemplate支持if/else吗？除了if/else之外还有什么方法能实现条件判断？支持，三目运算符

支持使用遍历表达式

{{eachlistArrasitemindex}}//listArr是数组；item数组中的每一个元素；index是索引

标签内容

{{/each}}

支持，在想要使用的模板中用include后面跟模板的路径

{{include"template_name"}}//template_name引入模板的名字

支持,通过template.compile(source,options)来将返回一个渲染函数。

支持,通过template(id)来将返回一个渲染函数。

13.Express中怎么从URL的QueryString中获得参数？用req.query

14.npm是什么？Node模块包管理器;npm是云端包管理器，是用来安装模块，创建模块，发布模块，测试模块

15.npminit命令的作用是什么？初始化一个nodejs项目，生成一个package.json文件

16.Node.js中导入模块和导入js文件写法上有什么区别？导入模块是直接写文件的名字，而导入js文件时要写路径

17.Grunt是什么？有哪些常用的插件？

Grunt是一个基于Nodejs的自动化任务执行工具。那么什么是任务执行工具呢，其实就是按照之前编定好的规则执行任务的一个工具。grunt-contrib-cleangrunt-contrib-uglifygrunt-contrib-concatgrunt-contrib-copy：复制文件和文件夹。grunt-contrib-cssmin：CSS文件压缩。grunt-contrib-imagemin：图片压缩。grunt-contrib-htmlmin:压缩html

源代码管理工具、插件、工具

01.怎么在页面上绘制曲线图等图表？能否支持双Y轴？Echats支持

02.手机页面怎么支持手势识别？通过TouchAPI来支持触控

03.JS支持多线程吗？支持h5之后增加了多线程API，WebWorker

04.JS支持Socket双工双向通信吗？支持WebSocket

05.JS支持GPS定位吗？支持getCurrentPosition()

06.JS可以实现摇一摇吗？可以window.DeviceMotionEvent

08.什么时候使用git分支？怎么创建分支？怎么合并分支？

主分支一般为成熟内容，分支内容可以是一些测试性质或研发新特性等

gitbranch<分支名>gitmerge<要被合并到当前枝节的分支>

09.Git合并冲突了怎么办？手动解决

10.Git第一次从远程库获取代码用什么命令？gitclone[romote-name]

11.Git从远程库获取更新用什么命令？gitpull

12.Git将已提交的代码发送到远程库用什么命令？gitpush

13.Git查看提交历史记录用什么命令？

gitlog#显示提交日志

gitlog--oneline#一行显示提交日志

gitlog-1#显示一条日志

gitlog-n#-n显示n条日志

gitlog--graph以图片化方式显示提交记录

14.说说你对React的了解

React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套。做出来以后，发现这套东西很好用，就在2013年5月开源了；

React是Facebook为了开发复杂和高性能Web页面而发布的开源项目，它为View层的组件化开发提供了一个全新的解决方案，支持虚拟DOM和JSX是它的最大特点；

JSX：HTML语言直接写在JavaScript语言之中，不加任何引号，这就是JSX的语法

组件：React允许将代码封装成组件（component），然后像插入普通HTML标签一样，在网页中插入这个组件

虚拟DOM：组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM（virtualDOM）。

只有当它插入文档以后，才会变成真实的DOM。根据React的设计，所有的DOM变动，都先在虚拟DOM上发生，然后再将实际发生变动的部分，反映在真实DOM上，这种算法叫做DOMdiff，它可以极大提高网页的性能表现。

15.Babel你用过吗，怎么使用的？

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。

16.使用Webpack有什么优势？

支持commonJS和AMD模块，可以使模块加载器灵活定制。

使用babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。

可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能

使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包

Vue

一、vue介绍

渐进式JavaScript框架

Vue是是一款MVVM模式的前端js框架，其最大的特点是基于.vue单文件的组件化开发，使一个复杂的页面可以拆分为多个独立的，可复用的组件。另外还拥有双向数据绑定，事件系统，计算属性(computed)，状态过度，自定义指令，过滤器等功能。

组件：组件（Component）是Vue.js最强大的功能。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。组件中几个重要的属性：

data:组件自身的数据，除根组件之外，必须是一个函数。

template:组件模板，可以是字符串，也可以是模板所在标签的#id，如果使用.vue文件设计组件则可以没有temlpate属性；

props:从父组件传值接受的数据，只能读取，不应修改。

computed:使用data或props计算出来的属性，其计算的结果会被缓存，只有函数中使用的变量变化时才会再调用。

methods:组件的方法(函数)

mounted:组件被渲染之后的钩子函数（被添加到俯视图上时）。

created:被创建时的钩子函数。

activated:组件变为活跃状态时的钩子函数。

mixin:混入选项。

条件渲染：v-if，v-show，可以实现切换某个组件或元素的显示与隐藏。v-for，用于渲染一个列表，常用于数组的渲染。

单向数据流：vue中数据的传递只能是自上而下的，父组件传递给子组件，子组件通过事件发射$emit来实现与父组件的通信，非父子组件之间的消息传递可以通过空Vue对象作为事件bus总线，更为复杂的情况可以通过vuex。

Slot插槽：父组件给子组件传值还可以通过标签内容传递，而slot插槽则是标记html内容分别应该放在子组件模板中的什么位置。

Vue双向数据绑定原理：vue对象在实例化时，会将data对象中的所有属性都通过Object.defineProperty方法以set，get方法的形式添加给vue实例，然后在属性的set方法中添加了监视函数，每当修改data属性时，set方法就会调用，从而调用监视函数，监视函数会修改页面中绑定这个数据的部分。

单文件组件：使用vue-cli创建项目时，可以使用.vue文件创建单文件组件，可以将一个组件写在一个vue文件中，然后在其他文件中导入就可以使用。这样大大提高的代码的结构性。

Webpack：一个功能强大的打包工具，vue使用webpack进行打包，通过vue-loader将vue文件打包成浏览器可以识别的js文件。

Vux：一个功能齐全的vue组件库，其中实现了轮播图，列表，选项卡，tabBar等移动页面常用的功能。类似的组件库还有很多，例如mintUI，vonic等。

Vue开发经验

用vue进行项目编写开发我们要注意以下事项

1.要考虑页面上哪些部分可以封装成公共组件

2.数据层次是怎样进行划分的（因为vue是数据驱动视图的，所以组件划分也是要依据数据进行划分），最好先做好数据设计，再进行组件和页面的开发

3.是否需要使用UI框架？现阶段的vue的UI框架说白了都是一些组件库（达不到框架统摄整个应用的级别）

4.多使用es6的写法，尤其是import导入和export导出功能，那样的写法很轻松(推荐阅读阮一峰的ECMAScript6入门)

5.要注意项目的文件组织，组件可放置在components文件夹下，页面可放置在pages文件夹下，路由配置可放置在router文件夹下，vuex配置可放置在vuex文件夹下，全局过滤器可放置在新建的filters文件夹下，整体项目会一目了然

对vue的看法

现在前端的发展趋势，新型的三大框架(React，Vue，Angular2)都是使用的组件化构建思想，对于三者来讲，vue偏轻量，更灵活一点。学习难度也比其他两个低，不像React和Angular2那么激进，vue社区最近也很活跃。

Vuex状态管理

Vuex是一个专为Vue.js应用程序开发的状态管理库。它采用集中式存储管理应用的所有组件的状态（也就是整个应用的数据被Vuex统一集中管理，而不在分散到组件当中），并以相应的规则保证状态以一种可预测的方式发生变化（只能通过Vuex指定的方式更新数据）。说白了在应用中承担着数据处理中心的职责。

推荐组件间通信比较复杂的时候使用Vuex。使用状态管理设计应用的模式常被成为状态管理模式。在React开发中也比较常见。每个vuex应用都包含一个唯一的store实例，包含以下几部分

1.state组件的状态(数据)，是store的核心部分

2.mutation提交mutation是更改store中的state的唯一方式，只能是同步的

3.getter获取state状态数据，可以对数据进行加工

4.action用于封装业务逻辑，尤其是ajax等异步操作，在action中通过提交mutation来更改state。action与mutation的区别是:action主要是实现业务逻辑mutation主要是用来更改state

5.module可以将store分割为更小的块，每个块拥有自己的state、mutation、action、getter。当state较大时适合使用module进行拆分

组件(页面)中的数据来自于state，页面上的操作最终导致action被派发(dispatch)，action内部实现了业务逻辑(尤其是ajax等异步操作)，并且提交了mutation，导致状态(state)被更改，state的更改会通知vue重新渲染页面

Vue知识

Vue了解

三、Vue模板与对象绑定

模板

{{message}}