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

阅读全文

在小程序中使用CSS预处理器

该来的一天还是来了,两年前立的Flag还是到了,现在在跟进项目配套的小程序开发,但对于写惯了 Stylus 的我,真的是太煎熬了,每次都忘记写冒号和分号…
所以就想着翻翻开发文档看 .wxss 支持不支持CSS预处理器的写法,比如 SCSS。明显这是不可能的,官方也没有计划支持,所以还是得自己动手。

大概看了一下大家的解决方案,和我想的一样,使用 Gulp 来自动化构建成 .wxss 文件。

阅读全文

项目中的类型和状态管理

这段时间项目迭代比较快,所以很多时候对于记录的状态和类型判断我都是使用的 魔术字符串 的形式,但是这样就与代码形成了 “强耦合”, 不利于后期的维护

例如这样的代码结构:

<!-- 用vue template来举例 -->
<template>
    <table>
        <!-- 其它结构 -->
        <td>
            <!-- 直接使用状态值判断 -->
            <a @click='xxx' v-if='record.status === 0'>操作A</a>
            <!-- 使用数组下标判断 -->
            <a @click='xxx' v-eles-if='record.status === status[1].key'>操作B</a>
            <a @click='xxx' v-else'>其他操作</a>
        </td>
        <!-- 其它结构 -->
    </table>
</template>

特别是最近一整个分类的类型和状态的都变更了,所以在业务逻辑内的魔术字符串也需要一个一个文件去同步修改,大部分的都被替换了,但还有一些零碎的地方没有被修改到,导致不断有 BUG 被提上来,这就很头疼了。

所以我就想者怎么把业务逻辑内的魔术字符串使用一种方式替换掉,最开始我想法是把状态集中起来进行管理

阅读全文

Symbol() 是个什么东西?

最近在一些 Demo 中经常会看到 Symbol() 这个东西,例如:

var race = {
  protoss: Symbol(),
  terran: Symbol(),
  zerg: Symbol()
}

就只能记得大概了,就是赋值一个独特的值,但是这个值具体是什么我想不起来了。
所以还是记个笔记加深下印象,省的看了又忘。

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型

阅读全文

ES6 中的 新数据结构 Set & Map

今天在一个需求里边遇到一个使用 MAP 数据结构的场景,就去解了一下 ES6 的新数据结构

ECMAScript 6 内提供了 4种 新结构 Set, WeakSet, Map, WeakMap,虽然已经是5年前的知识了,但是对于我来说还是新🤣

本来想先聊 Map 的,但是仔细看了阮一峰老师的文章之后发现,确实是要从 Set 开始讲

阅读全文

VueJS中 v-bind 的一些修饰符

今天洗澡的时候在听 饥人谷的模拟面试 (五) 的时候,一直觉得这次面试的学生有点差,如果是我来面话可能已经让他回家了,但是 方方老师 很有耐心,在中间问道 .sync 的时候我 ???? 完全没有印象了。

正好已经有2个月没有更新了,所以复习一下 v-bind 的三个修饰符 [ .prop, .camel, .sync ]

阅读全文

Vue 使用 ref 注册组件的特性

一直以来,我对于 VueJS 中对于使用 ref 注册的组件,在使用 $refs 调用时,为什么有时候是一个 DOM元素/组件实例,是时候会是一个实例数组

所以在很长一段时间内我觉得 ref 注册的的组件在使用 $refs 调用时有很大的不确定性,虽然我的弹窗组件一直都是用的 $refs.modal.open() 来打开的。

直到前一段时间,我在一个场景下想在 v-for 循环渲染的组件下 slot 模板中想使用 ref 注册成一个实例集合来调用时,发现怎么样重写返回的都只是一个组件实例,而不是一个组件实例集合。

所以有了这样一篇笔记。

阅读全文

JavaScript 中的 this 指向问题

今天在群里看到大家在讨论一个问题,就是 this 的指向,并且牵扯到了 letconst 的变量提升,比如说在全局顶部声明的 let 变量能否挂载到 window 下之类的。
还是老流程,先讨论第一个问题,然后再开始牵扯到后续的展开。

this 指向大概分为两种,普通函数内的 this 和 箭头函数内的 this,箭头函数内的 this 其实挺好理解的,主要是因为各种 call()apply()bind()new 影响下的 this 指向问题。

阅读全文