前端面试题

gaotingting
245 阅读41分钟

5-26安杰特警面试题

  1. 行内元素有哪些？块级元素有哪些？CSS的盒模型？ 行内元素：span,a,b,i,s,u,sub,sup, 块级元素：h1~h6,div,p,prev(预格式化) CSS的盒模型:border,内容,margin,padding

  2. CSS引入的方式有哪些？link和@import的区别？ 引入方式：内联内嵌、外部导入 样式优先级:行内样式>内部样式>外部样式(后两者是就近原则) 区别： ① link属于HTML标签，无兼容性；@import是CSS提供，只有在IE5以上才能识别； ② link支持javaScript改变样式，@import不支持； ③ link方式样式的权重高于@import的权重； ④ 页面被加载时，link会被同时加载，而@import引用的CSS会等页面加载完再加载.

  3. IE和DOM事件流的区别？ ① 事件流的区别:IE采用冒泡型事件,DOM使用先捕获后冒泡型事件 ② 事件监听函数的区别: IE使用: ANY.attachEvent(“事件名”,function(){ }) //绑定函数 ANY.detachEvent(“事件名”,function(){ }) //移除函数 DOM使用: ANY.addEventListener(“事件名”,function(){ }) //绑定函数 ANY.removeEventListener(“事件名”,function(){ }) //移除函数

  4. 添加 追加 删除 替换 插入到某个节点的方法 添加: var elem=document.createElement(“a”); //创建a标签 var elem=document.createTextNode(“txt”); //创建文本标签 追加: parent.appendChild(elem) 删除: parenet.removeChild(elem) 替换: parent.replaceChild(elem,oldelem) 插入: parent.insertBefore(elem,oldelem)

  5. document load 和document ready的区别 document load 和document ready都是javaScript文档加载完成事件 document load整个页面内容加载完成后才执行,也就是要等html,css,js,图片全部加载完成才执行; document ready默认DOM内容加载后提前执行

+function(){}() (function(){})()

  1. 编写一个数组去重的方法 /* * 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ function uniq(array){ var temp = []; //一个新的临时数组 for(var i = 0; i < array.length; i++){ if(temp.indexOf(array[i]) == -1){ //如果要检索的数组值没有出现，则该方法返回 -1。 temp.push(array[i]); } } return temp; } 或者 ES5写法 function unique(arry) { const temp = [] arry.forEach(item => { if (temp.indexOf(item) == -1) {// 如果要检索的数组值没有出现，则该方法返回 -1 temp.push(item); } }) return temp } var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5]; console.log(uniq(aa));

ES6写法 function unique (arr) { return Array.from(new Set(arr)) }

  1. BOM对象有哪些，列举window对象？ BOM对象: history历史记录栈, location打开url对象, navigator浏览器的配置信息, screen显示设备信息, even封装事件对象 Window对象: window.alert() //简写:alert(); confirm(“显示内容”), prompt()输入对话框,open()打开浏览器,close()关闭浏览器

  2. Null和undefined的区别？ Null表示一个无的对象，转为数值时为0，常用来表示函数返回一个不存在的对象；undefined表示一个无原始值，转为数值时为NaN，当声明的变量未初始化时，变量的默认值为undefined. 6-6微聚美面试题

  3. 请描述出两点以上xhtml和html的最显著区别 ① xhtml元素必须被正确嵌套; ② xhtml元素必须被关闭,标签名必须用小写字母; ③ xhtml文档必须拥有根元素,也就是html元素.

  4. get和post的区别 ① 语义上不同: get是客户端想获取数据;post是客户端想传递数据给服务器 ② 提交表单时不同: get把请求数据时追加到地址栏url后面,以?开头,长度有限度,一般在1024个字节；post请求数据放在请求主体中,可以上传文件,长度大小没有限制. ③ 安全性不同: post安全性比get高

  5. json格式数据有哪些特点 json是一种轻量级的数据交换格式. 特点: ①数据在键值(key和value)对中; ②数据由逗号分隔; ③花括号保存对象; ④ 方括号保存是数组.(值的类型可能是字符串、数字、数组、对象) 例如：｛"fistName": "Lilei","lastName": "Meimei"｝是一个json数据,json数据是用键值对的形式有存储,冒号前是键,冒号后是值,多个数据用逗号分隔。 Json数组[{"a": "A","b": "B","c": "C"},{"a": "A","b": "B","c": "C"}]

  6. php缓存技术有哪些? ① 全页面静态化缓存; ② 页面部分缓存(页面中不经常变的部分进行静态缓存,经常变化的块不缓存); ③ 数据缓存; ④ 查询缓存; ⑤ 按内容变更进行缓存; ⑥ 内存式缓存 ⑦ apache缓存 ⑧ php APC缓存扩展 ⑨ Opcode缓存

  7. div和span,p标签三者间的区别 div和span不同之处于div是块级元素,会换行; p标签是一个段落,是一个块级元素;span是一个行内元素,没有什么意思,span标签可以放p标签里,p标签不可以放span标签。

  8. php中isset()配置、empty()与is_null的区别 isset()判断变量是否存在;empty()判断变量是否为空;is_null判断变量是否为NULL;三者都是判断函数. isset(),empty()输入参数必须是一个变量,php变量是以$字符开头;is_null()输入参数只要有返回值就可以.

  9. 用css、html编写一个两列布局的网页，右侧固定宽度200px，左侧自适应

<div id=”right”>右边栏</div>
<div id=”left”>左边栏</div>

6-8深信服面试题

  1. 什么是跨域,如何解决跨域? 跨域是不同域名之间的相互访问 (跨域也就是协议,域名,端口其中有一个不同); 解决跨域: 简单说法: ①jsonp ，允许 script 加载第三方资源 ②反向代理（nginx 服务内部配置 Access-Control-Allow-Origin ） ③cors 前后端协作设置请求头部，Access-Control-Allow-Origin 等头部信息 ④iframe 嵌套通讯，postmessage ⑤ 后端处理跨域问题,是配置一个过滤器,设置请求头信息: response.setHeader(“Access-Control-Allow-Origin”,””)

详细说法: ① 用jsonp原理动态生成 b.html b.html 正确理解:跨域实际上web不支持,而且会带来安全隐患,所以我们一般不会使用跨域,可以使用nginix来解决跨域,这款软件专门是用来解决跨域问题,程序员只需访问进去就好。 2. ajax的原理,http状态码 ajax是通过XmlHttpRequest对象向服务器发异步请求,从服务器获得数据,然后用javaScript来操作DOM而更新页面，也就是ajax实现无刷新无提交的情况下局部更新,这也是它最大的作用。 Ajax过程: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HTTP请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局部刷新. ①创建对象XMLHttpRequest对象,也就是xhr对象 ②为xhr对象绑定事件,状态改变事件onreadystatechange,如果当前状态readyState为4是接收完成,响应消息状态码status为200为请求成功,获取返回成功数据,否则获取返回失败数据 ⑤ 打开服务器连接xhr.open(方法,url,同步true) ⑥ 发送数据xhr.send(null) 注:open()get要发送参数,post不用加参数；send（）get为null，post要加参数 例: var xhr = new XMLHttpRequest(); //4:为 xhr 绑定事件 onreadystatechange xhr.onreadystatechange = function(){ //4.1: xhr.readyState === 4(当前状态为4是接收完成) //4.2: xhr.status === 200(响应消息状态200为OK) //4.3: 获取返回数据 success // alert("保存成功"); // 获取返回数据 error // alert("保存失败"); if(xhr.readyState === 4){ if(xhr.status === 200){ if(xhr.responseText === 'success'){ alert('保存成功'); }else{ alert('保存失败'); } } } } //5:打开连接 open(); xhr.open('GET','score_add.php?name='+ name1.value+'&chinese='+chinese.value ,true); //6:发送数据 send(); xhr.send(null); } Post： //5:打开连接 open(); xhr.open('POST','score_add.php',true); //修改请求头 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //6:发送数据 send(); xhr.send('name='+name1.value+ '&chinese='+chinese.value); } http状态码: 400和403区别: 400:请求无效 403:禁止访问 404:无法找到文件 200和304的区别: 200:请求成功 304:未修改 302:临时性重定向 500:服务器端错误 例子: $.ajax({ url:”http://......”, dataType:”jsonp”, data:{code:0000,message:”成功”}, success:function(data){ if(data==true){ $.ajax() }else{} }, error:function(error){ popWin(“系统错误,请稍后重试!”); return; } }); 3. 什么是继承,继承的好处？Js继承有几种方法 继承是父对象的成员，子对象无需重复创建就可以直接使用，js中的继承都是继承原型对象，原型对象是把子对象相同的属性和方法集中保存在父对象中，所有子对象共用.每一个构造函数都有一个原型对象。 好处：代码的重用，节约内存，方便维护 例如： js继承有6种方法: ① 原型链继承②借用构造函数继承③组合继承(原型+借用构造)④原型式继承⑤寄生式继承⑥寄生组合式继承 4. 什么是原型? js原型链与作用域链的区别 peototype是原型，原型是Javascript中的继承的继承，JavaScript的继承就是基于原型的继承。 原型链是由多级父元素逐级继承形成的链式结构.原型链保存着所有对象成员的属性和方法,控制着对象成员的使用顺序,优先使用自己的,没有再延原型链向父级查找。 作用域链由多级作用域连续引用形成的链式结果。作用域链保存着所有的变量，控制着变量使用顺序，优先使用局部变量，没有延作用域链向父级作用域查找。 简单概括： 所有不需要“对象”访问的变量都保存在作用域链中； 所有需要“对象”访问的成员都保存在原型链中。 5. position有哪几种定位方式和区别 static默认值，没有定位，元素出现在正常的流中； relative相对定位，相对于正常位置进行定位； absolute绝对定位，相对于最近的已定位祖先元素进行定位； fixed固定定位，相对于浏览器窗口进行定位。 6. 清除浮动的工作原理,有几种方法 工作原理：元素脱离文档流，不占据空间。 有3种方法： ① 在浮动标签后面添加一对空标签，定义CSS clear:both ② 使用overflow:auto ③ 使用after伪类清除浮动 7. Display：none和visibility：hidden的区别 Display：none和visibility：hidden都是把网页上某一元素隐藏起来，但两者有区别： Display：none不占据空间，该元素在页面上彻底消失，通俗来说看不见摸不着； Visibility：hidden元素在页面上不可见,但所占的空间没有改变,通俗说看不见但摸得到。 8. 给一个元素绑定单击事件如何实现单击右键 例如:用jquery

单击右键
$(function(){ $("#target").contextmenu(function(){ alert("处理程序.contextmenu()被调用"); }); }); 例如:用原生js +function(){ target.oncontextmenu=function(){ alert("处理程序.contextmenu()被调用"); } } (); 9. 事件代理的工作原理(也就是delegate,利用冒泡) ① 将事件处理函数绑定在父元素上一次,所有子元素共用即可 ② 获得目标元素:$(e.target) ③ 仅响应符合条件的元素事件 优点:减少事件监听的个数,新生成的子元素自动共用父元素的事件 绑定/解绑:$(“parent”).delegate/undelegate(“selector”,”事件名”,fn) $(“parent”).on(“事件名”,“selector”,fn)//相当于delegate/undelegate Delegate与bind的区别: Delegate仅在父元素上绑定事件一次,所有子元素共用即可,新生成的子元素自动共用父元素的事件 bind每个子元素都要绑定事件,新生成的子元素无法自动获得事件处理函数 10. DOM事件监听与jquery-delegate事件委托,给多个子元素绑定相同事件,在父元素集中绑定如何实现? DOM事件监听:如果多个子元素要绑定相同的事件时,只需在父元素集中绑定一次,所有子元素共用即可，elem.addEventListener(“事件名”,fn)。但要获得目标元素用e.target 例如:
事件代理见9题 $(“body”).delegate(“div.block”, “click”,function(e){ var $target=$(e.target); alert($target.html()); }) 11. call、apply、bind的区别 call和 apply是临时借用一个函数,并替换this为指定对象,立刻执行； call传入参数是单个传,apply传入参数是以数组的形式整体传(arguments)； bind基于现有的函数,创建一个新的函数,并永久绑定this为指定对象,不立刻执行。 12. 同步与异步请求的区别 同步请求：提交请求，等待服务器处理，处理完毕返回，这时客户端浏览器不能干任何事情。 异步请求：请求是通过事件触发，服务器处理，处理完毕，这时浏览器可以干其他的事件。 13. 对面向对象（oop）的理解 面向对象的三大特点:封装、继承、多态 封装：创建一个对象，集中保存一个事物的属性和方法 继承：父对象的成员，子对象无需重复创建就可以直接使用 多态：同一事物，在不同的情况下表现出不同的状态（也就是多种状态） 例如：动物是父类，有属性年龄、体重、自我介绍的方法；子类有狗、猫类，它们都有年龄、体重，但是狗和猫的介绍信息都会重写父类的。 Animal dog=new Dog(); dog.info(); Animal cat=new Cat();//父类变量指向子类对象,当调用父类变量的方法的时候,它会自动的识别到子类 声明的时候是: 父类类型 变量名=new 子类类型(); 重写：如果觉得父对象的成员不好用时，可在本地重写override父对象的成员 定义构造函数的步骤：1.先定义统一结构2.用new调用构造函数，传入具体对象的属性值 14. 用正则去掉字符串前后的空格 var word=" good "; word=word.replace(/(^\s*)|(\s*$)/g,"");// console.log(word); 注意:找全部: /g(global全部), 忽略大小写: /i (ignore忽略) 15. 减少页面加载时间的方法(也就是性能优化方法) ① 减少HTTP请求次数（合并文件，合并图片） ② 优化图片(将一些背景小图标整合到一张大图片) ③ 优化css(压缩合并CSS，如：margin-top，margin-left……) ④ 网址后面加斜杠(判断这个是什么文件类型) ⑤ 标明图片宽度和高度(如果浏览器还没找到这两个参数,它会一边下载图片,一边计算图片的大小,如果图片很多,浏览器需要不断调整页面。如果浏览器知道这两个参数，即使图片暂时无法显示，页面也会腾出图片的空位，然后继续加载后面的内容，这样加载的速度就会加快了) ⑥ 用innerHTML代替DOM操作,减少DOM操作次数 ⑦ 尽量少的添加事件监听(也就是减少绑定事件,用冒泡解决) ⑧ JS CSS源码压缩 ⑨ 图片预加载,将样式表放在顶部,脚本放在底部 ⑩ css、javascript改由外部调用(如果css、js内容比较庞大，尽量不要写到同1个页面中去，改由外部载入比较妥当，因为浏览器本身会对css、js文件进行缓存) 16. 谈谈对ES6的理解 ES6是什么, 实际上, 它是一种新的JavaScript规范。有十大特性 17. 工厂模式 18. 谈谈对闭包(Closure)的理解,闭包的形式,优缺点?如何解决内存泄露?哪些操作会造成内存泄露? 闭包是外层函数包裹着受保护的变量和操作变量的内层函数,外层函数将内层函数返回,使用者调用外层函数可以获得内层函数的对象。 闭包的形成:外层函数的作用域对象无法被释放,被内层函数对象$scope引用着无法释放。 优点:即重用变量,又保护变量不被污染。 缺点:比普通函数占用内存要多,容易造成内存泄露。 解决内存泄露: 将引用内层函数对象的全局变量置为null,导致内层函数对象被释放,外层函数作用域对象也被释放,最后释放闭包。 造成内存泄露: ① 给DOM对象添加的属性是一个对象的引用 ② DOM对象和JS对象相互引用 ③ 给DOM对象用attachEvent绑定事件 ④ 从内到外执行appendChild,这时即使调用removeChild也无法释放 ⑤ 反复重写一个属性会造成内存大量占用 例如: 19. 每个单词后追加数字如xiaoming,xiaohong变成xiaoming1,xiaohong2 20. 什么是重载? 重载是相同函数名,不同参数列表的多个函数,在调用时,可自动根据传入的参数不同,调用对应的函数执行。 例如：js不支持重载 21. DOM事件绑定和jquery事件绑定 DOM事件绑定： ① elem.addEventListener(“事件名”,fn) ② elem.onclick=function(){} jquery事件绑定5种： ① $().bind/unbind(“事件名”,function(){}) ② $( "parent").delegate/undelegate(“selector”,”事件名”,function(){})//相当于on ③ $().one(“事件名”,function(){}) ④ $("parent").on(“事件名”,function(){}) ⑤ $().事件名(function(){}) //简化版 6-14通泰商号投资面试题 1.css3的新特性有哪些? 边框:圆角border-radius、边框颜色：border-color 背景属性:指定背景大小background-size以像素或百分比显示、背景图像background-image、background-repeat、background-color、background-position 文字效果:文字阴影text-shadow、图片阴影box-shadow、 颜色:透明度opacity用0到1之间的数来表示 转换transform 过渡transition 动画animation 伪类选择器: :first-child、:last-child、:nth-child(n)、:only-child父元素中唯一的子元素、:empty 2.H5的新特性有哪些? 新增input type10种:Email、url、number、tel、range、search、color、date、month、week 新增的表单元素:progress、datalist、meter、output 新增的表单元素属性11种:autocomplete、autofocus、placeholder、multiple(允许邮箱输入多个值) 、form、required、minlength、maxlength、min、max、pattern(正刚表达式) 3. flex流式布局 Flex是流体盒子,解决浮动问题 父元素属性:display:flex flex-direction:row(横向显示)/row-reverse(横向相反) column(纵向显示)/column-reverse(纵向相反) align-items:center/left/right(盒子左中右显示) justify-content:space-betwwen(两端对齐) 注:父元素写上以上属性,子元素会继承不用重新写,父元素只要display:flex,子元素宽和高超出父元素时也不会溢出,会自动压缩尺寸平均分配摆放. 4. ng原理、特性、传参、哪些路由，指令 Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好。双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的 Ng四大特性:1.mvc模式 2.双向绑定MVVM 3.依赖注入 4.模块化 A、 Mvc模式 Model(模型):表示应用程序核心(比如数据库记录列) 通常模型对象负责在数据库中存取数据。 View(视图):显示数据(数据库记录) 通常视图是依据模型数据创建的。 Controller(控制器):处理输入(写入数据库记录) 通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。 或者可以这样说：控制器从视图层获取数据，封装成model，调用后端业务逻辑，渲染视图 B、双向绑定: 方向1:model数据绑定到view 方向2:view数据绑定到model 实现方法:只有ngmodel指令绑定之后无论哪一方数据修改,另一方数据都会自动随之修改 C、依赖注入：将需要用到的服务依赖注入到当前的控制器 D、模块化:高内聚低耦合法则 1.官方提供的模块 ng、ngRoute、ngAnimate、ngTouch 2.用户自定义的模块 anguar.module[‘模块名’,[依赖注入]] Ng路由:ng-Route跳转、ng-Animate、 ng指令：ngApp、ngInit、ngBind、ngrepeat、ngif、ngshow、nghide、ngsrc ng传参： 1、 明确发送方和接收方 2、 针对接收方做路由设置 3、 设置接收参数 5. ng应用的步骤: ①引入angular.js脚本文件 ②创建模块app,调用模块ngapp ③创建控制器,模块调用控制器app.controller ④视图调用控制器ng-controller ⑤定义模型数据$scope.count=10 ⑥ 将内容在视图显示ng-view 6.Angular有哪些组件？ Model、controller、view 8.IE浏览器事件有哪些? Widow.location 跳转 ANY.attachEvent(“事件名”,function(){ }) //绑定函数 ANY.detachEvent(“事件名”,function(){ }) //移除函数 9.什么是混合开发? 优点:实现"一次开发,多处运行"的机制,只需要编写一次核心代码就可以部署到多个平台； 兼容多平台；开发周期快；成本低；代码维护更新简单 缺点：用户体验不如本地应用；性能稍慢（需要连接网络）；技术还不是很成熟 10. 表单验证登录时的用户名和密码如何保存下来,能保存多久？ 简单的说登录成功后把用户名和密码写session里,判断不为空表示当前登录成功状态,为空表示未登录。另外也可以把用户名直接存cookie,密码要加密后存且加时间戳,但用session相对会安全些。 11.一个页面同时请求多次ajax会出现阻塞，如何处理？ 解决方案： ① 可能是ajax请求是同步(open方法的参数中,可以设置) ② Ajax请求服务器端asp页面可能使用了session,导致页面被锁死.关闭ajax所请求的页面session(关闭ajax请求的页面,不是ajax所有的页面) ③ 不要用session,改为cookie,如果是敏感数据就加密下cooie值 6-16银澎(好视通)与酷动数码 1. Bootstrap的用法 Bootstrap 属于前端 ui 库，通过现成的ui组件能够迅速搭建前端页面。主要有以下特点：支持所有主流浏览器、12列栅格布局、响应式设计（响应式布局，也是它的最大特点，根据窗口调整相应的布局样式）、样式化的文档以及常用的定制的 jQuery 插件等等。由Bootstrap是基于jQuery类库，所以这里要用到jQuery。引入顺序 先bootstrapSwitch.css（插件样式）、再jquery-1.8.2.js（jquery类库）、最后bootstrapSwitch.js（插件所在的类库）。 删格布局使用方法： (1)栅格布局系统最外层必须是： .container 或者 .container-fluid (2)容器中放置div.row，每行等分为12份 (3)行中放置div.col，每列需要指定宽度 1/12、2/12... 响应式的使用： 屏幕的大小：小屏幕（手机，小于768px）、中屏幕（pid，大于768px，小于992px），大屏幕（pc，大于992px，小于1200px） 例：/*中等PC屏幕(Medium - md)：1200px>w>=992px*/ @media screen and (min-width: 992px) and (max-width: 1199px){ .container { width: 970px; } } 优点：快速搭建前端页面，方便，代码都是写好，直接套用，全程响应式 缺点： 1、对IE678的兼容性可能不太好，因为它使用了一些CSS3样式和H5的元素，因此如果网站要兼容IE678，这个明显是不使用的； 2、如果网站有大量多样化的设计，那么如果还想使用bootstrap就需要将框架作为底层修改：需要复写大量样式，CSS层次编的混乱，难以维护。 4、 依赖给 HTML 添加 class 来表现，违背了内容和表现分离的原则。 2. bootstrap组件有哪些？ 下拉菜单、按钮组、按钮式下拉菜单、输入框组、面包屑导航、导航条、路径导航、分页、标签、徽章、巨幕、页头、缩略图、警告框、进度条、媒体对象、列表组、面板等。 3.单页面的理解 单页面是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入。例如angular框架也是一个单页面 6-19佰仟金融租赁 1. 如何代码压缩(也是打包的意思)使用什么工具?如何对网上js代码反压缩? 打包代码工具：webpack,没有用到,打包一般组件开发才会用到,我们是直接页面写JS。 反压缩代码:网上的js代码进行了压缩,对于开发者来说,读起来很费劲,可以通过F12里的Sources点击下方的大括号{}图标来进行反压缩,这样就可以原代码。 2. git和svn版本控制工具管理代码的使用? git的使用步骤: ① 开发工具上做好,add添加本地仓库 ② 从本地仓库commit提交到自己远程库 ③ push推送一份给老大leader ④ 要更新的话就pull拉一份到自己的本地仓库 简单:add添加—commit提交—push推送—pull更新 svn的使用步骤:commit提交—push推送—update更新;svn没有添加,直接提交 3. bug管理用什么工具(测试人员调试时发现有要bug,如何和前端人员对接)? 方法: ① 用禅道工具,但是很少用,很多测试人员都是把bug记录在excel里发过来 ② mercury quality center是一个基于Web的测试BUG管理工具，平台是测试部那边搭建在服务器上，在这个平台上创建一个测试的项目，比如”思迅项目5月份测试”,测试人员会把bug问题点提交到这个平台，然后开发人员都下载客户端登录进去查看，里面有bug描述、开发人员、测试人员、检测的时间、严重性（一般和较严重性）、优先级，修改完后会把状态改待测试 4. 离线存储方式有哪些?cookie和WebStorage区别 离线存储方式:cookie、WebStorage、LocalStorage sessionStorage和localStorag区别: sessionStorage和localStorage是HTML5WebStorageAPI提供的 sessionStorage是会话存储，浏览器关闭后，数据会全部删除； localStorage是本地存储，浏览器关闭后重启数据不会被删除，除非是手动删除 session和cookie区别: ① cookie数据存放在客户的浏览器上；session数据放在服务器 ② cookie不是很安全,考虑到安全应当使用session ③ session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。考虑到减轻服务器性能方面，应当使用cookie ④ cookie存储大小有限制,数据不能超过4k；session虽然也有存储大小限制,但是比cookie大得多,可以达到5M或更大 ⑤ 所以个人建议像登录等重要信息要存放在session,其它信息如果需要保留,可以放在cookie中 5. js创建对象的几种方法(一共4种)？ ① var obj={}; ② var obj=new object(); ③ 构造函数方式:this.sname=sname ④ 原型方法:利用对象prototype属性 6. 声明变量有几种方法? ES5 只有两种声明变量的方法：var命令和function命令。 ES6 除了添加let和const命令，还有两种声明变量的方法：import命令和class命令 (1) var命令 var a ;//undefine var b = 1; (2)function命令 function add(a) {    var sum = a + 1;    return sum; } (3) cosnt命令 const a; //报错，必须初始化 const b = 1; (4) let命令 let a;  //undefined let b = 1; function add(b) {   let sum = b + 1;   return sum; } let c = add(b); (5) import命令 import globals from '@/utils/globals.js' //把模块默认的导出值放入变量 globals（一个文件可以理解为一个模块） (6) class命令 class student{ constructor(name , age) {//只要触发new实例化操作即执行 this.name = name; this.age = age; } //注意在class类中，方法之间不需要添加逗号 showName(){ return `我的名字:${this.name}`; } showAge(){ return `我的年龄:${this.age}`; } } var lilei = new student ('lilei' , 20); console.log(lilei); 6-20友趣信息科技 实现div水平垂直居中方法? 1.position+transform绝对定位方法：不确定当前div的宽度和高度(子元素)，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） div{ background:red; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); } 2.position绝对定位方法：确定了当前div的宽度(子元素)，margin值为当前div宽度一半的负值 div{ width:600px; height: 600px; background:red; position: absolute; left:50%; top:50%; margin-left:-300px; // 这是重点 margin-top:-300px; // 这是重点 } 3. 绝对定位方法：确定了当前div的宽度(子元素)，绝对定位下top left right bottom 都设置0
我是子级
/**css**/ div.child{ width: 600px; height: 600px; background: red; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } 4.flex布局方法：当前div的父级添加flex css样式,不确定宽高 .parent{ width: 400px; height: 400px; background: blue; display: flex; align-items: center; justify-content: center; } .child{ width: 100px; height: 100px; background: red; } 5.table-cell方法: 容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了
html, body { height: 100%; width: 100%; margin: 0; } .box { display: table; height: 100%; width: 100%; } .content { display: table-cell; vertical-align: middle; text-align: center; } .inner { background-color: #000; display: inline-block; width: 200px; height: 200px; } 12-12你我金融与宝瑞明科技 ⑦ 编写一个函数,该函数一个字符串中找到可能最长的子字符串,且该字符串是由同一字符组成的。如：aaaabbccd中最长子字符串是aaaa。 思路： 字符串分割 循环判定，暂存较大值 循环结束，返回最大值变量的长度 function findLongestWord(str) { var newArr = str.split(" "), maxStr = newArr[0]; for(var i=0;i maxStr.length) maxStr = newArr[i]; } return maxStr.length; } ⑧ 前端框架都有哪些？ Bootstrap、angular、react、ionic、vue、Amaze UI、MUI等6种 ⑨ 谈谈对http（超文本传输协议）的认识？ 1. http事物是指从客户端（IE）向服务器端发送http请求，再由服务器将响应的内容返回给客户端的一个过程。 2.http链接是通过tcp链接，首先客户端会打开一条连向服务器端的链接，然后开始发送http请求，接着由服务器返发响应的内容，当客户端接受后就断开此链接，这样一次客户端与服务器端的通信就结束了。 3.http中的方法分为5种：增（PUT）、删(DELETE)、改(POST)、查(GET)、HEAD 4.http报文：由客户端向服务器端发送的http请求和从服务器端发送到客户端响应的内容都是http报文，其格式为：起始行、头部（HEAD）、主体(BODY) 5.MIME（多用途网络邮箱扩展）类型：对象类型/特定子类型，如:image/png，通过fiddler可在http请求的起始行中看到。 6.发送http请求的目的是为了请求某一资源，然后由服务器返回客户端需要的资源，客户端（IE）通过解析将其显示出来，这里的资源是如何标识的呢？其实是通过URI(Uniform Resource Identifier)统一资源标识符，其主要有2中形式：URL（统一资源定位符）和URN（统一资源名称），目前最常用的是URL。 7.Node.js的有哪些特点？ Node.js是一个基于Chrome v8引擎建立的JavaScript运行平台，用于搭建响应速度快、易于扩展的网络应用。 Node.js以下特点： 1. 它是一个Javascript运行环境 2. 依赖于Chrome V8引擎进行代码解释 3. 事件驱动 4. 非阻塞I/O（Input/Output 输入/输出） 5. 轻量、可伸缩，适于实时数据交互应用 6. 单进程，单线程（最大的特点之一） 7. 跨平台(node.js在mac系统上、Windows上面和Linux这些上面，都可以运行，它已经开发除了对应的运行环境了) Node.js很像抠门的餐厅老板，只聘请1个服务员，服务很多人。结果，比很多服务员效率还高。（单线程的优点） Node.js中所有的I/O都是异步的，回调函数，套回调函数。 单线程这一点是node.js比较大的一个特点。它可以开发出高效的后台应用（网络应用）。 8.ES6有哪些特性？ ES6，正式名称是ECMAScript2015，但是ES6这个名称更加简洁。ES6是JavaScript一种标准规范，但是它已经广泛用于编程实践中，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。 以下是ES6排名前十的最佳特性列表（排名不分先后）： 1. Default Parameters（函数参数默认值） in ES6 2. Template Literals （模板字符串）in ES6 3. Multi-line Strings （多行字符串）in ES6 4. Destructuring Assignment （解构赋值）in ES6 5. Enhanced Object Literals （对象属性简写）in ES6 6. Arrow Functions （箭头函数）in ES6 7. Promises in ES6（Promises模式） 8. Block-Scoped Constructs Let and Const（块作用域构造Let and Const） 9. Classes（类） in ES6 10. Modules（模块） in ES6 详细解释一下: https://www.cnblogs.com/Wayou/p/es6_new_features.html 12-18珍爱网面试题 1.304状态码是什么？什么情况下出现 ？ 3开头都是重定向。304是未修改，为了提升性能，会把一些页面，或者数据存入缓存。当未修改时，再次访问该页面，就会直接去缓存中取。这时候服务器就会返回304状态码。 2.页面缓存问题怎么解决？ 页面缓存的问题大家都遇到过，很多功能做完没起效果，解决方法对于一个html页面，缓存分3部分，一个是页面内容，一个是css样式，一个是JS文件。 1、避免页面html内容缓存 PS：清除浏览器中的缓存，它和其它几句合起来用，就可以使你再次进入曾经访问过的页面时，ie浏览器必须从服务端下载最新的内容，达到刷新的效果。 2、CSS和JS文件 改成 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。 href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。 12. 变量和函数声明提前的理解?(见有道笔记) 13. 常用的网络协议有哪些? 分别有HTTP和WebSocket HTTP和WebSocket异同点： 相同点： 1. 建立在TCP之上，通过TCP协议来传输数据; 2. 都是可靠性传输协议(也就是三次握手，100%能传到的，保证数据不会丢失)。 不同点: 1. WebSocket是HTML5中的协议(双向通信协议, 客户端和服务器可以向对方主动发送和接受数据，比如微信聊天，我发信息给好友，服务器接收到数据，然后主动把信息发给好友)，支持持久连接(除非自己关闭页面或是点击关闭按钮)，Http不支持持久连接(一次请求一次响应，服务器不会主动发送信息, 只有客户端发起请求，服务器才会返回数据); 2. Http是单向协议，一次请求一次响应，服务器不会主动发送信息, 只有客户端发起请求，服务器才会返回数据。 14. Vue如何搭建项目? 一、安装node环境 1.下载node； 2.检查node是否安装成功：如果能输出版本号node-v，说明node安装成功； 3.为了提高效率，可以安装yarn； 4.检查yarn是否安装成功：如果能输出版本号yarn-v，说明yarn安装成功。 二、搭建vue项目环境 1.安装vue npm install vue 2.全局安装vue脚手架 yarn install --global vue-cli 3.创建一个基于 webpack 模板的新项目 $ vue init webpack test03 ? Project name (test03) test03 ? Project description this is test03 ? Author tingting ? Install vue-router? (Y/n) y ? Use ESLint to lint your code? (Y/n) n //用来规范代码,比如空格之类，不按规范就报错 ? Set up unit tests (Y/n) n //测试用的 ? Setup e2e tests with Nightwatch? (Y/n) n 4. 进入项目test03 cd test03 5. 进行安装依赖(也就是node_modules文件夹) yarn install 6. 将项目运行起来 yarn start（相当于npm run dev） 7. 配置完打开会显示vue的首页 15. yarn优点?与npm的区别？ 优点： 1. 速度快。npm要等当前package安装完成之后才能继续后面的安装;yarn是同步执行所有任务,提高了性能. 2. 更简洁的输出。npm输出信息比较长，在执行install时，命令行会不断打印出所有被安装上的依赖；yarn只打印必要的信息. 3. 更好的语义化。yarn改变了一些npm的名称，比如yarn add(安装)/remove(移除),感觉比npm install(安装)/uninstall(移除)更清晰. 16. vue-router路由懒加载(解决vue项目首次加载慢)? 懒加载, 也叫延迟加载，即在需要的时候进行加载，随用随载。 为什么需要懒加载？ 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时, 简单的说就是：进入首页不用一次加载过多资源造成用时过长！！！ 如何实现？懒加载写法： 非懒加载的路由配置： 17. 移动端适配方法? 1. 百分比+弹性盒布局display:flex 兼容性问题考虑一下，弹性盒的集中兼容写法注意一下，手机端感觉是各种通用的，浏览器兼容一般，要把浏览器内核写上(比如:display:-webkit-box;display:flex;-webkit-box-align:center;)，主流OK的，但是IE10以下估计完蛋。 2.直接使用以下三句话标签 3. 使用css3的媒体查询(rem布局) 首先rem是指相对于根元素的字体大小的单位，所以可以通过设置html的字体大小来可以控制rem的大小 18.对px/em/rem理解? px和em的区别：px 和em都是长度单位。px是固定的,容易计算；em是不固定的,是相对单位,相对于父元素的字体大小来调整。 rem： 1 rem等于html根元素设定的font-size的px值。rem不是固定的,是相对单位，相对于根元素字体大小来调整。通过js修改根元素的大小，达到整个页面的缩放。rem可实现移动端自适应，适配各种移动设备。 比如：html{font-size:14px;} 那么后面的CSS里面的rem值则是以这个14来换算，例如设定一个div宽度为3rem,高度为2rem.则它换算成px为width:42px.height:28px，同理，假如一个设计稿为宽度42px,高度为28px，则换成成rem，则是42/14=3rem，28/14=2rem。 19.浏览器兼容性问题,各浏览器之间的差异? 由于不同浏览器显示页面效果不同, 可以CSS hack解决浏览器问题,也就是针对不同的浏览器编写不同的CSS;另外也可以用margin和padding统一初始化css样式解决. 实现方式: 1. css类内部Hack 在样式属性名或值的前后增加前后缀以便识别不同的浏览器 如:firfox:-moz-(浏览器前缀) Chrome&safari:-webkit- Opera:-o- IE:-ms- 2. 选择器Hack 在选择器前增加前缀以便识别不同的浏览器 如: *:IE6识别 *+:IE7识别 */*+div{background-color:green;} 3. HTML头部引用Hack(使用IE 条件注释,来解决兼容性问题) 可以通过判断版本、条件来实现，语法: 要执行的内容 版本： ① 可以用版本来判断 如:

只在IE6中执行内容

条件： ② 1.gt 2.lt 3.gte大于等于 4.lte小于等于 5.!除什么版本以外,其它都能显示

只在IE6以上执行内容

4. 比如说有些样式，在安卓机有些bug,就要在页面用js代码判断当前设备是安卓，就执行修复的代码 各浏览器的之间的差异:主要是内核不同 Ie内核:Trident 兼容性好 Firefox内核:Gecko Chrome和safari内核:webkit 浏览速度快 Opera内核:presto Vue生命周期面试题 1、什么是vue生命周期？ 答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 2、vue生命周期的作用是什么？ 答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 3、vue生命周期总共有几个阶段？ 答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后 创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。 更新前/后：当data变化时，会触发beforeUpdate和updated方法。 销毁前/后：在执行beforeDestroy销毁之前调用,vue实例仍然还可用。在执行destroy方法后，对data的改变不会再触发周期函数，此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。 4、第一次页面加载会触发哪几个钩子？ 答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子。 5、DOM 渲染在 哪个周期中就已经完成？ 答：DOM 渲染在 mounted 中就已经完成了。 6、简单描述每个周期具体适合哪些场景？ 答：生命周期钩子的一些使用方法： Beforecreate创建前 : 可以在这加个loading事件，在加载实例时触发 Created创建后 : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted 加载完成后: 挂载元素，获取到DOM节点 updated更新完成后 : 如果对数据统一处理，在这里写上相应函数 beforeDestroy销毁前 : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom. 20.pop()、push()、shift()、unshift()的区别? pop()该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回 shift()可以删除数组的第一个元素，并将被删除的元素作为返回值返回 push()该方法可以向数组的末尾添加一个或多个元素，并返回新的数组长度 unshift()向数组开头添加一个或多个元素，并返回新的数组长度,向前边插入元素以后，其他的元素索引会依次调整. 21.js和jq获取属性？js获取元素前后节点？ js获取属性值: var value=elem.getAttribute("属性名") 修改属性值: elem.setAttribute("属性名","值") jq获取属性:$("选择器").attr("属性名"); 修改属性: $("选择器").attr("属性名","值"); 按节点关系查找: 节点树：包含一切节点的树结构(空格也包括在内) 父子关系: node.parentNode 获得node的父节点 node.childNodes 获得node的所有直接子节点 node.firstChild 获得node下第一个子节点 node.lastChild 获得node下最后一个子节点 兄弟关系: node.previousSibling 获得node前一个兄弟 node.nextSibling 获得node的下一个兄弟 22. git版本的回退? 回退到上一个版本：git reset --hard HEAD^ 回退到上上一个版本：git reset --hard HEAD^^ 回退到前100个版本：git reset --hard HEAD~100 23. 父子组件的通信? ● props (父——>子) 父组件向子组件传递一个信息 ● $emit (子——>父) 子组件向父组件传递信息 ● slot (父——>子) 父组件向子组件传递多个信息，用插槽 ● $parent (子——>父) 子组件修改父组件数据 this.$parent.msg; // msg是data数据,子获取父的数据 this.$parent.fun(); // fun()是父的方法,子获取父的方法 ● $ref (父——>子) 父组件修改子组件数据 24. vue兄弟间的通信(非父子)? ~ 创建事件中心 ~ bus.$emit 发送数据 ~ bus.$on 监听并接受数据 例: 如果2个组件不是父子组件那么如何通信呢?可以通过eventHub来实现通信. 所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件. 1. let Hub = new Vue(); // 创建事件中心 2. 组件1触发:
methods: { eve() { Hub.$emit('change','hehe'); //Hub触发事件 } } 3. 组件2触发:
created() { Hub.$on('change', () => { //Hub接收事件 this.msg = 'hehe'; }); } 25. 子组件要怎么获取元素下下的子元素的值? 可以通过父组件用refs操作DOM节点来获取. vue是数据驱动的，一般都不会直接操作dom. 例子: 26. vue如何将后台的数据一次性分列渲染而不是一个个渲染? 27. 对象浅拷贝和深拷贝有什么区别? 在 JS 中，除了基本数据类型，还存在对象、数组这种引用类型。基本数据类型，拷贝是直接拷贝变量的值，而引用类型拷贝的其实是变量的地址。 let o1 = {a: 1} let o2 = o1; 在这种情况下，如果改变 o1 或 o2 其中一个值的话，另一个也会变，因为它们都指向同一个地址。 o2.a = 3 console.log(o1.a) // 3 而浅拷贝和深拷贝就是在这个基础之上做的区分，如果在拷贝这个对象的时候，只对基本数据类型进行了拷贝，而对引用数据类型只是进行了引用的传递，而没有重新创建一个新的对象，则认为是浅拷贝。反之，在对引用数据类型进行拷贝的时候，创建了一个新的对象，并且复制其内的成员变量，则认为是深拷贝。 区分深拷贝与浅拷贝简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。 Object.assign()方法： 特点：浅拷贝、对象属性的合并 var nObj = Object.assign({},obj,obj1);//Object.assign方法的第一个参数是目标对象，后面的参数都是源对象，花括号叫目标对象，后面的obj、obj1是源对象。对象合并是指：将源对象里面的属性添加到目标对象中去，若两者的属性名有冲突，后面的将会覆盖前面的 Object.assign()方法用法： 1.合并多个对象 2.克隆对象(浅) 3.为对象添加多个方法 地址：https://blog.csdn.net/qq_30100043/article/details/53422657 28. var、let、const的区别? const是常量,变量一旦被赋值,就不能再改变; var 和 let的区别： 1.var定义变量是函数作用域（全局），let定义是块级作用域（局部）； 2.var定义以后可以修改，未初始化会输出undefined，不会报错。let未定义就输出则会报错直接报错：ReferenceError: 3. 如果在函数的for里面定义，let只在这个for里面有效。var是在整个函数里面有效。 4. 重复声明一个变量时。var会覆盖上一个变量的赋值，而let则会报错你已经定义过了。 28.v-if与v-show的区别? 两者都判断元素显示与隐藏 v-if 元素是否移除或者插入,不适合频繁切换 v-show 元素是否显示和隐藏（隐藏还是有标签） 29. 说出至少4种vue当中的指令和它的用法？ v-if：判断是否隐藏；v-show : 判断是否隐藏；v-for：数据循环出来；v-bind:/class：绑定一个属性；v-model：实现双向绑定; 30. vue如何理解v-model双向绑定? v-model 指令在表单 、 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以及更新数据，并对一些极端场景进行一些特殊处理。 其实原理很简单： 在输入框中绑定一个 input 事件， input 事件在用户输入时触发，触发时获取元素的value 值,然后在赋值。 js例子： <input type="text" id="ipt1"> <input type="text" id="ipt2"> <script> var ipt1=document.getElementById('ipt1'); var ipt2=document.getElementById('ipt2'); ipt1.addEventListener("input",function(){ ipt2.value=ipt1.value; }) </script> vue例子： 绑定事件：<input @click=doLog() /> 31.mvvm框架是什么？说说对双向数据绑定的理解？它和其它框架（jquery）的区别是什么？哪些场景适合？ MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】就是连接数据和视图，用来实现双向绑定。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信。 双向数据绑定的原理? 双向数据绑定原理是数据模型和视图之间的双向绑定.用户在视图上的修改会自动同步到数据模型中去,同样的,如果数据模型中的值发生了变化,也会立刻同步到视图中去。 双向数据绑定的优点是无需进行和单向数据绑定crud（create，retrieve，update，delete）操作。 双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。 双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着变。 方向1:model数据绑定到view 方向2:view数据绑定到model 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。 场景：数据操作比较多的场景，更加便捷。 31. MVVM和MVC的区别 MVVM中的View 和 ViewModel可以互相通信。也就是可以互相调用。 MVC中的是单向通信。也就是View跟Model，必须通过Controller来承上启下。 32.对vuex的理解？ vuex可以理解为一种状态管理的开发模式或者框架，data中的属性需要共享给其他vue组件使用。状态为state集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。 vuex的原理其实非常简单，它为什么能实现所有的组件共享同一份数据？ 因为vuex生成了一个store实例，并且把这个实例挂在了所有的组件上，所有的组件引用的都是同一个store实例。 store实例上有数据，有方法，方法改变的都是store实例上的数据。由于其他组件引用的是同样的实例，所以一个组件改变了store上的数据， 导致另一个组件上的数据也会改变，就像是一个对象的引用。 33、vuex有哪几种属性？ 答：有五种，分别是 State、 Getter、Mutation 、Action、 Module state => 基本数据(数据源存放地)，也就是设置的初始属性值 getters => 实时监听state值的变化(最新状态)，用retrun返回，从基本数据派生出来的数据 mutations => 提交更改数据的方法，同步！ actions =>通过actions异步触发mutations的方法，异步！ modules => 模块化Vuex 35. 说说语义化HTML? 语义化HTML：用最恰当的HTML元素标记的内容。 <header></header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。 <nav></nav>：标记导航，仅对文档中重要的链接群使用。 <section></section>：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。 <footer></footer>：页脚，只有当父级是body时，才是整个页面的页脚。 36. 如何动态生成一个删除按钮绑定事件？ var span = document.createElement('span'); //1、创建元素 var container = document.getElementById('container'); //2、找到父级元素 container.insertBefore(span,container.childNodes[0]);//3、插入到最左边 $(".hah").on('click','.shijian1',function(){ //4、绑定事件 alert('on-OK') }); 37. 委托事件的机制，如何一层层的执行触发的么，能不能说一下过程？也就是一层层的执行到冒泡？ 从子元素到父元素，从里到外一直的冒泡，直到没有事件为止就停止冒泡，直到doucment为止。 38. 拖拽、复制功能的使用和实现？ Html5实现思路：克隆被拖拽的元素cloneNode()，然后把克隆元素appendChild()到指定位置；移除var item = document.getElementById(data).cloneNode();，然后ev.target.appendChild(data)。 39. Less和css的区别,为什么用less,有什么好处? css要写大量的代码,不方便维护及扩展,不利于复用; less是动态的样式表语言,在css基础上引入了变量，混入mixin，运算以及函数等功能，简化了css的编写，大大提高了开发效率，更好的维护（只要在全局变量修改样式，其它地方引入的样式也跟着改了），less可以让我们用更少的代码做更多的事。 40. export ，export default 和 import 区别 以及用法? ES6模块主要有两个功能：export 、export default 导出和import导入 1、export与export default均可用于导出常量、函数、文件、模块等; 2、在一个文件或模块中，export、import可以有多个，export default仅有一个; 3、通过export方式导出，在导入时要加{ }，export default则不需要; 4、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用. 例如: /** 变量导出 **/ 一个a.js文件有如下代码： export var name="李四"; // 导出 或者多个变量 var name1="李四"; var name2="张三"; export { name1 ,name2 } // 导出 /** 变量导入 **/ 在其它文件里引用如下： import { name } from "/.a.js" //路径根据你的实际情况填写，单个变量写法 import { name1 , name2 } from "/.a.js" //路径根据你的实际情况填写，多个变量写法 export default { data () { return { } }, created:function(){ alert(name)//可以弹出来“李四” } } /** 导出函数 **/ function add(x,y){ alert(x*y) // 想一想如果这里是个返回值比如： return x-y，下边的函数怎么引用 } export { add } /**导入函数, 在其他文件里引用如下**/ import { add } from "/.a.js" //路径根据你的实际情况填写 export default { data () { return { } }, created:function(){ add(4,6) //弹出来24 } } 注意以下例: 通过export方式导出，在导入时要加{ }，export default则不需要; var name="李四"; export { name } // 导出 import { name } from "/.a.js" // 导入 可以写成： var name="李四"; export default name // 导出 import name from "/.a.js" // 导入，这里name不需要大括号 41.打包执行命令 npm run build后，webpack帮忙做了些什么操作? 它会将代码的空格、注释去掉，复用的方法和变量多处引用处理成一个方法、变量，将代码转成浏览器可以直接执行的代码。 42. new一个对象时，会经历哪些步骤？ 1. 创建一个新对象,如:var obj = {}; 2. 新对象的proto属性指向构造函数的原型对象；obj._ proto_ = ClassA.prototype; 3. 使用新对象调用函数，函数中的this被指向新实例对象：   ClassA.call(obj); //{}.构造函数(); 4. 将初始化完毕的新对象地址，保存到等号左边的变量中 43.对TypeScript的理解? TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。 [2-5] TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用的开发而设计，而编译它时产生 JavaScript 以确保兼容性。 [6] TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件，扩展了它对于流行的库如 jQuery，MongoDB，Node.js和 D3.js 的好处。 44. 为什么vue组件中的data不是一个对象而是一个函数?  如果两个实例引用同一个对象，当其中一个实例的属性发生改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会相互干扰。   这是因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。   组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。 45. vue主菜单下有两个子菜单,路由如何区分? 通过路由的路径,title,component来进行区分,如下: 46. 为什么vue中的data用return返回? 不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。 47. vue子组件的子组件如何获取父组件传递过来的数据? deep：true深度检测。例如数组对象中的某个属性改变执行handle方法。 watch: { carts: { handler(val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, deep: true } } 例如: export default { data(){ return { child_topicData: this.topicData } }, props: { //父组件传递给子组件的数据 topicData: { type: Object, default() { return {} } }, }, watch: {//子组件的子组件监听父组件的数据,不用watch监听不到数据 topicData: { handler: function (val) { this.child_topicData= deepCopy(val) }, deep: true //深度检测 } } } 48. H5页面有2个echarts统计图都有x,y轴是用什么来区分开? 通过id,新建option对象来进行区分。如下： 初始化Echarts实例，定义DOM给定宽高，将Echarts挂DOM上，最后调用Echarts。 例如： <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM ,定义DOM给定宽高 --> <div id="main" style="width: 600px;height:400px;"></div> </body> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例, 将Echarts挂DOM上 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { grid: {containLabel: true}, xAxis: {name: 'amount'}, yAxis: {type: 'category'}, inRange: { color: ['#D7DA8B', '#E15457'] }, series: [ { type: 'bar'} ] }; // 调用echarts，使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> 49.promise的理解? Promise用来解决异步传输，解决等待,频繁使用回调函数问题。 Promise的作用简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。 Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。 应用场景：如果一次性上传很多文件呢，你让那个先上传？浏览器进程就一个，一起上传，阻塞了，所以才需要使用promise这样的技术去异步上传 例如1： function demo(str) { return new Promise((resolve, reject) => { if(str){ resolve() // 可以没有参数 resolve(str) } else { reject() //可以没有参数 reject('error') } }) } 例如2: <script> // 1.洗菜做饭 2.坐下来吃饭 3.收拾桌子洗碗 var state = 1; function step1(resolve,reject){ console.log('1.洗菜做饭'); if(state==1){ resolve('洗菜做饭--完成'); }else{ reject('洗菜做饭--错误'); } } function step2(resolve,reject){ console.log('2.坐下来吃饭'); if(state==1){ resolve('坐下来吃饭--完成'); }else{ reject('坐下来吃饭--错误'); } } // 链式操作用法 new Promise(step1). then(function(val){ console.log(val); return new Promise(step2); }). then(function(val){ console.log(val) }); </script> 50. flex是哪几个的组合? flex:1代表什么? flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto flex属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 flex:1 等同于 flex: 1 1 0% flex:0% 等同于 flex: 1 1 0% 讲解链接https://zhidao.baidu.com/question/1801410870995345787.html 51. box-sizing取值都有哪些,有什么区别? box-sizing: border-box 设定宽度和高度不用减去边框和内边距 box-sizing:content-box设定宽度和高度分别减去边框和内边距才得到内容的宽度和高度 52. 变量声明提升的理解? 变量声明提前：js 中，变量声明和函数声明将被提升到函数的最顶部。 1.提升只是变量声明，赋值在原地不动。 2.提升只是将变量声明提升到变量所在的变量作用域顶端，其实不是全局提升局部(变量就算提升，它还是局部变量(函数和语句块里的变量都是局部变量)，不可能提升成全局变量)。 3.变量声明和函数声明同时获得变量提升，函数声明的提升是在变量声明的提升之上的，也就是函数声明会最先获得提升，然后是变量声明。 注意：声明时被初始化了的变量不会被提升，js的变量提升，使用中会产生许多困扰，因此es6引入let和const来解决这个问题 变量声明提升： 我们首先来看一个例子： console.log(global); // undefined var global = 'global'; console.log(global); // global 所以，以上代码在执行过程中实际上是这样的： var global; console.log(global); // undefined global = 'global'; console.log(global); // global 注意：变量声明的提升仅仅是声明提升了，但赋值其实不会被提升。 函数声明的提升 1.看例子： //函数声明 foo(); //"aaa" function foo(){ console.log("aaa"); } 2.一个函数表表达式的例子： foo(); // foo is not a function var foo = function(){ console.log("aaa"); } 函数表达式实际上就是变量声明——变量提升，可是界说赋值其实不会提升，上例的执行顺序是这样的： var foo; foo; // undefined foo(); // foo is not a function foo = function(){ console.log("aaa"); } 变量声明和函数声明的优先级 例如： console.log(foo); //function foo(){} var foo=10; console.log(foo); //10 function foo(){} console.log(foo); //10 解释：第一个console中，函数声明提升笼盖了变量声明提升；第二个console中，给foo变量重新赋值；第三个和第二个一样。实际上的执行过程是这样的： var foo; // 这种是全局提升 function foo(){} console.log(foo); //function foo(){} foo=10; console.log(foo); //10 console.log(foo); //10 由此可以看出，函数声明的提升是在变量声明的提升之上的。 链接：http://www.vcchar.com/thread-27652-1-1.html 53. http和https的区别? 1、https协议需要用到证书才能访问；http接口随便调用; 2、http信息是明文传输，https【Hypertext Transfer Protocol Secure，超文本传输安全协议】,它是加密传输协议。 3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。 4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。 54. css选择器有哪些? 类选择器，ID选择器，标签选择器，全局选择器，组合选择器，继承选择器，伪类选择器 55. 判断数组的方法? 有4种: Object.prototype.toString.call() 、 instanceof 、 Array.isArray()、typeof 56.基本类型和引用类型有哪些? js五种数据类型：String、number、boolean、null、undefined 基本(原始)类型：Number、Boolean、String、undefined、 null 引用类型：Array、Object、Function 57.拖拽功能的实现? 思路: 鼠标按下时，记录一下鼠标位置距离移动元素的距离。 鼠标移动时，实时更新元素位置（具体计算以垂直方向为例：鼠标距离浏览器垂直、水平方向距离，减去刚刚纪录的鼠标距离元素的垂直、水平方向距离，就是元素定位top属性的值） 鼠标松开时，完成元素位移。 58.this指向? obj.fun() //fun中的this指obj(事件中时) new fun() //fun中的this指正在创建的新对象 fun()和匿名函数自调 //this指window 构造函数.prototype.方法=function(){...} //fun中的this指将来调用fun的 .前的子对象. 注:只要是回调函数,this指window. 59.说说项目是如何搭建? 搭建只是把vue的脚手架搭起来,把路由写好, 还有把基本的依赖安装一下 60.写项目期间遇到什么问题，以及是如何解决的? 1、在搭建项目时，有时依赖都安装完成了，然后项目就是跑不起来，这里有可能是node版本太低了，或者依赖包没有完全安装成功，少了依赖包； 解决方法：这时要进行node版本升级8.0以上，且把依赖包删除重新安装； 2、自定义组件添加@click事件不生效； 解决方法：使用.native修饰符，就是@click.native; 3、vue框架样式修改不生效， 解决方法:可以在样式名前加/deep/; 4、使用form表单组件时，自定义验证规则时导致validate不能执行。 解决方法：在自定义规则中，一定要在自定义规则之后加上else{callback()}，否则，callback不能进行回调。导致validate()无法执行。如果有多条验证规则，每条规则都要加上else{callback()}才可以！ 如下： 5.使用组件el-table设置表格,表头数据也是动态获取的,如何动态设置列表的宽度，所以不好给每表头设置固定宽度，而且是使用v-for循环显示表头，给表格其中某一列设置宽度？ 解决方法：在表格中添加宽度属性:width，在method中添加自定义列的宽度的方法。 61.浏览器字体默认大小12px,如何设置小于12px? 62.http缓存机制及原理? http缓存机制有2种，分别强制缓存和比较缓存。 1.把数据存储在缓存数据库中：在客户端第一次请求数据时，此时缓存数据库中没有对应的缓存数据，需要请求服务器，服务器返回数据和缓存规则，将数据存储至缓存数据库中。 2.对于强制缓存，服务器返回浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。 3.对于比较缓存，将缓存信息中的Etag和Last-Modified发送给服务器，由服务器验证，返回304未修改状态码时，浏览器直接使用缓存；如果缓存过期，重新请求服务器验证缓存标识，返回最新数据和缓存规则给浏览器，浏览器将最新数据和缓存规则存储在缓存数据库中。 链接：https://www.cnblogs.com/DiDiao-Liang/articles/8308995.html 63.如何清除浏览器缓存? 浏览器缓存主要是 HTTP 协议定义的缓存机制。HTML 添加meta 标签，例如 <META HTTP-EQUIV="Pragma" CONTENT="no-store"> 含义是让浏览器不缓存当前页面。但是代理服务器不解析 HTML 内容，一般应用广泛的是用 HTTP 头信息控制缓存。 64. 双向绑定如何另一方不改变？ 65.图片懒加载的作用和原理? 作用：在图片较多的页面中，页面加载性能较差。使用图片懒加载可以让图片出现在可视区域时再进行加载，从而提高用户体验。 原理：设置img标签的src属性为空或统一的图片路径（如加载中样式），监听页面的滚动，当图片出现在可视区域时再为src重新赋值。 66. 媒体查询和流式布局的不同？ 流式布局：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。 响应式布局：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 67. js判断浏览器的版本和类型？ function getExplorerInfo() { //获取userAgent字符号信息,转为小写 var explorer = window.navigator.userAgent.toLowerCase(); //ie 在explorer中查找msie，如果找到了，说明是ie浏览器 if (explorer.indexOf("msie") >= 0) { // match是函数，需要一个正则表达式; [\d.]是数字加个点, 因为版本后面还 有其它字符串，所以最后一个数字后还是有点的; // useragent字符串中匹配正则表达式 var ver = explorer.match(/msie ([\d.]+)/)[1]; return { type: "IE", version: ver }; } //firefox else if (explorer.indexOf("firefox") >= 0) { var ver = explorer.match(/firefox\/([\d.]+)/)[1]; return { type: "Firefox", version: ver }; } //Chrome else if (explorer.indexOf("chrome") >= 0) { var ver = explorer.match(/chrome\/([\d.]+)/)[1]; return { type: "Chrome", version: ver }; } //Opera else if (explorer.indexOf("opera") >= 0) { var ver = explorer.match(/opera.([\d.]+)/)[1]; return { type: "Opera", version: ver }; } //Safari else if (explorer.indexOf("Safari") >= 0) { var ver = explorer.match(/version\/([\d.]+)/)[1]; return { type: "Safari", version: ver }; } } alert("浏览器:" + getExplorerInfo().type + "\n 版本:" + getExplorerInfo().version); 67.js改变元素背景颜色、背景图url？js改变元素的宽和高? var div=document.getElemntById(“div”); 改背景颜色: div.style.backgroundColor = “red”; 改背景图url：div.style.backgroundImage =”url(img/a.jpg)”; 改宽度:div.style.width = “120px”; 改高度:div.style.height = “200px”; 68.字体太多用省略号如何表示与换行? 文字换行 white-space:breakall 不换行 white-space:nowrap 显示…… text-overflow:ellipsis 隐藏文字 overflow:hidden 69.循环数组和对象? //forEach只能用于循环数组 var arr=[1,3,4,6,7]; arr.forEach(item=>{ console.log(item);// 1,3,4,6,7 }) // 循环对象 var obj={a:"12",b:"34",c:"56"}; for(var key in obj){ //key是下标名称,也就是键 //obj[key]是下标对应的值,也就键的值 console.log(key +":"+obj[key]); // a:12 b:34 c:56 } 70. es5与es6的区别？ 区别：语法不一样，写法更简单，还有操作更灵活。 es5的特性 1) strict模式 严格模式，限制一些用法，'use strict'; 2) Array增加方法 增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法 PS： 还有其他方法 Function.prototype.bind、String.prototype.trim、Date.now 3)Object方法 Object.getPrototypeOf Object.create Object.getOwnPropertyNames Object.defineProperty Object.getOwnPropertyDescriptor Object.defineProperties Object.keys Object.preventExtensions / Object.isExtensible Object.seal / Object.isSealed Object.freeze / Object.isFrozen es6的特性 1) 对象属性值简写 考虑下面的ECMAScript 5代码片段: function createMonster(name, power) { return { type: 'Monster', name: name, power: power }; } function createWitch(name) { return { type: 'Witch', name: name }; } es6新的属性简写形式,则上面的代码可以写成: function createMonster(name, power) { return { type: 'Monster', name, power }; } function createWitch(name) { return { type: 'Witch', name }; } 2) 赋值解构 let singer = { first: "Bob", last: "Dylan" }; let { first: f, last: l } = singer; // 相当于 f = "Bob", l = "Dylan" let [x, y] = [1, 2, 3]; // x = 1, y = 2 3) 箭头函数 原来是function，现在是=> (1).简化了代码形式，默认return表达式结果。 (2).自动绑定语义this，即定义函数时的this。如上面例子中，forEach的匿名函数参数中用到的this。 常用的命名函数写法是这样的： // es5常用写法 function sum(i,m){ return i + m; } // ES6的命名函数写法： sum = (i,m) => { return i + m; } 4) 字符串模版 和 多行字符串 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?` // return "Hello Bob, how are you today?" 5) 块级作用域和关键字let, 常量const 块作用域变量：ES6中的新关键字let允许允许开发者将变量的作用域限定在块级别。不会像var一样变量提升。 6) 参数默认值：允许在函数定义的时候指定默认的值。 7) 对象合并：方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。 //es5 let name = { name:'sea' },age = { age:15 },person= {} Object.assign(person,name,age) console.log(person) //{ name:'sea',age:15 } //es6 let name = { name:'sea' },age = { age:15 } let person = { ...name,...age } console.log(person)//{ name:'sea',age:15 } 8) 扩展运算符三个点(...)：用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中 例如： let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, b: 2 } 上述方法实际上等价于: let bar = { a: 1, b: 2 }; let baz = Object.assign({}, bar); // { a: 1, b: 2 } 9) 模块的export导出和import导入 //不接收对象 require:require('s.css'); //(es5) improt 's.css' //(es6) //接收对象 var o = require('s.js'); //es(5) import o form s.js //(es6) 10) Promises异步传输 2. 箭头函数与普通函数this指向和区别？ this指向： 箭头函数 this 指向声明变量的变量; 普通函数的this指向调用它的那个对象. 区别： 1) 更简洁的语法 2) 没有this，捕获其所在上下文的 this 值，作为自己的 this 值 3) 不能使用new构造函数 4) 箭头函数没有原型属性prototype 5) 箭头函数不能换行 箭头函数： let fun = () => { console.log('lalalala'); } 普通函数： function fun() { console.log('lalla'); } 3. null和undefined是否相等，分别是什么类型？ null==undefined // true null===undefined // false null为object类型，undefined为undefined类型
avatar
文章
阅读
粉丝