聊聊数据大屏 “炫酷” 容器边框的实现

最近大屏又开始火了,群里好多人又开始捡起来了数据可视化,我也一样遇到了新得是数据可视化项目,但是这次不是说 ECharts,而是数据大屏上的所谓 “科技感” 容器,比如下图:

预览图

可以看到很多的边框,虽然说可以直接让 UI 小姐姐 切给我们出来所有不同规格的背景图片来解决问题,但是就需要 UI 一份一份切给我们,就很麻烦,而且占用首屏加载的资源。
我就想是否可以用一些精灵图来完成,或者一些简单的边框可以直接使用一些 CSS 的奇技淫巧来完成。

我从花瓣上找了一些示例,然后通过CSS复现,接下来上实例

阅读全文

CSS 中的遮罩属性 mask/masks

最近有点忙,导致回到家根本不想写东西,于是又咸鱼了一个月😂,前两天在 V2 上看到 一个帖子,需求是要做一个镂空遮罩。

回答的过程中想起来有一个 mask 属性来着,好像可以试试,但是快下班了,也没有找到合适的遮罩图,也不想打开PS自己画一个再传图床,就还是用的 clip-path 做了一个 CodePen Demo
这两天稍微有点时间,可以考虑研究一下这个遮罩属性,以及能否搭配 filter:drop-shadow() 使用。

阅读全文

在 Flex 布局中使用 gap 属性

最近在更新博客的样式,突然想到现在的flex布局已经可以定义间距了,所以大概整理了一下关于gap这个新属性资料。

gap 属性是用来设置网格行与列之间的间隙(gutters),该属性是 row-gapcolumn-gap 的简写形式。

起初是在 Grid 布局中用 grid-gap 来设置行间距和列间距的,后来意识到 Multi-column 布局中有一个 column-gap 属性,同时存在 grid-column-gapcolumn-gap 对于开发者来说是一个很疑惑的问题。并且在大范围应用的 Flex 布局中,并没有一个很好的方法来设置行间距和列间距。

于是CSS齐属属性规范开始调整,gap 代替了grid-gap 属性,并且规范对间隙属性进行了大统一,三种布局只需要使用 gap 属性就可以设置间距样式了。

阅读全文

Hexo 主题开发

去年就开始说要更新博客主题了,拖到现在终于有点空闲时间和动力了,相信大家已经使用过 Hexo 了,安装之类的我都不多废话了,直接开始。

想要自定义一个 Hexo 主题大概需要了解一个 模板引擎,Hexo 内置了 Swig,我所用的是默认安装的 EJS,反正都差不多,都提供了一些模板语法,书写还是按照Js的方法来的。
然后先按照文档创建完主体目录结构和模板组件,就可以开始开发了,我比较偷懒没有使用 yeoman + generator-hexo-theme 来创建,直接复制了原先的 landscape 主题。

哦,对了!还要选择一个CSS预编译器,我还是没有选择适用了默认安装的 Stylus,你也可以按照习惯去安装,并且 install 对应的 Hexo 插件。

阅读全文

原型链! __proto__ 与 prototype

Every JavaScript object has a second JavaScript object (or null ,but this is rare) associated with it. This second object is known as a prototype, and the first object inherits properties from the prototype.
每个 JavaScript 对象都会对应一个原型对象(除了 null),并从原型对象继承属性和方法。
JavaScript 权威指南

一句话解释:对象 __proto__ 属性是JS内置的,它所对应值是原型对象的 prototype ;而 prototype 就是你自己写的原型属性、方法 加上 JS原型内置的属性、方法

阅读全文

JS中的 new 关键字做了什么?

new 运算符 创建 一个用户定义的 对象类型 的实例或 具有构造函数的内置对象 的实例。

完整的了解 new 运算符你可能还需要了解一下 面向对象思想 以及 原型链,可以简单查看这篇笔记 👉 原型链! __proto__ 与 prototype

如果快速的了解 new 关键字按照MDN的文档描述来说就是:

  1. new关键字会创建一个空的简单JavaScript对象(即 {});
  2. 链接该对象(设置该对象的 constructor)到另一个对象 (绑定原型);
  3. 步骤1 新创建的对象作为 this 的上下文 ;
  4. 如果该函数没有返回对象,则返回 this

可以简单理解成 new 关键字帮我们处理了书写构造函数时一些固定的步骤

阅读全文

ES6 中的数组拓展方法 flat() & flatMap()

之前有使用过 flat() 方法,但是一直不知道 flatMap() 方法,在使用 map() 方法组装集合的时候,在组装完成之后还要链式调用一下 flat(),如果可以知道 flatMap() 代码还能精简一点,也方便递归返回的数组内容。

本来是上个月发现的,但隔了一个月才有时间写,已经想不起来当时怎么发现的 flatMap() 这个方法了…
就直接跳过前置场景,直接开始聊这两个扩展方法吧。

阅读全文

VueJS 的过滤器 filter API

一直没有怎么用过 Vue 的 过滤器 API,都是直接用 AntD Pro 当中提供的数字千分格式化、时间格式化之类的,没有自己去声明过,主要是因为 Array.prototype.filter 的先入为主,一直把 vue.filter 理解成为了筛选,而不是过滤器。

其实,vue.filter 是借鉴了 Linux 当中的 Pipe 符号 (|) 来处理数据 ,然后借用了 filter 这个名字:

利用 Linux 所提供的管道符 “|” 将两个命令隔开,管道符左边命令的输出就会作为管道符右边命令的输入

其实我觉得如果直接用 pipe 来命名其实就更好理解了,但是也许是因为前端圈子接触到 pipe 的人并不多,使用 filter 这个熟悉的单词可能更加容易让大众接受。

使用起来确实很方便,用 | 符号分隔就行,会按照 从前往后的顺序 依次 传入过滤器,然后返回转换后的值。

等到后来再遇到适合的场景想起来使用 filter ,但又因为项目的历史原因没有去使用,因为自己都是局部使用 computed计算方法调用返回 来处理(也是Vue3所推荐的替代过滤器的方式

阅读全文

CSS 选择器权重和优先级

群里突然又聊到了CSS样式的权重,这个话题每隔一段时间就会出现一次,但是每次都去搜索找选择器权重的文章分享有点太麻烦了,
主要是配图,想要找到自己记忆里的那张图真的很麻烦😂,所以还是自己整理一篇,以后直接分享自己的笔记就好了。
其实权重计算这个东西不麻烦,就是分 4 类:

  1. inlineStyle: 行内样式
  2. #ID: ID选择器
  3. .Class: 类,属性和伪类选择器
  4. Element: 元素和伪类元素选择器

简单的权重比较 inline style > ID > Class > Element > * 这个应该不需要说了吧,主要是多个选择器混合使用时计算的问题。

阅读全文

JavaScript 中的位运算符

在思否上遇到一个问位运算符的问题 字符串的位运算,是怎么执行的,我也挺好奇的,就是为啥字符串进行位运算的时候返回的结果是 0,索性在解答这个问题的同时把位运算符都整理一遍。

那么先来整理一下位运算符,最后再说明为什么字符串的处理结果为 0

阅读全文