自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 Vue+Element UI 整合下拉目录树(popover+ tree+input)

一、演示效果二、完整代码<template> <el-popover placement="bottom-start" title="" width="300" v-model="showTree" popper-class="el-popover-tree" trigger="click" content=""> <el-.

2022-05-31 10:41:23 1683 1

原创 浏览器兼容性问题总结

1、HTML对象获取问题其他浏览器:document.getElementById("idName");IE浏览器:document.idnamedocument.getElementById("idName");解决办法:document.getElementById("idName");2. const定义常量问题其他浏览器:document.getElementById("idName");IE浏览器:document.idnamedoc..

2022-02-17 18:06:20 2292 1

原创 Nginx 学习

一、官网源码:nginx – nginx官网:nginx news二、介绍Nginx是俄罗斯人Igor Sysoev编写的轻量级Web服务器,它的发音为[ˈendʒɪnks],它不仅是一个自由的、开源的、高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/SMTP 代理服务器。Nginx以事件驱动的方式编写,所以有非常好的性能,同时也是一个非常高效的反向代理、负载平衡服务器。在性能上,Nginx占用很少的系统资源,能支持更多的并发连接,达到更高的访问效率;在功能上,Ng..

2021-09-29 11:01:44 1543 1

原创 Node进程管理工具—pm2

一、官网PM2二、简介PM2是一个内建了负载均衡器的node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。当你要把你的独立代码利用全部的服务器上的所有 CPU,并保证进程永远都活着,0 秒的重载, PM2 是完美的。三、为什么需要pm2?目前Nodejs开发中有很多痛点,因为node本身是一个单线程应用,它的特点就是所有方法都是串行一次执行,并且node并没有能力像Java一样独自去创建一个新的线程来实现异步操作,如果在

2021-09-21 15:57:48 11000 3

原创 远程服务连接工具—FinallShell

一、官网FinallShell二、介绍FinallShell是一款国人开发的一款非常好用的远程服务连接软件,轻松实现连接远程服务器和远程桌面工具,能够对远程的计算机进行连接控制操作,随时随地轻松操作电脑设备,让你远程办公更高效便捷。它不需要在远程的服务器所在地连接服务器,支持Windows系统、Mac系统、linux系统等多种系统平台的电脑连接,兼容性广泛,便于远程服务连接,除了远程连接功能外,软件还为用户带来内存和CPU使用率实时显示功能,实时掌握电脑性能情况。三、主要特性1.多平台

2021-09-20 22:07:27 12473 6

原创 Leaflet-学习

一、官网英文官网:Leaflet中文官网:Leaflet二、介绍Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有39 KB, 并且拥有绝大部分开发者所需要的所有地图特性。Leaflet 简单、高效并且易用。 它可以高效的运行在桌面和移动平台, 拥有着大量的扩展插件、优秀的文档、简单易用的API和完善的案例, 以及可读性较好的源码。三、下载Leaflet【1】CDN// html头部引入<link rel="s...

2021-09-18 14:16:24 3499

原创 JavaScript实现类似sleep()的多种方式

编写复杂的JavaScript脚本时,有时会有需求希望脚本能停滞指定的一段时间,类似于 java 中的 Thread.sleep 或者 sh 脚本中的 sleep 命令所实现的效果。很多语言都有sleep函数,sleep() 方法的作用是在指定的毫秒数内让当前“正在执行的线程”休眠(暂停执行)但是JavaScript中并没有提供类似于 Java 的线程控制的功能, 虽然有 setTimeout 和 setInterval 两个方法可以做一些定时执行控制,但并不能满足所有的要求。因为setTimeou

2021-09-15 15:32:54 4682 3

原创 jQuery使用Deferred对象执行异步操作

在JQuery 1.5之前,Ajax仅支持一个回调函数,但在JQuery的1.5版本中,引入了Deferred对象,它和ES6的Promise对象长的有点像,jQuery的Deferred对象也有resolve、reject、then方法,还有done、fail、always......方法。jQuery就是用这个Deferred对象来注册异步操作的回调函数,修改并传递异步操作的状态。它允许注册多个回调函数,并且能传递任何同步或异步函数的执行状态:成功或失败。简单说,Deferred对象就是jQuery..

2021-08-25 19:09:45 1042 1

原创 Vue — transition实现过渡动画

前言Vue提供了transition的封装组件,任何元素和组件在下列四种情形中,都可以添加进入或离开过渡动画条件渲染(使用v-if) 条件展示(使用v-show) 动态组件 组件根节点一、transition用法<transition>元素作为单个元素/组件的过渡效果。<transition>只会把过渡效果应用到其包裹的内容上,而不会额外渲染DOM元素,也不会出现在可被检查的组件层级中。当插入或删除包含在 <transition&g...

2021-07-22 10:16:02 21149 1

原创 前端高频面试题

前言多小伙伴为了面试会去看一些大厂的经典面试题,这里的“看”只是说加深一下以往的印象,也就是说你之前是用到过或者是学过,只是长时间用不到有点淡忘了。千万不要为了面试而死记硬背,这是程序员最大的悲哀,请记住一句话:“未经你思考的知识是不属于你的”楼主2018年毕业,三年前端开发经验。前段时间花了半个月时间面试,收到七八个offer,其中包括美的集团。以下是我对前端开发一些碎片化知识的总结,所谓碎片化,其实都是积木化,每一块积木都可以单独学习,自主拼接,进而组合成自己想要的形状,充分运用。..

2021-07-16 01:36:44 6798 4

原创 CSS伪类实现中间文字两边横线效果

一、通过display:table实现html<div class="line">中间文字</div>css .line { display: table; width: 100%; white-space: nowrap; border-spacing: .2rem 0; color: #ccc; } .line:before, .line:after { d

2021-07-13 17:31:09 1560

原创 canvas学习二

一、绘制文字【1】font字体属性canvas里的font属性和css的font属性是一样的,它可以设置文本的粗细、字号、字体等css设置字体:p{font:bold15px 微软雅黑;} canvas设置字体:ctx.font='bold15px微软雅黑'【2】textAlign水平对齐textAlign设置或返回文本内容的当前对齐方式start: 默认,文本在指定的位置开始 end: 文本在指定的位置结束 center: 文本的...

2021-04-07 16:55:37 2603 2

原创 canvas学习一

一、什么是canvas?canvas是 HTML5 的标签元素,使用 JavaScript 在canvas里绘制图像。canvas画布是一个矩形区域,你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。二、为什么需要学canvas?我们可以使用canvas 绘制复杂图形,处理图像,开发游戏,做动画,处理视频…div+csscanvas三、创建 canvas 元素通过 width 和 height 设置 canvas 画布的宽高,默认.

2021-04-06 18:01:40 3336

原创 JS的 execCommand 方法实现一个简单的富文本编辑器

一、document.execCommand()从其名字上可以看出execCommand()是用来执行命令的,当一个HTML文档切换到设计模式时,document暴露execCommand方法,该方法允许运行命令来操纵可编辑内容区域的元素。如保存文件、打开新文件、撤消、重做、剪切、复制、删除,字体大小、背景颜色等操作,有了这个方法就可以很容易的实现网页中的文本编辑器【1】语法let bool = document.execCommand(aCommandName, aShowDefa...

2021-04-02 15:31:07 4324 2

原创 TypeScript 面向对象编程

一、类面向对象编程中一个重要的核心就是:类,当我们使用面向对象的方式进行编程的时候,通常会首先去分析具体要实现的功能,把特性相似的抽象成一个一个的类,然后通过这些类实例化出来的具体对象来完成具体业务需求。【1】类的基础在类的基础中,包含下面几个核心的知识点,也是TypeScript与EMCAScript2015+在类方面共有的一些特性class关键字 构造函数:constructor 成员属性定义 成员方法 this关键字除了以上的共同特性以外,在TypeScript中...

2021-03-29 14:05:12 648

原创 单张图片上传组件

一、input实现文件上传【1】type属性type='file'表示文件域,用于文件上传【2】accept属性input框的accept属性值,它规定能够通过文件上传进行提交的文件类型 eg: accept="image/gif, image/jpeg"【3】实例<input type="file" name="file" accept="image/png,image/jpg,image/gif,image/JPEG" />// 上面代码意思是:input...

2021-03-24 10:30:17 486

原创 TypeScript函数详解

一、函数的标注一个函数的标注包含参数 返回值function fn(a: string): string {};let fn: (a: string) => string = function(a) {};type callback = (a: string): string;interface ICallBack { (a: string): string;}let fn: callback = function(a) {};let fn: ICallBack =

2021-03-22 11:33:22 1633

原创 TypeScript高级类型

一、联合类型联合类型也可以称为多选类型,当我们希望标注一个变量为多个类型之一时可以选择联合类型标注,或的关系function css(ele: Element, attr: string, value: string|number) { // ...}let box = document.querySelector('.box');// document.querySelector 方法返回值就是一个联合类型 string|numberif (box) { // ts .

2021-03-22 11:02:53 247 1

原创 了解类型系统和TypeScript基础类型

一、什么是程序?程序 = 数据结构 + 算法 = 各种格式的数据 + 处理数据的逻辑二、数据是有格式(类型)的字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined) 对象(Object)、数组(Array)、函数(Function)、集合三、程序是可能有错误的计算错误(对非数字类型数据进行一些数学运算) 调用一个不存在的方法,不同类型的数据有不同的操作方式或方法,如:字符串类型的数据就不应该直接参与数学运算四、动态类型语言

2021-03-22 10:05:33 258

原创 TypeScript 初体验 - 环境搭建与编译执行

一、TypeScript官网https://www.tslang.cn/二、环境搭建TypeScript编写的程序并不能直接通过浏览器运行,我们需要先通过TypeScript编译器把TypeScript代码编译成JavaScript代码,TypeScript的编译器是基于Node.js的,所以我们需要先安装Node.js三、安装Node.jsNode官网:https://nodejs.org安装完成以后,可以通过终端或者cmd等命令行工具来调用no...

2021-03-19 10:11:06 838

原创 Vue中实现Input框按Enter键增加一行并聚焦

很多公司官网的登陆页面都有这样的需求,当用户输入完用户名之后,按键盘的Enter键就可以切换到下一行的密码输入框,并将光标聚焦到密码框这一行,聚焦这个功能主要通过触发input框的focus事件来实现一、密码框聚焦(确定ref值)我们给密码框增加ref属性为passwordInput,监听用户名输入框的Enter事件,增加下列代码,即可聚焦到密码框this.$refs.passwordInput.focus(); 二、使用v-for为每一个Input动态添加ref现在我们的需求变了,不

2021-03-18 15:48:50 1688

原创 H5设备运动事件 DeviceMotionEvent 实现摇一摇功能

一、DeviceMotion介绍在 window 对象中存在一个专门的事件 devicemotion,它封装了运动传感器数据的事件,可以用来监听设备的加速度变化等信息。devicemotion事件对象有acceleration、accelerationIncludingGravity、rotationRate和interval四个属性 window.addEventListener("devicemotion", (e) => { console.log(e) })

2021-03-03 16:40:03 2025 1

原创 移动端横竖屏检测

一、HTML方法检测在html中分别引用横屏和竖屏样式<!-- 引用竖屏的CSS文件 portrait.css --> <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow"> <!-- 引用横屏的CSS文件 landscape.css --> <link rel="styleshee

2021-03-03 10:27:56 626

原创 解决移动端滑动事件冲突【有左右滑动轮播图,又有上下滑动滚动条,斜滑时会相互影响】

前言在移动端中,当我们的页面既有上下滑动又有左右滑动时,比如我们顶部有轮播图(左右移动),页面还包含上下移动滚动条。当我们斜滑页面,页面也会斜着运动,即触发了左右移动事件又触发了上下移动事件。布局还可能会错乱,这不是我们想要的,我们只想它左右或者上下滑动,不同时滑动。接下来我们来解决这个问题一、touch触摸事件介绍touchstart:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发 touchmove:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用prevent

2021-03-02 17:43:42 5262 1

原创 vue中实现数组元素的上移和下移

有时候我们需要实现列表元素上移和下移交换位置,我们把数组数据渲染到视图中,通过数组元素交换位置实现上移和下移功能一、要移动的数组列表let questionList = [ { question: "第一个问题?" }, { question: "第二个问题?" }, { question: "第三个问题?" }, { question: "第四个问题?" }, { question: "第五个问题?" },]二、上移、下移函数 // 上移

2021-03-02 09:58:54 7073 6

原创 CSS长度单位

前言说到css的单位,大家应该首先想到的是像素单位px,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了。然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem、vw和vh、vmin和vmax、ch和ex等等,那现在对这些单位分别做一下详细的介绍吧。一、CSS单位CSS 有几个不同的单位用于表示长度,一些设置 CSS 长度的属性有 width,margin,padding,font-si

2021-02-02 17:05:01 2385

原创 React生命周期钩子函数

前言所谓的生命周期就是指某个事物从开始到结束的各个阶段,就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在成年或者死亡的阶段去起名字。当然在 React.js 中指的是组件从创建到销毁的过程,React 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是React 的生命周期,各个阶段有相对应的事件钩子,用户可以在特定的阶段调用特定的方法。每个阶段组件内部的属性都是不一样的,所以一般特定的钩子做特定的事。一、React生命周期..

2021-01-28 17:33:32 7473

原创 Axios-指南

前言前端程序与服务器通信的最常见方式是通过HTTP协议。在我们没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前,Jquery 除了优秀的前端 DOM 元素操作性以外,它的$.ajax()函数还能够非常便捷的发起 http 请求。现在我们已经开始使用MVVM框架进行前端开发,抛弃了对页面 DOM 元素的操作,难道为了方便的发起 http 请求,还需要在项目中加载 jquery 或者是手动创建 http 请求吗?答案当然是不用的,随着 Vue 作者尤雨溪宣布不再维...

2021-01-25 14:59:26 535

原创 基于node.js的开发框架 — Koa

一、简介Koa基于nodeJs平台的下一代web开发框架,由 Express 幕后的原班人马打造,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手。目前有 1.x 和 2.x 两个大的版本其中 2.x 版本使用了 Node.js v7.6.0 之后支持的 ...

2021-01-18 10:49:33 488

原创 怎么做好网站的SEO优化

-.搜索引擎工作原理在搜索弓|擎网站的后台会有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是被称之为"搜索引擎蜘蛛” 或“网络爬虫”。程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现,这些勤劳的”蜘蛛”每天在互联网上爬行,从一个链接到另一个链接,下载其中的内容, 进行分析提炼,找到其中的关键词,如果"蜘蛛” 认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之,如果"蜘蛛”认为是垃圾信息或重复信息,就舍弃不要,继

2021-01-04 15:30:30 1662 5

原创 详解defineProperty和Proxy (简单实现数据双向绑定)

前言"数据绑定" 的关键在于监听数据的变化,vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其实主要是用了ES5中的Object.defineProperty方法来劫持对象的属性添加或修改的操作,从而更新视图。听说vue3.0 会用 proxy 替代 Object.defineProperty()方法。所以预先了解一些用法是有必要的。proxy 能够直接 劫持整个对象,而不是对象的属性,并且劫持的方法有多种。而且最后会返回劫持后的新对象。所以相对来讲,这个方法还是挺好用的。不过

2020-12-20 17:10:56 1138

原创 观察者模式和发布-订阅模式的区别

一、观察者模式【1】定义观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。观察者模式属于行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯。观察者模式有一个别名叫“发布-订阅模式”,或者说是“订阅-发布模式”,订阅者和订阅目标是联系在一起的,当订阅目标发生改变时,逐个通知订阅者。【2】案例案例:我办了一个补习班,学生想来我这学习,必须先报名(订阅)。收齐一帮学生,开始教学,学生们听了我的

2020-12-17 11:40:47 2894

原创 class类学习 — 封装elementUI的dialog组件

前言在ES6之前,准确来说JavaScript语言只有对象,没有类的概念。生成实例对象的传统方法是通过构造函数,与传统的面向对象语言(比如 C++ 和 Java)差异很大,ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。但需要清楚的是ES6中class只是构造函数的一种语法糖,并非新鲜玩意,class能实现的,我们通过ES5构造函数同样可以实现。一、构造函数与class写法的部分区别【1.1】构造函数 functio

2020-12-13 01:51:16 985 1

原创 JavaScript工厂模式创建对象和自定义构造函数的区别

工厂模式【1】定义工厂模式是一种软件工程领域一种广为人知的设计模式,这种模式抽象了创建对象的过程,因为ECMAScript无法穿类,所以开发人员就发明一个函数,用函数来封装以特定的接口创建对象。简单理解:通过函数封装对象,并通过调用函数来调用封装的对象。通过调用多次函数从而创建多次不同的对象。【2】代码工厂模式有返回值,因为通过调用函数会把把函数返回值(这里就是函数封装的对象obj)给返回,然后我们通过声明一个变量person1去接收,此时变量person1里面存的就是对象,然后通过对象调用

2020-12-11 12:16:46 930

原创 一款简洁的查询天气的微信小程序

天气部落一款简洁的查询天气的微信小程序(扫码体验)数据来源和风天气,需要注册账号获取key;免费版只能获取三天的天气数据,若要获取七天的气象数据,可以申请个人开发者认证;主要功能查询天气情况 更换背景 分享给微信好友 系统设置截图开发前准备注册微信小程序,获取 appit,配置域名白名单(在小程序后台将使用到的API添加到域名白名单) 注册和风天气账号,获取key值 在 app.js 中替换 globalData中的 key为你自己的 key...

2020-11-03 14:20:22 1207

原创 Yarn 安装与使用教程

一、官网指引英文官网:Yarn英文官网中文文档:Yarn中文文档二、Yarn 介绍Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。 你可以通过它使用全世界开发者的代码,或者分享自己的代码。代码通过包(package)(或者称为模块(module))的方式来共享。 一个包里包含所有需要共享的代码,以及描述包信息的文件,称为package.json。它的优点是更快、更安全、更可靠。它的主要特性有离线模式、确定性

2020-10-15 14:34:39 14017 2

原创 数组方法 sort() 排序错乱问题

一、问题在JavaScript中,数组使用sort()后发现有排序不正确的情况,如下:let arr = [1, 2, 3, 10, 20, 30]arr.sort()console.log(arr) // [1, 10, 2, 20, 3, 30]二、原因其实,sort方法会调用每个数组元素的toString方法得到字符串,然后再根据Unicode编码对得到的字符串进行排序。// toString后['1', '2', '3', '10', '20', '30']// 对

2020-10-10 14:26:37 3996 3

原创 electron入门学习

一、Electron介绍Electron 提供了丰富的本地(操作系统)的API,是一个基于 Chromium 和 Node.js,使你能够使用 HTML、CSS和 JavaScript 来创建桌面应用程序,兼容 Mac、Windows 和 Linux。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。目前,Electron 已经创建了包括 VScode 和 Atom 在内的大量应用二、学习前提(相关文档)【2.1】学习前提JavaScript:El

2020-09-30 17:59:13 1191

原创 单页应用和多页应用的区别

一、定义区分【1.1】单页应用单页应用又称 SPA(Single Page Application)指的是使用单个 HTML 完成多个页面切换和功能的应用。这些应用只有一个 html 文件作为入口,一开始只需加载一次 js,css 等相关资源。使用 js 完成页面的布局和渲染。页面展示和功能室根据路由完成的。单页应用跳转,就是切换相关组件,仅刷新局部资源。【1.2】多页应用多页应用又称 MPA(Multi Page Application)指有多个独立的页面的应用,每个页面必须重复加载 js

2020-09-28 11:28:31 4298

原创 图片的懒加载和预加载

一、懒加载【1.1】什么是懒加载?懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。【1.2】为什么要懒加载?当很多页面,内容很丰富,页面很长,图片较多的时候。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要

2020-09-27 16:57:16 960

空空如也

空空如也

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

TA关注的人

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