-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.json
1 lines (1 loc) · 77.7 KB
/
search.json
1
[{"title":"Fiddler抓包工具","date":"2021-11-09T13:51:57.000Z","url":"/2021/11/09/Fiddler/","tags":[["Fiddler","/tags/Fiddler/"]],"categories":[["undefined",""]],"content":"1、抓包工具有很多,为什么要使用Fiddler呢?原因如下: a.Firebug虽然可以抓包，但是对于分析http请求的详细信息，不够强大。模拟http请求的功能也不够，且firebug常常是需要“无刷新修改”，如果刷新了页面，所有的修改都不会保存。 b.Wireshark是通用的抓包工具，但是比较庞大，对于只需要抓取http请求的应用来说，似乎有些大材小用。 c.Httpwatch也是比较常用的http抓包工具，但是只支持IE和firefox浏览器（其他浏览器可能会有相应的插件），对于想要调试chrome浏览器的http请求，似乎稍显无力，而Fiddler2 是一个使用本地 127.0.0.1:8888 的 HTTP 代理，任何能够设置 HTTP 代理为 127.0.0.1:8888 的浏览器和应用程序都可以使用 Fiddler。 简单使用教程 打开Fiddler工具 在菜单栏Tool>Options>Connections 设置端口号 在手机wifi上>配置代理>手动(确保手机与电脑网络一致)服务器:自己电脑的IP地址(win+r,输入cmd,输入ipconfig查看电脑的IP地址)端口号:Fiddler上设置的端口号以上操作完就可以了 "},{"title":"常见问题","date":"2021-10-26T13:42:51.000Z","url":"/2021/10/26/problem/","tags":[["常见问题","/tags/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/"]],"categories":[["undefined",""]],"content":"1、Vue组件间的参数传递父组件与子组件传值1.父组件—>子组件：父组件传值给子组件使用Props属性2.子组件—>父组件：子组件传值给父组件使用Emit事件。3.非父子组件间的数据传递（兄弟组件传值）eventBus 2、js中null与undefined的区别null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。 3、js中常用的Math方法答：1.min()和max()方法 最大值最小值Math.ceil()向上取整 Math.floor()向下取整 Math.round()四舍五入Math.random() 随机数 4、js 延迟加载的方式有哪些defer 属性async 属性动态创建DOM方式使用jQuery的getScript方法使用setTimeout延迟方法让JS最后加载 5、数组对象有哪些原生方法及作用，列举一下(不少于10个)pop 删除数组第一个元素push 在数组后面追加一个元素shift 删除数组第一个元素unshift 在数的前面添加元素splice 删除 插入 修改的作用index：规定从何处添加/删除元素。howmany：规定应该删除多少元素。elements：规定要添加到数组的新元素，从 index 所指的下标处开始插入reverse 颠倒数组中元素的顺序concat 合并数组join 把数组拼接成字符串slice 切割数组元素indexOf 查找元素 找不到返回-1 6、vuex是什么？怎么使用？哪种功能场景使用它？核心概念？vue框架中状态管理,在main.js引入store，注入场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车stateVuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。mutationsmutations定义的方法动态修改Vuex 的 store中的状态或数据。getters类似vue的计算属性，主要用来过滤一些数据。actionactions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。 7、JS原型，原型链 ? 有什么特点？每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。关系：instance.constructor.prototype = instance.proto 特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。 8、关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？IE的事件流是冒泡流，而火狐同时支持冒泡流和捕获流。阻止事件冒泡：ev.stopPropagation(); 旧 IE则是使用e.cancelBubble = true; 9、如何解决跨域问题?jsonp 其大概原理是利用script/img/link等标签可以跨域取回文件的性质，来实现跨域的。 cors(阔耳) 这个是浏览器和服务器端共同合作去进行跨域的，浏览器端相关的接口有 fetch/xhr，并且这两者实现 cors 的跨 10、同步和异步的区别?同步： 同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。简单来说，同步就是必须一件一件事做，等前一件做完了才能做下一件事。 异步： 将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。 总结来说，同步和异步的区别：请求发出后，是否需要等待结果，才能继续执行其他操作。 11、vue-router中的路由钩子函数及参数作用1.全局钩子函数：beforeEach、afterEach2.针对单个路由钩子函数：beforeEnter3.组件级钩子函数：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeaveto：route即将进入的目标路由对象，from：route当前导航正要离开的路由next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。 12、 javascript 代码中的”use strict”是什么意思 ? 作用是什么？除了正常模式运行外，ECMAscript添加了第二种运行模式：“严格模式”。作用： 消除js不合理，不严谨地方，减少怪异行为 消除代码运行的不安全之处， 提高编译器的效率，增加运行速度 为未来的js新版本做铺垫。 13、 对JSON的了解？JSON对象的两个方法？全称：JavaScript Object Notation。 JSON中对象通过“{}”来标识，一个“{}”代表一个对象，如{“AreaId”:”123”}，对象的值是键值对的形式（key：value）。JSON是JS的一个严格的子集，一种轻量级的数据交换格式，类似于xml。数据格式简单，易于读写，占用带宽小。两个方法：JSON.parse(str) 解析JSON字符串 把JSON字符串变成JavaScript值或对象JSON.stringify(obj) 将一个JavaScript值(对象或者数组)转换为一个 JSON字符串 14、JS的重绘与回流重绘(repaint)：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。回流(reflow)：又叫重排（layout）。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。重点：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。 15、JS哪些操作会造成内存泄露？1）意外的全局变量引起的内存泄露2）闭包引起的内存泄露3）没有清理的DOM元素引用4）被遗忘的定时器或者回调5）子元素存在引起的内存泄露 16、vue-router中的路由钩子函数及参数作用一）全局的 （1）beforeEach - 前置钩子函数参数to、from、nextto：去哪里from：从哪里next()：是否跳转由它决定使用场景 - 未登录去下单，跳转到登录页（2）afterEach - 后置钩子函数参数to、fromto:去哪里from:从哪来使用场景 - 改变浏览器title（二）单个路由独享的 beforeEnter参数to、from、next同beforeEach（三） 组件级的 （1）beforeRouteEnter - 进入组件前参数to、from、next同beforeEach使用场景 - 进入这个组件前你要做什么初始化操作（2）beforeRouteUpdate - 组件更新或改变时参数to、from、next同beforeEach使用场景 - 复用组件时（对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候）（3）beforeRouteLeave - 离开组件时参数to、from、next同beforeEach使用场景 - 清除定时器等等 17、 javascript 代码中的”use strict”是什么意思 ? 作用是什么？严格模式目的： ①添加更多报错的场合，消除代码的一些不安全之处，保证代码运行的安全。 ②提高编辑器效率，提高运行速度。 ③为新版本的JavaScript做铺垫。 补充缺点： ②IE9及以下都不支持。 ②在工作中，js代码都会进行压缩，有一些文件没有使用严格模式，而现在的文件使用了严格模式，当压缩后，新文件的’use strict’就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。 18、 对JSON的了解？JSON对象的两个方法？json，是一种数据格式，在与后端的数据交互中有较为广泛的应用JSON.stringify( {} , [ ] , “”)，把js值转换为json字符串.JSON.parse(json字符串)； 把json字符串反序列化为一个js值。 19、JS的重绘与回流在说浏览器渲染页面之前，我们需要先了解两个点，一个叫 浏览器解析 URL，另一个就是本章节将涉及的 重绘与回流：•重绘(repaint)：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。 常见的重绘操作有：1.改变元素颜色2.改变元素背景色3.more ……•回流(reflow)：又叫重排（layout）。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。 常见的回流操作有：1.页面初次渲染2.浏览器窗口大小改变3.元素尺寸/位置/内容发生改变4.元素字体大小变化5.添加或者删除可见的 DOM 元素6.激活 CSS 伪类（:hover……）7.more ……•重点：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。 20、JS哪些操作会造成内存泄露？闭包,定时器,没有清理的DOM元素引用1.setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。 2. 闭包 3. 控制台日志 4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）21、v-show和v-if指令的区别？答：v-if :生成或移除一个元素。v-show:显示或者隐藏一个元素 22、渐进增强与优雅降级的理解？渐进增强对浏览器的版本 向上兼容优雅降级对浏览器的版本 向下兼容 23、JS 中继承实现的几种方式？原型链继承 将父类的实例作为子类的原型,构造函数继承 使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）,组合继承 核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用,寄生组合继承 核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点, 说说写JavaScript的基本规范? 不要在同一行声明多个变量 使用 ===或!==来比较true/false或者数值 switch必须带有default分支 函数应该有返回值 for if else 必须使用大括号 语句结束加分号 命名要有意义，使用驼峰命名法 25、Ajax 是什么? 如何创建一个Ajax？ajax 是一种创建动态网页的技术创建XMLHttpRequest 向服务器发送请求 处理服务器响应(通过xmlHttpRequest获取内容) 26、说出几种vue当中的指令和它的用法？v-model双向数据绑定 v-for循环v-show 显示与隐藏v-on事件绑定v-bind：用来绑定属性 27、vue的两个核心点数据驱动：ViewModel，保证数据和视图的一致性。组件系统：应用类UI可以看作全部是由组件树构成的。 28、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?createElement() //创建一个具体的元素添加、移除、替换、插入 appendChild() removeChild() redplaceChild() insertBefore() //在已有的子节点前插入一个新的子节点通过id查找元素getElementById() //通过元素Id，唯一性 29、Js 有哪几种创建对象的方式new Ｏbject() 实例化使用字面量 {} 直接定义工厂模式构造函数模式（constructor）原型模式（prototype）构造函数+原型模式 30、描述js中的匿名函数及其作用匿名函数就是没有名字的函数通过匿名函数可以实现闭包模拟块级作用域，减少全局变量 31、vue中 key 值的作用？1.可以高效的更新虚拟DOM2.可以让vue使用相同标签名元素的过渡切换时,可以区分它们 32、请说出vue.cli项目中src目录每个文件夹和文件的用法？1assets 阿瑟 文件夹是放静态资源2components 看跑们 是放组件3router 定义路由相关的配置4view视图5app.vue是一个应用主组件(就是最大的组件)6main.js是入口文件 33、从输入URL到页面加载发生了什么？DNS解析TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束 34、HTTP与HTTPS有什么区别？1安全性不同 https是基于http开发的，简单的说https就是安全版的http2端口不同 http使用的是80端口 https则使用的是443端口3链接的形式的不同 一个加了S一个没加S S是SSL也就是说加密 https是加密过得http4是否有证书 https需要证书(大多数证书都是收费的) http没有证书 35、常用的js相应事件onLoad 加载事件 onClick点击事件 onkeydown 键盘按下事件 onkeyup键盘弹起 onBlur 不列 失去焦点onFocus 佛出 获取焦点事件 onMouseOver鼠标悬浮 onMouseOut 鼠标离开onMouseDown 鼠标按下 onMouseUp 鼠标弹起 onMouseMove 鼠标移动onChange 当状态改变时触发，常用于select下拉选框onSelect 文本框中的文本选中时触发 onSubmit 当表单提交时触发 onReset 表单重置时触发onkeypress ：当键盘按下时触发（要快于onkeydown） 36、vue常用的事件修饰符1..stop ：阻止冒泡2..prevent ： 阻止默认事件3. .capture 客土 在捕获阶段触发监听函数(就是冒泡发生先触发它)即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁。4.）. self 骚：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响5..once ones：事件只触发一次 37、js中事件冒泡的定义和解决冒泡事件事件源逐级向上传递event.stopPropagation(); 38、js中递归的定义和实现方法？递归函数是在通过名字调用自身的情况下构成的函数中调用函数自己 在使用递归的时候一定需要有结束递归的条件，否则就会变成死循环，直到浏览器崩溃 39、slice和splice,substr和substring有什么区别slice,substr,substring他们都接收两个参数①slice（）：返回数组的一段。②substr()：返回一个指定位置开始的指定长度的子字符串。③substring():返回位于string对象中指定位置的子字符串。splice()三个参数 可以实现增删改 40、平时主要使用到的ES6特性有哪些1不一样的变量声明：const和let2.模板字符串3.箭头函数4. 函数的参数默认值5.Spread / Rest 操作符当被用于迭代器中时，它是一个 Spread 操作符：当被用于函数传参时，是一个 Rest 操作符6.对象和数组解构7.ES6中的类 41、vue优点？轻量级框架 简单易学 双向数据绑定 组件化 视图,数据,结构分离虚拟DOM 运行速度快 虚拟DOMdom操作时非常耗费性能的不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式 42、分别简述computed和watch的使用场景computed 当一个属性受多个属性影响的时候就需要用到computed 最典型的例子： 购物车商品结算的时候 watch 当一条数据影响多条数据的时候就需要用watch 搜索数据 43、eval是做什么的？这个函数可以把一个字符串当作一个JavaScript表达式一样去执行 44、函数声明式和函数表达式区别//函数声明式function greeting(){ console.log(“hello world”);} //函数表达式var greeting = function(){ console.log(“hello world”);}以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的.以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用.以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而函数表达式可以在任何地方声明。换句话说，函数声明不是一个完整的语句，所以不能出现在if-else,for循环，finally，try catch语句以及with语句中。 45、函数的防抖和节流所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数 46、单页面应用和多页面应用区别及优缺点单页面简称(SPA),原理:利用js感知到url的变化,可以通过js动态的将当前的页面内容清除掉,接着将下一个页面的内容挂载到当前的页面上,页面每次切换跳转时,并不需要做html请求,这样就节省了很多http发送延迟,切换速度更快. 优点:加载速度快,内容的改变不需要重新加载整个页面,对服务器压力小 前后端分离,视觉效果好 缺点:页面初次加载比较慢,页面复杂提高很多 多页面:一个应用多个页面,页面跳转时整个页面都刷新,每次都请求一个新的页面 有点:SEO效果好 缺点:页面切换慢,每次切换页面需要选择性的重新加载公共资源 47、axios的特点有哪些？1.从浏览器中创建XMLHttpRequests2.node.js创建http请求3.支持Promise API4.拦截请求和响应5.转换请求数据和响应数据6.取消请求7.自动换成jsonaxios中的发送字段的参数是data跟params两个两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送params一般适用于get请求data一般适用于post put 请求 48、axios有哪些常用方法？执行get请求 get执行post请求 post执行并发请求 all通过传递相关配置来进行请求拦截器interceptors in的赛吃 49、在循环中，break和continue语句的功能有何不同continue语句只结束本次循环，而不是终止整个循环的执行。 2） break语句则是结束整个循环过程，不再判断执行循环的条件是否成立 50、JQuery中事件绑定的四种方法及其优缺点JQuery中事件绑定的方法有bind、live、delegate、on bind()的优点：可以向匹配的元素绑定一个或者多个事件处理器。 bind()的缺点：它会绑定事件到所有的选出来的元素上，当元素很多时，会出现效率问题；当页面加载完的时候，你才可以进行bind()；它不会绑定到在它执行完后动态添加的那些元素上。 live的优点：仅有一次的事件绑定，绑定到document上；动态添加的elemtns依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上；可以在document ready之前就可以绑定那些需要的事件。live的缺点：从jq1.7开始已经不被推荐了;当一个元素采用live方法进行事件的绑定的时候，如果想阻止事件的传递或冒泡，就要在函数中return false,仅仅调用stopPropagation()是无法实现阻止事件的传递或者冒泡的,因为都要到达document，所以速度也会非常慢； delegate的优点：可以选择把这个事件放到哪个元素上了，可以有效的减小你所要查找的元素；可以用在动态添加的元素上。delegate的缺点：需要查找哪个元素上发生了那个事件，尽管比document少很多了，不过，还是得浪费时间来查找。 on的优点：提供了一种统一绑定事件的方法,可以用.on()来代替上述的3种方法。one是在dom树加载后，对元素的绑定，和bind一样属于后期绑定，但是会在事件执行之后移除元素的绑定事件，事件只执行一次。 on的缺点：暂为收集 51.箭头函数有几个使用注意点。（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。 （2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。 （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。 （4）不可以使用yield(u)命令，因此箭头函数不能用作 Generator(真呢累吃:生成器) 函数。 52、Vue中assets和static的区别static :该目录下的文件是不会被wabpack处理的，它们会被直接复制到最终的打包目录下面（默认是 dist/static ），且必须使用绝对路径来引用这些文件。assets:assets 中的文件会经过 webpack 打包，重新编译 53、JQuery的特点（至少5点）一款轻量级的js框架。丰富的DOM选择器链式表达式Ajax操作支持.跨浏览器兼容插件扩展开发可扩展性强解决浏览器兼容性问题 54、jquery是如何去操作样式的在jquery中是如何操作样式的：addClass()追加样式；removeClass()删除样式；toggle()切换样式；hasClass（）判断样式；attr（）获取或者设置样式； 55、jquery中的选择器有哪几种最常见ID选择器 #id类选择器 .class元素选择器 element属性选择器 $(“a[id=’a1’]”);组合选择器$(“.a2,#a3”);包含选择器 $(“p.p1”);匹配选择器 $(“li:eq(0)”,”ul.u1”) 56、$(this) 和 this 关键字在 jQuery 中有何不同？this表示javascript的dom对象$(this)表示把dom对象转换为jquery对象 57、vue项目实现路由按需加载(路由懒加载)的3种方式1.vue异步组件vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .缺点:这种情况下一个组件生成一个js文件2es提案的import() 路由懒加载(使用import)3webpack的require,ensure”en(in) sure”()这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。 58、ajax 请求的时候 get 和 post 方式的区别?get请求不安全，post安全 get请求数据有限制（大约2kb），post无限制 get请求参数会在url中显示，容易被他人窃取，post在请求体中，不会被窃取 59、form中input可以设置为readonly和disabled，有什么区别？答：readonly只针对input（text/password）和textarea有效，而disabled对于所有的表单元素都有效，包括select,radio,checkbox等表单在使用GET或POST方式提交时，表单元素在使用了readonly后，值可以传递到后台；而表单元素在使用disabled后值不可以传递到后台 60、减少页面加载时间的方法（不少于5点） 重复的HTTP请求数量应尽量减少 压缩Javascript、CSS代码 在文件头部放置css样式的定义 在文件末尾放Javascript脚本 css、javascript改由外部调用 尽可能减少DCOM元素 避免使用CSS脚本(CSS Expressions) 添加文件过期或缓存头 使用CDN(Content Delivery Network)网络加速 服务器启用gzip压缩功能 Ajax采用缓存调用 Ajax调用尽量采用GET方法调用 养成良好的开发维护习惯，尽量避免脚本重复调用 缩减iframe的使用，如无必要，尽量不要使用 优化图片文件(缩略图) 62、dom选择器优先级是什么，以及权重值计算优先级就是分配给指定的 CSS 声明的一个权重!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性1.行内样式 10002.id 01003.类选择器、伪类选择器、属性选择器[type=”text”] 00104.标签选择器、伪元素选择器(::first-line) 00015.通配符*、子选择器、相邻选择器 0000 63、浏览器标准模式和怪异模式之间的区别是什么?标准模式：是浏览器按照W3C标准解析执行代码，这样用规定的语法去渲染，就可以兼容各个浏览器，保证以正确的形式展示网页。怪异模式：是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。 64、静态布局、流式布局、响应式布局、弹性布局的优缺点静态布局 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。 流式布局优点：这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式缺点：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。 响应式布局优点：适应pc和移动端，如果足够耐心，效果完美缺点：媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。 flex布局优缺点优点在于其容易上手，根据flex规则很容易达到某个布局效果。缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。 65、js中四种定位的区别1、默认static（1）static表示没有定位，或者说不算具有定位属性。相对定位relative占据空间，相对于自身原有位置进行偏移，可能会覆盖其他元素。绝对定位absolute不占空间，相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准。所以，父元素一般设置为相对定位固定定位fixed不占空间，相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。 66、什么是同源策略所谓的同源，指的是协议，域名，端口相同 67、js的forEach和map方法的区别forEach()返回值是undefined，不可以链式调用。map()返回一个新数组，原数组不会改变。 68、js堆,栈与队列的定义，以及堆和栈的区别在JS中，每一个数据都需要一个内存空间。内存空间又被分为两种，栈内存(stack)与堆内存(heap)。 栈为自动分配的内存空间，它由系统自动释放堆是动态分配的内存，大小不定也不会自动释放也不是说不会自动释放，堆在没有引用的时候，下一次垃圾回收机制出现的时候会回收他的内存 js 的变量分为基本类型和引用类型 基本类型 （Undefined、Null、Boolean、Number和String）基本类型在内存中占据空间小、大小固定 ，他们的值保存在栈(stack)空间，是按值来访问引用类型 （对象、数组、函数）引用类型占据空间大、大小不固定, 栈内存中存放地址指向堆(heap)内存中的对象。是按引用访问的 69、懒加载和预加载的定义与区别1.预加载 1.1：预加载的理解在加载的时候预先吧所有资源提前加载 1.2:预加载的使用场景需要追求运行效率的项目中，并且内存消耗率非常低的业务逻辑。用户可以体验非常极致的加载和刷新效果，使用预加载可以做到非常好的效果。 2 懒加载 2.1:懒加载的理解懒加载就是说我们延迟他的加载，在我们使用资源的时候在进行加载 2.2:懒加载的使用场景我们在进行一些页面上有大量的图片资源，图片资源非常庞大，小的几kb打的几兆都有，在这种情况下我们如果说进行一次性加载所有的资源不仅用户会等待很久而且还会造成页面卡顿等状况。 70 懒加载和预加载的区别首先懒加载和预加载是完全不同的，一个是提前加载资源，一个是延迟加载或者不加载，懒加载会缓解一些服务器端和客户端内存的压力，预加载则会增加服务器端和客户端的压力，但是两种加载模式有各自的适用场景各有自己的优势。 71、.$(document).ready()方法和window.onload有什么区别：1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。2.编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行3.简化写法 window.onload没有简化写法 $(document).ready(function(){})可以简写成$(function(){}); 72、arguments的特点特性：1 arguments 对象不是一个真正的数组，它类似于数组，没有数组所特有的属性和方法，除了length。例如没有pop 方法。不过可以将其转换为数组2 arguments 对象仅在函数内部有效，在函数外部调用arguments对象会报错误。 73、var、let、const的区别1.varvar相比let就是管的比较宽，他的值可以被内部修改。2.letlet是es6中新增定义,带有块级作用域，只会在所定义块生效。3.constconst用来定义常量(可以是字符串，数组，函数，对象等)，并且初始值不可为空，但他并不是不可更改的 74、使用箭头函数应注意什么？1， 箭头函数没有prototype(原型)，所以箭头函数本身没有this，也就不能用call()、apply()、bind()这些方法去改变this的指向。2， 箭头函数的this指向在定义的时候继承自外层第一个普通函数的this。如果箭头函数外层没有普通函数，它的this会指向window(全局对象)3，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象4， 箭头函数没有constructor，使用new调用箭头函数都会报错5， 箭头函数的arguments 啊叫文第一种情况：箭头函数的this指向全局对象，会报arguments未声明的错误。第二种情况是：箭头函数的this如果指向普通函数,它的argumens继承于该普通函数。 75、forEach、for in 、for of三者的区别for in是遍历对象的属性名，一般用作遍历json对象。for of是遍历数组，forEach是属于Array类的原型方法，数组实例可以使用，作用也是遍历数组元素，for of只能获取当前遍历的元素，forEach通过回调函数还能获取当前元素的下标。for of是属于循环操作，可以break或return中断循环，而forEach由于它是一个回调，所以不能做出中断操作，一旦遍历就会遍历整个数组 76、http常见状态码有那些，分别代表什么意思答：200 欢迎回来，主人 （正常；请求已完成。 ） 301 人家搬家了 （已移动 — 请求的数据具有新的位置且更改是永久的。 ） 307 不是这里，换个地方啦 （重新请求的URL，客户端自动重新请求新的地址） 400 不要把奇怪的东西给人家嘛 （错误请求 — 请求中有语法问题，或不能满足请求。 ） 403 这里不可以啦！（禁止 — 即使有授权也不需要访问。 ） 404 这里什么都没有 — 人家是平的啦。 （找不到 — 服务器找不到给定的资源；文档不存在。 ） 405 打开方式不对 （资源被禁止 ） 414 这… 太长了啦 （请求 - URI 太长 ） 418 我就是个杯具啊 （我是茶壶） 77、常见的浏览器内核有哪些IE: trident 内核 Firefox：gecko (吉靠)内核 Safari:webkit 内核 Opera:以前是 presto(p列死to) 内核，Opera 现已改用 Google Chrome 的 Blink 内核 Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发) 78、MVC，MVP 和 MVVM 各部分之间的通信方式MVC：是应用最广泛的软件架构之一。M(model模型)，V(view视图)，C(controller控制器)1、View 传送指令到 Controller2、Controller (看吐了)完成业务逻辑后，要求 Model 改变状态3、Model 将新的数据发送到 View，用户得到反馈 MVP：MVP 模式将 Controller 改名为Presenter( 控制器 p列神吃)，同时改变了通信方向。 各部门之间的通信都是双向的，View和Model不发生联系，都通过presenter来进行传递 MVVM：是前台程序的一种设计模式，是针对于MVC中V进行的更细致的分工 分成三部分 M (model) 数据、 V (view) 视图、 VM（view-model）逻辑用来协调model和view的 79，localStorage,session,cookie区别三者区别 session和sessionStorage是有区别的session保存在服务器上 记录客户状态的机制 和cookie是类似的 1）存储大小 cookie：一般不超过4K（因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识） sessionStorage：5M或者更大 localStorage：5M或者更大 2）数据有效期 cookie：一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效 sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除 localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除，因此用作持久数据 3）作用域 cookie：在所有同源窗口中都是共享的 sessionStorage：在同一个浏览器窗口是共享的（不同浏览器、同一个页面也是不共享的） localStorage：在所有同源窗口中都是共享的 4）通信 ccokie：十种携带在同源的http请求中，即使不需要，故cookie在浏览器和服务器之间来回传递；如果使用cookie保存过多数据会造成性能问题 sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存 localStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存 5）易用性 cookie：需要自己进行封装，原生的cookie接口不够友好 sessionStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持 localStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持 应用场景 cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息等 sessionStorage：敏感账号一次性登录；单页面用的较多（sessionStorage 可以保证打开页面时 sessionStorage 的数据为空） localStorage：常用于长期登录（判断用户是否已登录），适合长期保存在本地的数据 cookie与session的区别Cookie数据存放在客户端，Session数据放在服务器端Cookie的安全性一般，他人可通过分析存放在本地的Cookie并进行Cookie欺骗。在安全性第一的前提下，选择Session更优。重要交互信息比如权限等就要放在Session中，一般的信息记录放Cookie中单个Cookie保存的数据不能超过4K，而Session原则上没有限制Session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用Cookie。Session 的运行依赖Session ID，而 Session ID 是存在 Cookie 中的，也就是说，如果浏览器禁用了 Cookie，Session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 Session ID，也就是地址重写） 80，什么是深拷贝首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。 81，浏览器从输入网址到页面显示出来过程发生了什么域名解析（获得IP地址）向WEB服务器发送HTTP请求服务器处理请求服务器返回HTTP响应浏览器显示页面信息 82，浏览器得到一个html文件是怎样解析的浏览器加载和渲染html的顺序 IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。 JS、CSS中如有重定义，后定义函数将覆盖前定义函数。 83，重绘与回流什么是回流当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。 什么是重绘当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。 区别：他们的区别很大：回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变 84，http和tcp有什么关系TCP属于运输层的一个很重要的协议，负责提供应用进程之间的通信。而HTTP属于应用层上的一种协议。在你发袭送一个请求网页的请求数据包中。包含你所请求的服务类型，用TCP报文的头部中的目的端口百号标出。比如HTTP的默认端口号为80，则度在TCP报文的头部就以80作为目的端口号，而用随机产生的一个从0到1023的数据作为你本地计算机应用问进程所用的原端口号。服务器收到该请求后，就一步一步的解析，最终会将结果返回给你答。 85，http请求由哪几部分构成答：HTTP 请求（request）由三部分组成，分别是：请求行、(请求头)消息报头、(请求体)请求正文 86，vue首屏加载比较慢怎么办1.Vue-router懒加载1.什么是Vue-router懒加载？Vue-router懒加载就是按需加载组件，只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就加载，项目越大，对首屏加载的速度提升得越明显2.使用CDN加速在做项目时，我们会用到很多库，采用cdn加载可以加快加载速度。详情可以查看Vue项目使用CDN优化首屏加载。3. gzip压缩4.异步加载组件 这里已经有前人栽好树，我们直接右转就可以了。vue异步组件(高级异步组件)使用场景及实践。 5.服务端渲染使用pug/jade、ejs、vue通用应用框架Nuxt等等都可以实现后端渲染，并且后端渲染还能对seo优化起到作用。这里配上Nuxt.js中文官网。 87，了解webpack吗webpack就是个前端打包工具作用打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。 四大核心概念入口(entry)(安吃力) 生成一个依赖图，在这里面配置一个起点（或多个入口起点），默认’./src’输出(output)(out put) 输出创建的bundles(邦德),以及如何命名这些文件，默认”./dist”。通过配置outputloader oader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。插件(plugins)(怕根) oader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。 88.js的垃圾回收机制原理 找到不再被使用的变量，然后释放其占用的内存，但这个过程不是时时的，因为其开销比较大， 所以垃圾回收器会按照固定时间间隔周期性的执行 作用是为了防止内存泄漏js的垃圾回收机制有两种 标记清除、引用计数a.标记清除当变量进入环境时，将这个变量标记为“进入环境”;当变量离开环境时，则将其标记为“离开环境”。b.引入计数(低级浏览器) 当变量声明，第一次赋值时记为1，然后当这个变量值改变时，记录为0，将计数为0的回收标记“离开环境”的就回收内存 89.slice splice substr substring 的区别slice 截取数组 返回新数组 不改变原数组splice 从数组中添加或删除元素 改变原来的数组 返回被删除的元素substr 截取两个指定索引之间的数组substring 和substr类似 但是第二个参数是字符串的长度 90.setTimeout promise Async/Await的区别首先我们谈谈Event Loop(事件循环)。：先执行一个宏任务如果有微任务的把全部宏任务执行 没有就进入下一个新的宏任务setTimeout是一个macro(宏 麦考)任务promise、和await后续为micro(微 麦克)任务所以在执行顺序上会先进行同步代码，再者Promise、Async/Await，最后setTimeout。 谈谈Promise、Async/Await差异promise是resolve为异步方法，将放入微任务队里里执行，但是resolve前后的正常代码为同步代码；Async/Await会返回一个promise，await 的顺序是从右往左的，也就是说await 右边的方法也优先执行同步代码，再让出线程，进入微任务队列，await下面的代码可以理解为promise then里面的代码。 了解了什么是宏任务和微任务，就好理解多了，首先执行 宏任务 => 微任务的Event Queue => 宏任务的Event Queue JavaScript的事件分两种，宏任务(macro-task)和微任务(micro-task) 宏任务：包括整体代码script，setTimeout，setInterval微任务：Promise.then(非new Promise)，process.nextTick(node中) 91.你知道响应布局有几种事项方式吗?百分比布局(流式布局)弹性盒子(flex布局)媒体查询+rem(rem布局) 92.ES6的新增语法有什么const let箭头函数数组对象结构class.参数的默认值扩展运算符：… 93vue框架的优势 Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API； 94是否了解ajax,能说下ajax中,有多少种请求方式吗Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助ajax的优点：在不刷新整个页面的前提下与服务器通信维护数据有两种请求方式 get post95ajax,http请求的详细过程ajax (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象； (2)创建一个新的HTTP请求,并指定该HTTP请求的方式、URL及验证信息； (3)设置响应HTTP请求状态变化的函数； (4)发送HTTP请求； (5)获取异步调用返回的数据； (6)使用JavaScript和DOM实现局部刷新。 http（1）建立TCP连接（2） Web浏览器向Web服务器发送请求命令（3） Web服务器应答（4）Web服务器关闭TCP连接（5）浏览器接受到服务器响应的数据 总结浏览器发起请求->解析域名得到ip进行TCP连接 ->浏览器发送HTTP请求和头信息发送->服务器对浏览器进行应答，响应头信息和浏览器所需的内容-> 关闭TCP连接或保持->浏览器得到数据数据进行操作 96如何解决跨域问题方法一：通过设置后端的cors允许跨域方法二：通过JsonP方法三：通过nginx反向代理 5uft-8有什么用 不用utf-8可以用什么?“UTF-8” 是一种字符编码,UTF-8 的作用就是让浏览器做好翻译工作,防止浏览器出现中文乱码其他编码gb2312: 代表国家标准第2312条（不包含繁体）gbk：国家标准扩展板（增加了繁体，包含所有亚洲字符集）unicode：万国码(UTF-8就是unicode的升级版啦) 97.给定一个宽高未知的div,一个img,如何让img在div中,垂直居中最简单的方法 使用弹性布局 把div设置display:flex justify(租死的快)-content: center; /子元素水平居中/ align-items: center; /子元素垂直居中/ 98rem原理rem是css3一种新的长度单位,是根据html根元素的字体大小的来决定rem这个单位的大小3es6新增的语法const 常量 let局部变量Promise Async(A醒)箭头函数对象解构数组解构classSet和Map(马pe)函数参数默认值 99.promise是什么,以及它的用法?Promise是异步编程的一种解决方案作用Promise是一种用于解决异步问题的思路、方案或者对象方式。在js中，经常使用异步的地方是Ajax交互。用法首先，Promise是一个对象，因此，我们使用new的方式新建一个。然后给它传一个函数作为参数，这个函数呢也有两个参数，一个叫resolve(列骚)(决定)，一个叫reject(绿觉)(拒绝)，这两个参数也是函数。紧接着，我们使用then来调用这个Promise： 100.使用箭头函数应注意什么？ （1）用了箭头函数，this就不是指向window，而是父级（指向是可变的） （2）不能够使用arguments(o叫门)对象 （3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误 （4）不可以使用yield(u)命令，因此箭头函数不能用作 Generator(生成器 珍妮累吃) 函数 101.什么是盒子模型,ie的盒子模型和w3c盒子模型的有什么区别?盒子模型由内容、内边距、外边距、边框组成 区别w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border 102.工厂模式 原型模式 构造函数模式的有缺点是什么?工厂模式的优点 工厂模式解决了创建多个相似对象的问题。工厂模式的缺点 没有解决对象识别的问题（即怎样知道一个对象的类型）。创建的对象无法判断类型 构造函数的优点 创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方构造函数的缺点 使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。 原型模式的优点 使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。原型模式的缺点 原型中所有属性是被很多实例共享的，这种共享对于函数非常合适。然而，对于包含引用类型值的属性来说，问题就比较大了 103.你知道状态码200跟304是什么吗？200是正常，304是内容没有修改。 态码200：请求已成功，请求所希望的响应头或数据体将随此响应返回。即返回的数据为全量的数据，如果文件不通过GZIP压缩的话，文件是多大，则要有多大传输量。 状态码304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。即客户端和服务器端只需要传输很少的数据量来做文件的校验，如果文件没有修改过，则不需要返回全量的数据。 104.Vue里面的computed和watch是什么？有什么区别watch：主要是监听数据，监听props,data,computed内的数据是否发生了变化，然后它还提供两个参数（new,old）,提供你观察变化之前的值和变化之后的值，所以watch更多的操作是在于【观察】上，所以再外面需要监控数据变化或者还要执行异步操作的时候，最好是使用watch computed：主要是处理【逻辑运算】，而且computed是可以缓存的，这样就可以避免每次计算都重新获取值，提高了效率 105.简单介绍一下vue-router？Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌 106.你能描述一下渐进增强和优雅降级之间的不同吗?渐进增强就是对浏览器的版本向上兼容 优雅降级就是对浏览器的版本向下兼容 107.vue和vue-cli的区别？vue是一套用于构建用户界面的渐进式框架 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。 108.Vue的生命周期是哪些？beforeCreate 创建前 (数据绑定前) created 创建 beforeMount 挂载前 mounted挂载 beforeUpdate更新前 updated 更新 beforeDestroy 销毁前 destroyed 销毁 109.什么是事件代理事件委托（delegate(爹累个)）也称为事件托管或事件代理就是把目标节点的事件绑定到祖先节点上。这种简单而优雅的事件注册方式是基于事件传播过程中，逐层冒泡总能被祖先节点捕获。 这样做的好处：优化代码，提升运行性能，真正把 HTML 和 JavaScript 分离，也能防止出现在动态添加或删除节点过程中注册的事件丢失的现象。。 110.Vue里面的computed和watch是什么？有什么区别computed(看票切) 计算属性 不支持异步 缓存computed 主要是处理【逻辑运算】 当一个属性受多个属性影响的时候就需要用到computed 最典型的例子： 购物车商品结算的时候watch (握持) 数据监听 支持异步 不缓存watch：主要是监听数据当一条数据影响多条数据的时候就需要用watch搜索数据 111.简单说一下什么是插入排序插入排序是除冒泡排序外比较出名的数组排序方法,和冒泡排序一样,用来解决数组内元素按照由大到小(或者由小到大)的问题的—-当然,首先这个数组内的元素首先可以被比较. 112..举例下canvas里用到的apifillRect 绘制矩形clearRect 清除矩形区域arc 绘制圆 绘制线段 moveTo 第一条 lineTo第二条以后drawImage 绘制图像fillTex绘制文字save() 保存restore路径 beginPath() 开启路径context.closePath() 关闭路径 113.http请求的步骤是什么？（1）建立TCP连接（2） Web浏览器向Web服务器发送请求命令（3） Web服务器应答（4）Web服务器关闭TCP连接（5）浏览器接受到服务器响应的数据 3.Es6版本的js如何做到去重？es6中新增了set类型的数据，自动去掉重复的数据let arr=[1,2,3,1,2,4,3,3,5];console.log(new Set(arr)) //你会发现输出的已经去重了，但是，返回的是个对象，需要用到Array.from()Array.from()的作用是是可以把类数组对象转化为数组。Array.from(new Set(arr)) 输出[1,2,3,4,5] 115.Vue的 v-if 和v-show的区别？v-if是生成和去除元素v-show是显示和隐藏元素 116.vue的双向绑定原理？vue实现数据双向绑定的原理就是用Object.defineproperty()(跌fi p落p t)重新定义（set方法）对象设置属性值和（get方法）获取属性值的操纵来实现的 117.怎么提高前端性能？ 重复的HTTP请求数量应尽量减少 压缩Javascript、CSS代码 在文件头部放置css样式的定义 在文件末尾放Javascript脚本 css、javascript改由外部调用 尽可能减少DCOM元素 避免使用CSS脚本(CSS Expressions) 添加文件过期或缓存头 使用CDN(Content Delivery Network)网络加速 服务器启用gzip压缩功能 Ajax采用缓存调用 Ajax调用尽量采用GET方法调用 养成良好的开发维护习惯，尽量避免脚本重复调用 缩减iframe的使用，如无必要，尽量不要使用 优化图片文件(缩略图) 说一下TCP三次握手 ？建立连接、数据传输和连接释放。 TCP连接建立过程中要解决以下三个问题： （１）：要使每一方都能够确认对方的存在。 （２）：要允许双方协商一些参数 （３）：能够对运输实体资源进行分配 119.简单介绍一下vue-router？Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌其实就是一个url和组件之间的映射关系，当我们访问不同的url的时候在页面渲染不同的组件hash 模式History 模式在vue-router中默认使用的是hash模式，在hash模式下，使用hash来模拟一个完成的url，hash即url中’#’和’?’之间的内容，当hash改变时，页面不会重新刷新，从而到达不刷新页面改变视图的目的。当然由于种种原因，我们还可以使用history模式，用那种模式还是看个人习惯吧，history模式美观，确实是比hash要好一些。 120. 构造函数的优缺点？构造函数的优点 创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方构造函数的缺点 使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。 121.vue虚拟dom的作用？所谓的Virtual dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render(卵的)方法将其渲染成真实的DOM的节点。使用Virtual(ve秋) Dom（虚拟DOM）来更新DOM节点，提升渲染性能。当用传统的方式操作DOM的时候，浏览器会从构建DOM树开始从头到尾执行一遍流程，效率很低。而虚拟DOM是用javascript对象表示的，而操作javascript是很简便高效的。虚拟DOM和真正的DOM有一层映射关系，很多需要操作DOM的地方都会去操作虚拟DOM，最后统一一次更新DOM。因而可以提高性能。 122.虚拟DOM的Diff算法DOM Diff指的是通过Diff算法去比较虚拟DOM的变化虚拟DOM中，在DOM的状态发生变化时，虚拟DOM会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。 123.真实DOM和虚拟DOM的区别虚拟DOM不会进行排版与重绘操作真实DOM频繁排版与重绘的效率是相当低的虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部 124.怎么提高前端性能？ 重复的HTTP请求数量应尽量减少 压缩Javascript、CSS代码 在文件头部放置css样式的定义 在文件末尾放Javascript脚本 css、javascript改由外部调用 尽可能减少DCOM元素 避免使用CSS脚本(CSS Expressions) 添加文件过期或缓存头 使用CDN(Content Delivery Network)网络加速 服务器启用gzip压缩功能 Ajax采用缓存调用 Ajax调用尽量采用GET方法调用 养成良好的开发维护习惯，尽量避免脚本重复调用 缩减iframe的使用，如无必要，尽量不要使用 优化图片文件(缩略图) 125.说一下TCP三次握手 ？建立连接、数据传输和连接释放。 TCP连接建立过程中要解决以下三个问题： （１）：要使每一方都能够确认对方的存在。 （２）：要允许双方协商一些参数 （３）：能够对运输实体资源进行分配 127. 构造函数的优缺点？构造函数的优点 创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方构造函数的缺点 使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。 128.vue虚拟dom的作用？所谓的Virtual dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render(卵的)方法将其渲染成真实的DOM的节点。使用Virtual(ve秋) Dom（虚拟DOM）来更新DOM节点，提升渲染性能。当用传统的方式操作DOM的时候，浏览器会从构建DOM树开始从头到尾执行一遍流程，效率很低。而虚拟DOM是用javascript对象表示的，而操作javascript是很简便高效的。虚拟DOM和真正的DOM有一层映射关系，很多需要操作DOM的地方都会去操作虚拟DOM，最后统一一次更新DOM。因而可以提高性能。 129.虚拟DOM的Diff算法DOM Diff指的是通过Diff算法去比较虚拟DOM的变化虚拟DOM中，在DOM的状态发生变化时，虚拟DOM会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。 130.真实DOM和虚拟DOM的区别虚拟DOM不会进行排版与重绘操作真实DOM频繁排版与重绘的效率是相当低的虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部 131.var、let、const之间的区别？1.varvar相比let就是管的比较宽，他的值可以被内部修改。2.letlet是es6中新增定义,带有块级作用域，只会在所定义块生效。3.constconst用来定义常量(可以是字符串，数组，函数，对象等)，并且初始值不可为空，但他并不是不可更改的 132.如何规避在JavaScript中多开发造成的函数重名问题?命名空间封闭空间js模块化mvc（数据层、表现层、控制层）seajs（如果了解的呢，可以说）变量转换成对象的属性对象化 133.工厂模式、原型模式、构造函数模式的优缺点是什么？1.工厂模式 原型模式 构造函数模式的有缺点是什么?工厂模式的优点 工厂模式解决了创建多个相似对象的问题。工厂模式的缺点 没有解决对象识别的问题（即怎样知道一个对象的类型）。创建的对象无法判断类型 构造函数的优点 创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方构造函数的缺点 使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。 原型模式的优点 使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。原型模式的缺点 原型中所有属性是被很多实例共享的，这种共享对于函数非常合适。然而，对于包含引用类型值的属性来说，问题就比较大了 134.在浏览器中输入URL并回车后都发生了什么？域名解析（获得IP地址）向WEB服务器发送HTTP请求服务器处理请求服务器返回HTTP响应浏览器显示页面信息 135.预加载和懒加载的原理是什么？懒加载和预加载的定义与区别答：1.预加载 1.1：预加载的理解在加载的时候预先吧所有资源提前加载 1.2:预加载的使用场景需要追求运行效率的项目中，并且内存消耗率非常低的业务逻辑。用户可以体验非常极致的加载和刷新效果，使用预加载可以做到非常好的效果。 2 懒加载 2.1:懒加载的理解懒加载就是说我们延迟他的加载，在我们使用资源的时候在进行加载 2.2:懒加载的使用场景我们在进行一些页面上有大量的图片资源，图片资源非常庞大，小的几kb打的几兆都有，在这种情况下我们如果说进行一次性加载所有的资源不仅用户会等待很久而且还会造成页面卡顿等状况。 懒加载和预加载的区别首先懒加载和预加载是完全不同的，一个是提前加载资源，一个是延迟加载或者不加载，懒加载会缓解一些服务器端和客户端内存的压力，预加载则会增加服务器端和客户端的压力，但是两种加载模式有各自的适用场景各有自己的优势。 136.面向对象理解继承 封装 多态 性能高，高可维护性所有面向对象语言对象理解都一样javajavascriptphppythonaspjsp 137.深拷贝与浅拷贝 跟数据类型关系 跟堆与栈简单说,就是假设B复制A,当修改A值时,看B是否也发生变化.如果B也跟改变.说明是浅拷贝如果B不发生改变,说明是深拷贝深拷贝针对的是基本数据类型,数字 字符串 布尔类型等浅拷贝针对的是引用数据类型,数组 函数 对象 栈主要存储基本数据类型堆主要存储引用数据类型栈会存储堆地址进行引用 堆类型的数据使用的是浅拷贝栈类型的数据使用的是深拷贝 138.jquery优缺点1.轻量级库（注意：它不是框架）2.简化DOM操作，强大的选择器。方法封装3.完善ajax，动画效果，插件封装，事件处理机制4.出色浏览器兼容。js写法兼容 缺点，只是一个库，开发大型前端网站比较吃力。 后面vue.js框架 139.vue中params与query区别 a.query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示b.query要用path来引入，params要用name来引入，接收参数都是类似的c.当刷新页面后params中的数据就没有了，query不会 140.Vue中this.$emit是异步函数，执行在同步函数之后，如果要在$emit触发后监听父级传过来的props的变化，需要子级在emit后面设置$nextTick，实时监听属性值的变化 141.Vue路由哈希设置哈希配置和h5的history配置的区别？ 1.hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。2.那么什么时候要用history模式呢？如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传。当然其功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。 142.在vue中如何处理内存泄漏的：如果在mounted/created 钩子中绑定了DOM/BOM 对象中的事件，需要在beforeDestroy 中做对应解绑处理如果在mounted/created 钩子中使用了第三方库初始化，需要在beforeDestroy 中做对应销毁处理如果组件中使用了定时器，需要在beforeDestroy 中做对应销毁处理模板中不要使用表达式来绑定到特定的处理函数，这个逻辑应该放在处理函数中如果在mounted/created 钩子中使用了$on，需要在beforeDestroy 中做对应解绑($off)处理某些组件在模板中使用 事件绑定可能会出现泄漏，使用$on 替换模板中的绑定 143.watch和computed的区别 补充watch：不会在页面第一次渲染就触发，只会在监听的属性发生改变时才会触发；computed：计算属性有两个方法get、set，get获取当前计算属性所触发的函数，set设置当前计算属性所触发的函数。 144.seo 优化SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。 影响自然排名的两大方面：关键词匹配度：关键词设置及分布，关键词标题及描述的设置等好几个因素决定；网站综合因素：域名、空间、网站系统、网站内容质量、网站更新频率、链接等有好几十个因素。 145.提高前端性能 补充提高页面加载速度。 能用css解决的不用背景图片，背景图片也尽量压缩大小，使用CSS Sprites，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度"},{"title":"常用正则表达式","date":"2021-07-20T13:43:05.479Z","url":"/2021/07/20/zhengze/","tags":[["正则表达式","/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/"]],"categories":[["undefined",""]],"content":"校验数字的表达式 数字：^[0-9]*$ n位的数字：^\\d{n}$ 至少n位的数字：^\\d{n,}$ m-n位的数字：^\\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 带1-2位小数的正数或负数：^(-)?\\d+(.\\d{1,2})?$ 正数、负数、和小数：^(-|+)?\\d+(.\\d+)?$ 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$ 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$ 非零的正整数：^[1-9]\\d*$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]$ 非零的负整数：^-[1-9][]0-9”$ 或 ^-[1-9]\\d$ 非负整数：^\\d+$ 或 ^[1-9]\\d*|0$ 非正整数：^-[1-9]\\d*|0$ 或 ^((-\\d+)|(0+))$ 非负浮点数：^\\d+(.\\d+)?$ 或 ^[1-9]\\d.\\d|0.\\d*[1-9]\\d*|0?.0+|0$ 非正浮点数：^((-\\d+(.\\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\\d.\\d|0.\\d*[1-9]\\d*))|0?.0+|0$ 正浮点数：^[1-9]\\d.\\d|0.\\d*[1-9]\\d*$ 或 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$ 负浮点数：^-([1-9]\\d.\\d|0.\\d*[1-9]\\d*)$ 或 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9])))$ 浮点数：^(-?\\d+)(.\\d+)?$ 或 ^-?([1-9]\\d.\\d|0.\\d*[1-9]\\d*|0?.0+|0)$ 校验字符的表达式 汉字：^[\\u4e00-\\u9fa5]{0,}$ 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$ 长度为3-20的所有字符：^.{3,20}$ 由26个英文字母组成的字符串：^[A-Za-z]+$ 由26个大写英文字母组成的字符串：^[A-Z]+$ 由26个小写英文字母组成的字符串：^[a-z]+$ 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$ 由数字、26个英文字母或者下划线组成的字符串：^\\w+$ 或 ^\\w{3,20}$ 中文、英文、数字包括下划线：^[\\u4E00-\\u9FA5A-Za-z0-9_]+$ 中文、英文、数字但不包括下划线等符号：^[\\u4E00-\\u9FA5A-Za-z0-9]+$ 或 ^[\\u4E00-\\u9FA5A-Za-z0-9]{2,20}$ 可以输入含有^%&’,;=?$"等字符：[^%&’,;=?$\\x22]+ 12 禁止输入含有的字符：[^\\x22]+ 特殊需求表达式 Email地址：^\\w+([-+.]\\w+)*@\\w+([-.]\\w+).\\w+([-.]\\w+)$ 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.? InternetURL：[a-zA-z]+://[^\\s]* 或 ^http://([\\w-]+.)+[\\w-]+(/[\\w-./?%&=]*)?$ 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$ 电话号码(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX)：^((\\d{3,4}-)|\\d{3.4}-)?\\d{7,8}$ 国内电话号码(0511-4405222、021-87888822)：\\d{3}-\\d{8}|\\d{4}-\\d{7} 身份证号(15位、18位数字)：^\\d{15}|\\d{18}$ 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$ 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\\w{5,17}$ 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$ 日期格式：^\\d{4}-\\d{1,2}-\\d{1,2} 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$ 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$ 钱的输入格式： 1.有四种钱的表示形式我们可以接受:”10000.00” 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”：^[1-9][0-9]*$ 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符”0”不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$ 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$ 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$ 5.必须说明的是,小数点后面至少应该有1位数,所以”10.”是不通过的,但是 “10” 和 “10.2” 是通过的：^[0-9]+(.[0-9]{2})?$ 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$ 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$ 8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$ 备注：这就是最终结果了,别忘了”+”可以用”*”替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里 xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$ 中文字符的正则表达式：[\\u4e00-\\u9fa5] 双字节字符：[^\\x00-\\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1)) 空白行的正则表达式：\\n\\s*\\r (可以用来删除空白行) HTML标记的正则表达式：<(\\S*?)[^>]>.?</\\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力) 首尾空白字符的正则表达式：^\\s*|\\s*$或(^\\s*)|(\\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式) 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始) 中国邮政编码：[1-9]\\d{5}(?!\\d) (中国邮政编码为6位数字) IP地址：\\d+.\\d+.\\d+.\\d+ (提取IP地址时有用) IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)) "},{"title":"VScode插件分享","date":"2021-07-20T13:43:05.477Z","url":"/2021/07/20/plugIn/","tags":[["插件","/tags/%E6%8F%92%E4%BB%B6/"]],"categories":[["undefined",""]],"content":"code-translatevscode悬浮翻译,滑词翻译工具 Color Highlight在编辑器上可以看到颜色 驼峰翻译助手选中文字 Alt+shift+t 选择自己想要的格式 koroFileHeader用于生成文件头部注释和函数注释 open in browser可以直接打开html文件 Rainbow Brackets为圆括号、方括号和波浪括号提供彩虹色 Image preview引入图片左侧导航条显示图像预览，好用很强大 create-uniapp-view快速创建uniapp视图与组件"},{"title":"项目经历","date":"2021-07-20T13:43:05.475Z","url":"/2021/07/20/hello-world/","tags":[["项目经验","/tags/%E9%A1%B9%E7%9B%AE%E7%BB%8F%E9%AA%8C/"]],"categories":[["undefined",""]],"content":"宝模秀 APP项目名称: 宝模秀APP + 小程序宝模技术栈: uniapp + uview使用工具: vscode + 微信开发者工具 + postman + sublime_merge + Chrome承担角色: 前端工程师项目描述：宝模秀是帮助卖家寻找各类儿童模特聘请拍摄的服务平台。软件有着各类儿童模特可挑选，方便童装 等卖家在线聘请，用于拍摄儿童梳妆、玩具、美食等照片，同时支持孩子在线签约，更早的获得独家 签约机会。使用技术:1.使用sublime_merge工具对代码分支进去提交拉取2.代码复用的封装，或者二次封装,比如上传组件,常用方法等3.请求接口 POST，GET 封装，在请求头中做响应拦截 token4.全局使用图片懒加载功能5.IOS 安卓 系统推送功能 宝模秀商家管理后台技术栈: vue + elementUi使用工具: vscode + postman + sublime_merge + Chrome承担角色: 前端工程师项目描述：宝模秀商家管理后台是帮助商家发布通告,发布任务,进行相关通告任务处理,跟用户继续沟通反馈, 申请补差等一系列功能后台系统.使用技术:1.使用sublime_merge工具对代码分支进去提交拉取2.代码复用的封装，或者二次封装,比如上传组件,常用方法等3.请求接口 POST，GET 封装，在请求头中做响应拦截 token4.应用了 elementUI 去布局整体的页面，图片的懒加载使功能实现 宝模秀管理后台技术栈: vue + elementUi使用工具: vscode + postman + sublime_merge + Chrome承担角色: 前端工程师项目描述：宝模秀管理后台是给管理员,公司内部人员使用,属于公司内容管理系统,主要的功能有管理员成员添 加删除,用户管理,消息管理,商家管理,模特管理,任务管理,作品管理,模圈管理,优惠券发放,钱包管 理,提现管理等使用技术:1.使用sublime_merge工具对代码分支进去提交拉取2.代码复用的封装，或者二次封装,比如上传组件,常用方法等3.请求接口 POST，GET 封装，在请求头中做响应拦截 token4. 应用了 elementUI 去布局整体的页面，图片的懒加载使功能实现5. 对不同管理员进行权限设置 机大呷技术选型：uniapp + uview - ui + 混合开发 vue + vuex+ localstorage + sessionstorage使用工具：1.HBuilderX 编辑器 2.Postman 3.Chrome 4.雷电模拟器测试 5.真机测试(安卓/苹果)项目描述：该项目是移动端项目，独立开发的一个中大型项目端和用户(会员端的开发)，基于 uniapp 框架搭建 APP 项目。其中使用 uview - ui 库，进行页面布局，自己封装组件美化/优化代码页面，通过封装 Promise 中 uniapp 提供的 API uni.request()与后台接口测试对接，通过接口带上请求头 token 验证每个接口是否携带 token，或者 token 是否过期，是否已登录 / 给用户更加的手感 / 视觉体验，如果不是，只能在登录页面，并清除所有的过期 token,和用户个人信息等，并通过组件提供的 API 进行图片的懒加载，并对样式、图片、代码体积进行打包压缩。负责部分：独立开发，涉及到前端开发的邻域都要负责，使用技术：1.使用自己的 git 码云对项目备份，代码每天上传至公司的企业 git 上，git bash here 或者 SourceTree管理项目的版本修改或更新。2.代码复用的封装，或者二次封装 uview ui 组件进行更容易的复用，比如自定义头部，弹出层等3.请求接口 POST，GET, Delete 封装，在请求头中做响应拦截 token4.主要应用了 uview 去布局整体的页面，图片的懒加载使功能实现5.运用 scss 和封装自己的 css 文件进行样式的编写，运用发行 APP - 云打包进行代码的打包安装到安卓及IOS的测试 机大呷管理后台技术选型：vue + vuex + axios + vue - router + element - ui使用工具：1.vs code 编辑器 2.Postman 3.Chrome项目描述：该项目是机大呷的后台管理系统，独立开发，基于 Vue 框架搭建后台系统项目。其中使用 Element 库，进行页面布局，通过封装 axios 中实现后端接口的对接，通过封装接口验证每个接口是否携 带 cookies，或者 cookies 是否过期，跳回到登陆页，允许多设备同时登陆同个账号。通过 vue-router 进 行各页面跳转，通过路由拦截页面的接口调用的懒加载给用户更加的视觉体验和通过路由导航前卫去进行判 断是否是授权登陆状态，如果不是，授权失败。跳转到登陆页使用技术：1.使用自己的 git 码云对项目备份，代码每天上传至公司的企业 git 上，git bash here 或者 SourceTree管理项目的版本修改或更新。2.代码复用的封装，或者二次封装 Elemen 组件进行更容易的复用，请求接口封装，在请求头中做响应拦截 cookies 过期3.主要应用了 Element 去布局整体的页面，图片上传应用 Element 组件的懒加载/上传成功/上传失败使功能实现用户体验感4.运用 scss 进行样式的编写 weckpack 打包上线 我是发明人大赛首页、关于大赛、新闻中心、落地支持、合作机构、联系我们 侧边导航栏,点击跳转到相应的页面 点击页面跳转至相应的详情页 发明文件上传以及提交 保存用户的个人信息不被泄露 创创猫技术栈: uniapp + uview使用工具: vscode + postman + sublime_merge + Chrome承担角色: 前端工程师项目功能：商家管理，商家入驻申请，商家审核商品管理，单规格、多规格商品管理，品牌、分类管理、商品评价、商品组 订单管理， 订单支付、发货、取消、售后、会员管理，会员列表、会员等级、奖金管理，会员提现、 商家提现、奖金指出、团队业绩 内容管理，官 方资讯、活动通知、素材管理、常见问题营销推广，首页轮播、广告管理、优惠券、团购秒杀、拼团管理 仿网易云音乐首页歌单歌单详情页排行榜歌手歌手详情页MvMv 详情页 "}]