自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 基于vue3实现拖拽并调整大小

综上所述:选用 vuedraggable + vue3-draggable-resizable 插件,通过 vuedraggable 实现克隆拖拽,通过 vue3-draggable-resizable 实现嵌套拖拽、调整大小和边界检查。克隆容器:左侧控件列表   目标容器:中间画板。画件:中间画板中的控件。

2024-10-30 16:18:13 802 1

原创 js常见的设计模式

【代码】js常见的设计模式。

2024-03-20 11:13:26 1784

原创 简述继承方法

ES5继承先定义一个父类 // 1.定义父类 (包含实例属性和方法) function Animal(name) { this.name = name || 'Animal'; this.sleep = function () { console.log(this.name + "正在睡觉!") } } // 原型方法 Animal.prototype.eat = function (food) { console.log(this.na

2023-07-18 10:46:01 124 1

原创 Foo和getName的那些事儿

参考博客此题涉及的知识点:声明提升和提升优先级、构造函数返回值问题、js运算符优先级、实例化对象的属性访问优先级、逻辑运算符运算题目: // 方式1:创建了一个有返回值的构造函数,在里面定义了全部变量getName指向一个匿名函数(小心闭包) function Foo() { getName = function () { console.log(1); } return this; } // 方式2:

2020-07-21 01:50:51 967 1

原创 Git与GitHub

基本概念本地仓库:本地电脑进行本地备份远程仓库:远程服务器进行项目托管Git工作区 - ->暂存区 - ->本地库使用:安装成功后,在需要备份的文件夹右键点击(或进入该文件夹在空白处点击)Git bash here可以使用linux命令:查看当前文件夹下的所有文件:查看当前文件夹下的所有隐藏文件:ls -la查看当前的绝对路径:pwd查看某个文件:cat [文件路径]1. 初始化本地库git init  生成.git文件,项目具备了本地管理的能力2. 配置个人信息gi

2020-07-18 21:55:12 254 1

原创 常见浏览器样式兼容问题

不同浏览器的标签,默认的外边距( margin )和内边距( padding )不同【100%】解决办法:在CSS样式开头,设置*{margin: 0; padding: 0},将所有标签的margin和padding设置为05.IE6中,块元素设置float属性并且有水平方向的margin时,margin显示出来会比设置的值大,导致最后一个块元素被顶到下一行【90%】解决办法:将块元素转化为行内元素,设置样式display:inlineIE6、IE7等浏览器,标签高度小于10px时,实际的高度会.

2020-07-06 01:17:22 844

原创 实现图片懒加载

作用减少或延迟请求数,缓解浏览器的压力,增强用户体验法一:编码实现实现方式设置图片src属性默认为内存小的图片,自定义一个data-src属性来存储图片的真实地址页面初始化显示或者浏览器发生滚动时,判断图片是否在视窗中通过DOM操作设置该区域图片的src属性为真实地址代码部分css+html<style> .container { max-width: 800px; margin: 0 auto; } /* 清除浮动 */

2020-05-13 11:36:29 246

原创 实现垂直水平居中

参考博客公共部分<style> .center{ width: 200px; /* 假设内容填充模拟宽高 */ height: 200px; background: violet; }</style><div class="center"> <span>test</span></div>盒子垂直水平居中 – position已知宽高.center{ positio

2020-05-11 16:27:57 135

原创 清除浮动的方式、原理及优缺点

清除浮动的几种方式,并阐述其原理和优缺点给父级div设置height原理:父级div手动定义height,解决了浮动元素脱离文档流,父级div无法获取高度的问题优点:代码简单、易掌握缺点:只适用于高度固定的布局给父级div添加样式overflow:hidden原理:overflow:hidden会创建一个BFC,计算高度时会将浮动元素计算进去优点:代码简单、浏览器支持性好缺点:不适用于高度固定的盒子,内容超出时会被隐藏在浮动元素末尾添加一个兄弟元素空div标签并设置其样式clear:bo

2020-05-11 16:24:00 488 1

原创 前端性能优化

面试题:从“用户角度”和“服务商角度”进行简述从用户角度而言,优化能够让页面加载速度更快,用户操作响应更及时,用户体验更友好从服务商角度而言,优化能够让页面请求数减少或请求带宽减小,节省可观的资源前端优化的途径大致可以分为两类:(1) 页面优化:http请求数、脚本的无阻塞加载、内联脚本的位置优化等(2) 代码优化:JavaScript中的DOM操作、CSS选择器、 HTML结构以及图片优化等具体方式参考博客针对不同资源有不同的优化方式:内容优化减少http请求DOM操作时使用a

2020-05-09 19:52:54 190 1

原创 BFC的定义、创建、特性及应用场景

BFC定义BFC(Block formatting context)直译为"块级格式化上下文",是一个独立的渲染区域,只有块级盒子参与,规定了内部的块级盒子如何布局,与这个区域的外部毫不相干。BFC创建根元素float值不为noneoverflow值不为visibledisplay值为inline-block, table-cell, table-caption, flex, inline-flex, flow-root(无副作用,单纯创建BFC,但此属性很新,要考虑兼容性)positi

2020-05-09 16:17:46 425

空空如也

空空如也

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

TA关注的人

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