我也要用- 博客(158)
- 收藏
- 关注
RSS订阅原创 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
9
原创 canvas学习一
一、什么是canvas？canvas是 HTML5 的标签元素，使用 JavaScript 在canvas里绘制图像。canvas画布是一个矩形区域，你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。二、为什么需要学canvas？我们可以使用canvas 绘制复杂图形，处理图像，开发游戏，做动画，处理视频…div+csscanvas三、创建 canvas 元素通过 width 和 height 设置 canvas 画布的宽高，默认.
2021-04-06 18:01:40
7
原创 JS的 execCommand 方法实现一个简单的富文本编辑器
一、document.execCommand()从其名字上可以看出execCommand()是用来执行命令的，当一个HTML文档切换到设计模式时，document暴露execCommand方法，该方法允许运行命令来操纵可编辑内容区域的元素。如保存文件、打开新文件、撤消、重做、剪切、复制、删除，字体大小、背景颜色等操作，有了这个方法就可以很容易的实现网页中的文本编辑器【1】语法let bool = document.execCommand(aCommandName, aShowDefa...
2021-04-02 15:31:07
33
2
原创 TypeScript 面向对象编程
一、类面向对象编程中一个重要的核心就是：类，当我们使用面向对象的方式进行编程的时候，通常会首先去分析具体要实现的功能，把特性相似的抽象成一个一个的类，然后通过这些类实例化出来的具体对象来完成具体业务需求。【1】类的基础在类的基础中，包含下面几个核心的知识点，也是TypeScript与EMCAScript2015+在类方面共有的一些特性class关键字 构造函数：constructor 成员属性定义 成员方法 this关键字除了以上的共同特性以外，在TypeScript中...
2021-03-29 14:05:12
13
原创 单张图片上传组件
一、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
38
原创 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
33
原创 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
21
1
原创 了解类型系统和TypeScript基础类型
一、什么是程序？程序 = 数据结构 + 算法 = 各种格式的数据 + 处理数据的逻辑二、数据是有格式（类型）的字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined） 对象（Object）、数组（Array）、函数（Function）、集合三、程序是可能有错误的计算错误（对非数字类型数据进行一些数学运算） 调用一个不存在的方法，不同类型的数据有不同的操作方式或方法，如：字符串类型的数据就不应该直接参与数学运算四、动态类型语言
2021-03-22 10:05:33
15
原创 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
33
原创 Vue中实现Input框按Enter键增加一行并聚焦
很多公司官网的登陆页面都有这样的需求，当用户输入完用户名之后，按键盘的Enter键就可以切换到下一行的密码输入框，并将光标聚焦到密码框这一行，聚焦这个功能主要通过触发input框的focus事件来实现一、密码框聚焦（确定ref值）我们给密码框增加ref属性为passwordInput，监听用户名输入框的Enter事件，增加下列代码，即可聚焦到密码框this.$refs.passwordInput.focus(); 二、使用v-for为每一个Input动态添加ref现在我们的需求变了，不
2021-03-18 15:48:50
76
原创 H5设备运动事件 DeviceMotionEvent 实现摇一摇功能
一、DeviceMotion介绍在 window 对象中存在一个专门的事件 devicemotion，它封装了运动传感器数据的事件，可以用来监听设备的加速度变化等信息。devicemotion事件对象有acceleration、accelerationIncludingGravity、rotationRate和interval四个属性 window.addEventListener("devicemotion", (e) => { console.log(e) })
2021-03-03 16:40:03
51
原创 移动端横竖屏检测
一、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
22
原创 解决移动端滑动事件冲突【有左右滑动轮播图，又有上下滑动滚动条，斜滑时会相互影响】
前言在移动端中，当我们的页面既有上下滑动又有左右滑动时，比如我们顶部有轮播图(左右移动)，页面还包含上下移动滚动条。当我们斜滑页面，页面也会斜着运动，即触发了左右移动事件又触发了上下移动事件。布局还可能会错乱，这不是我们想要的，我们只想它左右或者上下滑动，不同时滑动。接下来我们来解决这个问题一、touch触摸事件介绍touchstart：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发 touchmove：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用prevent
2021-03-02 17:43:42
142
原创 vue中实现数组元素的上移和下移
有时候我们需要实现列表元素上移和下移交换位置，我们把数组数据渲染到视图中，通过数组元素交换位置实现上移和下移功能一、要移动的数组列表let questionList = [ { question: "第一个问题？" }, { question: "第二个问题？" }, { question: "第三个问题？" }, { question: "第四个问题？" }, { question: "第五个问题？" },]二、上移、下移函数 // 上移
2021-03-02 09:58:54
178
原创 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
58
原创 React生命周期钩子函数
前言所谓的生命周期就是指某个事物从开始到结束的各个阶段，就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。当然在 React.js 中指的是组件从创建到销毁的过程，React 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是React 的生命周期，各个阶段有相对应的事件钩子，用户可以在特定的阶段调用特定的方法。每个阶段组件内部的属性都是不一样的，所以一般特定的钩子做特定的事。一、React生命周期..
2021-01-28 17:33:32
121
原创 Axios-指南
前言前端程序与服务器通信的最常见方式是通过HTTP协议。在我们没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前，Jquery 除了优秀的前端 DOM 元素操作性以外，它的$.ajax()函数还能够非常便捷的发起 http 请求。现在我们已经开始使用MVVM框架进行前端开发，抛弃了对页面 DOM 元素的操作，难道为了方便的发起 http 请求，还需要在项目中加载 jquery 或者是手动创建 http 请求吗？答案当然是不用的，随着 Vue 作者尤雨溪宣布不再维...
2021-01-25 14:59:26
117
原创 基于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
71
原创 怎么做好网站的SEO优化
-.搜索引擎工作原理在搜索弓|擎网站的后台会有一个非常庞大的数据库,里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为"搜索引擎蜘蛛” 或“网络爬虫”。程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的”蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容, 进行分析提炼，找到其中的关键词，如果"蜘蛛” 认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之,如果"蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继
2021-01-04 15:30:30
260
4
原创 详解defineProperty和Proxy （简单实现数据双向绑定）
前言"数据绑定" 的关键在于监听数据的变化，vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其实主要是用了ES5中的Object.defineProperty方法来劫持对象的属性添加或修改的操作，从而更新视图。听说vue3.0 会用 proxy 替代 Object.defineProperty()方法。所以预先了解一些用法是有必要的。proxy 能够直接 劫持整个对象，而不是对象的属性，并且劫持的方法有多种。而且最后会返回劫持后的新对象。所以相对来讲，这个方法还是挺好用的。不过
2020-12-20 17:10:56
113
原创 观察者模式和发布-订阅模式的区别
一、观察者模式【1】定义观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。观察者模式有一个别名叫“发布-订阅模式”，或者说是“订阅-发布模式”，订阅者和订阅目标是联系在一起的，当订阅目标发生改变时，逐个通知订阅者。【2】案例案例：我办了一个补习班，学生想来我这学习，必须先报名（订阅）。收齐一帮学生，开始教学，学生们听了我的
2020-12-17 11:40:47
157
原创 class类学习 — 封装elementUI的dialog组件
前言在ES6之前，准确来说JavaScript语言只有对象，没有类的概念。生成实例对象的传统方法是通过构造函数，与传统的面向对象语言（比如 C++ 和 Java）差异很大，ES6 提供了更接近传统语言的写法，引入了 class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。但需要清楚的是ES6中class只是构造函数的一种语法糖，并非新鲜玩意，class能实现的，我们通过ES5构造函数同样可以实现。一、构造函数与class写法的部分区别【1.1】构造函数 functio
2020-12-13 01:51:16
239
1
原创 JavaScript工厂模式创建对象和自定义构造函数的区别
工厂模式【1】定义工厂模式是一种软件工程领域一种广为人知的设计模式，这种模式抽象了创建对象的过程，因为ECMAScript无法穿类，所以开发人员就发明一个函数，用函数来封装以特定的接口创建对象。简单理解：通过函数封装对象，并通过调用函数来调用封装的对象。通过调用多次函数从而创建多次不同的对象。【2】代码工厂模式有返回值，因为通过调用函数会把把函数返回值（这里就是函数封装的对象obj）给返回，然后我们通过声明一个变量person1去接收，此时变量person1里面存的就是对象，然后通过对象调用
2020-12-11 12:16:46
152
原创 一款简洁的查询天气的微信小程序
天气部落一款简洁的查询天气的微信小程序（扫码体验）数据来源和风天气，需要注册账号获取key；免费版只能获取三天的天气数据，若要获取七天的气象数据，可以申请个人开发者认证；主要功能查询天气情况 更换背景 分享给微信好友 系统设置截图开发前准备注册微信小程序，获取 appit，配置域名白名单(在小程序后台将使用到的API添加到域名白名单) 注册和风天气账号，获取key值 在 app.js 中替换 globalData中的 key为你自己的 key...
2020-11-03 14:20:22
310
原创 Yarn 安装与使用教程
一、官网指引英文官网：Yarn英文官网中文文档：Yarn中文文档二、Yarn 介绍Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。 你可以通过它使用全世界开发者的代码，或者分享自己的代码。代码通过包（package）（或者称为模块（module））的方式来共享。 一个包里包含所有需要共享的代码，以及描述包信息的文件，称为package.json。它的优点是更快、更安全、更可靠。它的主要特性有离线模式、确定性
2020-10-15 14:34:39
715
原创 数组方法 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
405
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
221
原创 单页应用和多页应用的区别
一、定义区分【1.1】单页应用单页应用又称 SPA（Single Page Application）指的是使用单个 HTML 完成多个页面切换和功能的应用。这些应用只有一个 html 文件作为入口，一开始只需加载一次 js,css 等相关资源。使用 js 完成页面的布局和渲染。页面展示和功能室根据路由完成的。单页应用跳转，就是切换相关组件，仅刷新局部资源。【1.2】多页应用多页应用又称 MPA（Multi Page Application）指有多个独立的页面的应用，每个页面必须重复加载 js
2020-09-28 11:28:31
386
原创 图片的懒加载和预加载
一、懒加载【1.1】什么是懒加载？懒加载也就是延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。【1.2】为什么要懒加载？当很多页面，内容很丰富，页面很长，图片较多的时候。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要
2020-09-27 16:57:16
205
原创 通俗易懂的理解：什么是数据埋点？
一、什么是埋点？数据埋点是一种常用的数据采集方法，是数据产品经理、数据运营以及数据分析师，基于业务需求或产品需求对用户在应用内产生行为的每一个事件对应的页面和位置植入相关代码，并通过采集工具上报统计数据，以便相关人员追踪用户行为和应用使用情况，推动产品优化或指导运营的一项工程。包括访问数（Visits），访客数（Visitor），停留时长（Time On Site），页面浏览数（Page Views）和跳出率（Bounce Rate）。这样的信息收集可以大致分为两种：页面统计（track this vi
2020-09-25 11:37:29
389
原创 文字超出容器最大宽度实现从右向左匀速滚动
一、滚动组件<template> <div class="scrollText" ref="outer"> <div class="st-inner" :class="{'st-scrolling': needToScroll}"> <span class="st-section" ref="inner">{{text}}</span> <span class=".
2020-09-03 16:11:01
216
1
原创 vue项目实现文字转换成语音播放功能
一、Web Speech APIWeb Speech API使您能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分：SpeechSynthesis语音合成 （文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。我们今天主要了解语音合成，将文字转换成语音播放二、语音合成SpeechSynthesis：语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其它相关命令的信息。SpeechSynthesisU...
2020-09-01 17:07:26
1302
2
原创 异步编程的实现方式？
一、JavaScript为什么要异步？Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。为
2020-08-21 17:21:05
475
1
原创 Vue — 详解mixins混入使用
前言当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性一、什么是Mixins？mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、comp.
2020-08-07 17:53:46
1470
原创 对象序列化和反序列化过程
一.什么是对象序列化？ 对象序列化是指将对象的状态转换为字符串（来自我这菜鸟的理解，好像有些书上也是这么说的，浅显易懂！）； 序列化(Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程（来自“百度百科—序列化“，学术性强，略显高端）；二.为什么会有对象序列化？ 世间万物，都有其存在的原因。为什么会有对象序列化呢？因为程序猿们需要它。既然是对象序列化，那我们就先从一个对象说起：varobj={x:1,y:2}; ...
2020-07-28 10:34:04
243
原创 vue实现用户长时间不操作，自动退出登录
一、需求说明昨天后端开发人员让我实现一个网页锁屏，当时我一头雾水，问他为啥搞的跟安卓系统一样。他的回复是"看起来帅点"。首先我们梳理下逻辑，先来个简化版的，用户长时间未操作时，返回登录页二、思路使用 mouseover 事件来监测是否有用户操作页面，写一个定时器间隔特定时间检测是否长时间未操作页面，如果是，退出登陆，清除token，返回登录页三、实现【1】首先在util文件夹下创建一个astrict.js每隔30s去检查一下是否过了30分钟// 引入路由和..
2020-07-23 10:52:44
2177
原创 JavaScript 内存泄漏及如何避免
前言在过去，内存泄漏并没有为 Web 开发人员带来巨大的问题。页面保持着相对简单，并且在页面之间的跳转时可以释放内存资源，即便还存在内存泄露，那也是小到可以被忽略。现在，新的 Web 应用达到更高的水准，页面可能运行数小时而不跳转，通过 Web 服务动态检索和更新页面。JavaScript 语言特性也被发挥到极致，通过复杂的事件绑定、面向对象和闭包等特性构成了整个 Web 应用。面对这些变化，内存泄露问题变得越来越突出，尤其是之前那些通过刷新（导航）隐藏的内存泄露问题。内存泄漏是每个开发者最终都
2020-07-08 17:45:40
256
原创 全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？
一、全局作用域中，用const和let声明的变量去哪了？【1.1】在ES5中，全局变量直接挂载到全局对象的属性上，所以能在window上看到var命令和function命令声明的全局变量var a = 10;function f(){};console.log(window.a); // 10console.log(window.f); // f(){}【1.2】在ES6中，全局对象的属性和全局变量脱钩，但是为了保持兼容性，旧的不变，所以var、function声明的全局变量依然可以在
2020-06-22 10:03:52
1091
原创 Vue动态组件 & keep-alive
前言在 vue 中，实现 Tab 切换主要有三种方式：使用动态组件，使用 vue-router 路由，使用第三方插件。本文将详细介绍Vue动态组件。所谓动态组件就是让多个组件使用同一个挂载点，并动态切换。一、is用法通过使用保留的<component>元素，动态地绑定到它的is特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。改变挂载的组件，只需要修改is指令的值即可。【1.1...
2020-06-10 17:04:13
282
原创 箭头函数与普通函数的区别？
前言箭头函数是前端面试环节的一个高频考点，箭头函数是ES6的API，相信很多人都知道，因为它的语法比一般的函数更简洁，所以深受大家的喜爱。这是我们在日常开发中一直使用的API，但大多数同学对它的理解还不够，下面我们来详细了解下箭头函数的基本语法，以及箭头函数与普通函数的区别。一、基本语法【1.1】定义函数定义箭头函在数语法上要比普通函数简洁得多，ES6中允许使用箭头=>来定义箭头函数，箭头函数省去了function 关键字，函数的参数放在=>前面的括号中，函数体跟在=>..
2020-06-09 17:09:14
331
空空如也
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人 TA的粉丝