- 博客(131)
- 资源 (5)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 RegExp 误用解析
JS 中创建正则表达式有两种写法：// 第一种写法var regExp = /hello/;regExp.test('hello world'); // true// 第二种写法var regExp = new RegExp('hello');regExp.test('hello world'); // true本文要说明的是 RegExp 使用时要注意的问题，R...
2020-02-08 12:59:18
467
原创 设计模式
以下为个人理解，有问题可以评论沟通简单工厂模式对多个类创建的封装，使用时只需要传入类型信息，无需关心实现细节。外部关注点：各种类型工厂方法模式仅定义具体相同特征类的接口，对接口的实现交给具体场景外部关注点：类的接口实现抽象工厂模式将具有相同特征类的一组接口进行封装提供出去外部关注点：对类一组接口的实现建造者模式通过内部 builder 对象封装类内部...
2020-01-20 14:20:20
254
原创 设计模式基本原则
单一职责原则一个类应该只有一个发生变化的原因里式替换原则子类都可以代替基类出现依赖倒置原则针对接口编程，依赖于抽象而不是细节接口隔离原则使用多个合理拆分的接口，而不是使用单个耦合的接口开闭原则对扩展开放，对修改关闭迪米特原则一个类应该尽量少的得知其他类的细节合成-聚合复用原则尽量使用合成聚合复用的方式，而不是使用继承参考文档：https...
2020-01-19 14:26:56
262
原创 CSS 画圆环
画圆环思想很简单：首先画两个圆，设置不同的背景色；然后让两个圆的圆心重合即可。难度系数☆☆HTML<div class="container"> <span class="ring-style"></span></div>解析：此处有父容器CSS.container { position: rela...
2019-12-22 18:27:50
3146
1
原创 CSS实现地图中定位的波动效果
地图中的定位效果：看到这么酷炫的效果，你是不是很想知道是怎么做到的？Step 1创建一个container div，并选取一张地图背景图片，CSS设置如下：#container { position:relative; width: 600px; height: 500px; background: url(map.jpg);}这里有...
2019-10-30 00:38:00
1418
原创 灵活使用 border-radius
border-radius 是一个复合 CSS 属性，其包含的简单属性为： border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius border-top-left-radius 定义 ...
2019-10-30 00:27:50
361
原创 CSS 绘制三角形
Step 1一般我们使用border时是这样的：#border-style { width: 50px; height: 50px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-bottom:...
2019-10-30 00:16:15
157
原创 漫天纷飞“流星雨”
本文通过CSS的简单应用实现了流星雨的效果。正文只讲述单个流星雨的实现方式，多个的效果只需要对单个的动画起始点、宽度稍加修改即可，具体示例见文末github地址。难度系数☆☆☆☆☆效果图思路流星雨的实现分为三部分：（1）用border属性实现直角三角形。三角形的实现可以参考 CSS绘制三角形（2）给直角三角形添加圆形效果，弱化直角形状的棱角（3...
2019-10-27 01:15:29
386
原创 webpack 项目添加单元测试
本例使用 karma、mocha、chai 为 webpack 项目添加单元测试。其中，karma 是测试过程管理框架，mocha 是运行测试用例的框架，chai 是单元测试断言库。下面一步步开始实践吧：1、项目目录src：源代码目录 test：测试用例目录 unit：测试文件目录 cases.js：测试用例入口文件 karma.conf.js：karma 配置文件 2...
2019-10-20 22:31:19
706
原创 加载动画之线条伸缩
难度系数☆☆☆效果图思路通过 3 个线条高度的动态变化实现加载动画，为了突出效果，给线条增加了阴影。对动画而言，@keyframes 和 animation 是必不可少的技巧。同时本例中使用了 first-child 和 nth-child 选择器，用于给特定位置的元素添加其特有的动画属性。HTML<div class="loading-container"&g...
2019-08-27 22:46:28
397
原创 图片亮度变化动效
难度系数☆☆效果图思路（1）CSS 动画效果依赖于以下知识点的掌握：animation 属性 @keyframes 自定义动画规则（2）图片亮度变化需要用到 filter 属性的 brightness 方法。brightness 的介绍如下：brightness 会给 DOM 元素应用亮度的线性变化效果 其值为百分数时，如果值是 0%，图像会全黑；值是 100%，...
2019-08-20 00:26:47
716
原创 鼠标经过放大元素
如题，这是一种访问网页时经常会出现的效果。当鼠标经过某一图片或某一容器时，对应元素会有一个放大的动画，有木有好奇这是怎么实现的？那就继续往下看吧！难度系数☆☆☆效果图思路本文用到的动画效果不是自定义 @keyframes 了，而是 CSS 的 transition 属性。transition 属性用来设置元素变化的过渡效果。例如：元素正常宽度是 100px，鼠标...
2019-06-30 11:19:09
1819
原创 加载动画之菊花旋转
写在前面的话“读书破万卷”，不仅仅在于“万”，更重要的是要“破”。给大家推荐一本书《远见》，对于即将步入职场或者正在职场拼搏的你来说，值得一看！看到目前很多网站的加载效果用的是 gif 图片，于是很好奇了，仅仅用 CSS 怎么实现呢？干货来袭，请接招。难度系数☆☆☆☆效果图思路CSS 用于修饰 HTML，所以即便是再简单的效果，都是要依赖于 HTML 的，而本例效果...
2019-06-23 12:22:06
1086
1
原创 macOS 有很大磁盘空间还是安装不了 Xcode
系统版本：macOS 10.14.5升级 Xcode 时 App Store 一直提示磁盘空间不足，删了好多文件发现还是没有解决问题。去网上查找到解决方案，大致意思是 macOS 系统在10.14.4 之后的版本，APFS 磁盘格式的 TimeMachine 快照错误，需要执行以下命令压缩磁盘空间：tmutil thinlocalsnapshots / 9999999999999999...
2019-06-02 19:28:33
13869
4
原创 Uglify 压缩特定规则方法名、变量
UglifyJS 压缩特定规则的方法名、变量时，需要配置 mangle 属性。以 webpack 插件为例：config.optimization.minimizer.push( new UglifyJsPlugin({ ***, uglifyOptions: { ***, mangle: { ...
2019-05-27 18:20:12
1855
原创 shell 命令集锦
获取当前日期date=`date +%Y%m%d`获取前一天日期date=`date +%Y%m%d -d "-1 day"`获取当前小时数hour=`date +%H`获取前一小时数hour=`date +%H -d "-1 hour"`获取当前分钟数minute=`date +%M`获取前一分钟数minute=`date +%M -d "-1 min...
2019-05-24 14:26:40
249
原创 高效使用 google
google 搜索信息时有以下几点技巧，更加准确地到达目的地址：google 规则 google 默认空格为加号，所以即便是连续的几个单词，google 也会去分别搜索每个单词对应的信息 精确匹配词组 引号。如：“CSS skills” 筛选信息 减号。如：“big apple” - “phone” 广泛匹配 星号。如：“useful JS skills *” ...
2019-05-12 17:55:42
145
原创 多图滚动切换
写在前面的话之前写多图切换时有童鞋建议多写写动画效果，也想和大家多多分享的，怎奈想象力不足，一直没找到合适的效果。最近在网上无意看到了一个多图滚动切换的效果，感觉看起来不错，遂写下来和大家分享一下。思路动画效果技术上严格依赖于以下几点，请大家熟练掌握，然后看下文就比较好理解了 transform 属性 animation 属性 @keyframes 自定义动画规则 本文...
2019-04-27 19:24:29
850
2
原创 按钮大小变化动效
我们经常会看到有的网页上按钮由大变小、再由小变大，这样不停变化的情况。今天就来和大家介绍如何实现这种效果。首先将效果的实现过程分为两个阶段： 第一阶段，按钮由大变小； 第二阶段，按钮由小变大。说到这里，有没有联想到 CSS3 的自定义动画规则 @keyframes，是的，通过 @keyframes 就可以实现两个动画阶段的控制。而按钮大小变化的效果，可以通过 C...
2019-03-25 21:33:13
2999
原创 CSS 实现向右导航 icon
对于看过CSS绘制三角形的童鞋来说，实现向右导航 icon 很好理解，可能大家稍加即可知晓实现方式。是的，只需要设置一个元素的相邻 border，之后旋转一下即可。HTML<span id="right-arrow"></span>CSS#right-arrow { display: inline-block; width: 17px;...
2019-02-23 18:46:09
951
原创 CSS 实现关闭 icon
关闭 icon 有两条线组成，所以很简单的设想就是两条横线，分别旋转不同角度即可。HTML<span id="close"></span>CSS#close { display: inline-block; width: 23px; height: 2px; background: red; transform: ...
2019-02-23 18:26:27
2328
原创 媒体查询实现响应式布局
本文主要介绍 @media 查询的使用。通过媒体查询，在不同的屏幕尺寸下，可以设置不同的样式。以此，可以完美解决不同屏幕适配的问题。话不多说，先来看看效果：CSS@media screen and (max-width: 400px) { .btn { background-color: lightblue; }}@media screen and (min-width...
2019-01-22 22:57:55
3174
原创 app 图标右上方消息计数
突发奇想，实现了一下手机 app 图标右上方的消息计数功能。效果类似我们平时在手机上看到的消息计数，如下图：实现思路很简单：首先创建一个模拟 app 图标的 div 元素，设置宽度高度和圆边框；之后给该 div 元素设置 ::after 伪元素，用作消息计数；这里需要给伪类设置宽度高度、圆边框、背景颜色、字体颜色，关键在于基于 div 元素的宽度高度设置伪类的位置。HTML<...
2018-10-28 21:36:17
1084
原创 crontab 定时任务执行 python 脚本提示三方模块找不到
问题描述：linux 命令行手动执行 python 脚本，任务执行没有任何成功；将 python 脚本执行添加到 crontab 定时任务中执行，提示第三方模块找不到？解决方法：（1）在 linux 命令行输入 python 命令（2）在 python 可执行环境输入：>>> import sys>>> sys.path（3）上述命令...
2018-10-18 16:52:14
3404
1
原创 清理 VMWare 占用的磁盘空间
Mac 机器磁盘存储空间不够了，发现 VMWare 占用了 60多G，进入虚拟机发现有 30多G 根本没有使用，果断清理空间。步骤很简单（截图为 Mac 示例）：1. 关闭虚拟机2. 打开菜单栏 VMWare Machine -> setting3. 打开 General4. 点击右下方按钮 Clean Up Virtual Machine ...
2018-10-10 16:57:12
4539
1
原创 Android Studio 安装后第一次运行报错
机子新装了 Android Studio，第一次运行，出现下面的报错：报错原因重点在于画红框部分，是因为机器上没有配置 classpath 环境变量。Android Studio 是依赖于 JDK 和 JRE 的，所以安装 Android Studio 之前需要安装好 JDK、JRE，并且需要配置好相关环境变量。--------------------JDK 和 JRE 环...
2018-10-08 20:36:24
2162
原创 CSS 实现对号效果
实现对号效果，一种思路是利用现成的符号，直接在网上搜索到√，插入页面。另一种思路是本文要介绍的用 CSS 实现，思路是： 给块级元素设置宽度和高度 设置元素相邻的两个 border 旋转元素 HTML<divclass="check-style-unequal-width"></div>解析： 此处需要使用块级元素 ...
2018-09-23 21:51:44
18283
原创 NodeJS 实现可下载文件的 URL
如题，有时我们需要在后端创建一个可下载文件的 URL，在 NodeJS 中实现如下： // The must headers. res.setHeader('Content-type', 'application/octet-stream'); res.setHeader('Content-Disposition', 'attachment;filename=aaa.t...
2018-09-12 00:14:27
5210
原创 node 出错 core 文件调试
调试目标找到 core 文件中 JS 调用堆栈，从而结合代码找出致错原因调试工具调试 node 程序问题导致的 core 文件，需要用到 lldb 和 llnode，llnode 是基于 lldb 的一个插件。lldb 是一个类似 gdb 的调试器，llnode 主要用于输出 js 调用栈信息。具体安装步骤请参考 https://github.com/nodejs/llnode。 ...
2018-07-12 20:59:01
3071
原创 纯 CSS 实现图片轮播
理论基础CSS3 animation 属性和 @keyframes 规则主体思想准备相同大小的多个图片 将要展示图片横排放在一个图片容器里面 在图片容器外再加一个展示容器，展示容器大小为图片大小 给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值注意事项动画效果分为切换和停留两部分 自定义动画阶段与图片数量相关 动画各阶段偏移值与图片大小相关 本文中示例最后一个...
2018-05-27 13:07:32
101466
55
原创 Mac 快捷键
一般快捷键移动窗口：按住窗口上侧拖动显示桌面：张开拇指和其他三指打开启动台：捏拢拇指和其他三指拷贝：command + c粘贴：command + v剪贴文件：单指按住文件拖拽剪贴文本：command + x 保存文件：command + s查找：command + f (+ shift 全局查找)关闭当前程序/文件：command + w退出当前程序：command + q删除文件：comman...
2018-05-16 20:24:33
264
原创 CSS position 定位
近期在找工作，发现 position 定位相关问题提到的比较多，包括自己之前参加公司面试，也会问到一些 position 定位相关问题，可是往往有将近一半的人不能够对 position 有一个清晰明确的描述。于是决定在这里把 position 属性介绍一番。定义规定元素的定位类型。属性值static：默认值。元素按照正常文档流呈现。absolute：生成绝对定位的元素，该元...
2018-04-27 23:19:59
310
原创 CSS 优先级
优先级顺序（由高到低）!important内联样式ID选择器类选择器，属性选择器，伪类标签选择器，伪元素通配选择符，关系选择符，否定伪类 举例如下： id 选择器：#my-id 类选择器： .my-class 属性选择器： [type=”button”] 伪类选择器： :hover, :link 标签选...
2018-03-03 16:59:32
431
原创 VSCode 配置 Sonar Lint
写在前面的话：本文讲解如何在 VSCode 中关联并应用已配置好的 Sonar Lint 规则。因此，本文前提是 Sonar Server 已经被配置完备。本文仅针对 VSCode 插件 SonarQube：本文所指配置文件均是为了在 VSCode 中应用 Sonar Lint 规则而添加的 SonarQube 插件识别的配置文件。-------------
2018-02-04 22:07:03
11613
2
原创 transform 属性之 matrix 实例
不了解 transform 属性的 matrix 方法怎么使用？没关系，请先看这三篇文章： - transform 属性之简单变换方法 - transform 属性之 matrix 方法其一 - transform 属性之 matrix 方法其二matrix 回顾matrix 定义matrix(a, b, c, d, tx, ty)matrix 转换公式 x’ =
2018-01-24 21:33:17
1236
原创 transform 属性之 transform-origin
定义 transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。语法 transform-origin: x-axis y-axis z-axis 名称 值 描述 x-axis 位置（left、center、right）/ 百分数 / 数值 x 轴基点坐标 y-a
2018-01-11 22:54:04
14450
5
原创 transform 属性之 matrix 方法其二
本文为解析 transform 属性系列的第三篇，解析 matrix 方法的第二篇，重在介绍通过 matrix 方法实现 rotate 和 skew 之细节。
2017-12-29 17:29:10
850
原创 transform 属性之 matrix 方法其一
本文为解析 transform 属性系列的第二篇，第一篇详细介绍 2D 转换方法 translte、rotate、scale 和 skew，不了解的童鞋请先移步至上一篇，不然对本篇理解起来会有些困难。本篇重点介绍 2D 转换方法 matrix。相对于一般 CSS 的应用来讲，matrix 算是一个 ** 了，这里边涉及到的数学概念较多，对于一些概念不清楚的读者，还望仔细上网查阅。前方高
2017-12-28 22:20:37
2235
原创 transform 属性之简单变换方法
本文是解析 transform 属性系列的第一篇。定义transform 属性用于给元素应用 2D 或 3D 变换。通过该属性，我们可以对元素进行旋转、缩放、移动或倾斜。语法 transform：none | transform-functions;2D 转换2D 转换常用的方法如下：translaterotatescaleskewmatri
2017-12-28 21:45:55
2635
要做一个有关大学生的实践教学平台，大家有什么意见或者建议没有？
2014-12-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人