还剩44页未读，继续阅读
本资源只提供10页预览，全部文档请下载后查看！喜欢就下载吧，查找使用更方便
文本内容:
面试题-----------------------------------------------------------------------的五个状态1vuex是一个专门为应用设计的状态管理架构，统一管理和维护各个组件的可变化状态VueX Vue.js vue（你可以理解成组件里的某些）vue datao有五个核心概念，Vue state,getters,mutations,actions,moduleso＞基本数据state===data＞从基本数据派生的数据getters===computed＞提交更改数据的方法，同步！mutations===methods＞像一个装饰器，包裹使之可以异步actions=mutations,＞模块化modules=Vuex周期（钩子函数）可获取数据可操作2vue createdMounted DOM实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载、渲染玲Vue Dom更新玲渲染、销毁等一系列过程，我们称这是的生命周期通俗说就是实例从创建到销毁的Vue Vue过程，就是生命周期分为三个阶段初始化、运行中、销毁实例、组件通过（）创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate newVue钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的beforeCreate dom,一般不做操作挂载数据，绑定事件等等，然后执行函数，这个时候已经可以使用到数据，也可Created created以更改数据，在这里更改数据不会触发函数，在这里可以在渲染前倒数第二次更改数据的机会，updated不会触发其他的钩子函数，一般可以在这里做初始数据的获取接下来开始找实例或者组件对应的模板，编译模板为虚拟放入到函数beforeMount dom render中准备渲染，然后执行钩子函数，在这个函数中虚拟已经创建完成，马上就要渲染，beforeMount dom在这里也可以更改数据，不会触发在这里可以在渲染前最后一次更改数据的机会，不会触发其updated,他的钩子函数，一般可以在这里做初始数据的获取接下来开始渲染出真实然后执行钩子函数，此时，组件已经出现Mounted render,dom,mounted在页面中，数据、真实都已经处理好了，事件都已经挂载好了，可以在这里操作真实等事情…dom dom当组件或实例的数据更改之后，会立即执行然后的虚拟机制beforeUpdate beforeUpdate,vue dom会重新构建虚拟与上一次的虚拟树利用算法进行对比之后重新渲染，一般不做什么事儿dom domdiff当更新完成后，执行数据已经更改完成，也重新完成，可以操作更Updated updated,domrender新后的虚拟dom当经过某种途径调用方法后，立即执行一般在这里做一些beforeDestroy$destroy beforeDestroy,善后工作，例如清除计时器、清除非指令绑定的事件等等组件的数据绑定、监听…去掉后只剩下空壳，这个时候，执行在这里Destroyed domdestroyed,做善后工作也可以钩子函数的的实际应用举个栗子可以在这加个事件beforecreate:loadingcreated在这结束loading,还做一些初始化，实现函数自执行在这发起后端请求，拿回数据，配合路由钩子做一些事情mountedbeforeDestroy你确认删除XX吗？destroyed当前组件已被删除，清空相关内容介绍一下的同源策略—安全17js同源策略是由提出的著名安全策略，是浏览器最核心、基本的安全功能，它限制了一个源Netscape（origin）中加载文本或者脚本与来自其他源（origin）中资源的交互方式,所谓的同源就是指协议、域名、端口相同当浏览器执行一个脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域引入样式表的方式18内样式、内部样式表、外部样式表一行内样式使用属性引入样式style CSS二内部样式表在标签中书写代码标签写在标签中style CSSstyle head三外部样式表代码保存在扩展名为的样式表中CSS.css文件引用扩展名为的样式表，有两种方式链接式、导入式HTML.css面向对象、面向过程的区别19面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为面向过程优点性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源;比如单片机、嵌入式开发、等一般采用面向过程开发，性能是最重要的因素Linux/Unix缺点没有面向对象易维护、易复用、易扩展面向对象优点易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护缺点性能比面向过程低面向对象的特点
20.封装1所谓封装，就是将客观事物封装成抽象的类，并且类可以把数据和方法让可信的类或者对象进行操作，对不可信的类或者对象进行隐藏类就是封装数据和操作这些数据代码的逻辑实体在一个类的内部，某些属性和方法是私有的，不能被外界所访问通过这种方式，对象对内部数据进行了不同级别的访问控制，就避免了程序中的无关部分的意外改变或错误改变了对象的私有部分,继承2继承有这样一种能力，就是能使用现有的类的所有功能，并无须重新编写原来的这些类的基础上对这些功能进行扩展通过继承创建的新类称为子类或派生类，被继承的称为基类继承有两种，一种是实现继承，另外一种是接口继承实现继承可以直接使用基类的属性和方法而无需额外编码，接口继承是指使用属性和方法的名称，但是子必须提供实现的能力.多态3所谓多态就是对一个实例的相同方法在不同的情形下有不同的表现形式多态机制使得不同内部结构的对象可以共享相同的外部接口，这就意味着，虽然不同的类的内部操作不同，但可以通过一个公共的类，它们可以通过相同的方式予以调用动画21jquery方法用于创建自定义动画jQuery animate语法$selector.animate{params},speed,callback;必需的参数定义形成动画的属性params CSS可选的参数规定效果的时长它可以取以下值“、或毫秒speed slow”“fast”可选的参数是动画完成后所执行的函数名称callback数组去重
22.遍历数组法它是最简单的数组去重方法方法1indexOf实现思路新建一个数组，遍历去要重的数组，当值不在新数组的时候为就加入该新数indexOf-1组中；var arr=[2,8,5,0,5,2,6,7,2];function uniquelarr{var hash=[];for var i=0;iarr.length;i++{if hash.indexOfarr[i]==-l{hash.pusharr[i];return hash;}.数组下标判断法调用方法，性能和方法差不多2indexOf1实现思路如果当前数组的第项在当前数组中第一次出现的位置不是那么表示第项是重复的，i i,i忽略掉否则存入结果数组function unique2arr{var hash=[];for var i=0;iarr.length;i++{ifarr.indexOfarr[i]==i{hash.pusharr[i];}return hash;}.排序后相邻去除法3实现思路给传入的数组排序，排序后相同的值会相邻，然后遍历排序后数组时，新数组只加入不与前一值重复的值function unique3arr{arr.sort;var hash=[arr
[0]];for vari=1;iarr.length;i++{ifarr[i]!=hash[hash.length-l]{hash.pusharr[i];}return hash;}.优化遍历数组法推荐4实现思路双层循环，外循环表示从到内循环表示从到air.length,i+1ardength将没重复的右边值放入新数组检测到有重复值时终止当前循环同时进入外层循环的下一轮判断function unique4arr{var hash=[];for vari=0;iarr.length;i++{for var j=i+1;jarr.length;j++{ifarr[i]===arr[j]{++i；}hash.pusharr[i];return hash;实现
5.ES6中新增了数据结构，类似于数组，但是它的成员都是唯一的，其构造函数可以接受一个数ES6Set组作为参数，如let array=[1,1,1,1,2,3,4,4,5,3];let set=new Setarray;console.logset;//=Set{1,2,3,4,5中新增了一个静态方法可以把类似数组的对象转换为数组，如通过ES6Array Array.from,方法得到以及中新增的和等可遍历对象，如querySelectAII HTML DOM NodeList,ES6Set Mapletset=new Set;set.addl.add
2.add3;let array=Array.fromset;console.logarray;//=[1,2,3]盒子居中23使用方法I css父盒子设置displaytable-cell；text-aligncenter；vertical-alignmiddle；Div设置displayinline-block；vertical-alignmiddle；2使用CSS3transform父盒子设置displayrelativeDiv设置transformtranslate”％,-50%；positionabsolute；top50%；left:50%；的使用24jsonp最常见的一种跨域方式，其背后原理就是利用了标签不受同源策略的限制，在页面中动态插script入了标签的属性就是后端接口的地址，并且以的方式将前端回调处理函数名称script,script srcapi get告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去组件之间的传值问题25vue组件关系可分为父子组件通信、兄弟组件通信、父组件向子组件1父组件可以使用把数据传给子组件props、子组件向父组件2子组件可以使用触发父组件的自定义事件$emit子组件用$来触发事件，父组件用来监听子组件的事件emit$on父组件可以直接在子组件的自定义标签上使用来监听子组件触发的自定义事件v-on、兄弟之间的通信3通过实例一个实例作为媒介要相互通信的兄弟组件之中都引入之vue Busconst bus=new Vue,Bus,后通过分别调用事件触发和监听来实现组件之间的通信和参数传递Bus性能优化26减少请求次数源码压缩、图片大小控制合适；网页托管，1http CSSSprites,JS CSSGzip,CDN data缓存,图片服务器前端模板数据，减少由于标签导致的带宽浪费，前端用变量保存请求结果,每次2JS+HTML AJAX操作本地变量，不用请求，减少请求次数用代替操作，减少操作次数，优化性能3innerHTML DOMDOM javascript当需要设置的样式很多时设置而不是直接操作4className styleo少用全局变量、缓存节点查找的结果减少读取操作5DOM10避免使用表达式又称动态属性6CSS Expressioncss Dynamicproperties图片预加载，将样式表放在顶部，将脚本放在底部或者懒加载7避免在页面的主体布局中使用要等其中的内容完全下载之后才会显示出来，显示比8table,table布局慢div+css深拷贝27van deepCopy=function{//1,创建一个对象van temp={};//2,拷贝属性，在判断如果是引用类型需要深拷贝forvar kin this{iftypeof this[k]===object{temp[k]=this[k].deepCopy;}else{temp[k]this[k];}//temp[k]=this[k];//3,返回对象return temp;}var car={name:，法拉利};var p={name:张三age:19,gender:男car:car};//让所有的对象都有拷贝的方法car.deepCopy=deepCopy;p.deepCopy=deepCopy;var nev/P=p.deepCopy;p.name=李四;p.age=20;p.gender=女；p.car.name=，兰博基尼；中的作用是什么？28vue ref被用来给元素或子组件注册引用信息引用信息会根据父组件的对象进行注册ref DOM$refs如果在普通的元素上使用，引用信息就是元素；如果用在子组件上，引用信息就是组件实例DOM注意只要想要在中直接操作元素，就必须用属性进行注册怎么防止元素重复绑Vue DOMref定事件29Proxy框架开发的时候，会遇到跨域的问题，可在里配置内容，使用代Vue config/index.js proxyTableproxy理文件//config/index.jsproxyTable:{7api:{target:http:〃
192.
168.
149.90:8080/,〃设置你调用的接口域名和端口号//跨域changeOrigin:true,pathRewrite:{八『:/ap},这里理解成用『代替里面的地址，后面组件中我们掉接口时直接用代替比如我7ap targetapi要调用直接写‘http://
192.
168.
149.90:8080/xxx/dutytime=2017-07-0714:57:22,,即可7api/xxx/dutytime=2017-07-0714:57:22,在里配置开发环境请求地址文件//config/dev.env.jsmodule.exports=mergeprodEnv,{NODE_ENV:“development]ADMIN_SERVER:/api/,,}；若请求插件用的配置如下axios,const adminServer=axios.create{baseURL:process.env.ADMIN_SERVER,}；写一个函数，来验证是否为有效的手机号30//判断是否为手机号isPoneAvailable:function pone{var myreg=/A[l][3,4,57,8][0-9]{9}$/;if imyreg.testpone{return false;}else{return true;},〃判断是否为电话号码isTelAvailable:function tel{var myreg=/A[0\+]\d{23}-0\d{2,3}-\d{78}-\d{3,}$/;,if imyreg.testtel{return false;}else{return true;}},用实现一个品字布局的页面31html,css display:inline-block margin-left:-200px、n-Lt/*{margin:0;border:0;・dl,・d2,・d3{height:100px;width:100px;background-color:#FF0000;border:solid lpx#000000;}.dl{margin:0auto;}.d3{display:inline-block;margin-left:-200px;}・d2{display:inline-block;margin-left:50%;}/stylebodydiv class=dlH±/div!----xdiv class=Hd2^/div!----xdiv class=d3左/div/body写一个函数解析中参数的部分，并返回解析后的对象32url jsconstparseQueryString=url={var json={};var arr=urLsubstrfurLindexOff11+l.split;arr.forEachitem={var tmp=item,split=；json[tmp
[0]]=tmp[l];};return json;写一个函数对数组由大到小的排序33〃创建数组元素arrvar arr=[7,13,34,3/200,100,4];〃创建每次循环存储最大值得变量var max;〃遍历数组，默认中的某一个元素为最大值，进行逐一比较arrforvar i=0;iarr.length;i++{〃外层循环一次,就拿和内层循环次的做对比arr[i]arr.legend arr[j]forvar j=i;jarr.length;j++{ifarr[i]arr[j]{〃如果大就把此时的值赋值给最大值变量arr[j]maxmax=arr[j];arr[j]=arr[i];arr[i]=max;document.writearr.toString+br;7/200,100,34,13,7,4,3有哪些值他们的作用和定位原点是什么34css position固定定位，相对于浏览器窗口进行定位lfixed绝对定位，相对于值不为的第一个父元素进行定位2absolute static相对定位，相对于其正常位置进行定位3relative默认值没有定位，元素出现在正常的流中4static规定从父元素继承属性的值5inherit position简述实现动画的方式35css3设置设置过渡，添加设置形状，形成动画效果，如下:1transition 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:rotate360deg;-ms-transform:rotate360deg;/*IE9*/-webkit-transform:rotate360deg;/*Safari andChrome*/此种方式比较小众，不易控制、添加属性，设置动画效果，如下2animation.al{position:absolute;animation:al3s;opacity:0@keyframes al{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}什么是预处理器、后处理器36css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为增加了一些编CSS CSS程的特性，将作为目标生成文件，然后开发者就只要使用这种语言进行编码工作通俗的说,CSS CSS预处理器用一种专门的编程语言，进行页面样式设计，然后再编译成正常的文件Web CSS
二、分类（重点）（）、、、、Sass SCSSLESS StylusTurbine SwithchCSS CSSCacheer DTCSS后处理器是对进行处理，并最终生成的预处理器，它属于广义上的预处理器我CSS CSS CSS CSS们很久以前就在用后处理器了，最典型的例子是压缩工具（如）只不过以前没单独拿CSSCSSclean-css,出来说过还有最近比较火的以上的浏览器支持数据为基础，自动处理兼容性问Autoprefixer,Can IUse题后处理器框架CSS Rework简述一下你了解的的新特性37html
5、离线缓存可以在关闭浏览器后再次打开时恢复数据，以减少网络流量
1、音频视频自由嵌入，多媒体形式更为灵活
2、地理定位地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，3可以通过缓存来解决，到哪儿下哪儿，更灵活、绘图，提升移动平台的绘图能力使用可以简单绘制热点图收集用户体验资4Canvas CanvasAPI料，支持图片的移动、旋转、缩放等常规编辑、丰富的交互方式提升互动能力拖拽、撤销历史操作、文本选择等
5、开发及维护成本低，这个相对于原生开发来说更低的开发及维护成本;使页面变得更小，6APP减少了用户不必要的支出;而且，性能更好使耗电量更低、视觉设计师的辅助利器的支持支持了字体的嵌入、版面的排版，以及最令人印象深7CSS3CSS3刻的动画功能、调用手机摄像头和手机相册、通讯录等功能8html5浏览器的内核分别是什么38内核IE:tridentFirefoxgecko内核safariwebkit内核opera以前是presto内核，现在改用google chrome的Blink内核ChromeBlink（基于webkit,google与opera software共同开发）、的区另（3cookie localstrogelocalSeesion J共同点都是保存在浏览器端，且同源的区别安全性、大小、有效期、作用域数据始终在同源的请求中携带（即使不需要），即在浏览器和服务器间来回1cookie http cookie传递而和不会自动把数据发给服务器，仅在本地保存数据还有路sessionstorage localstoragecookie径（）的概念，可以限制只属于某个路径下path cookie存储大小限制也不同，数据不能超过同时因为每次请求都会携带所以2cookie4k,httpcookie,cookie只适合保存很小的数据，如会话标识和虽然也有存储大小的限制，但比sessionstorage localstoragecookie大得多，可以达到或更大5M3数据有效期不同，sessionstorage仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localstorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭作用域不同，不在不同的浏览器窗口中共享，即使是同一个页面；在所4sessionstorage localstorage有同源窗口中都是共享的；也是在所有同源窗口中都是共享的cookie和区别4get post参数通过传递，放在中传递路径get urlpost requestbody请求在中传递的参数是有长度限制的，而没有长度限制get urlpost比更不安全，因为参数直接暴露在中，所以不能用来传递敏感信息安全get posturl请求只能进行编码，而支持多种编码方式编码方式get urlpost请求会浏览器主动而支持多种编码方式get cache,post请求参数会被完整保留在浏览历史记录里，而中的参数不会被保留保存get post和本质上都是链接，并无差别但是由于的规定和浏览器/服务器的限制，导GET POSTTCP HTTP致他们在应用过程中体现出一些不同你是如何操持登录5利用实现1Token登录成功后，服务器以某种方式，如随机生成位的字符串作为同时设置一个有效期，APP NToken,存储到服务器中，并返回给Token APP后续发送请求时，都要带上该每次服务器端收到请求时，都要验证和有效期,APP Token,Token Token数值对且在有效期内，服务器返回所需要的结果，否则返回错误信息，提示用户重新登录（这种方式目前使用的最多）利用实现2Cookie登录成功后，服务器创建一个包含和两个属性值的存储在服务器中，APP sessionjdExpires Cookie,并发送给APP后续发送请求时，都要带上一个包含此的每次服务器端收到请求时，都要验APP sessionjdCookie,证和有效期，数值对且在有效期内，服务器返回所需要的结果，否则返回错误信息，sessionjd sessionjd提示用户重新登录开发过程中内存泄漏情况，如何解决的
39、全局变量由于对未声明变量的处理方式是在全局对象上创建该变量的引用如果在1JavaScript浏览器中，全局对象就是对象变量在窗口关闭或重新刷新页面之前都不会被释放，如果未声window明的变量缓存大量的数据，就会导致内存泄露未声明变量二|我是未声明的变量我缓存了数据，如果数据足够大的话，就会内存泄漏’
1.a a,
2.通过也会创建全局变量，当在全局作用域中调用一个函数，这个函数内部用的方式创建了this this.var一个变量，此时指向的是全局对象而不是如this window,IndefinecTfunction leak{this.variable=potential accidentalglobal}leak、闭包函数内可以直接读取全局变量，但是函数外不能读取函数内的局部变量这时2closures:js候在函数内再声明一个函数调用局部变量，然后返回函数在的外部声明一个变量赋值fl f2f2,fl result为再调用就是一个闭包的例子fl,result,function fl{var n=999;function f2{alertn;}return f2;}var result=fl;result;//999闭包可以读取函数内部的变量，然后让这些变量始终保存在内存中如果在使用结束后没有将局部变量清除，就可能导致内存泄露、事件监听对同一个事件重复监听，但是忘记移除，会导致内存泄露3EventListener、其他原因4打印的对象不能被垃圾回收，可能会导致内存泄露console.log也可能会导致内存泄露setinterval前端如何检查内存泄露？.使用的开发者工具来进行快照对比1Chrome profiles⑵.如果是在环境下，可以用提供的方法来检查内存泄露:Node Nodeprocess.memoryUsage$node process.memoryllsage{rss:23699456」heapTotal:9232384heapUsed:5019712,external:8776}」（）所有内存占用,包括指令区和堆栈rss residentset size:堆,,占用的内存,包括用到的和未用到的heapTotal:用到的堆heapUsed:引擎内部对象占用的内存external:V8C++判断内存泄露以为准heapUsed如何处理内存泄漏？变量导致的内存泄露，将变量清除即可a=null事件监听导致的内存泄露，监听后移除即可面向对象中继承实现40js、原型链继承核心将父类的实例作为子类的原型
1、构造继承核心使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没2用到原型）、实例继承核心为父类实例添加新特性，作为子类实例返回
3、拷贝继承
4、组合继承核心通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例5作为子类原型，实现函数复用、寄生组合继承核心通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时6候，就不会初始化两次实例方法/属性，避免的组合继承的缺点降低页面加载时间的方法
41、减少请求（合并文件、合并图片）1http、优化图片文件，减小其尺寸，特别是缩略图，一定要按尺寸生成缩略图然后调用，不要在网页2中用方法实现，虽然这样看到的图片外形小了，但是其加载的数据量一点也没减少曾经resize见过有人在网页中加载的缩略图，其真实尺寸有之巨…普通图像、也要尽可能压缩后，可以10M icon采用图像保存、减少颜色数等等方法实现web
3、图像格式的选择GIF提供的颜色较少，可用在一些对颜色要求不高的地方、压缩、代码一般、文件中存在大量的空格、换行、注释，这些利于阅读，4Javascript CSSjs css如果能够压缩掉，将会很有利于网络传输这方面的工具也有很多，可以在百度里搜索一下关键字〃css代码压缩〃，或者〃代码压缩〃将会发现有很多网站都提供这样的功能，当然了你也可以自己写程序js来做这个工作，如果你会的话就拿我们这个网站来说吧刚开始上传这个网站的时候，我的很多Css代码都没有压缩，后面发现了这个问题，我就上网找了相关的网站的压缩代码的功能,最后就把很多CSS文件都压缩了这个压缩比率还是比较高的，一般都有百分五十左右这个代码压缩对于网页的加载还是很有用的、服务器启用压缩功能将要传输的文件压缩后传输到客户端再解压，在网络传输数据量会5gzip大幅减小在服务器上的、可直接启用，也可用代码直接设置传输文件头，增加的设Apache Nginxgzip置，也可从负载均衡设备直接设置不过需要留意的是，这个设置会略微增加服务器的负担服务器性能不是很好的网站，要慎重考虑.标明高度和宽度如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图6片很多，浏览器需要不断地调整页面这不但影响速度，也影响浏览体验当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容从而加载时间快了，浏览体验也更好了、网址后面加上“/”对服务器而言，不加斜杠服务器会多一次判断的过程，加斜杠就会直接返7回网站设置的存放在网站根目录下的默认页面攻击技术42web定义即为中文名为跨站脚本，是发生在目标用户的浏览器层面上的，XSS XSS,Cross SiteScripting,当渲染树的过程成发生了不在预期内执行的代码时，就发生了攻击跨站脚本的重点不在DOM JSXSS‘跨站上，而在于，脚本，上大多数攻击的主要方式是嵌入一段远程或者第三方域上的代码XSS JS实际上是在目标网站的作用域下执行了这段代码js工作原理，手写原生请求43ajax ajaxfunctioncreateXMLHTTPRequest{〃
1.创建XMLHttpRequest对象〃这是对象无部使用中最复杂的一步XMLHttpReuquest〃需要针对和其他类型的浏览器建立这个对象的不同方式写不同的代码IEvar xmlHttpRequest;if window.XMLHttpRequest{〃针对FireFox,Mozillar,Opera,Safari,IE7,IE8xmlHttpRequest=new XMLHttpRequest;〃针对某些特定版本的浏览器的进行修正mozillar BUGifxmlHttpRequest.overrideMimeType{xmlHttpRequest.overrideMimeTypeCtext/xml;}else ifwindow.ActiveXObject{〃针对IE6,IE
5.5,IE5〃两个可以用于创建对象的控件名称，保存在一个的数组中XMLHTTPRequest js〃排在前面的版本较新var activexName=[MSXML
2.XMLHTTR,Microsoft.XMLHTTP];forvari=0;iactivexName.length;i++{try〃取出一个控件名进行创建，如果创建成功就终止循环〃如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建xmlHttpRequest=new ActiveXObjectactivexName[i];ifxmlHttpRequest{break;}}catch e{return xmlHttpRequest;清除浮动的几种方式44方式一:使用属性来清除浮动overflow.ovh{overflow:hidden;}先找到浮动盒子的父元素，再在父元素中添加一个属性就是清除这个父overflow:hidden,元素中的子元素浮动对页面的影响.注意一般情况下也不会使用这种方式，因为有一个特点，离开了这个overflow:hidden元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.方式二:使用额外标签法.clear{clear:both;}在浮动的盒子之下再放一个标签，在这个标签中使用来清除浮动对页面的影响.cleauboth,.内部标签会将这个浮动盒子的父盒子高度重新撑开.a外部标签会将这个浮动盒子的影响清除，但是不会撑开父盒子.b.注意一般情况下不会使用这一种方式来清除浮动因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.方法三:使用伪元素来清除浮动（意思:后来,以后）after.clearfix:after{吗〃设置内容为空content:，高度为height:0〃行高为line-height:O;0〃将文本转为块级元素display:block;〃将元素隐藏visibility:hidden;〃清除浮动clear:both）.clearfix{为了兼容zoom:l;IE）方法四:使用双伪元素清除浮动.clearfix:before,.clearfix:after{content:display:block;clear:both;}.clearfix{zoom:1;如何使用原生给一个按钮绑定两个事件45js onclick绑定方式addEventListener是什么，安装使用的步骤是46scss首先安装建议安装到盘中，安装过程中选择安装成ruby,C AddRuby executablesto yourPATH ruby功后，启动的控制面板，输入命令Ruby Command回车后会自动安装好gem installsass Sass先在项目中创建一个文件，此例中将其命名为〃〃，并且将其放在对应的项目样式Sass style.scss中启动的控制面板，找到需要转译的文件在对应的目录下输入下面的命令Ruby CommandSasssass style.scss style.csssass-watch style.scss:style.css就会生成自动〃文件，并自动更新对应的样式文件style.css CSS几种导航钩子
47、全局导航钩子，直接挂载在实例上的1routerbeforeEach在跳转之前执行beforeEachto,from,nextbeforeResolveafterEach在跳转之后判断、某个路由独享的导航钩子2beforeEnter、路由组件上的导航钩子3在渲染该组件的对应路由被前调用beforeRouteEnter confirm新增在当前路由改变但是依然渲染该组件是调用beforeRouteUpdate
2.2,导航离开该组件的对应路由时被调用beforeRouteLeave谈谈你对前端开发的想法48前端作为一个工作，其主要工作领域是浏览器端，核心技术包括等1,JavaScript,css,html还要处理服务器通信，以及部分服务器脚本开发的工作，比如发布、测试脚本，、页面脚本2,jsp php有时，还需要与产品经理、交互设计，共同完成一些交互设计可以看出，前端处于设计与后台的中3,间领域，起到承上启下的做要求前端工程师的知识面在横向上必须要广服务器技术要懂，产品与交互也要懂4,当今如果还是走纯前端只会页面制作那基本走不了多远了，很多公司企业都需要一个人完成页面的5,设计，制作，后台交互到上线使用吗，说下他其中的两个组件49elementUI表格上传表单验证等等同步和异步的区别50语言是单线程机制所谓单线程就是按次序执行，执行完一个任务再执行下一个对于浏Javascript览器来说，也就是无法在渲染页面的同时执行代码单线程机制的优点在于实现起来较为简单，运行环境相对简单缺点在于，如果中间有任务需要响应时间过长，经常会导致页面加载错误或者浏览器无响应的状况这就是所谓的“同步模式”，程序执行顺序与任务排列顺序一致对于浏览器来说，同步模式效率较低，耗时长的任务都应该使用异步模式；而在服务器端，异步模式则是唯一的模式，如果采用同步模式个人认为服务器很快就会出现在高峰期的表现异步模式的四种方式
12306.回调函数1callback所谓回调函数，就是将函数作为参数传到需要回调的函数内部再执行典型的例子就是发送请求例如ajax$.ajax{async:false,cache:false,dataType:json,url:url,success:functiondata{console.logsuccess;},error:functiondata{console.logerror;当发送请求后，等待回应的过程不会堵塞程序运行，耗时的操作相当于延后执行回调函数的}ajax优点在于简单，容易理解，但是可读性较差，耦合度较高，不易于维护.事件驱动2可以称之为是基于对象的语言，而基于对象的基本特征就是事件驱动事件驱动，指的是javascript由鼠标和热键的动作引发的一连串的程序操作例如，为页面上的某个$,#btn.onclickfunction{console.Iogclick button;}；绑定事件相当于在元素上进行监听，是否执行注册的事件代码取决于事件是否发生优点在于容易理解，一个元素上可以绑定多个事件，有利于实现模块化；但是缺点在于称为事件驱动的模型后，流程不清晰,发布/订阅3发布订阅模式又称为观察者模式该模式中，有两类对publish-subscribe patternObserver pattern象观察者和目标对象目标对象中存在着一份观察者的列表，当目标对象的状态发生改变时，主动通知观察者，从而建立一种发布/订阅的关系模式
4.promise对象是工作组提供的一种规范，用于异步编程的统一接口promise CommonJS对象通常实现一种的方法，用来在注册状态发生改变时作为对应的回调函数promise then模式在任何时刻都处于以下三种状态之一未完成、已完成和拒绝promise unfulfilledresolved rejected以标准为例，对象上的方法负责添加针对已完成和拒绝状态下的处CommonJSPromise/A promisethen理函数方法会返回另一个对象，以便于形成管道，这种返回对象的方then promise promisepromise式能够支持开发人员把异步操作串联起来，如回thenresolvedHandler,rejectedHandler;resolvedHandler调函数在对象进入完成状态时会触发，并传递结果；函数会在拒绝状态下调用promise rejectedHandler在的版本中引入了一个新的概念叫就是标准的一种衍生可以Jquery
1.5Deferred,CommonJS promiseA在中创建的对象同时也对发送请求以及数据类型有了新的修改，参考jQuery$.Deferref ajaxJQueryAPIo除了以上四种，中还可以利用各种函数模拟异步方式，更有诡异的诸如用同步调用异步的javascript case只能用里同事形容和的一句话作为结尾team javajavascript组件是怎么定义的51vue
一、创建组件构造器创建组件构造器的方法很简单，只需要以下语句即可var MyCompontent=Vue.extend{...};然而这个时候还不能直接使用组件，需要把组件注册到应用中
二、注册组件提供了两种注册组件的方式，分别为全局注册和局部注册，下边分别介绍Vuejs全局注册需要确保在根实例初始化之前注册，这样才能使组件在任意实例中都可以使用注册方式如下Vue.componenHmy-componenyMyComponent;//止匕句——定要放在newVue{.・・};之前注册过程中也指定了组件的HTML标签本例为my・component;局部注册限定了组件只能在被注册的组件中使用，而无法在其他组件中使用的语法了解么52async/await用来表示函数是异步的，定义的函数会返回一个对象，可以使用方法添加async promisethen回调函数可以理解为是的简写必须出现在函数内部，不能单独使用await asyncwait awaitasync后面可以跟任何的表达式虽然说可以等很多类型的东西，但是它最主要await JSawait的意图是用来等待对象的状态被如果的是对象会造成异步函数停Promise resolved0await promise止执行并且等待的解决,如果等的是正常的表达式则立即执行promise实现布局中间自适应，左右两栏固定宽度53section class=Mlayout floatMstyle.layout.float.left{float:left;width:300px;background:red;}.layout.float.right{float:right;width:300px;background:blue;}.layout.float.center{background:yellow;}/stylearticlediv class=nleft-center-rightu class=leftx/divdiv clas s=M right*/divdiv class=ncenterhl浮动解决方案/hlpl.这是布局的中间部分/pp
2.这是布局的中间部分/p/div/article/sectionsection class=layout flexboxstyle.layout.flexboxmargin-top:140px;},layout.flexbox.left-center-rightdisplay:flex;}.layout.flexbox.left width:300px;background:red;}.layout.flexbox.centerflex:1;background:yellow;}.layout.flexbox.right{width:300px;background:blue;}/stylearticle class=nleft-center-rightdiv class=Mleftx/divdiv class=,,center〈hlflexbox的解决方案/hlpl.这是布局的中间部分々p
2.这是布局的中间部分介/divdiv class=right/div/article/section分别表示什么54box-sizings transition9translate用来指定盒模型的大小的计算方式分（从边框固定盒子大小）和box-sizing boder-box（从内容固定盒子大小）content-box当前元素只要有〃属性〃发生变化时，可以平滑的进行过渡可以设置过渡属性/时间/transition速度/延时通过移动改变元素的位置有三个属性translate x,y,z和的区另（55display none visibility hiddenJ是彻底消失，不在文档流中占位,浏览器也不会解析该元素;Ldisplay:none visibility:hidden是视觉上消失了，可以理解为透明度为的效果，在文档流中占位，浏览器会解析该元素；
0.使用比性能上要好，切换显示时页面产生2visibility:hidden display:none display:nonevisibility,回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就怎么实现双向数据绑定6vue数据双向绑定是通过数据劫持结合发布者•订阅者模式的方式来实现的其实主要是用了中vue Es5的来劫持每个属性的和这也正是不兼容以下的原因Object.defineProperty;getter,setter VueIE8o发布者■订阅者模式订阅是请求在某些事件到达时可以通知它并执行对应的动作event action,而发布则相对的是向订阅告知事件已经到达，你可以执行对应的动作了event action的简述7promise是异步编程的一种解决方案，通俗的来讲是一个许诺、承诺，是对未来事情的承Promise Promise诺，承诺不一定能完成，但是无论是否能完成都会有一个结果应用场景解决回调地狱比如我们经常可能需要异步请求一个数据之后作为下一个异步操作的入参1可以实现在多个请求发送完成后再得到或者处理某个结果2promise最简单的实现基于上面的应用场景发现可以有三种状态，分别是、、promise pendingFulfilled Rejectedo对象实例创建时候的初始状态Pending Promise可以理解为成功的状态Fulfilled可以理解为失败的状态Rejected构造一个实例需要给构造函数传入一个函数传入的函数需要有两个形参,两Promise Promise个形参都是类型的参数分别是和function resolve reject上还有方法，方法就是用来指定对象的状态改变时确定执行的操作，Promise thenthen Promise时执行第一个函数时执行第二个函数resolve onFulfilled,reject onRejected当状态变为时便不能再变为反之同理resolvereject,基本api1new Promise2PromiseObj.thenresolveFn,rejectFnresolveFn就是Promise对象成功的回调处理函数，指向resolverejectFn就是Promise对象失败的回调处理函数这个静态方法的参数是一个可迭代的对象,这个对象的应该都是对象，3Promise.all itempromise若不是的话，就会先调用上面的方法转换成新的对象方法Promise.resolveitem promise Promise.all返回的也是一个对象promise将一个值，数字，字符串…转换为对象4PromiseObj.resolve Promise方法返回一个用拒绝的你可以这样理解，返回的这个5Promise.rejectreason reasonPromisepromise对象在初始化的时候,什么都没有做，直接给reject yourreject reson8es6的了解是一个新的标准，它包含了许多新的语言特性和库，是实质性的一次升级es6JS新增模板字符串为提供了简单的字符串插值功能JavaScript箭头函数操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=outputs for-of用来遍历数据一例如数组中的值for letindex of[a,b].leys{console.logindex;对象可被不定参数和默认参数完美代替arguments将对象纳入规范，提供了原生的对象ES6promisePromise增加了和命令，用来声明变量增加了块级作用域命令实际上就增加了块级作用let constlet是回流所有页面第一次加载时需要产生一次回流），而切换是否显示时则不会引起回流visibility是什么，怎么使用56v-model这个指令只能用在（〉,〈〉,这些表单元素上，所谓双向绑定，指的v-model inputselect textarea就是我们在中的实例中的与其渲染的元素上的内容保持一致，两者无论谁被改变，js vuedata dom另一方也会相应的更新为相同的数据找出一个字符串中出现次数最多的字符以及次数57scriptvar str=zhaochucichuzuiduodezifu;var o={};for vari=0,length=str.length;ilength;i++{//var char=str[i];var char=str.charAti;if o[char]{//char就是对象o的一个属性，o[cha门是属性值,o[cha门控制出现的次数o[char]++;//次数加1}else{o[char]=1;//若第一次出现，次数记为1console.logo;〃输出的是完整的对象，记录着每一个字符及其出现的次数//遍历对象，找到出现次数最多的字符和次数var max=0;var maxChar=null;for var key ino{if maxo[key]{max=o[key];〃max始终储存次数最大的那个maxChar=key;//那么对应的字符就是当前的key},console.log最多的字符是,,+maxChar;console.log由现的次数是+max;/script实现一个千位符分割方法58function cenum{return numnum.toStringO.indexOfC.!=-1num.toString.replace/\d=\d{3}+\-/g,function$0,$1{return$1+}:num.toString.replace/\d=\d{3}/g,function$O$1{zreturn$1+“J;}；console Jogce
1353400.23;实现一个拍平数组的函数59关键在于定义两个函数，一个函数判断输入的值是否为数组，另一个用来递归调用拍平数组vararr=[l,[[[7,21,8,9],3]]；function farr{if Object.prototype.toString.callarr!=[object Array]return;var newArr=[];varj=0;function fnarr{{〃遍历数组for vari=0;iarr.length;i++{〃判断是不是多维数组的设置可以选择从左往右拍几次，ifarr[i].lengthj=3J去掉即可完全打平j+=l；〃递归调用fnarr[i];}else{newArr.pusharr[i];fnarr;return newArr;arr=farr;console.logarr;第二种更简洁的算法var simpleArr=function arr{return arr.toString.match/\d/g.mapele=+ele;；}var arrNew=simpleArrarr;console.logarrNew写一个函数找出一个整数数组中倒数第二大的数60van arr=[1,6,3,5,8,200,9,8,1000,1]forvar i=0;iarr.length-1;i++{forvar j=0;jarr.length-i-l;j++{ifarr[j]arr[j+l]{var temp=arr[j];arr[j]=arr[j+1];arr[j+l]=temp;}}}console.logarrconsole.log倒数第二大值,+arr[arr.length-2]例举自己读过的经典的技术书61前端开发最佳实践
1.Web.犀牛书2红宝书等等
3.咨询淘宝卖家，这个过程是怎么实现的一般使用62websocket类和类怎么继承63由于并没有类的概念，更多的时候我们把它叫做对象然后把对象叫做实例JS classfunction,instanceo、属性的继承1function show{alertthis;}〃很显然输出对象show;//[object window]window.再来看一下2function show{alertthis;show.call123;//123这是因为函数调用方法时，第一个参数会覆盖函数中的也就是说，这里把覆盖了call this123this这是方法的一个用法call.继续介绍，刚步入正题3function A{this.aaa=111;var objA=new A;alertobjA.aaa;//111通过类:创建一个对象,所以对象就具有了这个属性A:objA:objA aaaps这里的构造函数A,就相当于“类”我们平时经常会用到“类，像Array,Date...等，这些都是系统内置的“类”，我们叫它系统“类”，而上面的就是我们自己自定义的“类”A.终于说到继承属性了4function A{this.aaa=111;function B{A.callthis;var objB=new B;〃实现继承属性alertobjB.aaa;//111解释一下:通过类创建对象后，类中的指向这时候就相当于B objBB this objB,A.callthis正如前面所说，会覆盖类:中的所以就具有了属性，所以就实现了属性A.callobjB,objB Athis,bjB aaa的继承、方法的继承2简单的写法
1.function A{}function B{}A.prototype.showA=function{alertaaa;；B.prototype=A.prototype;var objA=new A;var objB=new B;〃证明确实继承了的方法objB.showA;//aaa BA但是这种方法虽然简单，但是有个很大的缺陷，实际上是对的引用B.prototype A.prototypeB.prototype.showB=function{alertbbb;；然后〃这就证明，确实是对的引用objA.showB;//bbb B.prototype A.prototype.避免引用2function A{}function B{}A.prototype.showA=function{alertfaaa;；〃用循环，将的属性一一赋给这样就不会造成对引用foj.in…A B,B.prototype A.prototypefor leti inA.prototype{B.prototype[i]=A.prototype[i];B.prototype.showB=function{alertbbb;；var objA=new A;var objB=new B;〃证明继承了的方法objB.showA;//aaa BA〃证明上并没有方法，说明没有被引用objA.showB;//error AshowB A还有怎么获取页面渲染时间64这是整个过程中开始时的时间戳，浏览器第一次收到文档的字节开始domLoading:HTML解析时的时间戳当浏览器完成了所有的解析且构造完成时的时间戳domlnteractive:HTMLDOM・和的区别65V ifV-show区别就是元素是否挂载了，是树上有内容，不显示，是dom v-show domdisplaynone；v-if树上无内容dom抓包工具66如果是想在端查看移动设备里的请求，可以使用（系统）或者PC httpFiddler windowCharles（系统）的使用非常简单Mac Charles闭包会使变量无法释放造成内存泄漏，怎么释放这个变量67原因闭包可以维持函数内局部变量，使其得不到释放解决将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中,删除对的引用dom怎么加密的68https就是在传输协议的基础上对网站进行认证，给予它独一无二的身份证明，HTTPS HTTP再对网站数据进行加密，并对传输的数据进行完整性验证作为一种加密手段不仅加密了数据，还给了网站一张身份证HTTPS今天问了我写过什么单元测试没69的前端测试工作流Mocha/Karma+Travis.CI轮询70Ajax轮询------”定时的通过查询服务端工Ajax Ajax概念轮询（）客户端按规定时间定时像服务端发送请求，服务器接到请求polling ajax后马上返回响应信息并关闭连接登录页面有个记住密码请说出几种保存用户密码的方式哪种安全性高71如果勾选了记住密码和自动登录的按钮，然后便将这个记录到中，假设设置cookie cookie的寿命为天，这样便把用户的相关信息存入了浏览器中，接下来就是如何在下一次点开7登陆界面的时候自动填充数据首先在页面加载的一开始便进行了判断，如果中记录了记住我和自动登录，那cookie么便自动填充数据，如果是自动登录，可以设置等待五秒钟，若是在等待过程中用户取消了勾选自动登录，那么监听器便接收到，从而改变状态，不会进入下一个界面前端如何模拟数据72方法一请求本地的文件json方法二用mock.js方法三用搭建一个服务器模拟后台Node.js中什么时候用；73vue$set如果在实例创建之后添加新的属性到实例上，它不会触发视图更新例子错误的var data={简书:name:age:3;info:{content:my nameis test}}var key=content;var vm=new Vue{el:#app，data:data,ready:=男function{}};data.sex；这样是的okvar data={简书，name:age:3,info:{content:my nameis test}}varkey=content,;new Vue{el:#app,data:data,ready:function{Vue.setdata,sex,this.SsetCinfo.+key,what isthis;}};有没有遇到树形结构你怎么做的74省市县的联动等等，使用等等,他们的实现方式是大同小异easyui,dynatree,ztree怎么同步请求，跟异步请求有什么区别75ajax的这个属性默认是异步，同步jquery async:false,truefalse同步是指发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式用户填写所有信息后，提交给服务器，等待服务器的回应（检验数据），是一次性的信息错误又要重新填写！异步是指发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端,在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验打包文件比较大怎么优化76webpack js去掉开发环境下的配置
1.提取样式到文件
2.ExtractTextPlugincss打包文件体积和依赖关系的可视化
3.webpack-bundle-analyzerwebpack提取通用模块文件
4.CommonsChunkPlugin提取让提取的公共的值不要改变
5.manifest:js hash压缩图片
6.js,css,请写出动画,圆角77css3CSS3角，阴影的样式语法、设置某一个角的圆角左上角右上角右下角左下角；1border-radius:、比如设置左上角的圆角2border-top-left-radius:30px60px;、同时设置四个角3border-radius:30px20px10px50px;、设置四个角相同常用是正圆4border-radius:20%;border-radius:50%;阴影CSS
3、水平偏移垂直偏移羽化大小扩展大小颜色是否内阴影1box-shadow:动画直接进行动画，不需要触发CSS3animation动画名称动画持续时间动画运动方式动画开始延迟时间动画应用次数动画结束后是否按原animation:路返回动画前后的状态;同时设置多个属性使用语法查找上一个兄弟元素78jquery找父亲节点，可以传入进行过滤,比如或者jQuery.parentexpr expr$”spanparent$span.parent.class类似于但是是查找所有祖先元素，不限于父元素jQuery.parentsexpr,jQuery.parentsexpr,返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点jQuery.childrenexpr.,返回下面的所有内容，包括节点和文本这个方法和的区别就在于，包括jQuery.contents children空白文本，也会被作为一个对象返回，则只会返回节点jQuery children返回上一个兄弟节点，不是所有的兄弟节点jQuery.prev,返回所有之前的兄弟节点jQuery.prevAII,,返回下一个兄弟节点，不是所有的兄弟节点jQuery.next返回所有之后的兄弟节点jQuery.nextAIIQ,返回兄弟姐妹节点，不分前后jQuery.siblings,中的与的区别79Jq$document.ready window.onload执行时机1方法是在网页中的所有的元素包括元素的所有关联文件都完全加载到浏览器之后window.onload才执行而通过jQuery中的$9℃66鼠.ready方法注册的事件处理程序，只要在DOM完全就绪时，就可以调用了，比如一张图片只要＜＞标签完成，不用等这个图片加载完成，就可以设置图片的宽img高的属性或样式等注册事件2方法可以多次使用而注册不同的事件处理程序，而一次只能保存$document.ready window.onload对一个函数的引用，多次绑定函数只会覆盖前面的函数请描述一下设计模式的结构及其优势80mvc的具体含义是即模型+视图+控制它们各自处理自己的任务MVC model+view+control,模型模型持有所有的数据、状态和程序逻辑模型独立于视图和控制器1视图用来呈现模型视图通常直接从模型中取得它需要显示的状态与数据对于相同的信息可以2有多个不同的显示形式或视图控制器位于视图和模型中间，负责接受用户的输入，将输入进行解析并反馈给模型，通常一个视3图具有一个控制器模式将它们分离以提高系统的灵活性和复用性，不使用模式，用户界面设计往往将这些对象MVC MVC混在一起模式实现了模型和视图的分离，这带来了几个好处MVC一个模型提供不同的多个视图表现形式，也能够为一个模型创建新的视图而无须重写模型一旦模1型的数据发生变化，模型将通知有关的视图，每个视图相应地刷新自己模型可复用因为模型是独立于视图的，所以可以把一个模型独立地移植到新的平台工作2提高开发效率在开发界面显示部分时，你仅仅需要考虑的是如何布局一个好的用户界面；开发模3型时，你仅仅要考虑的是业务逻辑和数据维护，这样能使开发者专注于某一方面的开发，提高开发效率总的来说设计模式可以方便开发人员分工协作，提高开发效率增强程序的可维护性和拓展性而且MVC还利用将与分离，降低它们之间的耦合度Controller ModelView给定一个数组，如何实现数组内元素的顺序进行随机排序，请给出算法的时间复杂度81复杂度为Onfunction shufflearr{var len=arr.length;for vari=0;ilen-1;i++{var index=parselntMath.random*len-i;var temp=arr[index];arr[index]=arr[len-i-1];arr[len-i-1]=temp;}return arr;var arr=[-2,1,3,4,5,6,7,8,9];〃结果不唯一console.Iogshufflearr;请解释一下的弹性盒布局模型，以及应用场景82css3flexbox是的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性任何一个容器flex FlexibleBox都可以指定为布局块级元素只需要属性为即可行内元素也可以使用布Flex displayflex Flex局}内核的浏览器，必须加上前缀,box{display:inline-flex;Webkit-webkit.基本概念2采用布局的元素，称为容器简称“容器”它的所有子元素自动成为容器Flex Flex flex container,成员，称为项目简称“项目”容器默认存在两根轴水平的主轴和垂直的交Flexflexitem,main axis叉轴项目默认沿主轴排列cross axiso事件委托，事件冒泡和捕获，如何阻止事件冒泡，如何阻止默认事件83事件委托也称事件代理，高程上讲事件委托就是利用事件冒泡，指定一个事件处理程序,就JavaScript可以管理这一类型的所有事件比如我有一个标签，下面有很多标签，每个标签都需要添加事件，难道我们要获取每个然后ul li lili在添加事件吗？这样太浪费内存了，也不利于网页性能优化，我们要尽可能减少操作，所以我们dom能不能只给3添加点击事件，然后利用事件冒泡，这样每个标签都有事件了，li事件冒泡自下往上的触发事件〃文档结构上事件类型二处理函数，addEventListener false事件捕获自上往下的触发事件〃文档结构上不支持”事件类型”，处理函数,ie addEventListenertrue取消冒泡event.stopPropagation独有event.cancelBubble=true.ie阻止默认事件标签的跳转和右击菜单areture false;event.preventDefault;兼容evevt.return.Value=false;ie中箭头函数有哪些新特点，并且说明箭头函数和普通函数中的指向84ES6this
①没有和绑定，箭头函数中的这些值由外围最近一层非箭头函数决定this,super,arguments new.target
②不能通过关键字调用它没有所以不能用作构造函数如用会报错new[[Construct]],
③没有原型prototype
④不可以改变的绑定，函数内部的值不可被改变，在函数的生命周期内始终保持一致this this
⑤不支持对象所以只能通过命名参数和不定参数两种形式访问函数参数arguments
⑥不支持重复的命名函数普通函数中的this:总是代表它的直接调用者，例如那么中的就是
1.thisobj.func,func thisobj.在默认情况非严格模式下,未使用没找到直接调用者，则指的是2use strictthis window.在严格模式下,没有直接调用者的函数中的是3this undefined.使用新增绑定的,指的是绑定的对象4call,apply,bindES5this箭头函数中的this默认指向在定义它时，它所处的对象，而不是执行时的对象，定义它的时候，可能环境是即继承window父级的this;你所使用的的功能有哪些85nodejs是一个可以让运行在服务器端的平台；适合应用在高并发、密集、少Node.js javascriptNode.js I/O量业务逻辑的场景善于不善于计算因为最擅长的就是任务调度，如果你的业务有很多的计算,实际I/O,Node.js CPU上也相当于这个计算阻塞了这个单线程，就不适合开发Node当应用程序需要处理大量并发的而在向客户端发出响应之前，应用程序内部并不需要进行非常I/O复杂的处理的时候，非常适合也非常适合与配合，开发长连接的实时交互Node.js Node.js websocket应用程序比如•用户表单收集•考试系统•聊天室•图文直播•提供的为前台使用JSON APIAngular用实现一个图片加载成功输出加载失败后输出86promise success,errorfunction loadlmageAsyncurl{return newPromiseresolve,reject={var image=new lmage;image.onload=function{resolveimage;}image.onerror=function{rejectnew ErrorCouldnot loadimage at+url}image.src=url}区别87Let constvar定义的变量不可以修改，而且必须初始化const定义的变量可以修改，如果不初始化会输出不会报错var undefined,是块级作用域，函数内部使用定义后，对函数外部无影响let let区别88Jquery on bind的跟绑定事件的区别主要是事件冒泡；jquery bindon文档中和函数绑定事件的用法jquery bindon.bindevents[.eventData],handler.onevents[.selector][.data],handler方法比方法多一个参数的参数是筛选出调用方法的元域.on.bind selector,.on selector.on domES6规定，命令和命令声明的全局变量，属于全局对象的属性；命令、命令var functionlet const命令声明的全局变量，不属于全局对象的属性class还有就是引入模块的概念module路由拦截9主要是利用提供的钩子函数对路由进行判断vue-router beforeEach即将要进入的目标路由对象\$「常用*to:Route:1^当前导航正要离开的路由*from:Route:一定要调用该方法来这个钩子执行效果依赖方法的调用参数*next:Function:resolve next进行管道中的下一个钩子如果全部钩子执行完了，则导航的状态就是确认的*next:confirmed中断当前的导航如果浏览器的改变了可能是用户手动或者浏览器后退按钮，那么*nextfalse:URL地址会重置到路由对应的地址URL from*next7或者next{path:7}跳转到一个不同的地址当前的导航被中断，然后进行一个新的导航路由传值主要使用三种方法10vue$router.push/name+params/path+query方案一getDescribeid{//直接调用$卬卜实现携带参数的跳转9a2115this.$router.push{path:/describe/${id},}//方案一，需要对应路由配置如下{path:/describe/Jd*,name:Describe,component:Describe}〃很显然,需要在中添加来对应中携带的参数path/:id$router.push path//在子组件中可以使用来获取传递的参数值方案二〃父组件中通过路由属性中的来确定匹配的路由，通过来传递参数name paramsthis.$router.push{name:Describe,params:{id:id}〃对应路由配置注意这里不能使用:来传递参数了，因为父组件中，已经使用来携带/id params参数了{path:/describe,name:Describe,component:Describe素的指定子元素，由于的事件冒泡特性，如果我们在父元素上注册了一个事件处理函数,当子JavaScript元素上发生这个事件的时候，父元素上的事件处理函数也会被触发如果使用的时候，不设置n selector,那么与就没有区别了onbind和的区别89Null undefinednull:Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到“object”，所以你可以认为它是一个特殊的对象值类型，当一个声明了一个变量未初始化时，得到的就是行undefined:Undefined undened和的含义和区别
90.callapply apply调用一个对象的一个方法，用另一个对象替换当前对象例如:B.applyA,arguments;即A对象应用对象的方法B调用一个对象的一个方法，用另一个对象替换当前对象例如即对象调call:B.callA,argsl,args2;A用对象的方法B它们的共同之处都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由指定的新对象”thisObj它们的不同之处最多只能有两个参数新对象和一个数组如果给该方法传递多个参数,则把参apply:this argArray数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里如果不是一个有效的数argArray组或对象，那么将导致一个如果没有提供和任何一个参数，那么arguments TypeErrorargArray thisObjo对象将被用作并且无法被传递任何参数Global thisObj,它可以接受多个参数，第一个参数与一样，后面则是一串参数列表这个方法主要用在call:apply对象各方法相互调用的时候，使当前实例指针保持一致，或者在特殊情况下需要改变指针js thisthis如果没有提供参数,那么对象被用作thisObj GlobalthisObj实际上，和的功能是一样的，只是传入的参数列表形式不同apply call描述一下以及在上面情况下使用91keep-alive在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用来缓存组件，防止二次keep-alive渲染，这样会大大的节省性能当弓入的时候,页面第一次进入，钩子的触发顺序〉退出时I keep-alive created-mounted-activated,触发当再次进入前进或者后退时，只触发deactivated activated的基本用法
2.keep-alive在中app.vue!--缓存所有的页面1Ikeep-aliverouter-view v-if=$route.meta.keep_alive/router-view/keep-aliverouter-view v-if=!$route.meta.keep_alive/router-view需要缓存的组件内容直接在「中添加outermeta:{keepAlive:true//true表示需要使用缓存false表示不需要被缓存3I）是什么，他的用途有哪些92vue-loader:解析和转换文件，提取出其中的逻辑代码、样式代码、以及模版vue-loader.vue scriptstyle HTML再分别把它们交给对应的去处理template,Loader中可以通过哪些途径给元素和组件添加过度或者动画93Vue过度（动画），本质走的是Vue CSS3:transtion,animationo实现动画必须要将要进行动画的元素利用〈〉标签进行包裹transition利用样式实现过渡效果K CSS〉〈/〉transition name=fade transition定义进入过渡的开始状态在元素被插入时生效，在下一个帧移除v-enter:定义过渡的状态在元素整个过渡过程中作用，在元素被插入时生效，在v-enter-active:完成之后移除这个类可以被用来定义过渡的过程时间，延迟和曲线函数transition/animation版及以上定义进入过渡的结束状态在元素被插入一帧后生效（于此同时被删除），在v-enter完成之后移除transition/animation定义离开过渡的开始状态在离开过渡被触发时生效，在下一个帧移除v-leave:定义过渡的状态在元素整个过渡过程中作用，在离开过渡被触发后立即生效,在v-leave-active:完成之后移除这个类可以被用来定义过渡的过程时间，延迟和曲线函数transition/animation版及以上定义离开过渡的结束状态在离开过渡被触发一帧后生效（于此同时被删除），v-leave在完成之后移除transition/animation列举一些你掌握的前端技术栈93grunt/gulp,npm,requre.js/seajs等辅助性技术；学习prototype/_proto_等较晦涩的语法知识；掌握MVC/MVP/MVVM等设计模式；Backbone.js/Vue.js/React/AngularJS等框架；jQuery/Protorype/等库lodash中如何检测一个变量是类型94Js stringfunctionaobj{return typeofobj==string,;alerta123;alertaabc;写出个使用的典型应用953this、在元素事件属性中使用，如1html〈input type=button onclick=showlnfothis;n value二点击一下”/、构造函数2function Anima^name,color{this.name=name;this.color=color;、点击，获取值3input二点击一下”/input type=button id=text valuescripttype=text/javascriptvar btn=document.get日ementByld”text”；btn.onclick=function{〃此处的是按钮元素alertthis.value;this/script⑷、求数组最值apply/callvar numbers=[5,458,120,-215];var maxInNumbers=Math.max.applythis,numbers;console.logmaxlnNumbers;//458var maxInNumbers=Math.max.callthis,5,458,120,-215;console.logmaxlnNumbers;//458比较与96typeOf instanceOf其实和的目的都是检测变量的类型，两个的区别在于一般是检测的typeof instanceoftypeof是基本数据类型,主要检测的是弓用类型！instanceof I什么是盒子模型97在盒子模型规定了元素处理元素的几种方式内容、内边距、边框、外边距在的CSS BoxModel CSS标准盒子模型中，和指的是内容区域的宽度和高度增加内边距、边框和外边距不会影响width height内容区域的尺寸，但是会增加元素框的总尺寸盒子模型中，和指的是内容区域IE widthheight的宽度和高度+border+padding如何判断变量是否是{}98X使用加属性，数组有属性，没有，而数组与对象都返回所以我typeof lengthlength objecttypeof object,们可以这么判断常用的解决方案，简要描述一下与的区别99Css transitionkeyframe允许属性值在一定的时间区间内平滑的过渡，transition:CSS需要事件的触发，例如单击、获取焦点、失去焦点等transitionproperty durationtiming-function delay;的属性，例如:为时停止所有的运动，可以为持续时间property:CSS widthheight nonetransform duratiorr等timing-function:ease延迟delay:注意当为的时候所有动画property all通过规则，您能够创建动画@keyframes创建动画的原理是，将一套样式逐渐变化为另一套样式CSS在动画过程中，您能够多次改变这套样式CSS以百分比来规定改变发生的时间，或者通过关键词等价于和from to,0%100%o是动画的开始时间，动画的结束时间0%100%为了获得最佳的浏览器支持，您应该始终定义和选择器0%100%适配的问题100bootstrap手机设备前缀768px,class col-xs-平板设备前缀=768px,class col-sm-中型设备台式电脑前缀=992px,class col-md-大型设备台式电脑前缀=1200px classcol-lg-大家要想在不同的设备上显示不同的布局只需要多适配就可以了手机真机调试问题101移动端调试页面的话可以使用这个工具1WEB BrowserSync一般公司会有测试环境和正式环境，一般代码都先传在测试环境上，直接在手机上输入那个网址2就可以看自己的写的页面用的调试3chrome inspect的安卓的4iOS Safari,chrome前端加密1021Md5结合加密2aes+hex力口密3base64平安壹钱包前端用的是加密平安一账通用的是加密MD5aes+hex模块化规范103js与CommonJS AMD.CMD是在推广过程中对模块定义的规范化产出AMD RequireJS是在推广过程中对模块定义的规范化产出CMD SeaJS区别对于依赖的模块，是提前执行，是延迟执行不过从开始，也改成可以延迟
1.AMD CMDRequireJS
2.0执行（根据写法不同，处理方式不同）推崇CMD aslazy aspossible.推崇依赖就近，推崇依赖前置
2.CMD AMD方法的使用场景104reduce函数形式:（（））arr.reduce pre,value,index,arr={},initArr;参数说明情况（没初始化值情况下）1第一次时候表示第一个选项，表示第二个选项，表示当前项的下标（此时当前项目pre valueindex是第二项），表示原数组arr第二次时候表示的是出来的值，表示下一个选项，一次类推pre returnvalue情况（有初始化值的情况下）2第一次时候表示初始化的值，表示第一个选项，表示第一个选项索引，表示数pre valueindex arr组本身第二次时候表示返回的值，表示第二个值，依次类推pre value使用场景需要累加数组值，计数的时候可使用//累加的值arrlet arr=[1，2,3,4];let total=arr.reducepre^value,index,arr={return pre+value;；}consoel.logtotal;//计数值大于的有几个2let arr=[1,2,3,4];let total=arr.reducepre,value,index,arr={if value2{return pre+1;return pre;；},0console.logtoatl;全选反选怎么实现105〃当全选选中的时候，单选也都全部不选中$#j_cbAir.clickfunction{var resault=$,#j_cbAH.prop,checked$#j_tb input^.propCchecked.resault}input.clickfunction{〃当单选中有一个没有选中的话，全选也不选中var inputlength=$#j_tb input.length;var inputchecklength=$#j_tb input:checked,length〃就是单选的长度等于选中的个数全选就选中二二二$#j_cbAIIpropcheckecT,inputchecklength inputlength〃当点击反选的时候，选中的都为不选中，没选中的都选中$#btn.clickfunction{forvar i=O;i$#j_tb input.length;i++{var items=$#j_tb input1]var answer=$items.propchecked$items.propchecked,,!answervar inputlength=$#j_tb input.length;var inputchecklength=$#j_tb input:checked.length//就是单选的长度等于选中的个数全选就选中$C#j_cbAir.prop,checked,inputchecklength===inputlength怎么防止表单重复提交105将提交按钮设置为不可用，让用户点击第一次提交之后，没有机会点击第二次提交按钮的机会1也可以将提交按钮隐藏起来，在点击第一次之后，将提交按钮隐藏起来防止表单重复提交主要用于网络延迟情况下用户点击多次按钮导致表单重复提2JavaScript submit交利用防止表单重复提交主要用于表单提交之后，点击浏览器刷新按钮导致表单重复提交，3Session以及点击浏览器返回按钮退回到表单页面后进行再次提交〃子组件中这样来获取参数方案三//父组件使用来匹配路由，然后通过来传递参数这种情况下传递的参数会显path queryquery示在后面url id=//对应路由配置{this.$router.push{path:/describe,,query:{id:id}path:/describe,,name:Describe,,component:Describe//对应子组件这样来获取参数//这里要特别注意在子组件中获取参数的时候是而不是$route.params$router从输入到页面加载的过程11URL解析1DNS连接2TCP发送请求3HTTP服务器处理请求并返回报文4HTTP浏览器解析渲染页面512js冒泡排序双重for循环+if判断+交换位回•上,闫连接结束6//van am=[65,97,76,13,27,49,58];var arr=[1,2,4,3,5,6,7];//轮数var m=0;//次数var n=0;//什么情况下，我们可以确定排序完毕？2//（语句中在一次循环下如果代码被执行了，没有排序完毕）//（一轮循环之后一次语句都没有被执行，说明排序完毕了）for if〃技术点开闭原则1//外循环控制轮数（元素个数减一）for（vari=0;iarr.length-1;i++）R〃开闭原则中的开关（默认是开启的）van bool=true;//内循环控制次数（元素个数减一）p for（varj=0;iarr.length-l-i;j++）｛//注意.怎么比较？（相邻的两个数比较）.什么情况下交换位置（前边数大）J12〃如果判断条件和交换元素位置呢P7if（arr[j]arr[j+l]）｛〃交换位置Ivar temp=arr[];arr[j]=arr[j+l];arr[j+1]=temp;//不会的同学举手（没有排序完毕呢）bool=false;）｝n++;“｝m++;//内循环中的语句没有被执行ifJ if（bool）｛break;console.log（arr）;console.log（m）;console.log（n）:状态码13http一些常见的状态码为■服务器成功返回网页200请求的网页不存在404--服务不可用503详细分解（临时响应）表示临时响应并需要请求者继续执行操作的状态代码lxx（继续）请求者应当继续提出请求服务器返回此代码表示已收到请求的第一部分，正在等待100其余部分（切换协议）请求者已要求服务器切换协议，服务器已确认并准备切换101（成功）表示成功处理了请求的状态代码2xx（成功）服务器已成功处理了请求通常，这表示服务器提供了请求的网页200（已创建）请求成功并且服务器创建了新的资源201（已接受）服务器已接受请求，但尚未处理202（非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源203（无内容）服务器成功处理了请求，但没有返回任何内容204（重置内容）服务器成功处理了请求，但没有返回任何内容205（部分内容）服务器成功处理了部分请求206GET（重定向）表示要完成请求，需要进一步操作通常，这些状态代码用来重定向3xx300（多种选择）针对请求，服务器可执行多种操作服务器可根据请求者（user agent）选择一项操作，或提供操作列表供请求者选择（永久移动）请求的网页已永久移动到新位置服务器返回此响应（对或请求的响应）时，301GET HEAD会自动将请求者转到新位置（临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请302求（查看其他位置）请求者应当对不同的位置使用单独的请求来检索响应时，服务器返回此代码303GET（未修改）自从上次请求后，请求的网页未修改过服务器返回此响应时，不会返回网页内容304（使用代理）请求者只能使用代理访问请求的网页如果服务器返回此响应，还表示请求者应使用代305理（临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的307请求（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理4xx（错误请求）服务器不理解请求的语法400（未授权）请求要求身份验证对于需要登录的网页，服务器可能返回此响应401（禁止）服务器拒绝请求403（未找到）服务器找不到请求的网页404（方法禁用）禁用请求中指定的方法405（不接受）无法使用请求的内容特性响应请求的网页406（需要代理授权）此状态代码与（未授权）类似，但指定请求者应当授权使用代理407401（请求超时）服务器等候请求时发生超时408（冲突）服务器在完成请求时发生冲突服务器必须在响应中包含有关冲突的信息409（已删除）如果请求的资源已永久删除，服务器就会返回此响应410（需要有效长度）服务器不接受不含有效内容长度标头字段的请求411（未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件412（请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力413（请求的过长）请求的（通常为网址）过长，服务器无法处理414URI URI（不支持的媒体类型）请求的格式不受请求页面的支持415（请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码416（未满足期望值）服务器未满足“期望”请求标头字段的要求.417（服务器错误）5xx这些状态代码表示服务器在尝试处理请求时发生内部错误这些错误可能是服务器本身的错误，而不是请求出错（服务器内部错误）服务器遇到错误，无法完成请求500（尚未实施）服务器不具备完成请求的功能例如，服务器无法识别请求方法时可能会返回此代501码（错误网关）服务器作为网关或代理，从上游服务器收到无效响应502（服务不可用）服务器目前无法使用（由于超载或停机维护）通常，这只是暂时状态503（网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求504（版本不受支持）服务器不支持请求中所用的协议版本505HTTP HTTP状态码HttpWatch Resultis.服务器成功返回网页，客户端请求已成功200-对象临时移动服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以302后的请求属于重定向自上次请求后，请求的网页未修改过服务器返回此响应时，不会返回网页内容304-.未授权请求要求身份验证对于需要登录的网页，服务器可能返回此响应
401.未找到服务器找不到请求的网页404成功表示服务器成功地接受了客户端请求2xx-重定向表示要完成请求，需要进一步操作客户端浏览器必须采取更多操作来实现请求3xx-例如，浏览器可能不得不请求服务器上的不同的页面，或通过代理服务器重复该请求请求错误这些状态代码表示请求可能出错，妨碍了服务器的处理4xx-服务器错误表示服务器在尝试处理请求时发生内部错误这些错误可能是服务器本身的错误，而5xx-不是请求出错中的原型链14js每个对象都会在其内部初始化一个属性，就是（原型），当我们访问一个对象的属性时，prototype如果这个对象内部不存在这个属性，那么他就会去里找这个属性，这个又会有自己prototype prototype的于是就这样一直找下去，也就是我们平时所说的原型链的概念prototype,应用原型链是实现继承的主要方法闭包是什么，有什么特性，对页面有什么影响15通俗的讲就是函数的内部函数被函数外部的一个变量引用的时候，就创建了一个闭包a b,a闭包的特性
①,封闭性外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
②,持久性一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在系统中，闭包中的数据依然存在，从而实现对数据的持久使用优点
①减少全局变量
②减少传递函数的参数量
③封装；缺点使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等.怎么实现跨域请求
16、1jsonp最常见的一种跨域方式，其背后原理就是利用了标签不受同源策略的限制，在页面中动态script插入了标签的属性就是后端接口的地址，并且以的方式将前端回调处理函数script,script srcapi get名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去只能发送jsonp请求get、2CORS跨域资源共享是一种允许当前域的资源比如Cross-Origin ResourceSharing originhtml/js/web被其他域的脚本请求访问的机制service origin当使用发送请求时，浏览器如果发现违反了同源策略就会自动加上一个请求头XMLHttpRequest origin,后端在接受到请求后确定响应后会在中加入一个属性Response HeadersAccess-Control-Allow-Origin,值就是发起请求的源地址http:〃
127.
0.
0.1:8888,浏览器得到响应会进行判断的值是否和当前的地址相同，只有匹配成功后才进行响应处理Access-Control-Allow-Origin现代浏览器中和移动端都支持除了下需要CORS operamini,IE8+、服务器跨域3在前后端分离的项目中可以借助服务器实现跨域，具体做法是前端向本地服务器发送请求,本地服务器代替前端再向真实服务器接口发送请求进行服务器间通信，本地服务器其实充当个「中转站」的角色，再将响应的数据返回给前端缺点服务器跨域需要另起服务器、跨域4postmessage在中新增了方法，可以实现跨文档消息传输HTML5postMessage postMessageCross Document和都支持该方法可以通过绑定Messaging,IE8,Firefox3,Opera9,Chrome3Safari4postMessage window的事件来监听发送跨文档消息传输内容message使用实现跨域的话原理就类似于动态插入标签，再从里面拿回数据postMessage jsonp,iframe iframe,私认为用作跨页面通信更加适合总结当然还有其他实现跨域的方式比如在、下跨域方案，方案，以上是一些常用的跨域方案，ie89XDR flash都各有利弊，比如只能发送请求、服务器跨域需要另起服务器等等，大家可以根据自己项jsonp get目需求选择适合的解决方案，。
个人认证
优秀文档
获得点赞 0
