蝼蚁之行-优快云博客

原创实现一个响应式的瀑布流组件

在图片网站中，通常是使用瀑布流的方式来显示图片，等宽度不等高，这样显得错落有致今天使用Vue3实现一个瀑布流组件，并发布为一个npm包grid参考自。

2023-09-24 08:17:05 231

1、执行上下文执行上下文是js执行一段代码时的运行环境，是编译后生成的比如当调用一个函数时，就会创建一个该函数的执行上下文；当执行全局代码时，就会编译生成全局执行上下文执行上下文包括变量环境和词法环境用var声明的变量会存储在变量环境用let、const声明的变量会存储在词法环境（全局上下文特殊）执行上下文可以分为全局执行上下文和函数执行上下文（也称为局部执行上下文），还有一种eval我们暂不讨论全局执行上下文全局执行上下文是最外层的上下文，它的下一级可以是函数执行上下文全局

2021-04-09 23:13:43 164

原创 js说：这就是对象

在js中，对象究竟是个什么东西，这一章我们一起来学习 1、什么是对象对象就是一个具体的事物明星不是对象，但是林俊杰是，周杰伦是，汪苏泷也是食物不是对象，但是北京烤鸭是，佛跳墙是，红烧狮子头也是在js中，对象是一组无序的相关属性和方法的集合，所有事物都是对象，如数值（Number）、字符串（String）、数组（Array）、函数（Function）等对象（Object）是复杂数据结构对象由属性和方法组成：属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中.

2021-04-06 11:03:44 179

原创 js说：这就是函数

7、函数函数实际上是对象，每一个函数都是Function类型的实例，而函数名就是指向函数对象的指针简单地说，函数就是对象，它封装了一段可被重复调用执行的代码块，我们通过调用函数就可以实现大量代码的重复使用 7.1 定义函数定义函数总共有四种方式：函数声明函数表达式箭头函数（ES6） Function构造函数 1、函数声明函数声明式我们最常用的定义函数的方法 function foo() { console.log("Hello world!") } 2、函数表达式函数表达式几乎和.

2021-04-06 11:01:52 182

原创一脚踹开 this 的大门

1、this是什么在js中，有一套神奇的this机制我们先来看一个例子： var person = { namer: '张三', sayNmae: function() { console.log(namer); } } var namer = '李四' person.sayNmae(); // 李四我的天呐，怎么跟我们想的不一样？这是因为sayNmae方法中的变量是属于全局作用域下面的，但是我们想要访问的是对象里面的变量使用this便可以帮我们访问.

2021-04-06 10:58:22 180

原创 js之数组

6、数组前面我们讨论了简单数据类型，现在开始讨论复杂数据类型，就拿数组先来开刀吧数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素，包括数字、字符串、对象等等。数组是一种将一组数据存储在单个变量名下的优雅方式，本质上也是一种内置对象基于数组的特性，其在内存中的存储是连续存储的。就是说在内存中必须是由连续的空间来存储这些数组元素的 6.1 创建数组 js中数组有两种创建方式：利用new创建数组利用数组字面量创建数组 **1、new**创建数组 // 创建一个.

2021-03-24 19:19:36 230

原创 js之流程控制

5、流程控制流程控制就是来控制我们的代码按照什么结构顺序来执行流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码的执行顺序 5.1 顺序结构顺序结构是程序中最简单、最基本的流程控制，他没有特定的语法结构，程序会按照代码的先后顺序，依次执行 5.2 分支流程控制从上到下执行代码的过程中部，根据不同的条件，执行不同路径的代码，从而得到不同的结果 1、if语句 if、if else 、if else if 语句语法结构 // 条件成立（true）执行代码，.

2021-03-24 19:18:07 126

原创 js之运算符

4、运算符运算符也被称为操作符，用于实现赋值、比较和执行算数运算等功能的符号 js中常用的运算符有：算术运算符递增和递减运算符比较运算符逻辑运算符赋值运算符 4.1 算术运算符算术运算符用于执行两个变量或值的算术运算常见的有我们熟悉的：+（加）、-（减）、*（乘）、/（除），还有个取余 % 4.2 浮点数精度的问题浮点数的最高精度是17位小数，所以在进行算术计算时，其精度远远不如整数所以，有一个很经典的题目：0.1 + 0.2 为什么不等于 0.3 因为js引擎执行代码的时候，需.

2021-03-24 19:15:23 236

原创 js之变量和数据类型

在正式介绍js之前，我们先来了解一下编译型语言和解释型语言首先，计算机是不能直接读取我们的编程语言的，需要先通过翻译器将编程语言解析成二进制的机器语言翻译器翻译的形式有两种：一种是编译，一种是解析。两种方式之间的区别在于翻译的时间不同编译器：在代码执行之前，先通过编译器的编译，生成计算能读懂的二进制文件，之后每次运行该程序时，直接运行该二进制文件，而不需要再次重新编译解析器：在代码执行时解析，并立即执行，属于边解析边执行像C/C++ 、Java 、Go 都属于编译型语言，python、.

2021-03-23 20:03:22 550

原创杂说CSS

1、CSS初始化为什么初始化CSS呢？因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器页面在不同浏览器之间出现差异并且，多数浏览器会默认给初始页面添加上外边距简单的初始化页面 * { padding: 0; margin: 0; box-sizing: border-box; } 2、display 都有哪些值？ block、inline、inline-block、list-item、table 、 inherit 和 none bl

2021-03-23 19:59:25 182

原创 CSS3（二）

6、2D转换转换也是CSS3的特性之一，可以实现元素的位移translate、旋转rotate、缩放scale等效果所谓2D转换是指二维平面内进行转换 6.1 移动 transform:translate(x, y); /* 或者分开写 */ transform:translateX(n); transform:translateY(n); 注意： translate 不会影响到其它元素的位置，不脱标，但是会覆盖其它元素，类似相对定位 translate 百分比单位是相对自身的 transla

2021-03-23 19:58:35 185

原创 CSS3（一）

CSS3 就是最新的CSS标准，在原有的CSS基础上，新增了一些特性只要新增了三种选择器：属性选择器、结构伪类选择器、伪元素选择器，2D、3D转换、动画、盒子模型、过渡等 1、属性选择器属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助类选择器或 id选择器了就是我们可以自己给标签定义的属性、属性值，不要依靠类选择器和id选择器了 2、结构伪类选择器注意： nth-child 对父元素里面所有的孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配 nth-.

2021-03-23 19:55:15 102

原创 CSS基础（三）

11、界面样式常见的界面样式：更改用户的鼠标样式表单轮廓防止表单域的拖拽解决图片或表单问题溢出操作 11.1 鼠标样式 cursor li { /* 小手样式 */ cursor: pointer; } 设置在对象上移动时的鼠标样式： default：小白（默认） pointer：小手 ``move：`：移动 text：文本 not-allowed：禁止 11.2 轮廓线 outline 给表单添加 outline:0 或 outline:onne 样式后，就可以去掉默认的蓝

2021-03-22 19:42:49 446

原创 CSS基础（二）

8、背景和阴影 8.1 背景 1、背景颜色 background-color:颜色值; 默认值是 transparent 2、背景图片 background-image: url('...'); 3、背景平铺当图片面积小于盒子的时候，图片就会自我复制，然后平铺整个盒子，我们可以利用 background-repeat 来设置是否平铺 background-repeat: repeat | no-repeat | repeat-x | repeat-y repeat：平铺，默认值 no-rep

2021-03-22 19:42:09 147

原创复盘之html5

HTML5是最新的HTML标准，是万维网联盟（W3C）和网络超文文本应用工作组（WHATWG）合作输出的。目前高版本浏览器已经可用了，但是低版本浏览器未支持 HTML5 的文档类型是 <! doctype html> 1、新增的语义化标签 <header>：页眉，即为头部标签 <nac>：导航栏标签 <article>：内容标签 <section>：定义文档某个区域 <aside>：侧边栏标签 <footer>：页脚.

2021-03-22 18:42:35 94

原创 CSS基础（一）

1、CSS 是什么即层叠样式表，HTML负责结构，而CSS则美化HTML，添加各种样式如：宽高间隔、大小颜色、动画及其他装饰效果 2、引入方式引入方式共有三种：行内样式：写在标签元素里面，以 style="" 形式，优先级最高（不推荐，显得太过于复杂）内联样式：写在 <style></style> 这对标签中，样式少的话直接写在这里外联样式：写在.css文件中，然后用 <link src=""> 引入样式（推荐，不过还有@import） link 与 @.

2021-03-22 18:38:58 191

原创复盘之html

html 即超文本标记语言，其中，超文本是指连接单个网站内或多个网站间的网页的链接切记：html 不是编程语言，它只是一种标记语言 1、基本的结构标签 html 中的基本结构标签是指页面中的最基本的标签，也称为骨架标签，包括 <html>、<head>、<title>、<body> 其关系为： <html> <head> <title> 骨架结构 </title> </head> .

2021-03-21 17:22:23 138