自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(348)
  • 收藏
  • 关注

原创 Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序

随着对 vue 的不断了解,会越来越发现它生命周期的重要性,只有了解了它的生命周期,才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件,即很好的控制页面。一、什么是 vue 生命周期Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。下面是官网中的生命周期照片二、生命周期函数Vue 的生命周期主要共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/

2021-01-16 12:24:24 13407 7

原创 js编程黑科技,装逼指南,高逼格代码,让你惊叹不已

1.如何装逼用代码骂别人SB(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]2.如何用代码优雅的证明自己NB([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]3.另外一种undefinedvar data = void 0; // undefined4.论如何优雅...

2019-04-03 16:56:36 6751

原创 前端好用工具推荐

1.图片处理工具Jinaconvert工具网站地址:https://jinaconvert.com/cn/这款图片处理工具也相当的强大,想要的各种各样的格式(JPG, PNG, GIF, BMP, TIFF, ICO, SVG和更多图片格式)都可以转换,在编程和生活中都可以用得到,赶紧收藏起来吧。2.代码在线测试工具 https://tool.lu/可以对js、css、...

2019-04-03 12:20:17 833

原创 js-函数(闭包、私有、递归、自调)、变量(隐士)和作用域

JavaScript 函数将脚本编写为函数,就可以避免页面载入时执行该脚本。打印 定义的函数名 就相当于打印这整个函数函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本(如果函数嵌入一个外部的 .js 文件,那么甚至可以从其他的页面中调用)。创建函数的语法:function 函数名(var1,var2,...,var...

2018-06-21 16:51:05 1774 1

原创 pc端和移动端默认样式重置(rem布局)

首先说一下,为何要用重置样式除了省心之外,还有两个好处1.方便设计师/程序员发挥白纸的感觉确实好。各种margin,padding,border的为0。。。2.便于发现前端代码的遗漏用了reset后,如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”,会非常扎眼(任何人都看得出来),开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没r...

2018-06-05 19:20:31 1270 1

原创 vue.js 三种方式安装(vue-cli)

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 下面介绍三种 Vue.js 的安装方法: 1.独立版本 我们可以在Vue.js的官网上直接下载vue...

2018-05-29 07:49:05 269902 113

原创 文本在盒子中水平、垂直居中(图片与文本居中)、多行文本垂直居中

在样式布局中,我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和right的margin值为auto。要实现元素的垂直居中,有人会想到css中的vertical-align属性,但是它只对拥有valign特性的元素才生效,例如表格元素中的<td>、<t...

2018-05-23 10:37:12 25017 2

原创 html默认css样式的标签及去除(全局)

1.标签的默认样式和清除默认样式(统一全局样式)的代码大多数标签都有自己的默认样式,比如遇到的body默认外边距,另外本例中ul前的圆点及左侧的内边距,另h1-h6字体大小各不相同,em默认为斜体,strong表示粗体。正因为有这些默认样式,一个设计合理的页面,即使没有加载样式,也能让用户很容易阅读。但此时这些默认样式对我们没用,所以需要清除掉,为了方便,建议用标签重定义方式,这样可以很简单地...

2018-05-19 09:27:11 37265

转载 Vue的双向数据绑定原理

Vue的双向数据绑定原理先说面试答案:答:vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过来劫持各个属性的,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤:第一步: 需要observer(观察者)对数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步compile(模板解析器)解析模板指令,将模板中的变量替换成数据,然后初始化。

2023-03-27 15:09:48 4

原创 Vuex页面刷新数据丢失的问题

为什么说刷新页面vuex的数据会丢失刷新页面vuex的数据会丢失属于正常现象,(vuex的数据并不是弄丢了,而是初始化了,回到初始值,回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了。

2023-03-20 16:17:50 273

原创 JavaScript:反转数组的四种方法

在上面的代码中,我们使用Math.floor向下舍入( i < Math.floor(arr.length/2) ) i < Math.floor(arr.length/2)给定数组的一半元素。reverseArray1函数将一个数组( arr )作为参数,并通过向后循环遍历给定的数组,以相反的顺序创建一个相同元素的新数组( newArr )( let i = arr.length - 1;数组的最后一个元素将是循环的起点(arr.length — 1) ,它将一直运行直到到达数组的起点(i ≥ 0)

2023-03-14 16:05:48 355

原创 js对url进行编码解码(三种方式)

js对url进行编码解码

2022-11-08 15:02:22 6536

原创 后端一次给你10万条数据,如何优雅展示,到底考察我什么?

后端一次给你10万条数据,如何优雅展示,到底考察我什么?requestAnimationFrame文档碎片 + requestAnimationFrame懒加载

2022-07-22 10:31:15 801

原创 $forceUpdate的使用详解

$forceUpdate官网的定义是——迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。官网地址学习👉vm.$forceUpdate()1、主要用来解决强制刷新视图和数据。2、结合vue生命周期,调用$forceUpdate后会触发beforeUpdate和updated这两个钩子函数,不会触发其他钩子函数。使用场景:1、数据层次太多, 数据修改了,但页面没有重新渲染;2、如果在vue的data中没有进行声明,给没声明的属性赋值(即非响应式的

2022-04-18 13:20:12 2853

原创 刨析 JS 中的forEach、for in、for of三类循环原理和性能

一、for 循环和 while 循环的性能对比优点:程序简洁,结构清晰,循环初始化,循环变量化,循环体和循环条件位置突出 循环是可以中断循环(利用break语句或return语句)。缺点:结构比while循环复杂,容易出编码错误let arr = new Array(999999).fill(1)console.time('forTime')for(let i = 0; i< arr.length; i++){}console.timeEnd('forTi...

2022-04-01 16:14:57 2812 4

原创 npm安装机制

说在前面我们在开发前端项目的时候经常会用到诸如 npm install来初始化依赖,这个过程中究竟发生了哪些事情,每次都需要从网络端重新下载依赖吗?安装依赖时,总会有一些莫名其妙的报错,这个时候我们只要删除package-lock.json,然后删除node_modules重新下载依赖,这样就能顺利安装依赖了,到底是为什么呢?让我们带着疑问一起往下走。经常使用npm的小伙伴应该知道,项目中用到的依赖,大部分都不是全局安装的,两个不同的项目,即使依赖的包完全一致,初始化都需要重新执行一遍 np

2022-03-27 22:44:33 1595

原创 浏览器缓存、HTTP缓存(强缓存、协商缓存),浏览器缓存和CDN的关系

一、什么是浏览器缓存?浏览器将请求过的资源(html、js、css、img)等,根据缓存机制,拷贝一份副本存储在浏览器的内存或者磁盘上。如果下一次请求的url相同时则根据缓存机制决定是读取内存或者磁盘上的数据还是去服务器请求资源文件。缓存通过url来判断,如果url不同则是新的资源。所以我们开发时前端会将一些js、css等文件在后面加hash值来避免资源更新时浏览器仍读取缓存文件,导致需要刷新才能获取新的资源的问题。这种做法虽然解决了js、css等文件的更新,这种加hash的就不在这篇文章说了,

2022-02-28 13:17:39 1110

原创 JavaScript:彻底理解同步、异步和事件循环(Event Loop)

一. 执行栈JS运行的环境称之为宿主环境。执行栈:call stack,一个数据结构,用于存放各种函数的执行环境,每一个函数执行之前,它的相关信息会加入到执行栈。函数调用之前,创建执行环境,然后加入到执行栈;函数调用之后,销毁执行环境。(单线程不容易冲突,但是效率低)浏览器执行线程浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程,其中浏览器渲染进程(浏览器内核)属于浏览器多进程中的一种,主要负责页面渲染,脚本执行,事件处理等。浏览器宿主环境中包含5个线程:...

2022-02-23 11:23:12 350 1

原创 vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程

vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程一、真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步,用HTML分析器,分析HTML元素,构建一颗DOM树(标记化和树构建)。 第二步,用CSS分析器,分析CSS文件和元素上的inline样式,生成页面的样式表。 第三步,将DOM树和样式表,关联起来,构建一颗Render树(这一过程又称为A

2022-02-23 10:52:51 916

原创 git rebase和merge区别

一、概述merge和rebase标题上的两个命令:merge和rebase都是用来合并分支的。这里不解释rebase命令,以及两个命令的原理,详细解释参考这里。下面的内容主要说的是两者在实际操作中的区别。1.1 什么是分支分支就是便于多人在同一项目中的协作开发。比方说:每个人开发不同的功能,在各自的分支开发过程中互不影响,完成后都提交到develop分支。极大的提高了开发的效率。1.2 合并分支每个人创建一个分支进行开发,当开发完成,需要合并到develop分支的时候,就需要

2022-01-16 10:49:12 7482 1

转载 一份不可多得的 TS 学习指南

一、TypeScript介绍TypeScript 由微软开发的自由和开源的编程语言。TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。TypeScript使用现有的JavaScript代码,包括流行的JavaScript库,并从JavaScript代码中调用TypeScript代码。TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。TypeScrip

2022-01-10 10:10:33 781

原创 JS中String、string和““的区别

1、new String()var str = new String("csdn"); //类型为object表示类型引用,构造函数新建对象,在运行时创建2、String()var str = String("csdn"); //类型为string表示类型转换,类比的还有Number、Boolean、Object ..String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别:.toString()可以将所有

2022-01-07 13:32:06 1200

原创 git cherry-pick的使用教程

对于多分支的代码库,将代码从一个分支转移到另一个分支是常见需求。这时分两种情况:一种情况是,你需要另一个分支的所有代码变动,那么就采用合并(git merge);另一种情况是,你只需要部分代码变动(某几个提交),这时可以采用 Cherry pick。一、基本用法git cherry-pick命令的作用,就是将指定的提交(commit)应用于其他分支。git cherry-pick <commitHash>上面命令就会将指定的提交com...

2022-01-05 14:15:33 6049

原创 Vue---实例属性$options(获取data外面的数据和方法)

一、概述大家都知道如何在Vue创建一个实列const vm = new Vue(options)在这里把Vue的实例命名为vm,这是尤雨溪的习惯,我们沿用vm对象封装了对视图的所有操作,包括数据读写、事件绑定、DOM更新...vm的构造函数是Vue,按照ES6的说法,vm所属的类是Vueoptions是 new Vue 的参数,我们一般称之为选项或者构造选项,用于当前 Vue 实例的初始化选项。二、那么options里面有什么呢?options的五类属性:数据:data

2021-12-24 14:32:42 2455

原创 Vue性能提升之Object.freeze()

一、序在 Vue 的文档中介绍数据绑定和响应时,特意标注了对于经过 Object.freeze() 方法的对象无法进行更新响应。因此,特意去查了 Object.freeze() 方法的具体含义。二、含义Object.freeze() 方法用于冻结对象,禁止对于该对象的属性进行修改(由于数组本质也是对象,因此该方法可以对数组使用)。在 Mozilla MDN 中是如下介绍的:可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修

2021-12-24 10:38:50 3226 2

原创 Vue---如何更好的封装组件?几个小技巧助你成为组件封装达人,让我们封装的组件更加优雅易用

在进行组件通信时,经常会遇到这样的需求:父组件A给子组件B传值,B组件又继续传递给C,最终执行的是C。也就是说,B只是中间起了传递作用,啥也没干。如果是这样的需求,按父子组件的通信的规则,B得接收信息,并继续传递,对B组件来说是冗余;而用vuex呢?那更是大材小用杀鸡用牛刀了。那咋办呢?如何能快速达到目的、而且代码不拖沓?$attrs和$listeners就派上了用场。一、$attrs正常情况下,Vue推荐用props向子组件参数。但是在特定场景下,使用$attrs 会更方便。

2021-12-21 15:04:30 766

原创 面试题---Set和Map的区别;Map和Object 的区别

一、Set和Map的区别简述:Set 和 Map 主要的应用场景在于 数据重组 和 数据储存。 Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构。集合 与 字典 的区别:共同点:集合、字典 可以储存不重复的值 不同点:集合 是以 [value, value]的形式储存元素,字典 是以 [key, value] 的形式储存集合(Set):ES6 新增的一种新的数据结构,类似于数组,成员唯一(内部元素没有重复的值)。且使用键对数据排序即顺序存储。Set 本身是一种构

2021-12-17 15:26:18 3824 2

原创 Ajax与Axios的区别

一、Axiosaxios是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中特点: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF二、AjaxAjax 是 Asynchronous JavaScript and X...

2021-12-15 22:36:48 323

原创 Vue hash和history两种模式的区别、history模式部署后刷新报404

项目本地运行时候,首页子页面刷新均无问题。部署到服务器之后,刷新页面报错、出现404。当vue项目的vue-router的mode为history路由模式时,若未进行相应的配置,可能会发生这种情况。前端路由,即由前端来维护一个路由规则。实现有两种,一种时利用url的hash,也就是常说的锚点(#),JS通过hashChange事件来监听url的改变,IE7及以下需要轮询;另一种是HTML5的History模式,它使url看起来像普通网站那样,以“/”分割,没有#,但页面并没有跳转,不过使用这种模式需

2021-12-12 19:57:17 3749 5

原创 js---浅拷贝与深拷贝

一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和引用数据类型。1、基本数据类型的特点:直接存储在栈(stack)中的数据2、引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。二、浅拷贝与深拷贝深拷贝和浅拷贝是只针对Object和Array这样的

2021-12-09 16:07:26 228

原创 小程序---npm、全局共享数据MobX、分包subPackages---07

一、使用 npm 包小程序对 npm 的支持与限制目前,小程序中已经支持使用 npm 安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用 npm 包有如下 3 个限制:① 不支持依赖于 Node.js 内置库的包② 不支持依赖于浏览器内置对象的包③ 不支持依赖于 C++ 插件的包总结:虽然 npm 上的包有千千万,但是能供小程序使用的包却“为数不多”。使用 npm 包 - Vant Weapp1. 什么是 Vant Weap...

2021-11-12 18:30:20 255

原创 微信小程序Vant Weapp配置及使用

1. 安装npm如未安装npm,请先安装npm,下载地址:http://nodejs.cn/download/2. 在小程序根目录右键==>打开终端窗口输入:mpm init/npm init -y 初始化npm包管理工具,会出现确认信息全部回车。3. 通过nmp安装Vant安装命令:npm i @vant/weapp -S --production或者指定版本:如指定@1.3.3 npm i @vant/weapp@1.3.3 -S --production文件夹出现...

2021-11-12 15:52:10 731

原创 小程序---自定义组件(监听器、组件通讯、插槽、behavior)---06

一、自定义组件自定义组件 - 组件的创建与引用1. 创建组件① 在项目的根目录中,鼠标右键,创建 components -> test 文件夹② 在新建的 components -> test 文件夹上,鼠标右键,点击“新建 Component”③ 键入组件的名称之后回车,会自动生成组件对应的 4 个文件,后缀名分别为 .js,.json, .wxml 和 .wxss注意:为了保证目录结构的清晰,建议把不同的组件,存放到单独目录中,例如:2. 引用组件组件的引用方式分为“

2021-11-12 13:18:07 90

原创 小程序---视图与逻辑(导航、事件、生命周期、wxs)---05

一、页面导航1. 什么是页面导航页面导航指的是页面之间的相互跳转。例如,浏览器中实现页面导航的方式有如下两种:① <a> 链接② location.href2. 小程序中实现页面导航的两种方式① 声明式导航 1. 在页面上声明一个<navigator> 导航组件 2. 通过点击<navigator> 组件实现页面跳转② 编程式导航 1. 调用小程序的导航...

2021-11-11 23:11:22 946

原创 小程序---模板与配置(基础语法、tabBar、wx.request)---04

一、WXML 模板WXML 模板语法 - 数据绑定1. 数据绑定的基本原则① 在 data 中定义数据② 在 WXML 中使用数据2. 在 data 中定义页面的数据在页面对应的 .js 文件中,把数据定义到 data 对象中即可:3. Mustache 语法的格式把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。语法格式为:4. Mustache 语法的应用场景 Mustac...

2021-11-11 16:43:34 149

原创 小程序---协同工作和发布---03

一、协同工作1. 了解权限管理需求 在中大型的公司里,人员的分工非常仔细:同一个小程序项目,一般会有不同岗位、不同角色的员工同时参与 设计与开发。此时出于管理需要,我们迫切需要对不同岗位、不同角色的员工的权限进行边界的划分,使他们能够高效的进 行协同工作。2. 了解项目成员的组织结构3. 小程序的开发流程小程序成员管理1. 成员管理的两个方面2. 不同项目成员对应的权限3. 开发者的权限说明① 开发者权限:可使用小程序开发者...

2021-11-11 01:26:04 482

原创 小程序---宿主环境(常用组件、api)---02

一、宿主环境简介1. 什么是宿主环境宿主环境(host environment)指的是程序运行所必须的依赖环境。例如:Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以, Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!2. 小程序的宿主环境手机微信是小程序的宿主环境,如图所示:小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例...

2021-11-11 00:44:43 486

原创 小程序---手把手创建小程序/目录结构---01

一、注册小程序开发账号1. 点击注册按钮 使用浏览器打开 https://mp.weixin.qq.com/ 网址,点击右上角的“立即注册”即可进入到小程序开发账号 的注册流程,主要流程截图如下:2. 选择注册账号的类型3. 填写账号信息4. 提示邮箱激活5. 点击链接激活账号6. 选择主体类型7. 主体信息登记8. 获取小程序的 AppID二、安装开发者工具1. 了解微信开发者工具 微信开发者工具是官方推荐使用的小程序开发工具...

2021-11-10 23:40:25 1188

原创 小程序---小程序与普通网页开发的区别---00

1、运行机制不同 网页开发: (1)单线程机制,既用于运行脚本,也用于渲染,不能同时干两件事情,渲染线程和脚本线程是互斥的,长时间的脚本运行可能会导致页面失去响应。 (2)网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行 DOM 选中和操作。 (3)网页运行在浏览器环境中 。 小程序: (1)渲染线程和脚本线程,二者是分开的,分别运行在不同的线程中。 (2)小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整浏...

2021-11-10 20:54:20 151

原创 js---类的创建、new做了什么 和 继承

js---类的创建、new做了什么 和 继承

2021-11-03 19:37:05 618

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除