- 博客(206)
- 收藏
- 关注
RSS订阅原创 localstorage实现设置缓存有效期
until = { set(params) { const obj = { name: "", value: "", expires: '', startTime: new Date().getTime(), }; const options = {}; Object.assign(options, obj, params); if (o
2021-09-29 08:48:41
529
原创 2021-09-28
1. 点击事件实现功能：点击列表项弹出弹窗；点击列表中某一项时，其他项弹窗消失；点击列表以外的地方所有弹窗消失实现方式：设置一个变量，并赋初始值，通过v-show控制弹窗是否显示；给每列表项绑定一个点击事件，传入当前点击项的index；当设置的变量值等于index值，v-show的值为true,对应的弹窗显示；给整个Body绑定一个点击事件，将步骤1中 的变量设置为初始值2. 通过debugger来检查代码是否走通3. 在设置变量和值时，可以考虑用对象表示4. methods
2021-09-28 11:50:46
164
原创 前端开发windows配置踩坑及解决
1. 安装nvm和nodewin+R打开cmd，通过where node 和where nvm可以删除原先的nvm 和 node。先删除原有的node，再安装nvm下载nvm，https://github.com/coreybutler/nvm-windows/releases，选择的第3个包nvm-setup.zip安装完成后。nvm install xxx(想安装的node版本)，nvm use xxx通过node -v检查版本。== 注== 安装了几次，包括自定义安装路径安装，默认路
2021-09-13 14:26:40
389
原创 面试遇到的手撕题（持续更）
1. 数组去重var arr = [3, 1, 2, 4, 5, 1, 2, 3]方法一：let res = new Set(arr);// console.log([...res]);console.log(Array.from(res));方法2：let n = arr.length;for (let i = 0; i < n; i++) { for (let j = i + 1; j < n; j++) { if (arr[i] == arr[j]) { a
2021-08-09 22:11:43
154
原创 将多维数组转为一维数组
1. reduceconst flatten = arr => { return arr.reduce((pre, cur) => { return pre.concat(Array.isArray(cur) ? flatten(cur) : cur) }, [])}2. 函数递归const res = [];const flatten = arr => { for (let i = 0; i < arr.length; i++)
2021-08-04 10:13:52
107
原创 Vue和React差异？
Vue和React的几点区别1.Vue支持双向绑定，组件与DOM之间通过v-model实现双向绑定React是单向数据流2.Vue通过mixins组合不同功能React通过HoC(高阶组件)来组合不同功能3.Vue通过setter、getter或函数的劫持来知道数据的变化,Vue使用的是可变的数据React默认通过比较引用的方式(diff)，React强调数据的不变性4.Vue中组件通信：(1) 父传子：props传递数据或回调 (2)子传父：Event (3)父传子跨越多个层级：p
2021-07-30 16:41:57
140
原创 onload和DocumentContentLoaded的区别？原生js如何实现事件的绑定和解绑？
1、参考：简述domready和onload事件的区别主要区别：DocumentContentLoaded在DOM树加载完之后立刻触发，DOM树加载完成之后，继续加载图片等外部文件，加载完成之后，onload事件触发。2、参考：原生js–事件绑定、事件监听器及事件解绑（1）事件绑定方式内联模式（不符合结构、行为、样式相分离的原则）外联模式（同一事件只能给同一元素绑定一次）事件监听器（2）事件监听器addEventListener():btn.addEventListener
2020-10-12 12:41:13
1688
原创 自适应两栏布局和三栏布局的常用方法
参考：css实现两栏布局，左侧固定宽，右侧自适应的7中方法1、自适应两栏布局，左侧固定宽度，右侧自适应设左侧为width为100pxcalc计算宽度：calc(100% - 100px)float + margin：左侧float，右侧margin-left:100pxfloat+overflow：左侧float，右侧overflow:hiddenposition:absolute + margin：左侧position:absolute，右侧margin-left:100pxpositio
2020-10-12 11:30:40
247
原创 VUE如何实现按需加载？
参考：vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()1、 vue异步组件技术通过vue-router配置路由，使用vue的异步组件技术，实现按需加载，但是这种情况下，一个组件会生成一个js文件。{ path: '/promisedemo', name:'PromiseDemo', component: resolve => require(['../components
2020-09-26 12:13:01
801
原创 最近被问到三次的问题：说一下http协议？
自己整理一下大概怎么回答：HTTP协议是一个运行在TCP之上的简单的请求-响应协议，属于应用层协议，无状态，信息明文传输，在该协议基础上，通过SSL协议对其进行加密构建了HTTPS协议。一般来说，http协议的端口为80，https协议端口为 443。客户端在使用http协议与web服务器进行通信时的步骤为：(1) 客户端与服务器进行连接 (2)客户端向服务器提出请求 (3) 服务器接受请求，并根据请求返回相应的文件作为应答 (4) 客户与服务器关闭连接使用https协议通信时的步骤客户使用h
2020-09-19 15:57:24
145
原创 关于Cookie在顶级域名、二级域名和三级域名之间共享的情况
参考：Cookie顶级域名、二级域名、三级域名共享总结概括在setcookie中省略domain参数，那么domain默认为当前域名domain参数可以设置父域名以及自身，但不能设置其它域名，包括子域名，否则cookie不起作用如果cookie设置为顶级域名，则全部的域名，包括顶级域名、二级域名、三级域名等，都可以共享该cookie如果cookie设置为当前域名，则当前域名及其下面的所有子域名可以共享该cookie...
2020-09-18 13:48:25
1429
原创 正则表达式以及贪婪匹配
1、正则表达式正则表达式是构成搜索模式的字符序列。常用方法：search() ：使用表达式来搜索匹配，然后返回匹配的位置replace() ：返回模式被替换处修改后的字符串修饰符i : 执行对大小写不敏感的匹配g：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）m：执行多行匹配表达式模式[abc]：查找方括号之间的任何字符[0-9]：查找任何从 0 至 9 的数字(x|y)：查找由 | 分隔的任何选项元字符\d：查找数字\s：查找空白字符\b：匹
2020-09-18 13:35:58
230
原创 如何去除inline-block之间的空隙？
<body> <ul class="box"> <li>123</li> <li>456</li> <li>789</li> </ul></body>.box{border:1px solid #ccc;padding-left: 4px;}.box>li{display: inline-block;b
2020-09-18 09:56:20
228
原创 a标签中可以放其他标签吗？
参考：在HTML中标签的嵌套规则1、HTML标签：块级元素(block):常用：div、p、ul、ol、li、dl、dt、dd、fieldset、form、h1~h6、hr、table不常用：address、isindex、menu、noframes、noscript、pre、blockquote、center、dir内嵌元素(inline)常用：span、a、b、strong、i、em、label、textarea、small、img、input不常用：abbr、acronym、b
2020-09-17 23:32:31
5200
原创 BFC和IFC分别是什么？BFC有什么作用？
1、简要概括Block level的box会参与形成BFC：例如display值为block/ list-item/ tableInline level的box会参与形成IFC：比如 display值为inline/ inline-table/ inline-block2、FC(Formatting Context)格式化上下文。定义的是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。3、布局规则IFC布局规则：在行内格式化上下文中，b
2020-09-17 17:15:09
2659
1
原创 js合并数组的方法
参考：js数组合并的几种方法1、concat: 产生一个新数组，不会改变原有数组 var arr1 = [1, 2, 3]; var arr2 = ['a', 'b', 'c']; var newArr = arr1.concat(arr2); console.log(newArr);// [1, 2, 3, "a", "b", "c"] console.log(arr1 );// [1, 2, 3] 2、循环遍历 var arr1 = [1, 2, 3] var arr2 =
2020-09-17 09:40:54
315
原创 ajax和axios fetch的区别
参考：ajax和axios、fetch的区别1、 Ajax传统的Ajax指的是 XMLHttpRequest（XHR），一种发送后端请求技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页得情况下，对网页某部分进行更新。缺点：本身是针对MVC的编程，不符合现在MVVM模式JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常不合理不符合关注分离原则。参考：理论篇：关注点分离(Separation of concerns, S
2020-09-16 10:37:00
179
原创 实现深浅拷贝的方法有哪些？
参考：js浅拷贝及深拷贝的几种方法1、浅拷贝(1) Object.assign()参考：Object.assign()用法讲解var obj1 = {a: 1, b: 2};var obj2 = Object.assign({}, obj1);(2) 解构赋值var obj1 = {a: 1, b: 2};var obj2 = {...obj1};浅拷贝实现原理：function shallowCopy(obj) { var target = {}; for (let i i
2020-09-15 23:21:59
3188
1
原创 在项目中使用vuex做全局状态管理时出现数据丢失现象如何解决？
参考：vue单页面应用刷新网页后vuex的state数据丢失的解决方案1、产生原因ans : Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。但是有一个问题就是：vuex的存储的数据相当于我们定义的全局变量，刷新之后，里边的数据就会恢复到初始化状态 。store里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，store里的数据就会被重新赋值。2、 解决思路ans：将stat
2020-09-15 22:09:52
398
原创 关于项目中购物车模块的展示
1、购物车模块包括哪些组件nav-bar（展示“购物车”），CartList组件(包括购物车列表)，其中子组件包括scroll组件和CartListItem组件。在CartList组件中通过v-for遍历cartlist变量，通过props将每个商品对象Item传值给子组件CartListItem...
2020-09-15 16:13:39
281
原创 关于详情页面的展示和交互
1、详情页面包括哪些模块：nav-bar组件(可复用) scroll组件(引入用于滚动的插件) ，底部加入购物车组件DetailBottomBar，还有四大部分：商品、参数、评论、推荐。商品部分：DetailSwiper(包括商品详情图片的轮播展示) DetailBaseInfo组件(包括商品的名字、价格、折扣，提供的一些服务等) DetailShopInfo(包括店名、一些评价指标等等) 参数部分：DetailItemParams(通过表格来实现，包括商品的尺码信息 ) 评论部分：DetailCo
2020-09-14 23:03:35
724
原创 关于自己在项目中对axios的使用
参考：axios在vue-cli项目中的封装使用Axios中文说明1、为什么要在vue-cli中使用axios？因为它可以实现：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求拦截请求和响应转换请求数据和响应数据支持 Promise API客户端支持防止CSRF提供了一些并发请求的接口轻量，体积小2、我如何使用的？（1）封装、配置axios在src下新建一个文件夹network专门用来存放接口相关的文件和配置在request.js中
2020-09-14 16:15:43
304
原创 为什么Etag比last-modified优先级更高？
1、如何设置浏览器缓存Expires（实体首部字段）：服务端返回的到期时间，分为“相对文件的最后访问时间”和“绝对修改时间”。缺点：返回的是服务端时间，比较的是客户端时间，如果不一致可能出现错误Cache-Control(通用首部字段):privatepublicmax-age=xxx：缓存内容在xxx秒后失效no-cache：需要用另一种缓存策略来验证缓存(ETag,Last-Modified)no-store：不进行缓存**Last-Modified（**实体首部字段）:
2020-09-09 07:01:03
5483
原创 路由的实现原理是什么？
1、概述路由路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源实现原理：检测url的变化，截获url地址，然后解析来匹配路由规则2、hash模式其底层源码，主要是通过添加url的hash变化的监听器来实现，通过hashchange事件的触发知道hash值发生了哪些变化，通过transitionTo匹配路由，并通过路由配置，跳转到新的视图组件。当浏览器历史返回或者直接输入链接跳转时，会触发hashchange事件；刷新页面时不会触发hashchange，会用load
2020-09-09 01:17:49
2221
原创 Max-age和Expires的区别是什么？
参考：Max-age和Expires的区别1、Max-agemax-age是HTTP/1.1中,指我们的web中的文件被用户访问(请求)后的存活时间,是个相对的值,相对Request_time(请求时间).单位秒2、Expires分为两种：相对文件的最后访问时间(Atime)：此时和max-age的值相等绝对修改时间(MTime)：此时Expires的初始值为文件创建时间；而Max-age的初始值为客户端请求数据的时间....
2020-09-08 23:59:57
2468
原创 为什么outline-width不会引起回流而border-width会引起？
1、盒模型标准盒子模型：box-sizing: content-box (height只包括content高度)IE盒模型：box-sizing: border-box (height = padding + border + content), 为了设置padding和border时不撑开盒子2、 什么是outline轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该
2020-09-08 23:45:38
333
原创 css树的解析与DOM树的解析相关问题
1、html的解析和css解析是同步进行吗？ans：浏览器会先下载HTML解析页面生成DOM树，遇到css标签就开始下载css并解析，这个过程不会阻塞DOM树构建，最后DOM树和css规则树生成渲染树，html解析完成。2、css加载会阻塞DOM树的解析和渲染吗？参考：js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗ans：css加载不会阻塞DOM树的解析css加载会阻塞DOM树的渲染css加载会阻塞后面js语句的执行实际上我理解的DOM树的渲染，就是构建r
2020-09-07 23:03:22
832
1
原创 如何进行移动端适配？
参考：移动端前端适配方案（总结） – 面试重点概括通过CSS3的media queries，即媒体查询flex布局rem + viewport缩放rem方式1、media queries通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/}2、Flex弹性布局参考：meta name=“viewport”
2020-09-07 22:22:10
286
原创 清除浮动有哪些方式？
参考：CSS的浮动及清除浮动的5种方法1、为什么要清除浮动？标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒子高度为0。注意：（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。所以，清除浮动，主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。2、清除浮动的方法父级div定义伪类:after和zoom
2020-09-07 21:27:40
211
原创 js中常见的设计模式有哪些？
参考：JavaScript 中常见设计模式整理详解 Javascript十大常用设计模式1、常用的设计模式单例模式一个类只能构造出一个实例。即如果有实例化，只能实例化一次实现：使用一个变量来标识该类是否被实例化例如我们实现弹窗，点击的时候创建一个div元素，如果频繁点击就会不断的创建和删除，此时使用单例模式则只会实例化一次策略模式定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换根据不同的参数可以命中不同的策略，例如动画库里的算法函数代理模式代理对象和本体对
2020-09-07 16:49:46
932
原创 OSI七层模型和五层模型每一层的作用？分别有什么协议？
参考：网络OSI七层模型及各层作用 与 TCP/IP网络OSI七层模型及各层作用1、OSI七层模型应用层：为用户提供常用的应用程序，每个网络应用对应着不同的协议。例如文件运输访问和管理，电子邮件等。HTTP SMTP表示层：主要负责数据格式的转换，确保一个系统的应用层发送的消息可以被另一个系统的应用层读取；数据加密会话层：负责网络中两节点的建立，在数据传输中维护计算机网络中两台计算机之间的通信连接，并决定何时终止通信（建立或解除与其他接点的联系）传输层：实现两个用户进程间端到端的可靠通信，处理
2020-09-07 10:46:17
1884
原创 loader 和plugin的区别是什么？
参考：webpack原理前端面试-webpack篇1、使用webpack一般配置什么？webpack是一个静态模块处理器，当其处理应用程序时，会递归的构建一个关系依赖图，其中包含应用程序需要的每个模块，然后把所有这些模块打包成一个或多个包2、 使用webpack的打包过程初始化：启动构建，读取和合并参数，加载plugin，实例化complier编译：从Entry出发，针对每个Module串行调用对应的loader去翻译文件内容，再找到该Module依赖的Module，递归地进行编译处理输出：
2020-09-07 07:56:19
6481
原创 Git常用命令有哪些？
参考：常用 Git 命令清单1、常用名词Workspace:工作区Index/Stage: 暂存区Repository：仓库区（或者本地仓库）Remote: 远程仓库2、新建代码库$ git init // 在当前目录新建一个Git代码库3、配置$ git config4、增加删除文件$ git add // 添加当前目录的所有文件到暂存区5、代码提交$ git commit // 提交暂存区的文件到仓库区6、分支$ git branch // 列出
2020-09-06 23:13:54
110
原创 父组件和子组件的生命周期触发顺序是？
1、生命周期beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用created:实例创建完成之后立马触发的钩子函数。实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。在beforeCreate之后开始监听data数据变化情况。beforeMount:在created之后，开始编译模板，将data里的数据和vue语法写的模板编译成html;开始挂.
2020-09-06 22:31:50
687
原创 Vuex中的state，为什么放在component的的computed属性而非data中？
如何使用Vuex中state里的数据参考：vuex的state中的数据的四种使用方法存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，data遵循什么规则？类型：Object | Function，组件的定义只接受 functionVue会递归的将data中的property转换为getter/setter，从而让data的property能够响应数据变化var vm = new Vue({ data: {a : 1}) ,可以通过vm.$data访问原始数据对象。V
2020-09-06 18:24:08
2642
1
原创 Vue组件通信有哪些方式？
参考：vue通信、传值的多种方式（详细）Vue组件通信中eventBus的使用vue通信及组件之间传值1、通过路由带参数进行传值两个组件 A和B,A组件通过query把orderId传递给B组件：this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B在B组件中获取A组件传递过来的参数：this.$route.query.orderId2、通过设置 Session Storage缓存的形式进行传递
2020-09-02 08:40:58
433
原创 JS有哪些判断是否是数组的方法？
参考：JS判断是否是数组的四种做法1、instanceoflet a = [];a instanceof Array; //trueinstanceof运算符检测Array.prototype属性是否存在于变量a的原型链上.。存在问题：prototype属性是可以修改的，所以并不是最初判断为true就一定永远为真当我们的脚本拥有多个全局环境，例如html中拥有多个iframe对象，不同的全局环境会拥有自己的Array.prototype属性，Array.prototype !== win
2020-09-02 07:30:43
238
原创 为什么会出现首页白屏？
参考：首页白屏优化实践首页白屏的引发的思考(一)Vue React Angular这三大框架都是JS驱动，单页面的应用的html是靠js生成，首屏需要加载很大的js文件，在JS没有解析加载完成之前页面无法展示，会处于长时间的白屏。以Vue来说，在应用启动时，Vue会对组件中的data和computed中状态值通过Object.defineProperty方法转换成get和set访问属性，以便对数据变化进行监听。而这一过程都是在启动应用时完成的，这也势必导致页面启动阶段比非 JS 驱动（比如 jQuer
2020-09-02 07:00:26
1675
原创 手写有关js继承
1、写一个原型链继承function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { return this.property;}function SubType() { this.subproperty = false;}SubType.prototype = new SuperType();SubType.prototype.getSubValue = f
2020-08-31 18:28:46
133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人