- 博客(67)
- 收藏
- 关注
RSS订阅原创 VScode网页版的使用
可连接git-hub的账号使用，实现随时随地编程；可通过该地址进行连接git-hub仓库的连接，但不适应于编写与提交代码，可用于阅读他人的代码；VScode网页版的使用。在原本项目的地址前加入。
2022-12-18 12:30:58
6557
原创 canvas绘制时钟
canvas绘制时钟的展示；canvas是HTML5新增的元素，通过javascript脚本绘制图形；那么canvas可以用来干啥呢？制作web网页游戏数据可视化；即：echarts就是基于canvas进行绘制广告banner的动态效果，视频的弹幕效果canvas还可以用来内嵌一些网页手写签名等…点击进入查看canvas的系列学习在这里我添加了一个时钟的绘制，呈现的效果如下：这里采用的是俩个canvas的形式进行圆刻度表与指针分开的绘制；} h1 {
2022-11-17 12:45:58
869
原创 前端实现大文件/图片的上传 -采用分片上传的形式
需求：当需要上传的文件或图片的较大时，采用分片截取分段的形式上传；要想实现文件的上传与下载，先得了解下new Blob()对象；文件上传的对象是blob对象，即二进制大对象;可用于实现文件流的下载。
2022-10-28 13:38:45
1035
原创 自定义弹窗组件
在项目中经常会使用到的弹窗提示框，这里将弹窗的提示框的内容，书写成pageTool.js形式，将弹窗的方法使用export导出，类似的组件的引用方法使用；
2022-08-15 20:03:28
666
原创 digital-keyboard - 数字与id输入的键盘
web的前端应用，在input的输入中，可不使用自身的软键盘，而引用数字与身份证键盘；
2022-08-15 18:39:25
254
原创 事件轮询有关Promise与async/await的原理
js的运行程序是单线程，所有的队列再一个线程中完成；为了防止主线程的阻塞，使用异步的promise来解决，异步event loop，async与await的语法糖，宏任务与微任务的关系，其中还写入有关原理的题目；了解其原理就好解题...
2022-08-05 01:18:14
638
原创 vue前端项目第三方库集成
vue项目第三方库的集成使用：vue.config.js配置； vue-router集成； vuex集成;element-plus集成；axios集成；vscode的配置
2022-07-25 17:13:25
988
原创 vue中的axios的封装使用（二）
基于vue3.0与typescript创建下，封装axios的接口请问的方法，方便的代码的维护与接口请求引用的统一管理；
2022-07-17 16:21:18
2013
3
原创 前端项目搭建规范的协同的配置
多组员协同项目开发时，需要配置的开发规范，统一代码的书写风格与格式；并且gitHub地址commit的内容也可进行规范化描述提交；针对代码缩进大小，空白符的配置，换行类型等问题，这里介绍EditorConfig，Prettier，eslint，git Husky与git commit的规范；...
2022-07-07 14:23:46
507
2
原创 TypeScript接口与泛型的使用
typescript的接口与泛型的使用；在书写typescript的代码中，声明一个变量及对象的类型，使用到的type与instance，包括字面量的类型的使用。也有typescript的枚举enum与泛型的使用；并且涉及到类型的查找与定义的方式...
2022-07-05 19:09:43
983
2
原创 TypeScript类的使用
本编typescript类的使用，有关成员修饰符(public,private和protected), readonly只读属性, getters/setters，静态成员，抽象类abstract，与类的类型的定义使用；
2022-06-30 23:18:09
285
4
原创 TypeScript函数详解
在typescript中使用函数，进行函数类型的定义使用；包括参数类型的定义，可选参数，参数的默认值，this的推倒与函数的重载的问题；
2022-06-30 21:42:26
272
原创 typeScript的介绍与变量定义的基本类型
TypeScript是拥有类型的超集，它可以编译成普通、干净、完整的代码；最终会被编译成js的代码来运行，并拥有js的所有特性；它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是支持的；不仅仅增加了类型约束，而且包括一些语法的扩展等；........................
2022-06-21 18:42:46
413
4
原创 web前端项目 - cypress自动化测试运行构建
cypress是指控制测试流程，并比较实际结果与预期结果之间的差异。可替代大量的手工测试操作，使得测试可以快速，反复的进行；cypress的语法类似于JQuery，比较好理解
2022-06-17 17:02:48
1171
原创 typeScript的定义类型：不能将类型“Timeout”分配给类型“number”；
Typescript 给setTimeout 的返回值定义为 number并给于赋值时，会报如下错误：错误信息：`不能将类型“Timeout”分配给类型“number”`；其解决思路是查看当前环境下，对此方法的所定义的类型与引用；
2022-05-27 12:06:01
9058
3
原创 font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配
面对不同设备的适配与响应；这里介绍不同的是@media规则进行匹配不同的设备；不同的设备宽度不尽相同，尺寸有320px,360px,375px,414px…等常见的宽度,面对在不同的尺寸环境下，文字的阅读体验问题，我们常常使用的是CSS单位 - rem；*其中“r“代表的是root的意思，在HTML网页中，root指的就是<html>元素
2022-03-31 19:12:50
1978
原创 js的设计模式 - 【观察者模式】
当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。一对多的关系。
2022-03-21 15:26:45
1351
原创 css变量在静态饼图与进度条上的使用
使用css变量实现圆形静态饼图的百分比与进度条的进程；结合css的样式来展示进度，使用opacity与counter来展示进度的百分比值；
2022-03-21 12:48:48
1115
原创 使用background多背景与border-radius圆形 - 绘制icon的图标与特别样式的应用
使用css的属性制作一些小众的样式，减少使用对icon图片导入；使用background多背景实现icon的加减效果这里应用多背景的属性，书写加减后的图标；代码示例如下：<style>.btn-add,.btn-sub { width: 1.5rem; height: 1.5rem; border: 1px solid gray; background: linear-gradient(currentColor, currentColor) no-repeat
2022-03-19 23:31:03
225
原创 css渐变色边框的实现的方法
常见的渐变色边框的实现；可以实现对布局没有影响的轮廓扩展，分别是：outline轮廓，box-shadow盒阴影，border-image边框图片；
2022-03-18 20:21:06
2763
原创 基于javascripts的语法特性使用设计原则
从javacript的角度来使用与学习设计模式；现有“设计”后有“模式”，因此应该“从设计到模式”，不能将“设计模式”作为一个词来称呼。根据这种设计到形成固有模式的思想来学习设计模式，代入到学习设计模式中，帮助更好的理解
2022-03-10 15:49:01
918
原创 UML类图的辅助构建的逻辑代码
UML - Unified Modeling Language - 统一建模语言，用类图来描述class类之间的继承与实例的关系；工作中，每次新项目或者新功能开发之前，都可先画好 UML 图，和同事一起确认评审。理清类之间的关系，接下来就是劳动工作中微调思路；UML类图也可帮助快速的了解当前实现的代码结构；推荐使用！
2022-03-09 09:54:02
681
原创 javaScript的面向对象
面向对象，Object Oritented（简称 OO）是一种目前主流的编程思想，也是学习设计模式的前提，因为设计模式就是基于面向对象思想的。面向对象的三要素及其使用，基本的应用场景及思想，都值得去深刻的思考
2022-03-09 07:47:45
139
原创 js设计模式的讲解与应用 - 【单例模式】
单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点；按照面向对象的编程思想，任何东西都可以抽象为一个类，然后可以`new`出若干个对象。但是针对某些场景，只能存在唯一的对象；例如：`jQuery`中的$; 登录；购物车等；
2022-02-18 18:29:41
897
原创 MutationObserver监听DOM树变化来异步的执行异步的回调
使用MutationObserver实现监听并观察DOM树的一部分或某个元素的变化；主要应用于该元素的属性或显示状态发生改变时，执行异步回调（如埋点或者添加属性行为）；
2022-02-14 10:19:53
600
原创 arguments的类数组让递归函数解耦
arguments是包含调用函数时传入的所有参数的类数组，arguments`对象其实有个callee属性，是指向arguments对象所在函数的指针；可以解决递归函数的函数名紧密耦合的问题
2022-02-13 08:53:59
227
原创 js中垃圾回收机制与内存管理/泄漏之间的联系
javascript垃圾回收机制原理，通过自动内存管理实现内存分配和闲置资源回收；垃圾回收程序的主要的标记策略：标记清理和引用计数；其中存在的内存管理已内存泄漏之间的联系；
2022-01-25 16:36:53
827
原创 css子元素选择父元素的实现
css元素不能往前选择，即不能选择父元素或前兄弟元素；这都受制于DOM渲染规则；而这里我们使用别的方法来实现前元素或父元素选择的效果；有改变dom的排版位置，:focus-within伪类的选择；
2022-01-24 10:36:48
23705
2
原创 css选择器的逻辑组合伪类 -not()/ is()/where()
css选择器的逻辑组合伪类 -not()/ is()/where()在项目中的使用；可使代码更加简洁，更好理解，保护了类名的优先级，扩展性更强，更利于维护！
2022-01-21 21:00:40
1106
原创 css选择器的输入伪类 - 实现Material Design风格的输入框样式体验
css选择器的输入伪类，实现各自输入状态的匹配 - 实现Material Design风格的输入框样式体验
2022-01-21 20:05:15
704
原创 css选择器中url定位的伪类 - 有关:link ， :visited， :hover，:active， 目标:target
css选择器中url定位的伪类 - 有关:link ， :visited， :hover，:active， 目标:target的使用，使用:targe的方法实现原本需要JavaScript交互布局的效果，改善锚点匹配所带来的浏览器跳动的不好体验；
2022-01-21 11:14:47
950
原创 css书写有关:hover/:active/:focus的用户行为的伪类-为提高用户体验
该篇的内容主要写的是用户行为的伪类，指的是与用户行为相关的使用；:hover/:active/:focus的根据伪类提高用户的体验，其兼容性的问题也对伪类的实现有影响，需要考虑到不同平台之间的影响！
2022-01-20 14:20:37
961
原创 css的属性选择器[attr=‘‘]的使用
css的属性选择器[attr='']，属性的正则匹配[attr^/*/$='']的使用；在项目中的使用自定义属性样式的管理！
2022-01-18 20:14:40
1534
原创 css选择器中的子索引伪类使用，有关:last-child与:last-of-type的区分
css选择器中的子索引伪类使用，有关:last-child与:last-of-type的区分，有无当前元素状态的区分，并且借助伪类实现动态标签元素生成的样式匹配，从而达到不使用js也可根据列表的数量更改其对应样式
2022-01-18 15:47:52
882
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人