RegExp 误用解析 JS 中创建正则表达式有两种写法：// 第一种写法var regExp = /hello/;regExp.test('hello world'); // true// 第二种写法var regExp = new RegExp('hello');regExp.test('hello world'); // true本文要说明的是 RegExp 使用时要注意的问题，R...
设计模式 以下为个人理解，有问题可以评论沟通简单工厂模式对多个类创建的封装，使用时只需要传入类型信息，无需关心实现细节。外部关注点：各种类型工厂方法模式仅定义具体相同特征类的接口，对接口的实现交给具体场景外部关注点：类的接口实现抽象工厂模式将具有相同特征类的一组接口进行封装提供出去外部关注点：对类一组接口的实现建造者模式通过内部 builder 对象封装类内部...
设计模式基本原则 单一职责原则一个类应该只有一个发生变化的原因里式替换原则子类都可以代替基类出现依赖倒置原则针对接口编程，依赖于抽象而不是细节接口隔离原则使用多个合理拆分的接口，而不是使用单个耦合的接口开闭原则对扩展开放，对修改关闭迪米特原则一个类应该尽量少的得知其他类的细节合成-聚合复用原则尽量使用合成聚合复用的方式，而不是使用继承参考文档：https...
CSS 画圆环 画圆环思想很简单：首先画两个圆，设置不同的背景色；然后让两个圆的圆心重合即可。难度系数☆☆HTML<div class="container"> <span class="ring-style"></span></div>解析：此处有父容器CSS.container { position: rela...
CSS实现地图中定位的波动效果 地图中的定位效果：看到这么酷炫的效果，你是不是很想知道是怎么做到的？Step 1创建一个container div，并选取一张地图背景图片，CSS设置如下：#container { position:relative; width: 600px; height: 500px; background: url(map.jpg);}这里有...
灵活使用 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 定义 ...
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:...
漫天纷飞“流星雨” 本文通过CSS的简单应用实现了流星雨的效果。正文只讲述单个流星雨的实现方式，多个的效果只需要对单个的动画起始点、宽度稍加修改即可，具体示例见文末github地址。难度系数☆☆☆☆☆效果图思路流星雨的实现分为三部分：（1）用border属性实现直角三角形。三角形的实现可以参考 CSS绘制三角形（2）给直角三角形添加圆形效果，弱化直角形状的棱角（3...
webpack 项目添加单元测试 本例使用 karma、mocha、chai 为 webpack 项目添加单元测试。其中，karma 是测试过程管理框架，mocha 是运行测试用例的框架，chai 是单元测试断言库。下面一步步开始实践吧：1、项目目录src：源代码目录 test：测试用例目录 unit：测试文件目录 cases.js：测试用例入口文件 karma.conf.js：karma 配置文件 2...
加载动画之线条伸缩 难度系数☆☆☆效果图思路通过 3 个线条高度的动态变化实现加载动画，为了突出效果，给线条增加了阴影。对动画而言，@keyframes 和 animation 是必不可少的技巧。同时本例中使用了 first-child 和 nth-child 选择器，用于给特定位置的元素添加其特有的动画属性。HTML<div class="loading-container"&g...
图片亮度变化动效 难度系数☆☆效果图思路（1）CSS 动画效果依赖于以下知识点的掌握：animation 属性 @keyframes 自定义动画规则（2）图片亮度变化需要用到 filter 属性的 brightness 方法。brightness 的介绍如下：brightness 会给 DOM 元素应用亮度的线性变化效果 其值为百分数时，如果值是 0%，图像会全黑；值是 100%，...
鼠标经过放大元素 如题，这是一种访问网页时经常会出现的效果。当鼠标经过某一图片或某一容器时，对应元素会有一个放大的动画，有木有好奇这是怎么实现的？那就继续往下看吧！难度系数☆☆☆效果图思路本文用到的动画效果不是自定义 @keyframes 了，而是 CSS 的 transition 属性。transition 属性用来设置元素变化的过渡效果。例如：元素正常宽度是 100px，鼠标...
加载动画之菊花旋转 写在前面的话“读书破万卷”，不仅仅在于“万”，更重要的是要“破”。给大家推荐一本书《远见》，对于即将步入职场或者正在职场拼搏的你来说，值得一看！看到目前很多网站的加载效果用的是 gif 图片，于是很好奇了，仅仅用 CSS 怎么实现呢？干货来袭，请接招。难度系数☆☆☆☆效果图思路CSS 用于修饰 HTML，所以即便是再简单的效果，都是要依赖于 HTML 的，而本例效果...
macOS 有很大磁盘空间还是安装不了 Xcode 系统版本：macOS 10.14.5升级 Xcode 时 App Store 一直提示磁盘空间不足，删了好多文件发现还是没有解决问题。去网上查找到解决方案，大致意思是 macOS 系统在10.14.4 之后的版本，APFS 磁盘格式的 TimeMachine 快照错误，需要执行以下命令压缩磁盘空间：tmutil thinlocalsnapshots / 9999999999999999...
Uglify 压缩特定规则方法名、变量 UglifyJS 压缩特定规则的方法名、变量时，需要配置 mangle 属性。以 webpack 插件为例：config.optimization.minimizer.push( new UglifyJsPlugin({ ***, uglifyOptions: { ***, mangle: { ...
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...
高效使用 google google 搜索信息时有以下几点技巧，更加准确地到达目的地址：google 规则 google 默认空格为加号，所以即便是连续的几个单词，google 也会去分别搜索每个单词对应的信息 精确匹配词组 引号。如：“CSS skills” 筛选信息 减号。如：“big apple” - “phone” 广泛匹配 星号。如：“useful JS skills *” ...
多图滚动切换 写在前面的话之前写多图切换时有童鞋建议多写写动画效果，也想和大家多多分享的，怎奈想象力不足，一直没找到合适的效果。最近在网上无意看到了一个多图滚动切换的效果，感觉看起来不错，遂写下来和大家分享一下。思路动画效果技术上严格依赖于以下几点，请大家熟练掌握，然后看下文就比较好理解了 transform 属性 animation 属性 @keyframes 自定义动画规则 本文...
按钮大小变化动效 我们经常会看到有的网页上按钮由大变小、再由小变大，这样不停变化的情况。今天就来和大家介绍如何实现这种效果。首先将效果的实现过程分为两个阶段： 第一阶段，按钮由大变小； 第二阶段，按钮由小变大。说到这里，有没有联想到 CSS3 的自定义动画规则 @keyframes，是的，通过 @keyframes 就可以实现两个动画阶段的控制。而按钮大小变化的效果，可以通过 C...
CSS 实现向右导航 icon 对于看过CSS绘制三角形的童鞋来说，实现向右导航 icon 很好理解，可能大家稍加即可知晓实现方式。是的，只需要设置一个元素的相邻 border，之后旋转一下即可。HTML<span id="right-arrow"></span>CSS#right-arrow { display: inline-block; width: 17px;...
关注
