Web
关注
分享
扫一扫
web
__anonymous_
Stay hungry, stay foolish.
展开
-
SASS 用法基础
变量$primary-color: #1269b5;$primary-border: 1px solid $primary-color; div.box { background: $primary-color;}h1.page-header { border: $primary-border;}选择器嵌套不用 sass 语法.nav { height: 100px;}.nav ul { margin: 0;}.nav ul li { float: left; l原创 2021-01-30 15:29:44 · 270 阅读 · 0 评论 -
React 记坑 ----- 关于 react-redux 中共享状态更新时自动重新 render 页面的问题
自动重新 render 的触发条件组件中的 render 方法内 return 部分使用了共享状态数据通过 reducer 改变了共享状态数据的值遇到的问题import { ADD_PERSON, DELETE_PERSON} from '../constant'export default function personReducer(preState = {personArr: []}, action) { const {type, data} = action let n原创 2021-01-25 21:42:28 · 727 阅读 · 0 评论 -
JavaScript 中的 this 与闭包详解
JavaScript 中的 this一、什么是 this ?在 JavaScript 中 this 关键字一般指的是 函数调用时 所在的 环境上下文 ，存储了 环境上下文对象的内存地址 ，根据函数的调用的方式不同 ，其 this 会指向不同的对象 ，我们可以通过 this 关键字在函数内部中操作其指向的对象 ，看看下面的例子。// 定义 person 对象var person = { name: 'momo', age: 18, gender: '男', say: function()原创 2020-12-12 15:12:13 · 488 阅读 · 0 评论 -
CSS知识点补充收集
光标变为手型cursor: pointer;消除按钮、表单获取焦点时出现的边框outline: none;让文字变为不可选取user-select: none;原创 2020-11-24 08:08:32 · 119 阅读 · 0 评论 -
JS助记 ----- 正则表达式
正则表达式的创建一个完整的正则表达式包含 pattern(模式) 和 modifiers(修饰符)，形如：/模式/修饰符var reg = /abc/g; // 表示在全局去匹配 'abc' 这个子串修饰符i 表示忽略大小写的匹配模式g 表示全局匹配模式基本用法// 全局匹配 'a' 或 'b' 或 'c' 这几个字符var reg = /a|b|c/g;var reg = /[abc]/;reg.test('defa'); // 返回 true，因为 'defa' 符合该正原创 2020-11-22 16:15:03 · 161 阅读 · 0 评论 -
JS小项目 ----- 可视化冒泡排序
效果图可视化冒泡排序HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-11-21 13:33:46 · 325 阅读 · 0 评论 -
JS记坑 ----- children返回的类数组
场景 通过父结点.children获取到了父结点的所有子结点的类数组，我想在这个类数组中swap元素，然后再通过这个交换了部分元素的类数组重新渲染父结点下的所有子节点顺序的HTML结构。在实现了代码并且调试了多遍之后，发现这个类数组是无法修改的！解决办法 深拷贝这个类数组的元素，然后对这个拷贝数组进行操作。...原创 2020-11-18 23:09:53 · 879 阅读 · 2 评论 -
JS助记 ----- 盒子模型与获取元素样式
一、盒子模型简单介绍content-box默认的盒子模型，width 和 height 设置的是 content 的大小，有border和padding的情况下再额外增加盒子的宽高，整个盒子的大小由 border、padding、content 共同决定，border 和 padding 不会影响 content 的大小。border-box怪异盒子模型，width 和 height 设置的就是整个盒子的大小(除margin)，如果给元素设置 border 和 padding 就会挤压 conten原创 2020-11-18 19:52:10 · 256 阅读 · 1 评论 -
JS小技巧 ----- 遍历一个对象中所有属性
使用 Object.keys() 与 forEach()var person = { 'name': "莫莫", 'age': 20, gender: 0};// 将该对象所有属性名(string)依次保存在一个数组中var arr = Object.keys(person);// 遍历属性名，通过属性名来获取属性值arr.forEach((element) => { console.log(`${ element }：${ person[element]原创 2020-11-15 14:29:37 · 2441 阅读 · 0 评论 -
JS小技巧 ----- 关于 ... 运算符的使用场景
使用场景 关于 ... 运算符通常可以实现两种作用，分别是 聚合作用 和 扩展作用 ，一般会结合 ES6 的解构赋值语法使用聚合作用 位于等号左边，通过 ...变量名 可以将等号右边的 类数组 / 数组 的剩余的内容聚合给左边指定的变量// 右边数组的前两个元素赋值给了 a 和 b 变量，后面剩余的元素聚合为一个子数组赋值给 c 变量var [ a, b, ...c ] = [ 1, 2, 3, 4, 5, 6, 7 ]; // 将左边对象的 name 属性值赋值给右边的 name 变量，原创 2020-11-13 20:21:48 · 309 阅读 · 0 评论 -
JS小技巧 ----- 将类数组 / 字符串转为数组的几种方式
使用ES6的数组解构和扩展运算符// 假设 m 是一个类数组对象let [...arr1] = m; // 将类数组 m 转换为了 arr1 数组let arr2 = [...m] // 将类数组 m 转换为了 arr2 数组使用数组的slice()方法// 假设 m 是一个类数组对象let arr = Array.prototype.slice.call(m); // 将类数组 m 转换为了 arr 数组...原创 2020-11-13 19:56:05 · 391 阅读 · 0 评论 -
JS小技巧 ----- 在onmousedown事件下避免文本选取
场景在浏览器中，当我们长按鼠标左键后会开始选取文段，松开鼠标后再对着文本长按左键，就可以移动文本的副本到浏览器搜索栏中了。现在我们要通过JS实现长按元素来拖拽一个元素，但是当无意间选中文本只后，再来拖拽这个元素，会引起文本和元素一起移动，还会发生一些不合逻辑的拖拽异常。解决方式对拖拽元素的事件 onmousedown 的响应函数最后一行加上return false; 即可解决这个问题。...原创 2020-11-10 18:01:12 · 538 阅读 · 0 评论 -
JS记坑 ----- 在父节点中添加删除子节点
场景：通过javascript为ul标签内动态增删li标签，我通过liArr = ul.children;获取了ul的存有所有子元素的类数组，但是在appendChild()、insert()和removeChild()的过程中，发现这个liArr数组在动态变化，但是每次增删子元素的时候代码中并没有更新liArr的数据。自己的理解：在增删修改子元素的时候，其对应的类数组(ul.children)会随之动态变化，不用自己来更新数组的数据。代码：<script> var ul;原创 2020-11-03 17:44:58 · 910 阅读 · 0 评论 -
JavaScript内建对象 (一) ----- Array
文章目录1 数组的定义方式2 数组的基本用法2.1 添加元素2.2 获取与修改数组长度2.3 向数组尾部添加元素3 常用方法3.1 概览3.2 详解3.2.1 push()3.2.2 pop()3.2.3 unshift()3.2.4 shift()3.2.5 slice()3.2.6 splice()3.2.7 concat()3.2.8 join()3.2.9 reverse()3.2.10 sort()4 forEach()1 数组的定义方式var arr1 = new Array();var原创 2020-10-29 21:07:15 · 127 阅读 · 0 评论 -
css小技巧 ----- 使用border制作一个小三角形图标
css样式div { width: 0; height: 0; overflow: hidden; border-width: 7px; border-color: transparent transparent #10456b transparent; border-style: solid;}图标解释关于一个元素border的solid样式在一条边上实际上是一个梯型(当border的宽度足够大，并且给其余三条边设置为透明就能看出来)这里把div原创 2020-10-22 20:45:44 · 626 阅读 · 0 评论 -
移动Web开发 ----- Flex布局详解
文章目录1 Flex布局简介2 Flex布局基本概念3 容器属性3.1 display3.2 flex-direction3.3 flex-warp3.4 justify-content3.5 align-items3.6 align-content4 项目属性4.1 order4.2 flex-grow4.3 flex-shrink4.4 flex-basis4.5 align-self1 Flex布局简介Flex布局的出现是为了解决复杂的Web布局，这种布局很灵活，容器内的子元素可以任意方向进行原创 2020-10-17 16:55:51 · 181 阅读 · 0 评论 -
移动Web开发基础概念
1 像素1.1 分辨率以物理像素作为基准，不同设备的物理像素单位大小不同1.2 物理像素 (设备像素)物理像素只与设备有关1.3 CSS像素 (逻辑像素)实际开发中使用的像素1.4 设备像素比 (dpr)dpr = 物理像素 / CSS像素dpr = 2，表示1个 CSS 像素用 2x2 个设备像素来绘制1.5 标清屏和高清屏标清屏下(Standard)，一个 CSS 像素由一个物理像素描述，dpr = 1高清屏下(Retina)，一个 CSS 像素由 2x2 的原创 2020-10-13 22:04:25 · 248 阅读 · 0 评论