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中新增了什么布局方式？
弹性布局：flex布局的基本思想是通过flex容器来伸缩控制子项目的宽度和高度，以此来完全填充flex容器的可用空间。子项目的宽高、排列方式等都是通过设置相关属性改变的。
除了上述布局方式外还有什么常用的布局方式？
1、文档流布局方式：这是最基本的布局方式，就是按照文档顺序一个一个地显示，块元素独占一行，内联元素共享一行。
2、浮动布局方式：某个元素浮动之后，其后面的元素就当其不存在而占用其原来的地方，按照原来文档流布局方式布局。
3、定位布局方式：通过 position属性定位。
4、框架布局方式：BootStrap
13. CSS中的calc()有什么作用？ 用于动态计算宽高。
14. 什么时候使用mm、cm？ 一个是毫米，一个是厘米，都是绝对长度单位，看网页、打印的需要
15. 如果一个页面即要在屏幕上显示，又要打印，怎么将这2种样式定义在一起？
一般用媒体查询 @media print{}{ h1{color:black;} }
@media print 里面的内容只对打印出来的内容有效，之外的内容就是屏幕显示的样式
或者用
16. 媒体查询除了在打印时使用还在什么情况下使用？ 响应式布局（不同宽度的设备上使用）
17. 在手机页面上使用图片，宽度为80%，怎么让图片居中？
text-align：center； 或 将其设置为display：block；为其父元素设置margin：0 auto；
18. 手机页面底部工具条中4个图标，怎么均分空间？设边框后最后一个掉下去怎么办？
使用 bootstrap里面的class="col col-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-xs col-sm col-md col-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既可以在客户端上运行 (支持IE 6 、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，是在服务端处理的
J avaScript 部分
01.javascript有哪几种数据类型
六种基本数据类型：字符串（ String）、数字(Number)、布尔(Boolean)、对象(Object)、空（Null）、未定义（undefined）
02.怎么判断一个变量是否是数组？
instanceof() 或者 Array.isArray() 或者 Object.prototype.toString.call(arr)==='[object Array]'
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为调用当前函数的函数（已被遗弃）
转换为数组： var args = Array.prototype.slice.call(arguments, 0);
07.怎样得到浏览器窗口的宽度和高度？（IE和标准下有哪些兼容性的写法）
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于 Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度； window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight / document.documentElement.clientWidth
或者 document.body.clientHeight / document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = 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语言的特殊之处,就在于函数内部可以直接读取全局变量。
var n=999; function f1(){alert(n);} f1(); // 999
另一方面 ,在函数外部自然无法读取函数内的局部变量。
function f1(){var n=999;} alert(n); // error
需要注意 :函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量！
function f1(){n=999; } f1(); alert(n); // 999
二、如何从外部读取局部变量？
出于种种原因 ,我们有时候需要得到函数内的局部变量。但是正常情况下,这是办不到的；只有通过变通方法才能实现。那就是在函数的内部 ,再定义一个函数。
function f1(){ var n=999；function f2(){ alert(n); // 999} }
在上面的代码中 ,函数f2就被包括在函数f1内部;这时f1内部的所有局部变量,对f2都是可见的;但是反过来就不行,f2内部的局部变量,对f1就是不可见的;这就是Javascript语言特有的"链式作用域"结构（chain scope）;子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然 f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗！
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
三、闭包的概念
上一节代码中的 f2函数,就是闭包。
各种专业文献上的 "闭包"（closure）定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。由于在 Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
四、闭包的用途
闭包可以用在许多地方。它的最大用处有两个 : 一个是前面提到的可以读取函数内部的变量;另一个就是让这些变量的值始终保持在内存中。怎么来理解这句话呢？请看下面的代码。
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中 ,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于 f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方 ,就是"nAdd=function(){n+=1}"这一行,
1、首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量;
2、其次,nAdd的值是一个匿名函数（anonymous function）,而这个匿名函数本身也是一个闭包,
所以 nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。
五、使用闭包的注意点
1、由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2、闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象（object）使用,把闭包当作它的公用方法（Public Method）,把内部变量当作它的私有属性（private value）,这时一定要小心,不要随便改变父函数内部变量的值。
六、思考题
如果你能理解下面两段代码的运行结果 ,应该就算理解闭包的运行机制了。（首先考虑作用域this的指向）
代码片段一。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
代码片段二。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());
14.JSON的了解？XML和JSON的区别？
了解： JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 它是基于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）
4、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用`setTimeout`来调用
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，值等于索引的数组。
var arr = [0,1,2,…,99];
var arr = new Array(100)； for (var i = 0; i < arr.length; i++) {arr[i] = i;}； arr;
var arr = Object.keys(Array.from({ length: 100 }));
var arr = Object.keys(Array.apply(null,{ length: 100 }));
var arr = Object.keys(Array.from({ length: 100 })).map(function(item){return +item;});
var arr = Array.from(new Array(100).keys());
var arr = [...Array(100).keys()];
var arr = [...Array.from({ length: 100 }).keys()];
23.js跨域请求的方式，能写几种是几种？ CORS
1、通过jsonp跨域
2、 CORS（Cross-Origin Resource Sharing）跨域资源共享,需要服务器设置 header ：Access-Control-Allow-Origin。
3、通过修改 document.domain来跨子域
4、使用 window.name来进行跨域
5、使用 HTML5中新引进的window.postMessage方法来跨域传送数据（ie 67 不支持）
6、 nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求
跨域访问与同源策略
因为在同一个浏览器窗口中能够同时打开多个网站的页面，而且它们都处于同一个会话中，如果不禁止跨域访问则会造成用户隐私数据泄露和登录身份冒用的问题，所以浏览器会使用同源策略限制跨域访问。
在浏览器中，通过 JS代码访问不同域名下的URL（JS的XHR/AJAX）或者iframe（JS访问iframe内部的DOM）时，会被禁止访问。而不是通过JS代码进行的跨域访问不存在跨域问题！比如可以跨域加载图片、引用JS文件、下载各种文件、使用iframe跨域嵌入其它网站的页面都是允许的。
跨域访问被禁止有时会给应用开发带来阻碍，但在符合特定条件时也有相应的方法在保证安全的情况下能够解决跨域访问的问题。
1、跨域资源共享（CORS：Cross-Origin Resource Sharing）
在对方的服务器中的响应头中添加 Access-Control-Allow-Origin 允许哪些域进行跨域访问它是值可以是 域名，或者 * 。这种方案只有在对方信任或不在乎（安全）的情况下才能使用。
在用 Ionic开发Web App时，通常会遇到浏览器端和服务端分离的情况，这时可使用CORS浏览器插件自动在响应头中添加Access-Control-Allow-Origin头。这样可以轻松实现开发时的跨域。
2、如果域名都是同一个根域名的子域名，则可以使用 document.domain = "根域名" 来统一JS执行环境中的域名。这种方案只能在同一个公司或组织的内部使用。
不同的框架之间是可以获取 window对象的,但却无法获取相应的属性和方法。
有一个页面 ,它的地址是http://www.example.com/a.html ,
在这个页面里面有一个 iframe,它的src是http://example.com/b.html,
这个页面与它里面的 iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：
这个时候 ,document.domain就可以派上用场了:
1、只要设置http://www.example.com/a.html和http://example.com/b.html
这两个页面的 document.domain为相同的域名就可以了。
2、但要注意的是：document.domain的设置是有限制的,
我们只能把 document.domain设置成自身或更高一级的父域,且主域必须相同。
1.在页面 http://www.example.com/a.html 中设置document.domain:
2.在页面 http://example.com/b.html 中也设置document.domain:
**修改document.domain的方法只适用于不同子域的框架间的交互**
3、JSONP：JSON Padding，原理是：浏览器不限制通过script标签引入其它网站的脚本，所以可以通过JS向页面上动态添加一个script标签并且指定其 src 为一个特殊的url，对方的服务器针对这个url的请求，会进行特殊处理。
这种方案可以跨域任意域名，但是必是对方有意这样设计才能使用。如果对方不支持将 JSON数据padding到函数名后面的()中，则JSONP无法使用。
在 jQuery中 $.getJSON() 这个方法支持 JSONP !!!
在 url后面加 callback=? 即可，jQuery会自动生成函数名并将调用转交给getJSON中的回调函数。
$.ajax()方法也支持JSONP，设置type:’GET’， dataType:’jsonp’即可
Angular中的$http服务也提供了jsonp()方法支持JSONP
4、将要请求的 URL发送给自己的服务端，让服务端发起请求（服务端没有跨域限制），服务端请求成功后，将数据再回传给浏览中的JS----服务端代理请求。
这种方式只要自己的服务端支持一下就可以了，是比较常用的方案，没有任何限制，而且这种方安还可以实现其它方案无法实现的功能：
通过服务端抓取别人的网页，将网页上的数据提取出来，变成 JSON返回
在 Node.js中，使用cheerio模块可以像使用jquery一样从HTML字符串中筛选并提取想要的数据。
5、使用任何可以利用的浏览器端中间机制实现跨域交换数据
如： window.name在代码中使用name变量时实际上使用的是window对象的name属性，但是name属性是window对象的内部属性。它只接受字符串值，如果给它赋其它值，将会直接被转换成字符串！！！！尤其是赋一个对象给name变量的时候，会导致数据丢失！！！(对象toString()后是[object Object])。但是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表示 “缺少值”，就是此处应该有一个值 ，但是还没有定义。典型用法是：
1. 变量被声明了，但没有赋值时，就等于 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. 增加了 Promise 6. 支持 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支持浏览器转换，但不应在商业正式环境中使用。
上述两个工具的使用可参考: http://es6.ruanyifeng.com/#docs/intro
模块化
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关系不大）。
Web Components技术，由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和jQuery Defferred的特点。
使用 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.jQuery Deferred都有哪些常用的方法？分别是什么作用？
.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有什么新变化？
（ 1）、移除旧的IE工作区:早于IE9版本的相关技术与工作区都被移除了
（ 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）、jQuery 3.0运行在Strict Mode下
（ 5）、引进for...of循环
（ 6）、动画方面采用新的API
（ 7）、对包含特殊含义的字符串提供转义的新方法：jQuery.escapeSelector()提供了对在CSS中存在特殊含义的字符串或字符进行转义的方法：比如：页面中某个 ID为 “abc.def” 的元素由于选择器将其解析为 ID为“abc”且包含一个名为“def”的类的对象， 而无法被$( "#abc.def" )选定。但是它可以由 $( "#" + $.escapeSelector( "abc.def" ) )来进行选定。
（ 8）、 类操作方法支持 SVG：jQuery 3现在还无法完整的支持SVG，但是对于 操作CSS类名称 的jQuery方法，如 .addClass() 和 .hasClass() 现在可以将SVG文档作为目标。
（ 9）、延迟对象现在与JS Promises兼容
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等颜色值上实施动画？
jQuery的animate函数可以进行与尺寸相关CSS样式动画，但对于如background-color等与颜色相关的CSS样 式渐变的动画没有提供。
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模块在函数中写入var module = 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($) { return jQuery; })
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之外还有什么方法能实现条件判断？ 支持，三目运算符
ArtTemplate支持循环处理数据（如数组）吗？
支持 使用遍历表达式
{{each listArr as item index}} // listArr是数组；item数组中的每一个元素；index是索引
标签内容
{{/each}}
ArtTemplate支持引用子模板吗？
支持，在想要使用的模板中用 include 后面跟模板的路径
{{include "template_name"}} //template_name 引入模板的名字
ArtTemplate支持将模板字符串编译成函数吗？
支持 ,通过template.compile(source, options)来将返回一个渲染函数。
支持 ,通过template(id)来将返回一个渲染函数。
13. Express中怎么从URL的QueryString中获得参数？ 用 req.query
14. npm是什么？ Node模块包管理器; npm是云端包管理器，是用来安装模块，创建模块，发布模块，测试模块
15. npm init命令的作用是什么？ 初始化一个 nodejs项目，生成一个package.json文件
16. Node.js中导入模块和导入js文件写法上有什么区别？ 导入模块是直接写文件的名字，而导入 js文件时要写路径
17. Grunt是什么？有哪些常用的插件？
Grunt 是一个基于Nodejs的自动化任务执行工具。那么什么是任务执行工具呢，其实就是按照之前编定好的规则执行任务的一个工具。grunt-contrib-clean grunt-contrib-uglify grunt-contrib-concat grunt-contrib-copy：复制文件和文件夹。grunt-contrib-cssmin：CSS文件压缩。grunt-contrib-imagemin：图片压缩。grunt-contrib-htmlmin:压缩html
知道 Gulp吗？知道， gulp、grunt前端自动化工具 js构建工具
源代码管理工具、插件、工具
01.怎么在页面上绘制曲线图等图表？能否支持双Y轴？ Echats 支持
02.手机页面怎么支持手势识别？ 通过 Touch API来支持触控
03.JS支持多线程吗？ 支持 h5之后增加了多线程API，Web Worker
04.JS支持Socket双工双向通信吗？ 支持 Web Socket
05.JS支持GPS定位吗？ 支持 getCurrentPosition()
06.JS可以实现摇一摇吗？ 可以 window.DeviceMotionEvent
07.微信可以实现语音识别吗？ 可以
08.什么时候使用git分支？怎么创建分支？怎么合并分支？
主分支一般为成熟内容，分支内容可以是一些测试性质或研发新特性等
git branch <分支名> git merge <要被合并到当前枝节的分支>
09.Git 合并冲突了怎么办？ 手动解决
10.Git第一次从远程库获取代码用什么命令？ git clone [romote-name]
11.Git从远程库获取更新用什么命令？ git pull
12.Git将已提交的代码发送到远程库用什么命令？ git push
13.Git查看提交历史记录用什么命令？
git log #显示提交日志
git log --oneline #一行显示提交日志
git log -1 #显示一条日志
git log -n #-n 显示 n条日志
git log --graph 以图片化方式显示提交记录
14.说说你对React的了解
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套。做出来以后，发现这套东西很好用，就在2013年5月开源了；
React 是 Facebook 为了开发复杂和高性能Web页面而发布的开源项目，它为View层的组件化开发提供了一个全新的解决方案，支持虚拟DOM和JSX是它的最大特点；
React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。但React 本身还在不断变动，API 一直在调整，至今没发布1.0版。参考：http://www.ruanyifeng.com/blog/2015/03/react.html
JSX：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法
组件： React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件
虚拟 DOM：组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。
只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
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重新渲染页面
V ue 知识
Vue了解
渐进式 JavaScript 框架
三、 Vue 模板与对象绑定
模板
var app = new Vue({ // 创建一个vue实例
el: "#app", // 通过el绑定模板
data:{ // data写数据
message:"Hello Vue!"
}
});
四、模板语法 (大部分是指令)
1. {{}} 插入值
2. v-bind 指令 绑定值
3. v-on 指令 绑定事件
4. v-if 判断条件
5. v-for 循环
6. v-once 只绑定一次
7. v-html 插入html
8. v-model 双项数据绑定
五、 vue实例的 选项
1. data:{ //保存数据的对象
message:"Hello Vue!"
}
2. methods{ //保存方法的对象
change: function() {
this.seen = !this.seen;
}
}
3. filters:{ //保存过滤器的对象
capitalize: function(text) {}
}
4. conputed:{ //计算属性对象 这个值都是 get回来，计算属性会缓存内容 ，相同的值只计算一次
birthYear: function() {
var year = new Date().getFullYear();
return year - this.age;
}
}
六、指令
1. 指令（Directives）是带有 v- 前缀的特殊属性。
(1). if指令
能不能看到我？
(2). 带参数：一些指令能接受一个 “参数”，在指令后以冒号指明。
百度
(3). 带有修饰符：修饰符（ Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定
google
七、过虑器 Filters
1. 定义过虑器
filters: { // 过虑器对象 里面可以放很多的过虑器
capitalize: function(text) {
if (! text) {
return "";
}
text = text.toString();
var result = text.charAt(0).toUpperCase() + text.slice(1);
return result
}
}
2. 使用过虑器
{{ value | capitalize}}
八、缩写
1. v-bind 缩写成 :
2. v-on 缩写成 @
八、计算属性
computed:{
birthYear: function() { // 只有get没有set
var year = new Date().getFullYear();
return year - this.age;
},
time: {
cache: false,
get: function() {
return new Date();
}
},
birthY: {
get: function() {
var year = new Date().getFullYear();
return year - this.age;
},
set: function(newValue) {
var year = new Date().getFullYear();
this.age = year - newValue;
}
}
}
九、 Class 与 Style 绑定
1. class 样式类
(1). 对象写法
对象方法绑定 class
对象方法绑定 class
// 在 data里面
classObject: {
// 键名是class值，键值 真显示class 假不显示
"green": true,
"red": false
},
bTrue:false,
bFalse:true,
(2). 数组写法
数组方法绑定 class
//在data里面
classArr:["red","green"],
2. style 内联样式
(1). 对象写法
对象方法绑定 内联样式
styleObject:{
color:"red",
fontSize:"30px"
}
(2). 数组写法
对象方法绑定 内联样式
styleObject:{
color:"red",
fontSize:"30px"
}
styleObject2:{
lineHeight:"60px",
fontWeight:"800"
}
一、什么是组件
组件（ Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
目的：组件可以扩展 HTML 元素，封装可重用的代码
二、使用组件
1. 注册全局组件
2. 注册局部
3. dom模板解析说明
4. data必须是函数
5.构成组件
组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。
三、 Prop
1. 使用 Prop 传递数据
2. camelCase vs. kebab-case
3. 动态 Prop
4. 字面量语法 vs 动态语法
5. 单向数据流
6. Prop 验证
四、自定义事件
1、子组件向父组件传递数据的方式 --- 自定义事件；子组件触发事件，父组件监听事件
this.$emit('myclick','hello vue!') // $emit：触发一个事件
2、非父子组建之间的传值：借助一个空的Vue实例作为中央事件总线
bus.$on('change',function(value){ // $on() 监听事件
console.log(value)
}.bind(this));//这里的this指向bus,要改变this的指向
bus.$emit('change','hello vue!'); // 触发事件
五、使用 Slot 分发内容
1. 编译作用域
2. 单个 Slot
3. 具名 Slot
4. 作用域插槽
六、动态组件
多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 元素，动态地绑定到它的 is
keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：
七、杂项
1. 编写可复用组件 props, events 和 slots
组件索引
尽管有 props 和 events ，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID
var parent = new Vue({ el: '#app'})；
var child = parent.$refs.profile // 访问子组件
3. 组件命名约定
当注册组件（或者 props）时，可以使用 kebab-case ，camelCase ，或 TitleCase 。Vue 不关心这个。在 HTML 模版中，请使用 kebab-case 形式：
进阶
一、 过度效果 （基础）
transition 过度动画
animation 关键帧动画
transform 变幻
translate() 平移
scale() 缩放
rotate() 旋转
skew() 斜切
matrix(a,b,c,d,e,f) 矩阵
二、 一般产生过渡效果的几种情况
v-if
v-show
初始化渲染页面
动态组件（组件之间的切换）
三、 css过渡
会有 4 个(CSS)类名在 enter/leave 的过渡中切换
v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
注意： v-enter-active 要写在前面
四、 css动画
v-enter-active:
v-leave-active:
五、自定义过渡类名
使用外部动画库
六、 javascript钩子 和动画
动画相关事件函数
七、初始渲染动画
注意：初始渲染动画 最好不要和 css过渡动画一块，会产生冲突
八、过渡模式
一个动画结束，别一个动画才开始
in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
TypeScript
1 . TypeScript是什么
TypeScript:是JavaScript的超集，需要编译成js使用，它让JavaScript支持强类型
在强类型的编程语言中，变量的类型从声明时就确定了，并且不能再发生变化，如果赋值为其它非兼容类型则直接导致编译出错（例如age变量类型声明为 Number则赋值为 String时就会报错，而这种情况在 js中是不会报错的）。强类型可以使开发工具（ IDE）更容易通过代码提供的类型信息发现代码中的错误，也能在编程时给程序员更好代码提示，还有利使用工具对代码进行准确地重构。强类型语言的开发工具通常都做得特别好，智能化程度较高，大型项目的开发效率也更高。TypeScript包含了 ES6和ES7的语法，它是 JavaScript“未来版 ”。它不能直接运行，需要先编译成普通 JavaScript才能在浏览器中运行。它是开源的。它来自于微软。
2 . 使用 TypeScript的好处?
1、强类型，有更高的可预测性，更易纠错（即开发工具更加智能）。
2、编译为 JavaScript的过程中，可以检查出很多普通JS难以发现的错误。
3、增加了模块，命名空间和强大的面向对象编程支持，构建大型复杂应用程序更加容易。
4、Angular 2 框架就是用 TypeScript 编写的，并且官方推荐开发人员也使用它。
5、React中也可以使用TypeScript编写代码
3 . TypeScript的基本数据类型
number（数值类型）：所有数字都是数值类型的，无论是整数、浮点型
string（字符串类型）：可以使用单引号或双引号
boolean（布尔类型）：true 或者 false，用 0 和 1 会造成编译错误。
any（任意类型）：该类型的变量可以设定为任何类型，但应尽可能少地使用它，优先考虑使用范型。
array（数组类型）：有两种语法：my_arr: number[];或者my_arr: Array
void （空类型）：用在不返回任何值的函数中。
所有变量类型列表请参考 http://www.typescriptlang.org/docs/handbook/basic-types.html
4、 Interfaces 接口
注意此接口是编程语言级的，不是开发应用时常说调用服务端接口的那个接口。
编程语言级的接口通常是一种面向对象程序设计上的考虑，为的是强制某些类实现一组方法或属性等成员。 TypeScript不支持多重继承，但一个类可以实现多个接口。
接口中声明的方法属性等对象必须实现，方法和属性顺序并不重要，方法或属性的个数不够，类型不一致，名称拼写错误等情况发生时编译器都会报警告信息。
5、类
TypeScript 给前端开发者提供了一个强类型的编程语言，终于可以像Java、C#一样利用更强大的IDE来构建大型前端应用程序了。TypeScript 创建类时使用class关键字
6、泛型
在强类型的编程语言中因为强类型的限制也存在一种尴尬：就是同一份代码（算法）即使有通用性也会因为参数类型限制而不能被其它类型重用。如 compare(a:number， b:number):bool这个函数只能传数字类型，而不能传字符串等其它类型。如果使用any类型则强类型的优势又不复存在！
为了解决这个问题，比较先进的强类型编程语言都支持泛型这一功能（如 Java、.NET等）。
泛型（ Generics）是在代码中添加类型符号，编译代码时会根据当时需要的类型编译出一份针对这种类型的代码，而遇到另一种类型时再编译出另一份代码。因此泛型可以理解为代码 的模版。泛型的代码实际上会编译成多份代码（ Java、.NET）。但因为TypeScript编译出的是JS，而JS是弱类型的，因此TypeScript的泛型并不会生成多份代码，而只会生成一份弱类型的JS代码，泛型起到的是类型检查和强制的作用。
function identity(arg: T): T {
return arg;
}
var output = identity('myString');
var output2 = identity(100);
7、模块
模块在其自身的作用域里执行，而不是在全局作用域里。这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用 export形式之一导出它们。 相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们。
两个模块之间的关系是通过在文件级别上使用 imports和exports建立的。
模块使用模块加载器去导入其它的模块。在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。大家最熟知的 JavaScript模块加载器是服务于Node.js的 CommonJS和服务于Web应用的Require.js。
可以通过 import 和 require 关键字在另一个模块中导入其他模块。
8、装饰器
装饰器（ Decorators）可以让我们给类、方法等增加一些额外的信息。这些信息在Java、.NET中通常被称为元数据。装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用。
@sealed
class Greeter {}
Angular2中大量使用了 装饰器。
Angular2
Angular2是对Angular1一次颠覆，可以开发跨平台的渐近式Web应用，引入H5的新特性Web Worker和服务端渲染来改善了性能，它配合TypeScript语法来编写严格的代码，号称一套框架多种平台，同时适用手机与桌面，正在飞速发展中， Angular4也已经正式发布，它和Angular2保持了较好的兼容性。
Angular2 应用是由组件组成的。 组件由 HTML 模板和组件类组成，组件类控制视图。组件负责控制屏幕上的一小块区域，我们称之为视图。
Angular2还可以与Ionic2一起配合使用。
Angular2主要有8块内容:
1,模块(module) ： Angular遵循模块化开发，一个Angular应用至少有一个模块（根模块），根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。模块中通过declarations声明模块中包含的组件、指令、冠道，通过import导入其所依赖的其他模块，通过providers注入其所依赖的服务。
2,组件(component) ：组件负责控制屏幕上的一小块区域，对于复杂庞大的页面，可以通过组件将其拆分为多个组件，从而开发时可以专注于某个组件，最后将多个组件合成一个页面，在类中定义组件的应用逻辑，为视图提供支持。 组件通过一些由属性和方法组成的 API 与视图交互。
3，模板(template)： 模板是组件的视图部分。我们通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。模板中可以使用指令、组件、管道。
4，元数据(metadata) ：在 angular2中，模块、组件、管道、指令都是一个类，而对于这个类的属性（例如组件的selector,templateUrl）则通过@Component装饰器添加到类中，这些元数据可以理解为类的静态属性，装饰器只是添加这些静态属性的语法糖。
5，数据绑定(databind) ，和其他前端框架一样，数据绑定（双向绑定）是整个框架中最为实用的功能，在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。和 angular1不同，ng2不再实用$digist驱动脏检查，提高了数据绑定效率。
6，指令(directive) ：指令作为属性或 class或自定义标签添加在元素上，当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行各种操作。组件实质上就是带模板的指令。Angular2中也提倡组件化开发，而指令是组件工作的核心。
7，服务(service) ：对于业务逻辑代码，或者常量， angular提倡单独存放（不像vue一样写在组件中），这样可以提高代码重用性，在需要使用这些服务的组件中导入这些服务。
8，依赖注入(dependency injection) ：依赖注入和服务共同解决了 angular中代码依赖问题。Angular将应用中所有的服务集中在注入器中，为组件、过滤器等自动注入所依赖的服务，它降低了业务逻辑代码和UI代码之间的耦合度，提高了代码的重用性，
A ngularJs1.x 与 Angular2的主要区别
对比项
AngularJs 1.x
Angular 2/4
名字
AngularJs
Angular，去掉了JS
编程语言
JavaScript，可以直接在浏览器中运行代码
TypeScript，不能直接在浏览器中运行代码，必须经过编译，所以必须使用构建工具
平台
只针对Web平台，能非常好地支持桌面Web和手机Web。
除了支持Web平台，还能支持桌面和手机的原生平台。Angular2/4的宣传口号是“一个框架，多个平台”。例如Angular是应用框架，而React专注于视图层，于是Angular+ReactNative就使得Angular能够以原生界面的方式运行于手机上，而且官方对于这一构想也提供了一个开源的实现（在Github上）。值得注意的是Angular说的是一个框架 多个平台，而不是一套代码 、多个平台。在针对不同平台进行开发时，UI层的代码是不同的，最多只能共用业务层和底层代码。也正是因为Angular的这种跨平台的目标决定了在Angular高级开发中（比如写自定义指令甚至构建UI框架时）直接进行DOM修改是比较困难的，因为官方也不建议这么做。
作用域Scope
作用域链（相当于视图模型）
无
脏值检查
$digest机制，多次检查整个作用域链
采用与VueJs类似的机制，取消主动脏值检查
控制器Controller
非常重要，用于封装视图控制逻辑甚至业务逻辑
无，组件化开发
指令
指令数量较多；指令与组件区别较少
指令数量较少，但指令更强大了；指令与组件区别明显，指令使用*符号，如*ngFor、*ngIf
组件
通过组件定义对象CDO进行组件定义；组件比较鸡肋，大多数情况下都在使用指令
通过装饰器元数据和组件类进行定义，组件呈现和控制页面上的一块区域；大量、直接使用组件构建应用页面
模板
HTML然后编译成DOM
可以支持多种视图Render，如与Vue或React结合都是可以的。即使HTML也不是直接编译成DOM的，而是虚拟DOM的方式。
过滤器
Filter
名字改为Pipe，增加asyc、slice、percent去掉filter、limit、orderby，Angular2认为筛选/分页/排序属于视图控制逻辑/业务逻辑
绑定
通过大量指令和模板插值实现，单向绑定双向绑定区别不明显
大量使用括号，
() 从视图到数据方向，指事件
[] 从数据到视图方向
[()] 双向绑定
{{}}，模板插值
严格区分2种单向绑定，区分单向绑定和双向绑定
父子组件/指令传值
作用域链继承
广播/发射事件
属性传值
服务共享
订阅事件
属性传值
服务共享
服务
按照Angular规定好的方式定义服务，服务属于模块级，定义时自动注册到模块中
普通类，需要在模块或组件级别的providers元数据中声明
模块
在应用层面明确地区分为根模块和特性模块（可以理解为普通模块），模块内部包括组件、指令、服务（包括服务类、值、函数）
一般这样区分：官方模块、第三方模块、自定义模块。模块包含的东西比较多，比较容易混淆
路由
内置的路由机制不支持嵌套，通常复杂点的页面就要使用第三方路由ui-router
支持平级多路由，支持基于组件的多级嵌套路由，支持路由守卫
元数据
受限于JavaScript语言而无明显的元数据概念
有明确的基于装饰器的元数据概念
组件生命周期
没有明确的生命周期机制
有明确的经过精心设计生命周期，如：
OnInit
OnDoCheck
AfterContentInit
AfterContentChecked
AfterViewInit
AfterViewChecked
OnChanges
OnDestroy
启动
可以通过ng-app自动启动或代码启动
没有ng-app指令
一般通过代码启动根模块的方式启动
事件对象
在代码中随意使用事件对象
不建议在组件代码中使用事件对象，而推荐使用模版变量获取想要的值然后仅将值传到组件内部
事件过滤
无
提供了类似VueJs的机制
依赖注入
基于名字（字符串）的注入
基于类（要利用强类型机制）的注入
提供者
规范定义的可配置的提供者机制，比较复杂
简化为工厂函数+简单的提供者定义对象
命名规范
零散的规定
完整的规范
整体来看， Angular2比 AngularJs1.x简单且功能强大，但因为 Angular使用 TypeScript导致纯前端的开发工程师不容易上手；再加上 Angular2与 AngularJs1.x差异较大， AngularJs1.x的理念有时反而成为学习 Angular2的障碍。
使用 Angular2 的原因
1． 希望使用 TypeScript语言提高开发效率。 TypeScript提供了比 JavaScript更强大的面向对象编程能力，而且因为 TypeScript是强类型的所以开发工具可以提供更强大的错误检查机制、代码重构机制，开发体验更好，效率更高。
2． Angular2简单，代表未来，更有生命力。
了解 各种 Web服务器及服务端技术
Java系：以Java EE（最早叫J2EE）中的Servlet（Web核心）、JSP（呈现HTML）、EJB（增强并规范Java语言面向对象特性）等为核心Web服务端开发技术，随后产生了很多相关技术和框架如：Structs（MVC）、Spring（解除耦合）、Hibernate（对象和关系型数据库的映射）等（Structs、Spring、Hibernate也常简称为SSH）。
PHP系：以PHP为核心的Web服务端开发技术，因为PHP语言及开发方式比较杂乱，因此产生了很多框架，如：Laravel、Symfony2、Nette、CodeIgniter、Yii、PHPixie、Zend Framework等，还有国产框架Think PHP。
.NET系：微软公司的Web服务端开发技术。使用C#、VB.NET等编程语言和.NET Framework，分为两大系列，早期的ASP.NET Web Form（组件化、事件驱动、与Windows应用程序的开发方式相似）、 和后来的ASP.NET MVC。另外ASP是微软在.NET之前的Web开发技术，与JSP一样古老。
其它： Node.js、Python、Ruby等
Web前端的理解 ：
影响用户访问的最大部分是前端的页面。网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。 WEB前端开发主要是使用HTML、CSS、JavaScript技术前端就是网站的门面
其它
01. 你们之前是怎么估计项目的开发时间的？估计的偏差大吗？
通常会有一定的偏差，很多时候项目延期，是客户需求变化导致的，首先 wbs项目分解，然后使用delphi估值法
02. 你之前的公司都有哪些部门？都分别负责什么事？
测试 技术部 开发部 产品研发部 前端开发组 运维部 售后部 行政部（考勤，请假，会议） 财务部
Execl记录bug 残道（bug管理系统）
03. 你之前工作的城市有什么好吃的？有什么好玩的地方？
04. 我去过你之前工作的城市，有一个xxx地方，你去过吗？
05. 你怎么与你的领导相处？什么时候向他汇报工作？
服从安排，每天向领导提交工作日志 定期汇报 不定期汇报
06. 你遇到难题时怎么解决？自己解决 找同事商量研究 向领导汇报
07. 你经常上哪些技术网站？
08. 你现在在哪住？到这儿上班远不远？怎么解决？
09. 你平时下班了都干什么？
10. 你怎么看待公司的规章制度？
