您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

通过一个算法来简化你的 css

时间:2020-06-17 18:36:38  来源:  作者:
通过一个算法来简化你的 css

 

一个巧妙的算法, 给冗长的类名瘦身。

这个算法出自 react-window 的 demo 页面。最早看到 medium 在使用这个效果,自己尝试过写算法,然而以性能巨差告终。

原理

它的原理是对 css-loader 的 getLocalIdent 提供一个定制的函数。提供 css-loader 的 modules.getLocalIdent :

{
  loader: require.resolve("css-loader"),
  options: {
    // ...,
    modules: {
      getLocalIdent: getLocalIdent,
    },
  },
},

getLocalIdent 代码如下:

// webpack loader 编写时的辅助函数
const loaderUtils = require("loader-utils");

// 纯字母
const allowedCharactersFirst =
  "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
// 字母、数字、中划线、下划线
const allowedCharactersAfter = allowedCharactersFirst + "0123456789-_";

// 忽略的 class
const blacklist = [/^ad$/];
// 用 Map 来存所有生成过的  key-value 对
const idents = new Map();

// indexes 是一个数字数组
// 第一个数字对应 allowedCharactersFirst 中的字母(css 类的首字符不能是数字,所以只从字母字符串中取)
// 后面的数字是从 allowedCharactersAfter 中对应的位置取,数字的范围是 0-63,刚好对应字符串的范围
// 比如 [ 3, 14, 61 ] => d o 8
let indexes = [0];

const getNextIdent = (key) => {
  // 从 map 中取到使用过的 idents
  const usedIdents = Array.from(idents.values());
  let ident = "";

  do {
    ident = indexes
      .map((i, arrIndex) => {
        // Limit the index for allowedCharactersFirst to it's maximum index.
        // 要注意:选择器首位不能为数字,所以从 allowedCharactersFirst 中选择一个字符
        const maxIndexFirst = Math.min(i, allowedCharactersFirst.length - 1);

        return arrIndex === 0
          ? // 如果是首位
            allowedCharactersFirst[maxIndexFirst]
          : // 如果不是首位,则使用 allowedCharactersAfter
            allowedCharactersAfter[i];
      })
      // 选出来的字符拼接成字符串
      .join("");

    let i = indexes.length;
    // 从 indexes 最后开始往前扫描
    while (i--) {
      // 加 1
      indexes[i] += 1;
      // 如果 indexes[i] 对 allowedCharactersAfter 越界了
      // 则最后一位置 0,前一位 +1
      if (indexes[i] === allowedCharactersAfter.length) {
        // indexes[i] 置 0
        indexes[i] = 0;
        // 如果刚好首位是0,则在最后增加一个0,表示字符串长度加 1
        if (i === 0) indexes.push(0);
      } else break;
    }
  } while (
    // 如果已经生过了则跳过
    usedIdents.includes(ident) ||
    // 只要符合 ident.match(regex) 为 true,则 array.some 就返回 true
    blacklist.some((regex) => ident.match(regex))
  );
  // 生成的 key-value 对存储到 Map 结构中
  idents.set(key, ident);
  // 返回新生成的 ident
  return ident;
};

module.exports = function getLocalIdent(  context,
  // [hash:base64]
  localIdentName,
  // container => css 文件中写的 class name
  localName,
  options) {
  // 基于文件路径和类名创建 hash,在整个项目中是唯一的
  // hash 是 5 位字符串
  const hash = loaderUtils.getHashDigest(
    // /.../Home.module.css + 类名
    context.resourcePath + localName,
    // hashType
    "md5",
    // digestType
    "base64",
    // 生成的字符串长度为 5
    5
  );

  // idents.get 如果获取不到,则使用算法生成
  return idents.get(hash) || getNextIdent(hash);
};

算法主要看 indexes,初始状态下是 [0] 表示 a,经过一轮之后变成 [51] 表示 Z,接下来,indexes 会置 0 并 push 一个 0,即 [0, 0],这样就表示 aa 了,随着后面不断取 ident,字符串长度会不断增长。

打印一个运算结果

通过一个算法来简化你的 css

 


如果你觉得文章不错,请点上一个赞,如果你有疑惑,可以在评论区提问,创作不易,您的点赞和评论是对我最大的鼓励~~

欢迎关注头条号 云影sky,你我遇见便是最大的缘分~~



Tags: css   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
Chrome 正在试验 CSS @container 查询器功能,这是由 Oddbird 的 Miriam Suzanne 和一群网络平台开发者支持的 CSS 工作组 Containment Level 3 规范。@container 查询器使我...【详细内容】
2021-12-23  Tags: css  点击:(8)  评论:(0)  加入收藏
这篇文章重点介绍一些强大的 CSS 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出...【详细内容】
2021-12-21  Tags: css  点击:(9)  评论:(0)  加入收藏
前言在写过一段时间 CSS 之后,大家对于常见的属性应该都很熟悉,例如最基本的 display、position、padding、margin、border、background 等等,在写 CSS 的时候不需要特别查什...【详细内容】
2021-04-27  Tags: css  点击:(258)  评论:(0)  加入收藏
在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义。有许多值得一提的 CSS 新功能,但是在本文中,我们重点介绍可以浏览器的稳定版中进...【详细内容】
2020-11-11  Tags: css  点击:(80)  评论:(0)  加入收藏
简介CSS 包含了许多函数,而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来,这让我们的开发更加轻松,也减少了对JavaScript的依赖。CSS 函...【详细内容】
2020-09-07  Tags: css  点击:(74)  评论:(0)  加入收藏
当我们非常专注写代码时候,我们往往会无意识的写出一些无效CSS代码。 我把这种称为 “潜意识错误”。 导致这种错误后,我们经常会反问自己:“为什么我写出这样低级错误?” 不过,...【详细内容】
2020-08-26  Tags: css  点击:(71)  评论:(0)  加入收藏
一个巧妙的算法, 给冗长的类名瘦身。这个算法出自 react-window 的 demo 页面。最早看到 medium 在使用这个效果,自己尝试过写算法,然而以性能巨差告终。原理它的原理是对 css...【详细内容】
2020-06-17  Tags: css  点击:(51)  评论:(0)  加入收藏
css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样...【详细内容】
2020-06-05  Tags: css  点击:(75)  评论:(0)  加入收藏
因为工作中经常用到这些方法,所有便把这些方法进行了总结。JavaScript1. type 类型判断isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8,...【详细内容】
2020-05-31  Tags: css  点击:(60)  评论:(0)  加入收藏
作为前端,我们每天都在与CSS打交道,那么CSS的原理是什么呢?...【详细内容】
2020-05-18  Tags: css  点击:(68)  评论:(0)  加入收藏
▌简易百科推荐
Chrome 正在试验 CSS @container 查询器功能,这是由 Oddbird 的 Miriam Suzanne 和一群网络平台开发者支持的 CSS 工作组 Containment Level 3 规范。@container 查询器使我...【详细内容】
2021-12-23  前端晚间课    Tags: CSS   点击:(8)  评论:(0)  加入收藏
CSS选择器很强大下面是我在工作中使用最多的一些选择器:相邻元素, 英文称为sibling, 也就是兄弟姐妹的意思.其实很形象, 比喻两个dom是相邻的.但是邻居很多, 紧密相邻的, 还...【详细内容】
2021-12-23  不只是个小前端    Tags:CSS选择器   点击:(6)  评论:(0)  加入收藏
这篇文章重点介绍一些强大的 CSS 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出...【详细内容】
2021-12-21  前端晚间课    Tags:CSS   点击:(9)  评论:(0)  加入收藏
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  粤嵌教育    Tags:v   点击:(15)  评论:(0)  加入收藏
作者:前端进阶者来源:前端进阶学习交流一、前言 我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JS+CSS结合...【详细内容】
2021-11-05  Nodejs开发    Tags:CSS   点击:(45)  评论:(0)  加入收藏
<template> <div> <div class="triangle"></div> </div></template><style scoped> .triangle { width: 0; height: 0; border-width: 20px; border-styl...【详细内容】
2021-11-04  荣邦小伙917    Tags:css   点击:(39)  评论:(0)  加入收藏
一提起图标,大家可能第一个会想到PS、美工等词语,但很多小图标现在根本都不需要再打开PS了。1、常见的括号( 前进或后退“>” ).arrow{ width:12rpx; height:12rpx; border-...【详细内容】
2021-10-12  滇東小贰锅    Tags:css   点击:(55)  评论:(0)  加入收藏
在过去的几年里,Web开发已经变得非常流行。每年都会发布许多前端框架,Bootstrap一直是最受欢迎的一个,但是,还有许多其他的框架,你可能没有听说过,但绝对值得一试。想学的同学可以...【详细内容】
2021-09-27  粤嵌教育    Tags:CSS框架   点击:(74)  评论:(0)  加入收藏
水平和垂直对齐第一种方式 : grid + place-items .parent { display: grid; place-items: center; } /*注: place-items 是 justify-items 和 align-items 的简写属性 */...【详细内容】
2021-09-02  又菜又爱学习的程序员    Tags:CSS   点击:(84)  评论:(0)  加入收藏
5个有用的 CSS 布局生成器1、 cssgr.id如果你是前端开发人员,这是一个非常有用的网站。你可以首先指定所需的行数和列数,或者在给定的选项中进行选择,然后为其生成代码。这使你...【详细内容】
2021-08-26  程序员文周    Tags:css布局   点击:(144)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条