自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

乐夫天命兮的博客

聊乘化以归尽,乐夫天命复奚疑!

  • 博客(184)
  • 资源 (2)
  • 收藏
  • 关注

原创 [Vue warn]: Avoid using non-primitive value as key, use string/number value inst

写好的功能进来就莫须有的这样子了::::一进入某页面,就会冒出这么一长串的报错,这个是由于v-for循环里,key值可能重复了,所以会报这个错。查看了一下页面代码: 发现key值重复了key值是必须唯一的,如果重复就会报错可以把key值改为index或者id,就可以避免这个情况(这里key最好用id,才能达到key值唯一,就地复用的原则,大大节省了dom的渲染)...

2021-10-14 17:11:17 5

原创 寻找两个正序数组的中位数

给定两个大小分别为 m 和 n 的正序(从小到大)数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。示例 1:输入:nums1 = [1,3], nums2 = [2]输出:2.00000解释:合并数组 = [1,2,3] ,中位数 2示例 2:输入:nums1 = [1,2], nums2 = [3,4]输出:2.50000解释:合并数组 = [1,2,3,4] ,中位数 (2 + 3) / 2 = 2.5示例 3:输入:nums1 = [0,0],

2021-09-16 14:28:37 7

原创 无重复字符的最长子串

给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度。示例 1:输入: s = “abcabcbb”输出: 3解释: 因为无重复字符的最长子串是 “abc”,所以其长度为 3。示例 2:输入: s = “bbbbb”输出: 1解释: 因为无重复字符的最长子串是 “b”,所以其长度为 1。示例 3:输入: s = “pwwkew”输出: 3解释: 因为无重复字符的最长子串是 “wke”,所以其长度为 3。请注意,你的答案必须是 子串 的长度,“pwke” 是

2021-09-15 10:41:49 15

原创 多年前三月随感

偶然间翻出自己大学时期写的一些内心活动,挺好的,所思所想记下来。  今天是乙未年 己卯月 乙巳日羊年的第89天,离今年的结束还有276天。今年特别的想家,多少年的情感在这一瞬迸发。离家十年读书的时间一晃就真的十年了。古人有十年寒窗苦读,只为一朝金榜题名。想我如今已经将近读了16年的书,可依旧是一事无成。想这一路走来的确坎坷。少年多病多灾,好在有个严厉要求我的母亲和永远把我的学业放在第一位的老爸。   小时候特想过现在的日子 ,没有作业,没有考试,没有父母的逼迫。于是在15岁的时候就做了一个很蠢的决定.

2021-09-13 15:26:20 15

原创 JavaScript BOM的介绍

JavaScript的组成JavaScript基础分为三个部分:ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM:文档对象模型,操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM:浏览器对象模型,操作浏览器部分功能的API。比如让浏览器自动滚动。什么是BOMBOM:Browser Object Model,浏览器对象模型。BOM的结构图:从上图也可以看出:window对象是BOM的顶层(

2021-09-13 09:55:56 10

原创 JavaScript原型对象

原型的引入 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function () { console.log("我是" + this.name);

2021-09-13 09:52:40 14

原创 JavaScript事件委托

事件委托事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素。比如说有一个列表 ul,列表之中有大量的列表项 <a>标签:<ul id="parent-list"> <li><a href="javascript:;" class="my_link">超链接一</a></li> <li><a href="javascript:;" class="my_

2021-09-10 14:23:35 15 1

原创 JavaScript事件的传播和事件冒泡

DOM事件流事件传播的三个阶段是:事件捕获、事件冒泡和目标。事件捕获阶段:事件从祖先元素往子元素查找(DOM树结构),直到捕获到事件目标 target。在这个过程中,默认情况下,事件相应的监听函数是不会被触发的。事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。事件冒泡阶段:事件从事件目标 target 开始,从子元素往冒泡祖先元素冒泡,直到页面的最上一级标签。如下图所示:PS:这个概念类似于 Android 里的 touch 事

2021-09-10 14:20:37 6 1

原创 JavaScript浅拷贝和深拷贝

概念浅拷贝:只拷贝最外面一层的数据;更深层次的对象,只拷贝引用。深拷贝:拷贝多层数据;每一层级别的数据都会拷贝。总结:拷贝引用的时候,是属于传址,而非传值。关于传值和传址的区别,是很基础的内容,详见《JavaScript 基础/对象简介.md》这篇文章。深拷贝会把对象里所有的数据重新复制到新的内存空间,是最彻底的拷贝。浅拷贝的实现方式用 for in 实现浅拷贝(比较繁琐)const obj1 = { name: 'qianguyihao', age: 28,

2021-09-10 14:15:16 4

原创 JavaScript作用域和变量提升

作用域(Scope)的概念概念:通俗来讲,作用域是一个变量或函数的作用范围。作用域在函数定义时,就已经确定了。目的:为了提高程序的可靠性,同时减少命名冲突。作用域的分类在 JS 中,一共有两种作用域:(ES6 之前)全局作用域:作用于整个 script 标签内部,或者作用域一个独立的 JS 文件。函数作用域(局部作用域):作用于函数内的代码环境。作用域的访问关系在内部作用域中可以访问到外部作用域的变量,在外部作用域中无法访问到内部作用域的变量。代码举例:var a

2021-09-10 14:12:16 42 1

原创 JavaScript变量的数据类型:基本数据类型和引用数据类型

变量的数据类型为什么需要数据类型在计算机中,不同的数据所需占用的存储空间不同,为了充分利用存储空间,于是定义了不同的数据类型。而且,不同的数据类型,寓意也不同。我们都知道,无论这个变量是字符串类型,还是数字类型,我们都可以直接用 var 去定义它。比如:var a = 'hello word';var b = 123;为什么可以这样做呢?这是因为:JavaScript 是一种「弱类型语言」,或者说是一种「动态语言」,这意味着不需要提前声明变量的类型,在程序运行过程中,类型会自动被确定。JS

2021-09-10 09:54:39 5

原创 JavaScript简介

JavaScript背景Web前端有三层:HTML:从语义的角度,描述页面结构CSS:从审美的角度,描述样式(美化页面)JavaScript:从交互的角度,描述行为(实现业务逻辑和页面控制)发展历史JavaScript诞生于1995年。网景公司的员工布兰登 • 艾奇(Brendan Eich,1961年~)在1995年开发出了 JavaScript 语言。JavaScript是由网景公司(Netscape)发明,最初命名为LiveScript;1995年12月与SUN公司合作,

2021-09-10 09:52:06 26

原创 VS Code的使用

前言文章标题:《第一次使用 VS Code 时你应该知道的一切配置》。本文的最新内容,更新于 2020-06-19。大家完全不用担心这篇文章会过时,因为随着 VS Code 的版本更新和插件更新,本文也会随之更新。本文的最新内容,也会在GitHub上同步更新,欢迎 star。VS Code 软件实在是太酷、太好用了,越来越多的新生代互联网青年正在使用它。前端男神尤雨溪大大这样评价 VS Code:有一点你可能会感到惊讶:VS Code 这款软件本身,是用 JavaScript 语言编写的

2021-09-09 09:59:39 38

原创 call、apply、bind的区别

call()和apply()介绍这两个方法都是函数对象的方法,需要通过函数对象来调用。当函数调用call()和apply()时,函数都会立即执行。都可以用来改变函数的this对象的指向。第一个参数都是this要指向的对象(函数执行时,this将指向这个对象),后续参数用来传实参。显式绑定thisJS提供的绝大多数函数以及我们自己创建的所有函数,都可以使用call 和apply方法。它们的第一个参数是一个对象。因为你可以直接指定 this 绑定的对象,因此我们称之为显式绑定。例1

2021-09-09 09:56:16 4

原创 作用域和闭包

前言面试问题:说一下对变量提升的理解说明this的几种不同的使用场景创建10个<a>标签,点击的时候弹出来对应的序号如何理解作用域实际开发中闭包的应用涉及到的知识点:执行上下文this作用域作用域链闭包执行上下文执行上下文主要有两种情况:全局代码: 一段<script>标签里,有一个全局的执行上下文。所做的事情是:变量定义、函数声明函数代码:每个函数里有一个上下文。所做的事情是:变量定义、函数声明

2021-09-09 09:55:21 6

原创 var、let、const的区别

var、let、const 的区别1、var 声明的变量会挂载在 window 对象上,而 let 和 const 声明的变量不会举例:var a = '我是a';console.log(a); // 打印结果:我是aconsole.log(window.a); // 打印结果:我是alet b = '我是b';console.log(b); // 打印结果:我是bconsole.log(window.b); // 打印结果:undefinedlet c = '我是c';consol

2021-09-09 09:53:59 189 2

原创 页面渲染性能优化

浏览器渲染过程浏览器解析 HTML,生成 DOM Tree(Parse HTML)。浏览器解析 CSS,生成 CSSOM(CSS Object Model)Tree。JavaScript 会通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree,浏览器将 DOM Tree 和 CSSOM Tree 合成渲染树(Render Tree)。布局(Layout):根据生成的 Render Tree,进行回流,以计算每个节点的几何信息(位置、

2021-09-09 09:49:02 43 1

原创 静态资源优化

图片格式和应用场景JPEG 格式JPEG(Joint Photographic Experts Group)是一种针对彩色照片而广泛使用的有损压缩图形格式,属于位图。常用文件扩展名为.jpg,也有 .jpeg和.jpe。JPEG 在互联网上常被应用于存储和传输照片。适合:颜色丰富的照片、彩色图大焦点图、通栏 banner 图;结构不规则的图形。不适合:线条图形和文字、图标图形,因为它的压缩算法不太这些类型的图形;并且不支持透明度。PNG 格式PNG(Portable Network

2021-09-09 09:48:05 33

原创 浏览器渲染机制

前言渲染机制包括的内容:什么是DOCTYPE及作用浏览器渲染过程。面试经常会问:在浏览器中输入url,发生了哪些事情。其中有一部就是浏览器的渲染过程。Reflow:重排。面试官问完了渲染机制,一般会紧接着问重排Reflow,你可千万别说你没听过。Repaint:重绘Layout:布局。这里的Layout指的是浏览器的Layout。什么是DOCTYPE及作用定义DTD(Document Type Definition):文档类型定义。是一系列的语法规则,用来定义XM

2021-09-06 14:09:25 9

原创 前端性能分析工具和指标

性能指标和优化目标之:加载性能指标:我们在性能优化过程中可以参考的标准。这些标准都是业界或者前人总结出来的指导性经验。我们可以参考这些指标,去指导我们自己的优化。打开网站的初体验我们以淘宝网站为例,按下F12打开浏览器的调试模式。上图中,鼠标右键点击“刷新”图标(或者鼠标长按刷新图标,松开鼠标后),会弹出三个选项,我们选择最后一个选项“清空缓存并硬性重新加载”。补充:这三个选项都是在调试模式下(按下F12弹出调试面板)才会出现的。浏览器的DevTools初印象:上图中,打开 chrome

2021-09-06 10:34:59 11

原创 页面性能优化

前言提升页面性能优化的方法有哪些:1、资源压缩合并,减少http请求2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别如果回答出非核心代码异步加载,就会层层深入。3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理缓存是所有性能优化的方式中最重要的一步,这个一定要答好。【重要】有的人可能会回答local storage 和session storage,其实不是这个。浏览器缓存和存储不是一回事。4、使用CDN浏览器第

2021-09-06 10:23:26 9

原创 前端错误监控

前言错误监控包含的内容是:前端错误的分类每种错误的捕获方式上报错误的基本原理面试时,可能有两种问法:如何监测 js 错误?(开门见山的方式)如何保证产品质量?(其实问的也是错误监控)前端错误的分类包括两种:即时运行错误(代码错误)资源加载错误每种错误的捕获方式即时运行错误的捕获方式方式1:try … catch。这种方式要部署在代码中。方式2:window.onerror函数。这个函数是全局的。 window.onerror = fu

2021-09-06 10:20:36 12

原创 变量、作用域与内存

  JavaScript 变量可以保存两种类型的值:原始值和引用值。原始值可能是以下 6 种原始数据类型之 一: Undefined、Null、Boolean、Number、String 和 Symbol。原始值和引用值有以下特点。原始值大小固定,因此保存在栈内存上。从一个变量到另一个变量复制原始值会创建该值的第二个副本。引用值是对象,存储在堆内存上。包含引用值的变量实际上只包含指向相应对象的一个指针,而不是对象本身。从一个变量到另一个变量复制引用值只会复制指针,因此结果是两

2021-09-02 16:46:41 11

原创 浏览器垃圾回收

  JavaScript 是使用垃圾回收的语言,也就是说执行环境负责在代码执行时管理内存。在 C 和 C++等 语言中,跟踪内存使用对开发者来说是个很大的负担,也是很多问题的来源。JavaScript 为开发者卸下 了这个负担,通过自动内存管理实现内存分配和闲置资源回收。基本思路很简单:确定哪个变量不会再 使用,然后释放它占用的内存。这个过程是周期性的,即垃圾回收程序每隔一定时间(或者说在代码执 行过程中某个预定的收集时间)就会自动运行。垃圾回收过程是一个近似且不完美的方案,因为某块内存是否还有用,属于“不

2021-09-02 16:26:58 11

原创 前端开发规范条约

功能开发说明1)冗余代码可直接删除,不为日后留作隐患;2)所有git提交的代码不要直接合并,这样不方便review 代码,可通过git仓库中的Create merge request创建然后指定review代码人员;3)代码注释,这个必须要有的,方便我们以后再维护;css方面1)命名规则规范问题,使用BEM命名规则,避免使用如:(.t-c 这种无意义命名)参考URL(https://bemcss.com/);2)公用CSS可直接引用,不要闭门造车;3)CSS格式优雅性的关注;4)判断引用图片

2021-08-27 14:19:12 16

原创 判定是否互为字符重排

给定两个字符串 s1 和 s2,请编写一个程序,确定其中一个字符串的字符重新排列后,能否变成另一个字符串。示例 1:输入: s1 = “abc”, s2 = “bca”输出: true示例 2:输入: s1 = “abc”, s2 = “bad”输出: false说明:提示0 <= len(s1) <= 1000 <= len(s2) <= 100var CheckPermutation = function(s1, s2) { if(s1.

2021-07-22 11:13:02 4

原创 判定字符是否唯一

实现一个算法,确定一个字符串 s 的所有字符是否全都不同。示例 1:输入: s = “leetcode”输出: false示例 2:输入: s = “abc”输出: true限制:0 <= len(s) <= 100如果你不使用额外的数据结构,会很加分。来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/is-unique-lccivar isUnique = function(astr) { for(

2021-07-22 10:59:30 6

原创 Axios类封装

APIimport axios from 'axios'import { getToken, removeToken } from '@/services/auth/utils'import config from '@/config'import Vue from 'vue'import { Message } from 'element-ui'const showMessage = Symbol('showMessage')let messageInstance = nullclass

2021-07-14 10:24:42 21

原创 消息框左右滚动

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl

2021-07-14 10:19:41 22

原创 2021年我在忙什么?

  开局之年我和爱人2021春节在北京度过了第一个北漂的春节,为了响应北京政府的疫情防控政策,就地过年不给国家添麻烦,在春节的七天里,把我会做的硬菜挨个做了一遍,每天都有6菜一汤,在短暂的七天春节假期里也是安排的满满当当。  开工第一周的周末就领着爱人做了一个重要决定,报名海淀驾校,拿驾驶证的想法已经酝酿两年多了,每每一想到工作日上班,周末还要练车,想想都觉得麻烦,终于我俩达成一致,同时报名,互相鼓励拿下驾驶证,于是长达两个多月的周末时间就这样被支配完毕。  考驾照的两个月里其实每天都挺有趣的,经过狂刷

2021-07-05 11:15:26 22

原创 算法练习:两数相加(链表)

给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的,并且每个节点只能存储 一位 数字。请你将两个数相加,并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外,这两个数都不会以 0 开头。示例 1:输入:l1 = [2,4,3], l2 = [5,6,4]输出:[7,0,8]解释:342 + 465 = 807示例 2:输入:l1 = [0], l2 = [0]输出:[0]示例 3:输入:l1 = [9,9,9,9,9,9,9],

2021-07-01 11:05:36 18

原创 算法练习:两数之和

给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。示例 1:输入:nums = [2,7,11,15], target = 9输出:[0,1]解释:因为 nums[0] + nums[1] == 9 ,返回 [0, 1] 。示例 2:输入:nums = [3,2,4], target = 6输出:[1,2].

2021-06-25 16:31:43 13

原创 error Unexpected trailing comma comma-dangle

Error Unexpected trailing comma. comma-dangle 错误Eslint代码检测report数据。原因是数据后多个逗号。

2021-06-23 10:12:55 119

原创 浏览器事件循环(EventLoop)

JavaScript为什么是单线程?浏览器JS的作用是操作DOM,决定了它只能是单线程,否则会带来很复杂的同步问题,比如:假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准。任务队列:广义任务为两种,一种是同步任务,另一种是异步任务。(1)所有同步任务都在主线程上执行,形成一个执行栈;(2) 主线程之外,还有一个‘任务队列’,只要异步任务有了任务运行结果,就在‘任务队列’之中放置一个事件;(3)一旦‘执行栈’中的所有

2021-06-06 09:30:47 25 2

原创 模块化的理解

为什么要模块化开发??

2021-06-05 19:27:53 31

原创 05.将组件抽离为单独的文件

// 1.导包import React from ‘react’import ReactDOM from ‘react-dom’// 导入Hello组件// 默认,如果不做单独的配置的话,不能省略.jsx后缀名// import Hello from ‘./components/Hello.jsx’// 注意:这里的@符号,表示 项目根目录的srcimport Hello from ‘@/components/Hello.jsx’const dog = {name: ‘大黄’,age:

2021-03-12 21:45:31 70

原创 04.创建组件的第一种方式

// 1.导包import React from ‘react’import ReactDOM from ‘react-dom’//第一种创建组件的方式function Hello(props) {//如果在一个组件中return一个null,则表示此组件为空,什么都不会渲染// return null//在组件中,必须返回一个合法的JSX虚拟DOM元素console.log(props)// 结论 :不论是Vue 还是React,组件中的props永远都是只读的,不能被重新赋值retu

2021-03-12 21:44:59 22

原创 03.jsx语法中的注意事项

// 1.导包import React from ‘react’import ReactDOM from ‘react-dom’// 2.创建虚拟DOM元素// const mydiv = React.createElement(‘div’,{id:‘mydiv’,title:‘div aaa’},‘这是一个div元素’)let a = 10let str = ‘你好中国’let boo = falselet title = ‘999’const h1 = 红红火火// const ar

2021-03-12 21:44:31 27

原创 02.jsx语法最基本的使用

// 1.导包import React from ‘react’import ReactDOM from ‘react-dom’// 2.创建虚拟DOM元素// const mydiv = React.createElement(‘div’,{id:‘mydiv’,title:‘div aaa’},‘这是一个div元素’)// HTML是最优秀的表记语言// 注意: 在js文件中,默认不能写这种类似HTML的标记;否则打包会失败;// 可以使用 babel 来转换这些 js 中的标签;//

2021-03-12 21:43:41 26

原创 01.react最基本代码

//webpack-dev-server 打包好的main.js是托管到了内存中;所以在项目目录中看不到;//但是我们可以认为,在项目目录中,有一个看不见的main.js// 1.这两个导入时候,接收的成员名称,必须这么写import React from ‘react’ // 创建组件/虚拟dom元素,生命周期import ReactDOM from ‘react-dom’ // 把创建好的 组件 和 虚拟dom放到页面上展示的// 2.创建 虚拟DOM 元素// 参数1:创建的元素的类型,字

2021-03-12 21:43:11 14

easyUI三级菜单

采用easyUI进行平台框架搭建的模板,参照此模板能够快速进行前端架构搭建

2018-03-16

SVG+CSS3圆形倒计时滚动条动画效果

SVG+CSS3圆形倒计时滚动条动画效果,采用canvas技术进行实现

2018-03-16

空空如也

空空如也

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

TA关注的人 TA的粉丝

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