- 博客(34)
- 收藏
- 关注
RSS订阅原创 25 个JavaScript适用的单行代码让你看起来像个专业人士
2. 检查字符串是否为回文3. 从数组中删除重复项4. 将摄氏度转换为华氏度5. 生成随机十六进制颜色6. 检查数字是偶数还是奇数7. 数组元素的总和8. 展平数组9. 将字符串中每个单词的首字母大写10. 打乱数组11. 查找两个数组的交集12. 检查数字是否为素数13. 获取数组中的最后一项14. 计算数组中某个值的出现次数15. 反转字符串16. 从数组中提取唯一
2024-08-27 08:41:35
130
原创 Vue 中如何实现一个虚拟 DOM？
首先要构建一个 Vnode 的类，DOM 元素上的所有属性在 Vnode 类实例化出来的对象上都存 在对应的属性。例如 tag 表示一个元素节点的名称，text 表示一个文本节点的文本，chlidren 表示 子节点等。将 Vnode 类实例化出来的对象进行分类，例如注释节点、文本节点、元素节点、组件 节点、函数式节点、克隆节点。 然后通过编译将模板转成渲染函数 render，执行渲染函数 render，在其中创建不同类型的 Vnode 类，最后整合就可以...
2021-09-23 16:44:44
1236
原创 Vue 的 nextTick 的原理是什么?
1、为什么需要 nextTick Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对 数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了 2、理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念2,1）常见的宏任务有：script, setTimeout, setInterval, setImmediate, I/O, UI rendering 2,2）常见的微任务有：
2021-09-23 11:09:43
816
原创 在VUE中你知道 style 上加 scoped 属性的原理吗？
1、什么是 scoped 在 Vue 组件中，为了使样式私有化（模块化），不对全局造成污染，可以在 style 标签 上添加 scoped 属性以表示它的只属于当下的模块，局部有效。如果一个项目中的所有 vue 组件 style 标签全部加上了 scoped，相当于实现了样式的私有化。如果引用了第三方组件，需要在当 前组件中局部修改第三方组件的样式，而又不想去除 scoped 属性造成组件之间的样式污染。此 时只能通过穿透 scoped 的方式来解决，选择器。2、sc...
2021-09-23 11:06:48
1145
1
原创 Vue 渲染模板时怎么保留模板中的 HTML 注释呢？
在组件中将 comments 选项设置为 true <template comments> ... <template>
2021-09-23 10:51:03
207
原创 Vue 中动画如何实现
1、哪个元素需要动画就给那个元素加 transition 标签 2、进入时 class 的类型分为以下几种 <name>-enter <name>-enter-active <name>-enter-to 3、离开时 class 的类型分为以下几种 <name>-leave <name>-leave-active <name>-leave-to 如果需要一组元素发生动画需要用标签<transition-
2021-09-23 10:47:36
175
原创 Vue 组件里的定时器要怎么销毁？
如果页面上有很多定时器，可以在 data 选项中创建一个对象 timer，给每个定时器取个名 字一一映射在对象 timer 中， 在 beforeDestroy 构造函数中 for(let k in this.timer){clearInterval(k)}； beforeDestroy(){for(let k in this.timer){clearInterval(k)}}如果页面只有单个定时器，可以这么做const timer = setInterval(() =>{},
2021-09-23 10:15:32
834
原创 Promise 中 reject 和 catch 处理上有什么区别
reject 是用来抛出异常，catch 是用来处理异常 reject 是 Promise 的方法，而 catch 是 Promise 实例的方法 reject 后的东西，一定会进入 then 中的第二个回调，如果 then 中没有写第二个回调，则进入 catch 网络异常（比如断网），会直接进入 catch 而不会进入 then 的第二个回调...
2021-09-16 19:46:47
986
原创 Promise 只有成功和失败 2 个状态，怎么让一个函数无论成 功还是失败都能被调用？
使用 Promise.all() Promise.all（）用于将多个 Promise 实例，包装成一个新的 Promise 实例 Promise.all（）接受一个数组作为参数，数组里的元素都是 Promise 对象的实例，如果不是， 就会先调用下面讲到的 Promise.resolve（），将参数转为 Promise 实例，再进一步处理。（Promise.all（）方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都 是 Promise 实例。） 示例：
2021-09-16 19:43:55
2359
原创 必会:setTimeout、Promise、Async/Await 的区别
事件循环中分为宏任务队列和微任务队列 宏任务（macrotask）：在新标准中叫 task 主要包括：script(整体代码)，setTimeout，setInterval，setImmediate，I/O，ui rendering 微任务（microtask）：在新标准中叫 jobs 主要包括：process.nextTick， Promise，MutationObserver（html5 新特性） setTimeout、Promise、Async/Await 的区别 set
2021-09-16 19:39:36
241
原创 必会:Vue 数据双向绑定的原理是什么?
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持 各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 1、需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter， 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化 2、compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将
2021-09-16 19:36:10
281
原创 ES6 怎么写 Class ，为何会出现 Class
什么是 Class，Calss 的作用ES6 的 class 可以看作是一个语法糖，它的绝大部分功能 ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法ES6 怎么写 Class //定义类 class Point { constructor(x,y) { //构造方法 this.x = x; //this 关键字代表实例对象 this.y = y; } toString() { return '(' + this.x + '
2021-09-16 17:19:39
468
原创 必会:setTimeout、Promise、Async/Await 的区别
事件循环中分为宏任务队列和微任务队列 宏任务（macrotask）：在新标准中叫 task 主要包括：script(整体代码)，setTimeout，setInterval，setImmediate，I/O，ui rendering 微任务（microtask）：在新标准中叫 jobs 主要包括：process.nextTick， Promise，MutationObserver（html5 新特性） setTimeout、Promise、Async/Await 的区别
2021-09-16 15:39:40
397
原创 精选:三步法解析axios源码
一、领悟思想Axios是一个基于Promise的HTTP库，根据官网介绍，有以下几个特点： 在浏览器端会创建XMLHttpRequests 在Node端会创建HTTP请求 由于Axios是一个基于Promise的HTTP库，所以其支持Promise API 支持请求和响应拦截器 支持请求和响应数据转换 支持取消请求 自动转换JSON数据 客户端支持防御XSRF攻击 通过上述官网介绍的特点，我认为其突出的优点有三个： 支
2021-09-16 10:02:10
139
原创 在项目中如何使less自动化导入
背景:我们开发的应用有些样式是公用的，比如我们常见的配色色值，为了做到统一修改的目的往往需要定义成less变量，很多的业务组件都需要使用这些变量，如果我们每一个业务组件都手动引入然后使用的话，开发量巨大，所以为了解决这个问题，我们采取自动导入的方式，方便我们业务组件使用全局less变量. 如果没有用less自动化导入的话,我们需要手动导入,这样的话在每个组件都导入一遍显得有点繁琐.程序员不整点花里胡哨的是程序员吗.1.如果不用自动化导入的话,如何手动引入.1.1)准备样式变量文件...
2021-09-14 11:52:09
513
原创 在vue中通过vuex-persistedstate实现关于vuex-持久化
目的:我们用vuex-持久化的目的是为了让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。 在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储。 再例如，购物车如果需要未登录状态下也支持，如果管理在vuex中页需要存储在本地。 1）首先：我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。npm i vuex-persistedstate//或者 yarn add vuex-persis
2021-09-14 10:53:58
666
原创 必会:数组长用方法总结
目录push()shift()unshift()pop()reverse()filter()every()map()forEach()reduce()splice()concat()indexOf()lastIndexOf()findIndex()join()sort()includes()push()将一个或者多个元素添加到数组末尾。let arr = [1,2,3]arr.push(4)console.log(
2021-09-10 16:47:04
129
原创 必会:在HTML中如何使一个盒子水平垂直居中？
方法一：利用定位（常用方法,推荐）<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>.parent { width
2021-09-08 20:20:33
811
原创 必会:为什么会出现浮动？浮动元素会引起什么问题？如何清 除浮动？
为什么出现浮动 浮动定位将元素排除在普通流之外，即元素讲脱离文档流，不占据空间。浮动元素碰到包 含它的边框或者浮动元素的边框停留.为什么需要清除浮动1、父元素的高度无法被撑开，影响与父元素同级的元素； 2、与浮动元素同级的非浮动元素（内联元素）会跟随其后；3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解 决方法.清除浮动的方式1、使用 CSS 中的 clear:both;（放一个空的 div，并设置上述 css）,属...
2021-09-08 15:50:24
828
原创 当我们遇到从后台获取的日期格式是2020-09-29T18:02:02.000Z如何转
一、2020-09-29T18:02:02.000ZT表示分隔符，Z表示的是UTC。UTC：世界标准时间，在世界标准时间上加上8小时，即东八区时间，也就是北京时间。二、 2020-09-29T18:02:02.000Z转换为 2020-09-30 02:02:02 步骤：①.引入 dayjs （一个轻量的处理时间和日期的javascript库）下载 npm install dayjs --save 或者 yarn adddayjs --save main.js 中 全局引入 i.
2021-09-05 16:33:59
2691
原创 $route 和$router 的区别是什么？
$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由 信息参数 $router 为 VueRouter 的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象， 例如 history 对象，经常用的跳转链接就可以用 this.router.push 会往 history 栈中添加一个新的记 录。返回上一个 history 也是使用$router.go 方法 ...
2021-08-25 23:30:04
350
原创 Vue-router 怎么配置路由
在 vue 中配置路由分为 5 个步骤，分别是：1、安装npm install --save vue-router2、引用import VueRouter from 'vue-router'3、配置路由文件var router = new VueRouter({ routes:[ {path:"/hello", component:HelloWorld },{path:"/wen", component:HelloWen} ]new Vue({ el: '#app',
2021-08-25 23:28:15
1243
原创 你知道ES5 和 ES6 的区别吗?，能说出说几个 ES6 的新增方法吗?
目录ES5 和 ES6 的区别ES6 的新增方法1、新增声明命令 let 和 const1.1）特点2、模板字符串（Template String）3、函数的扩展3.1）函数的默认参数3.2）箭头函数4、对象的扩展4.1）属性的简写4.2）Object.keys()方法4.3）Object.assign ()5、for...of 循环6、import 和 export7、Promise 对象8、解构赋值8.1）数组的解构赋值8.2）
2021-08-19 18:33:18
4343
原创 前端大牛养成之路之VUE中watch、methods 和 computed 的区别?
目录1、基本说明2、三者的加载顺序3、总结1、基本说明 1.1)computed： 计算属性将被混入到 Vue 实例中,所有 getter 和 setter 的 this 上下文自动地绑定 为 Vue 实例1.2)methods： methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。 1.3)watch： 观察和响应 Vu...
2021-08-18 12:07:44
208
原创 Vue 组件 data 为什么必须是函数
1、data 组件都是 Vue 的实例 2、组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其 他 3、组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就 会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各 自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果....
2021-08-16 23:05:51
189
原创 Vue 生命周期总共分为几个阶段？第一次加载页面会触发哪几个钩子函数？
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模 板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。1、beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用 2、created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)属性和方法的运算，w...
2021-08-16 23:02:19
4592
原创 数组元素重复出现次数
题目一["b", "c","b", "c","a", "b", "c"] 统计每个元素出现的次数,结果是： {a：1，b: 3, c: 3}const arr = ["b", "c","b", "c","a", "b", "c"] const obj = {}for (let i = 0; i < arr.length; i++) { var key = arr[i] if (obj[key] === undefined) { obj[key]
2021-08-13 17:37:31
1933
原创 什么是防抖和节流和为什么需要防抖和节流
防抖和节流 防抖和节流，作用类似，都是为了提高项目的性能。防抖当事件触发之后，约定单位时间（比如1s）之后，执行里面的代码；如果在单位时间只内再次触发了事件，那么要重新计时，以保证事件里面的代码只执行一次。就像王者里的英雄一样,如果你一直按回城,回城的代码一直执行,可能会导致回城的时间回变长.所以就需要防抖来优化.<style> * { margin: 0; padding: 0; } #box { wid...
2021-08-11 20:35:02
1019
原创 为什么会有跨域的问题出现，如何解决跨域问题.
目录 什么是跨域什么是同源策略解决方式1、jsonp1.1）去创建一个 script 标签1.2）script 的 src 属性设置接口地址1.3）接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。1.4）通过定义函数名去接收后台返回数据2、 CORS：跨域资源共享2.1）跨域请求后的响应头中需要设置2.2）Access-Control-Allow-Origin 为发起请求的主机地址2.3）Access-Control-Allo...
2021-08-07 20:43:39
1910
4
原创 2021-08-07 关于npm i 与 npm install 之间的细小区别
1、用 npm i 安装的模块无法用 npm uninstall 卸载，需要用 npm uninstall i 命令 2、npm i 会帮助检测与当前 node 版本最匹配的 npm 包 版本号，并匹配出来相互依赖的 npm 包应该提升的版本号 3、部分 npm 包在当前 node 版本下无法使用，必须使用建议版本 4、安装报错时 intall 肯定会出现 npm-debug.log 文件，npm i 不一定...
2021-08-07 20:21:28
255
原创 2021-08-05 MVVM 和 MVC 区别是什么？哪些场景适合？
1、基本定义 1.1）MVVM 基本定义 MVVM 即 Model-View-ViewModel 的简写，即模型-视图-视图模型，模型（Model）指的是后端传递的数据，视图(View)指的是所看到的页面，视图模型(ViewModel)是 mvvm 模式的核 心，它是连接 view 和 model 的桥梁。它有两个方向： 1.1.1）一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的 页面，实现的方式是：数据绑定， 1.1....
2021-08-05 20:21:49
387
原创 2021-08-05 HTTPS 有几次握手和挥手？HTTPS 的原理是什么?
HTTPS 是 3 次握手和 4 次挥手，和 HTTP 是一样的。 HTTPS 的原理 HTTPS 在传输数据前需要客户端(浏览器)与服务器(网站)之间进行一次握手,在握手过程中 将确立双方加密传输数据的密码信息.TLS/SSL 协议是一套加密传输协议,使用了非对称加 密,对称加密,以及 HASH 算法.HTTPS 为什么安全 因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如 果使用 HTTPS，密钥在你和终点站才有。HTTPS 之所
2021-08-05 20:06:12
1533
1
原创 2021-08-04 HTTP 请求方式分别有几种
HTTPRequestMethod 共计 17 种1、GET 请求指定的页面信息，并返回实体主体。 2、HEAD 类似于 get 请求，只不过返回的响应中没有具体的内容，用于获取报头 3、POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被 包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。 4、PUT 从客户端向服务器传送的数据取代指定的文档的内容。 5、DELETE 请求服务器删除指定的页面。 6、C
2021-08-04 20:07:56
123
原创 2021-08-04 Vue的优势和jQuery两者的区别分别是什么
Vue的优势Vue 作为一款轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟 DOM、运行速度快，并且作者是中国人尤雨溪，对应的 API 文档对国内开发者优化，作为前端开 发人员的首选入门框架优势1、Vue.js 可以进行组件化开发，使代码编写量大大减少，读者更加易于理解。 2、Vue.js 最突出的优势在于可以对数据进行双向绑定。 3、使用 Vue.js 编写出来的界面效果本身就是响应式的，这使网页在各种设备上都能 显示出非常好看的效果。 4.
2021-08-04 19:58:12
2667
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人