var a = 0;

function f1(){

    var a = 1;

    console.log(this.a); //输出为0

}

f1(); //直接调用，应用默认绑定

var a = 0;

function f1(){

    var a = 1;

    f2();

}

function f2(){

    var a = 2;

    console.log(this.a); //输出的是0

}

f1(); 

var a = 0;

function f1() {

    var a = 1;

    console.log(this.a); //this绑定的是f2这个对象字面量

}

var obj = {

    a : 2,

    f1 : f1

    

    // 也可以直接在obj内部定义f1

    // function f1() {

    //     var a = 1;

    // }

   

};

obj.f1(); // 输出为2

var a = 0;

function f1() {

    var a = 1;

    console.log(this.a); //最后输出为2

}

var obj1 = {

    a : 2,

    f1 : f1

};

var obj2 = {

    a : 3,

    obj1 : obj1

}

obj2.obj1.f1();

var a = 0;

function f1() {

    var a = 1;

    console.log(this.a); //最后输出为0

}

var obj = {

    a : 2,

    f1 : f1

}

var fOne = obj.f1; // 给f1取了一个fOne的别名

fOne();

var a = 0;

// f1为回调函数，将obj.f2作为参数传递给f1

function f1(f2) {

    var a = 1;

    f2();

}

function f2() {

    var a = 2;

    console.log(this.a); //结果为0

}

var obj = {

    a : 3,

    f2 : f2

}

f1(obj.f2);

var a = 0;

function f1 () {

    var a = 1;

    console.log(this.a);

}

//apply方法绑定this   apply(对象，参数数组)

f1.apply({a:2});  //输出2



//call方法绑定this   call(对象，参数1，参数2，...)

f1.call({a:3}); //输出3



//bind方法绑定this   bind(对象,参数1，参数2，...),bind会返回一个函数，需要调用

boundf1 = f1.bind({a:4});

boundf1(); //输出4

var a = 0;

function f1() {

    var a = 1;

    console.log(this.a);

}

var bar = function() { 

    return f1.apply({a:2});

};

setTimeout(bar, 1000);//输出为2

var a = 0;

function f1() {

    var a = 1;

    console.log(this.a); 

}



function bind(fn, obj) {

    return function () {

        return fn.apply(obj, arguments);

    };

}



var bar = bind(f1,{a:2});

bar();

var a = 0;

function f1 () {

    var a = 1;

    console.log(this.a);

}

//bind方法绑定this   

//bind(对象,参数1，参数2，...),bind会返回一个函数，需要调用

boundf1 = f1.bind({a:2});

boundf1(); //输出2

function f1(el) {

    console.log(el, this.id);

}

var obj = {

    id : "awesome"

};

[1,2,3].forEach(f1,obj);

//最后输出的结果为

// 1 'awesome'

// 2 'awesome'

// 3 'awesome'

var a = 0;

function f1() {

    var a = 1;

    console.log(this.a);

}

var obj = {

    a : 2,

    f1 : f1

};

(0,obj.f1)(); //输出0

function f1(a){

    this.a = a;

}

var bar = new f1(2);

console.log(bar.a); //输出为2

console.log(f1.a); //输出为undefined

function foo() {  

    console.log( this.a ); 

} 

var obj1 = {  

a: 2, 

foo: foo 

}; 

var obj2 = {  

a: 3, 

foo: foo  

}; 

obj1.foo(); // 2  

obj2.foo(); // 3 

obj1.foo.call( obj2 ); // 3  

obj2.foo.call( obj1 ); // 2

function foo(something) {  

    this.a = something; 

} 

var obj1 = {  

    foo: foo 

}; 

obj1.foo(1);

console.log( obj1.a ); // 1



var bar = new obj1.foo(2); 

console.log( obj1.a ); // 1 

console.log( bar.a ); // 2

var bar = new obj1.foo(2)这段代码，如果隐式绑定的优先级会大于new绑定，就会在obj1里把属性a赋值为2； 如果new绑定的优先级大于隐式绑定，就会在bar中创建一个属性a，值为2，最后看obj1.a和bar.a谁输出为2，谁的优先级就更高，很明显bar.a输出为2，所以new绑定的优先级高于隐式绑定的。

所以new调用的优先级要高于隐式调用的优先级。

3. 再来看看new调用和显式调用的优先级谁高谁低吧。

new不能和apply和call方法同时使用，但我们可以用bind方法进行硬绑定，再用bind返回的新函数再new一下以此来判断谁的优先级高。

function foo(something) {  

    this.a = something; 

} 

 

var obj1 = {}; 

 

var bar = foo.bind( obj1 );  

bar( 2 ); 

console.log( obj1.a ); // 2 

 

var baz = new bar(3);  

console.log( obj1.a ); // 2  

console.log( baz.a ); // 3

首先硬绑定了obj1，在obj1中创建了a属性，值为2，bar接收返回的bind函数。之后new bar并给a赋值为3,用baz来接收new的对象，这时如果baz.a为3就说明this应用的绑定规则是new绑定。

所以new绑定的优先级是高于显示调用的优先级的。

现在知道了四种规则，又知道了这四个规则的优先级，我们就能很清晰的判断this的绑定了。

判断this的流程

以后判断this我们可以按以下顺序来判断：

凡事都有例外，还有一些十分特殊的情况不满足上面的四条规则，我们需要单独拎出来记忆。

绑定例外

绑定例外主要有3种。

null导致的绑定意外

var a = 0;  

function f1() {  

var a = 1;  

console.log(this.a);  

}  

f1.apply(null); //输出为0  

  

var bar = f1.bind(null);  

bar() //输出为0

当我们使用显式绑定（使用apply、call、bind方法）的时候，如果我们显式绑定一个null，就会发现this绑定的不是null而是应用默认绑定，绑定全局对象。这会导致变量全局渗透的问题。

有的人可能会说，那我们不用null来绑定this不就好了吗？但有的时候我们还真不得不使用null来绑定this，下面我来介绍一下什么时候会使用这种情况。

一种常见的做法是使用apply(..)来“展开”一个数组，并当作参数传入一个函数。类似地，bind(..)可以对参数进行柯里化（预先设置一些参数），这种方法有时很好用的。

function f1 (a , b) {  

console.log("a:" + a + ",b:" + b);  

}  



f1.apply(null,[2,3])  //输出为a:2,b:3



//bind的柯里化

var bar = f1.bind(null,2);  

bar(3); //输出为a:2,b:3

现在来简单地来介绍一下柯里化是什么？柯里化是将一个接收多个参数的函数转换为一系列只接受单个参数的函数。这时bind和null的作用就体现出来了。

然而，在apply,call,bind使用null会导致全局溢出，在一些有this的函数中，给这个this绑定null，会让this绑定全局对象。该如何解决这个问题呢？

更安全的this

我们可手动创建一个空的对象，这个空的对象我们称作“DMZ”（demilitarized zoo，非军事区）对象——它是一个空的非委托的对象。

如果我们在想要忽略this绑定时总是传入一个DMZ对象，那就不用担心this会溢出到全局了，这个this绑定的就是DMZ对象。

在JavaScript中创建一个空对象最简单的方法是Object.create(null)——它会返回一个空对象，Object.create(null)。Object.create(null)和{}很像，并不会创建Object.prototype这个委托，所以它比{}“更空”。

var c = 0;

function f1 (a , b) {

    this.c = 1;

    console.log("a:" + a + ",b:" + b);  

}  

//创建自己的空对象

var myNull = Object.create(null);



f1.apply(myNull,[2,3])  //输出为a:2,b:3

console.log(c);  //输出为0 



//bind的柯里化

var bar = f1.bind(myNull,2);  

bar(3); //输出为a:2,b:3

console.log(c); //输出为0

可以发现这段代码中，我们创建了自己的空对象通过apply和bind方法把this绑定到这个空对象了。最后的输出的c是0，说明this.c并没有修改全局变量c的值。所以这个方法可以防止全局溢出。

接下来谈谈另外一个绑定的例外吧。

间接引用

有的时候你可能(有意或无意地)创建了一个函数的“间接引用”，在这种情况下，调用这个函数应用默认绑定规则。

var a = 0;

function f1() {

    console.log(this.a);

}

var obj1 = {

    a : 1,

    f1 : f1

};



var obj2 = {

    a : 2,

};

obj1.f1(); // 1

(obj2.f1 = obj1.f1)(); // 0

我们来看看这个代码。obj1中有a和f1属性或方法，a的值为1；obj2中只有a属性，值为2。我们先隐式绑定obj1，this绑定obj1，最后输出为1，这个我们可以理解。关键是下面这行代码(obj2.f1 = obj1.f1)()，obj2中没有f1，所以它在obj2中创建一个f1，然后将obj1中的f1函数赋值给obj2的f1，然后执行这个赋值表达式。那为什么输出的是0而不是obj2中的2或者obj1中的1呢？ 🤔

其实这和赋值表达式的返回值有关系，因为赋值表达式会返回等号右边的值。 所以(obj2.f1 = obj1.f1)实际上返回的obj1.f1中的f1函数，实际执行的是f1()。所以应用的是默认绑定，this绑定全局对象，结果输出为0。

我们继续看绑定的下一个例外。

箭头函数

在ES6中介绍了一种无法使用这些规则的特殊函数类型：箭头函数。

箭头函数和一般的函数不一样，它不是用function来定义的，而是使用被称作“胖箭头”的操作符=>定义的。

定义格式：(参数) => {函数体}

箭头函数不使用this的四条规则，而是继承外层（定义时所在）函数或全局作用域的this的值，this在箭头函数创建时就被确定，且永远不会被改变，new也不行。

var a = 0;

(()=>{

    var a = 1;

    console.log(this.a); // 结果输出为0

})(); 

很明显该箭头函数外部就是全局作用域，所以继承全局对象的this就是它本身，所以输出为0。

再看看如果在其他函数中定义箭头函数this如何绑定

var a = 0;

function f1() {

    var a = 1;

    (()=>{

        var a = 2;

        console.log(this.a);

    })();

}

f1();//输出0



//给f1绑定一个对象

f1.apply({a:3}); // 输出3

可以发现f1内部的箭头函数继承了其外部函数f1的this的绑定。所以一开始没给f1绑定this时，f1的this绑定的是全局对象，箭头函数的也是全局对象；当给f1的this绑定一个对象时，箭头函数的this也绑定该对象。

小结

以上是我的学习分享，希望对你有所帮助。

还有本篇的四条规则只适用于非严格模式，严格模式的this的绑定我日后再出一篇吧，其实只是有点懒😂。

参考书籍

《你所不知道的JavaScript（上卷)》

共用css

body {

    padding: 50px;

    background-color: black;

    color: white;

}



svg {

    --text_fill: orange;

    --svg_width: 120px;

    --svg_height: 40px;

    width: var(--svg_width);

    height: var(--svg_height);

    cursor: pointer;

    /* 创建图层 */

    will-change: transform;



    &:hover {

        --text_fill: #fed71a;

    }



    text {

        fill: var(--text_fill);

        font-size: 1rem;

        transform: translate(50%, 50%);

        text-anchor: middle;

        dominant-baseline: middle;

        stroke: yellowgreen;

        stroke-width: .5px;

        cursor: pointer;

    }



    rect {

        --stroke_width: 4px;

        width: calc(var(--svg_width) - var(--stroke_width));

        height: calc(var(--svg_height) - var(--stroke_width));

        stroke-width: var(--stroke_width);

        rx: calc(var(--svg_height)/2);

        x: calc(var(--stroke_width)/2);

        y: calc(var(--stroke_width)/2);

        fill: none;

        cursor: pointer;

    }

}

移入执行、移出暂停

<body>

    <svg style='position:absolute;left:-9999px;width:0;height:0;visibility:hidden;'>

        <defs>

            <linearGradient id='strokeColor1' x1='0%' y1='0%' x2='100%' y2='0%'>

                <stop offset='0%' stop-color="#00ccff" stop-opacity="1" />

                <stop offset='50%' stop-color="#d400d4" stop-opacity="1" />

                <stop offset='100%' stop-color="#ff00ff" stop-opacity=".7" />

            </linearGradient>

        </defs>

    </svg>



    <svg id="svg1">

        <text>渐变按钮</text>

        <rect stroke='url(#strokeColor1)' />

        <animateTransform id="ani1" href="#strokeColor1" attributeName='gradientTransform' dur='5s' type="rotate"

            form="0,.5,.5" to="360,.5,.5" repeatCount='indefinite' begin="indefinite" />

    </svg>

</body> 

<script>

    svg1.addEventListener('mouseover', function () {

        if (!this.beginMark) {

            ani1.beginElement();

            this.beginMark = true;

            return;

        }

        this.unpauseAnimations();

    })



    svg1.addEventListener('mouseleave', function () {

        this.pauseAnimations();

    })

</script>

svg1效果图

移入暂停、移出执行

<body>

    <svg style='position:absolute;left:-9999px;width:0;height:0;visibility:hidden;'>

        <defs>

            <linearGradient id='strokeColor2' x1='0%' y1='0%' x2='100%' y2='0%'>

                <stop offset='0%' stop-color="#ec261b" />

                <stop offset='50%' stop-color="#ff9f43" />

                <stop offset='100%' stop-color="#ffe66d" stop-opacity="1" />

            </linearGradient>

        </defs>

    </svg>



    <svg id="svg2">

        <text>渐变按钮</text>

        <rect stroke='url(#strokeColor2)' />

        <animateTransform id="ani2" href="#strokeColor2" attributeName='gradientTransform' dur='5s' type="rotate"

            form="0,.5,.5" to="360,.5,.5" repeatCount='indefinite' begin="0s" />

    </svg>

</body>



<script>

    svg2.addEventListener('mouseover', function () {

        this.pauseAnimations();

    })

    svg2.addEventListener('mouseleave', function () {

        this.unpauseAnimations();

    })

</script>

sv2效果图

总结

个人感觉svg实现渐变边框相比较css的实现来说，相对代码量更大一些，但是svg其实还有很多好玩的地方。
用svg来做渐变边框也是另外的一种思路，也许以后能够用的上。

css按钮渐变边框

大家好呀，我是猿java。

String.replace()是我们日常开发中经常用到的一个方法，那么，你有看过其底层的源码实现吗？你知道String.replace()是如何工作的吗？String.replace()的性能到底怎么样？这篇文章我们来深入地分析。

在开始今天的问题之前，让我们先来看一个问题：

String original = "Hello, World!";

// 替换字符

String result = original.replace('World', 'Java');

original.replace('World', 'Java')，是把 original的内容直接修改成Hello, Java了，还是重新生成了一个 Hello, Java的 String并返回？

1. String.replace()是什么？

String.replace()位于java.lang包中，它是 Java中的一个重要方法，用于替换字符串中的某些字符或子字符串。以下String.replace()的源码截图。

String.replace()方法用于替换字符串中的某些字符或子字符串。它有多个重载版本，常见的有：

// 用于替换单个字符

public String replace(char oldChar, char newChar);

// 用于替换子字符串

public String replace(CharSequence target, CharSequence replacement);

下面是一个简单的示例，演示了replace方法的用法：

public class ReplaceExample {

    public static void main(String[] args) {

        String original = "Hello, World!";

        

        // 替换字符

        String replacedChar = original.replace('o', 'a');

        System.out.println(replacedChar); // 输出: "Hella, Warld!"

        

        // 替换子字符串

        String replacedString = original.replace("World", "Java");

        System.out.println(replacedString); // 输出: "Hello, Java!"

    }

}

在上面的例子中，我们演示了如何使用replace方法替换字符和子字符串。需要注意的是，String对象在Java中是不可变的（immutable），因此replace方法会返回一个新的字符串，而不会修改原有字符串。

2. 源码分析

上述示例，我们演示了replace方法的用法，接下来，我们来分析下replace方法的实现原理。

2.1 String的不可变性

Java中的String类是不可变的，这意味着一旦创建了一个String对象，其内容不能被改变。这样的设计有助于提高性能和安全性，尤其在多线程环境下。String源码说明如下：

2.2 replace()工作原理

让我们深入了解replace方法的内部实现。以replace(CharSequence target, CharSequence replacement)为例，以下是其基本流程：

2.3 源码解析

让我们看一下String类中replace方法的源码（简化版）：

public String replace(char oldChar, char newChar) {

   if (oldChar != newChar) {

      String ret = isLatin1() ? StringLatin1.replace(value, oldChar, newChar)

              : StringUTF16.replace(value, oldChar, newChar);

      if (ret != null) {

         return ret;

      }

   }

   return this;

}







public String replace(CharSequence target, CharSequence replacement) {

   String tgtStr = target.toString();

   String replStr = replacement.toString();

   int j = indexOf(tgtStr);

   if (j < 0) {

      return this;

   }

   int tgtLen = tgtStr.length();

   int tgtLen1 = Math.max(tgtLen, 1);

   int thisLen = length();



   int newLenHint = thisLen - tgtLen + replStr.length();

   if (newLenHint < 0) {

      throw new OutOfMemoryError();

   }

   StringBuilder sb = new StringBuilder(newLenHint);

   int i = 0;

   do {

      sb.append(this, i, j).append(replStr);

      i = j + tgtLen;

   } while (j < thisLen && (j = indexOf(tgtStr, j + tgtLen1)) > 0);

   return sb.append(this, i, thisLen).toString();

}

解析步骤

性能考虑

由于String的不可变性，每次修改都会创建新的String对象。如果需要进行大量的字符串替换操作，推荐使用StringBuilder或StringBuffer来提高性能。

三、实际示例演示

接下来，我们将通过几个实际的例子，来更好地理解String.replace()的使用场景和效果。

示例1：替换字符

public class ReplaceCharDemo {

    public static void main(String[] args) {

        String text = "banana";

        String result = text.replace('a', 'o');

        System.out.println(result); // 输出: "bonono"

    }

}

解释：将所有的'a'替换为'o'，得到"bonono"。

示例2：替换子字符串

public class ReplaceStringDemo {

    public static void main(String[] args) {

        String text = "I love Java. Java is versatile.";

        String result = text.replace("Java", "Python");

        System.out.println(result); // 输出: "I love Python. Python is versatile."

    }

}

解释：将所有的"Java"替换为"Python"，结果如上所示。

示例3：替换多个不同的子字符串

有时，我们可能需要在一个字符串中替换多个不同的子字符串。例如，将文中的标点符号替换为空格：

public class ReplaceMultipleDemo {

    public static void main(String[] args) {

        String text = "Hello, World! Welcome to Java.";

        String result = text.replace(",", " ")

                            .replace("!", " ")

                            .replace(".", " ");

        System.out.println(result); // 输出: "Hello  World  Welcome to Java "

    }

}

解释：通过链式调用replace方法，依次将,、!和.替换为空格。

示例4：替换不匹配的情况

public class ReplaceNoMatchDemo {

    public static void main(String[] args) {

        String text = "Hello, World!";

        String result = text.replace("Python", "Java");

        System.out.println(result); // 输出: "Hello, World!"

    }

}

解释：由于"Python"在原字符串中不存在，replace方法不会做任何替换，直接返回原字符串。

四、String.replace()的技术架构图

虽然文字描述已能帮助我们理解replace方法的工作原理，但通过一个简化的技术架构图，可以更直观地抓住其核心流程。

+---------------------------+

|        String对象         |

| "Hello, World!"           |

+------------+--------------+

             |

             | 调用replace("World", "Java")

             v

+---------------------------+

|   搜索目标子字符串 "World" |

+------------+--------------+

             |

             | 找到位置 7

             v

+---------------------------+

| 构建新的字符串 "Hello, Java!" |

+---------------------------+

             |

             | 返回新字符串

             v

+---------------------------+

|      新的 String对象      |

| "Hello, Java!"            |

+---------------------------+

图解说明

五、总结

通过本文的介绍，相信你对Java中String.replace()方法有了更深入的理解。从基本用法到内部原理，再到实际应用示例，每一步都帮助你全面掌握这个重要的方法。

记住，String的不可变性设计虽然带来了安全性和线程安全性，但在频繁修改字符串时，可能影响性能。因此，合理选择使用String还是StringBuilder，根据具体场景优化代码，是每个Java开发者需要掌握的技能。

希望这篇文章能对你在Java编程的道路上提供帮助。如果有任何疑问或更多的讨论，欢迎在评论区留言！

8. 学习交流

如果你觉得文章有帮助，请帮忙转发给更多的好友，或关注公众号：猿java，持续输出硬核文章。

上个月在 趣谈AI 发布了我实现的多维表格1.0版本，没有用到任何第三方组件，完全组件化设计。最近对多维表格进行了进一步的升级优化，满打满算花了接近3个月时间，累计代码接近1w行。

接下来就和大家聊聊我做的 flowmix/mute多维表格 的核心功能和技术实现。

核心功能介绍

1. 多视图模式

目前多维表格支持多种视图模式：表格视图，看板视图，人员分配视图。用户可以轻松在不同视图下切换并进行可视化操作数据。

2. 多条件筛选功能

我们可以基于不同维度进行筛选和排序，并支持组合筛选。

3. 多维度分组功能

表格视图中，我们可以基于用户，优先级，状态，对数据进行分组管理，提高表格数据的查看效率。

4. 表格字段管理功能

多维表格中不仅支持字段的管理控制，同时还支持添加自定义字段：

5. 表格行列支持自定义拖拽排序功能

表格我们不仅仅支持列的宽度拖拽，还支持拖拽调整列的排序，同时表格的行也支持拖拽，可以跨分组进行拖拽，也支持在组内进行拖拽排序，极大的提高了数据管理的效率。

6. 表格支持一键编辑

我们可以在菜单按钮中开启编辑模式，也可以双击编辑单元格一键编辑表格内容，同时大家还可以进行扩展。

7. 表格支持一键转换为可视化分析视图表

我们可以将表格数据转换为可视化分析图表，帮助管理者更好地掌握数据动向。

8. 表格支持一键导入任务数据

目前多维表格支持导出和导入json数据，并一键渲染为多维表格。技术实现多维表格的设计我采用了组件化的实现的方式， 并支持数据持久化，具体使用如下：

<div className="flex-1 bg-gray-50">

    {currentView === "tasks" && <TaskManagementTable sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />}

    {currentView === "statistics" && <StatisticsView />}

    {currentView === "documentation" && <DocumentationView />}

    {currentView === "assignment" && <AssignmentView />}

    {currentView === "deployment" && <DeploymentView />}

</div>

在开发多维表格的过程中其实需要考虑很多复杂逻辑，比如表格用什么方式渲染，如何优化表格性能，如何实现表格的列排序，行排序，表格编辑等。传统表格组件大多基于div模拟行列，虽然灵活但渲染性能差。所以可以做如下优化：

• 虚拟滚动当数据量超过 500 行时，启用虚拟滚动机制，仅渲染可见区域的 DOM 节点，内存占用降低 70%；


• 行列冻结通过固定定位position: sticky实现表头和固定列冻结，解决大数据表格的滚动迷失问题；


• 异步加载采用Intersection Observer监听表格滚动事件，动态加载可视区域外的数据，避免一次性请求全量数据。

接下来分享一下简版的虚拟滚动的实现方案：

// 虚拟滚动核心代码（简化版）

function renderVirtualTable(data, visibleHeight) {

  const totalRows = data.length;

  const rowHeight = 40; // 行高固定

  const visibleRows = Math.ceil(visibleHeight / rowHeight);

  const startIndex = scrollTop / rowHeight | 0;

  const endIndex = startIndex + visibleRows;

  // 渲染可见区域数据

  const fragment = document.createDocumentFragment();

  for (let i = startIndex; i < endIndex; i++) {

    const row = document.createElement('tr');

    row.innerHTML = data[i].cells.map(cell => `<td>${cell.value}</td>`).join('');

    fragment.appendChild(row);

  }

  // 更新滚动条高度和偏移量

  table.scrollHeight = totalRows * rowHeight;

  table.innerHTML = `<thead>${header}</thead><tbody>${fragment}</tbody>`;

}

对于大表格数据量需要在本地缓存，所以需要设计表格数据的缓存处理逻辑，目前我采用的是hooks的实现方案，具体实现如下：

import { useState, useEffect } from "react"

export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {

  // 初始化状态

  const [storedValue, setStoredValue] = useState<T>(() => {

    try {

      // 获取本地存储中的值

      if (typeof window === "undefined") {

        return initialValue

      }

      const item = window.localStorage.getItem(key)

      // 解析存储的JSON或返回初始值

      return item ? JSON.parse(item) : initialValue

    } catch (error) {

      // 如果出错，返回初始值

      console.error(`Error reading localStorage key "${key}":`, error)

      return initialValue

    }

  })

  // 返回一个包装版本的 useState setter 函数

  // 将新值同步到 localStorage

  const setValue = (value: T | ((val: T) => T)) => {

    try {

      // 允许值是一个函数

      const valueToStore = value instanceof Function ? value(storedValue) : value

      // 保存到 state

      setStoredValue(valueToStore)

      // 保存到 localStorage

      if (typeof window !== "undefined") {

        window.localStorage.setItem(key, JSON.stringify(valueToStore))

      }

    } catch (error) {

      console.error(`Error setting localStorage key "${key}":`, error)

    }

  }

  // 监听其他标签页的变化

  useEffect(() => {

    const handleStorageChange = (e: StorageEvent) => {

      if (e.key === key && e.newValue) {

        try {

          setStoredValue(JSON.parse(e.newValue))

        } catch (error) {

          console.error(`Error parsing localStorage item "${key}":`, error)

        }

      }

    }

    // 添加事件监听器

    if (typeof window !== "undefined") {

      window.addEventListener("storage", handleStorageChange)

    }

    // 清理事件监听器

    return () => {

      if (typeof window !== "undefined") {

        window.removeEventListener("storage", handleStorageChange)

      }

    }

  }, [key])

  return [storedValue, setValue]

}

其实在实现多维表格的过程中，我也调研了很多开源的方案，但是对于扩展性，灵活度和功能复杂度上，都略显简单，所以我才考虑花时间来实现这款多维表格方案。另一个比较复杂的逻辑是表格的列拖拽和排序，我们需要对可展开折叠的表格支持排序和拖拽，并保持优秀的用户体验：

技术实现如下：

import { useState, useEffect } from "react"

export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {

  // 初始化状态

  const [storedValue, setStoredValue] = useState<T>(() => {

    try {

      // 获取本地存储中的值

      if (typeof window === "undefined") {

        return initialValue

      }

      const item = window.localStorage.getItem(key)

      // 解析存储的JSON或返回初始值

      return item ? JSON.parse(item) : initialValue

    } catch (error) {

      // 如果出错，返回初始值

      console.error(`Error reading localStorage key "${key}":`, error)

      return initialValue

    }

  })

  // 返回一个包装版本的 useState setter 函数

  // 将新值同步到 localStorage

  const setValue = (value: T | ((val: T) => T)) => {

    try {

      // 允许值是一个函数

      const valueToStore = value instanceof Function ? value(storedValue) : value

      // 保存到 state

      setStoredValue(valueToStore)

      // 保存到 localStorage

      if (typeof window !== "undefined") {

        window.localStorage.setItem(key, JSON.stringify(valueToStore))

      }

    } catch (error) {

      console.error(`Error setting localStorage key "${key}":`, error)

    }

  }

  // 监听其他标签页的变化

  useEffect(() => {

    const handleStorageChange = (e: StorageEvent) => {

      if (e.key === key && e.newValue) {

        try {

          setStoredValue(JSON.parse(e.newValue))

        } catch (error) {

          console.error(`Error parsing localStorage item "${key}":`, error)

        }

      }

    }

    // 添加事件监听器

    if (typeof window !== "undefined") {

      window.addEventListener("storage", handleStorageChange)

    }

    // 清理事件监听器

    return () => {

      if (typeof window !== "undefined") {

        window.removeEventListener("storage", handleStorageChange)

      }

    }

  }, [key])

  return [storedValue, setValue]

}

多维表格还支持多种视图的转换，比如可以将表格视图一键转换为可视化分析图表：

对用户和团队进行多维度的数据分析。技术实现如下：

import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from "recharts"

import type { Task } from "@/lib/types"

interface PriorityDistributionChartProps {

  tasks: Task[]

}

export function PriorityDistributionChart({ tasks }: PriorityDistributionChartProps) {

  // 计算每个优先级的任务数量

  const priorityCounts: Record<string, number> = {}

  tasks.forEach((task) => {

    const priority = task.priority || "未设置"

    priorityCounts[priority] = (priorityCounts[priority] || 0) + 1

  })

  // 转换为图表数据格式

  const chartData = Object.entries(priorityCounts).map(([priority, count]) => ({

    priority,

    count,

  }))

  // 为不同优先级设置不同颜色

  const COLORS = ["#FF8042", "#FFBB28", "#00C49F", "#0088FE"]

  return (

    <div className="w-full h-[300px]">

      <ResponsiveContainer width="100%" height="100%">

        <PieChart>

          <Pie

            data={chartData}

            cx="50%"

            cy="50%"

            labelLine={true}

            outerRadius={80}

            fill="#8884d8"

            dataKey="count"

            nameKey="priority"

            label={({ priority, percent }) => `${priority}: ${(percent * 100).toFixed(0)}%`}

          >

            {chartData.map((entry, index) => (

              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />

            ))}

          </Pie>

          <Tooltip formatter={(value, name, props) => [`${value} 个任务`, props.payload.priority]} />

          <Legend />

        </PieChart>

      </ResponsiveContainer>

    </div>

  )

}

项目的体验地址：mute.turntip.cn

如果大家有好的想法，欢迎评论区留言反馈～

用了 Bun 之后，并不是完全不用 Vite。Bun 虽然内置了打包器和运行时，且速度非常快，但其打包功能目前还不够完善，缺少对前端项目非常重要的功能，比如对代码分块（chunk splitting）的精细控制和开发服务器（dev server）支持，这些都是 Vite 在前端开发中非常关键的优势

具体来说：

• Bun 是一个高性能的 JavaScript 运行时和包管理器，集成了打包器和测试工具，适合全栈开发和快速安装依赖，但其前端打包功能还处于实验阶段，缺少灵活的代码拆分和热更新支持


• Vite 专注于前端开发体验，提供极快的冷启动和热模块替换（HMR），以及灵活且成熟的生产构建流程，它的生态和插件系统也非常丰富，适合现代前端框架（如 Vue3、React）


• 目前推荐的做法是用 Bun 替代 Node.js 作为运行时和包管理器，用 Vite 负责前端的开发服务器和构建打包。这样可以结合 Bun 的高速安装和执行优势，以及 Vite 的快速开发反馈和优化生产构建的能力

关于 pnpm 和 Vite 的叠加：

• pnpm 是一个高效且节省磁盘空间的包管理器，完全可以和 Vite 一起使用。pnpm 通过内容寻址存储和符号链接机制，避免依赖重复，提升安装速度和项目管理效率，特别适合 monorepo 和多项目共享依赖的场景


• pnpm 和 Vite 的结合非常常见，pnpm 负责依赖管理，Vite 负责开发和构建，两者互不冲突，反而能互补提升开发效率

总结：

因此，用了 Bun 后，建议继续用 Vite 负责前端开发和构建，pnpm 依然可以用来管理依赖，三者结合能发挥各自优势，提升开发体验和性能

如果你想快速上手，可以用 Bun 创建 Vite 项目：

bun create vite my-app

cd my-app

bun install

bun run dev

这样就用 Bun 作为运行时和包管理器，用 Vite 作为开发服务器和构建工具

综上，Bun 目前还不能完全替代 Vite，Vite 在前端开发体验和构建优化上仍有不可替代的优势；pnpm 作为包管理器可以和 Vite 叠加使用，带来依赖管理的高效和节省空间的好处。三者结合是现代前端项目的一个高效组合方案。

用了next.js之后，是不是就不用vite了

用了 Next.js 之后，一般情况下是不需要再单独使用 Vite 了，因为 Next.js 内部已经集成了自己的构建和开发服务器功能。

具体原因和分析如下：

• Next.js 是一个基于 React 的全栈框架，内置了开发服务器（通过 next dev 命令启动）、构建工具和打包器，它自动处理代码编译、热模块替换（HMR）、代码拆分和优化等工作，开发体验和构建性能都非常优秀


• Next.js 使用了基于 Rust 的编译器 SWC 来加速构建和转译，性能上已经非常接近甚至优于传统的打包工具


• Vite 主要是一个前端构建工具和开发服务器，适合纯前端项目或需要快速启动的 React/Vue 应用，而 Next.js 是一个框架，包含了路由、服务器端渲染（SSR）、静态站点生成（SSG）、API 路由等功能，功能层面更全面


• 使用 Next.js 时，所有的构建和开发流程都由 Next.js 自己管理，开发者无需额外配置 Vite，避免了工具链的重复和冲突。


• 如果你只是做纯前端项目，Vite 是很好的选择；但如果你需要 SSR、API 路由、全栈功能，Next.js 是更合适的框架，且内置了构建和开发支持，不需要再叠加 Vite。

总结：

因此，用了 Next.js 后，基本上不需要再用 Vite 了，Next.js 已经集成了类似 Vite 的开发和构建功能，且提供了更多全栈特性

JS 和 Android

• 原生调用 JS
  4.4 版本之前

// mWebView = new WebView(this); //当前webview对象

// 通过loadUrl方法进行调用 参数通过字符串的方式传递

mWebView.loadUrl("javascript: 方法名('参数1,参数2...')");



//也可以在UI线程中运行

runOnUiThread(new Runnable() {

    @Override

    public void run() {

        // 通过loadUrl方法进行调用 参数通过字符串的方式传递

        mWebView.loadUrl("javascript: 方法名('参数1,参数2...')");

        // 安卓中原生的弹框

        Toast.makeText(Activity名.this, "调用方法...", Toast.LENGTH_SHORT).show();

    }

});

4.4 版本之后

// 通过异步的方式执行js代码,并获取返回值

mWebView.evaluateJavascript("javascript: 方法名('参数1,参数2...')", new ValueCallback() {

    @Override

    // 这个方法会在执行完毕之后触发, 其中value就是js代码执行的返回值(如果有的话)

    public void onReceiveValue(String value) {



    }

});

• JS 调用Android
  安卓配置：

// Android4.2版本以上，本地方法要加上注解@JavascriptInterface，否则无法使用

private Object getJSBridge(){

    // 实例化新对象

    Object insertObj = new Object(){

        @JavascriptInterface

        // 对象内部的方法1

        public String foo(){

            // 返回 字符串 foo

            return "foo";

        }

        @JavascriptInterface

        // 对象内部的方法2 需要接收一个参数

        public String foo2(final String param){

            // 返回字符串foo2拼接上传入的param

            return "foo2:" + param;

        }

    };

    // 返回实例化的对象

    return insertObj;

}



// 获取webView的设置对象，方便后续修改

WebSettings webSettings = mWebView.getSettings();

// 设置Android允许JS脚本，必须要！！！

webSettings.setJavaScriptEnabled(true);

// 暴露一个叫做JSBridge的对象到webView的全局环境

mWebView.addJavascriptInterface(getJSBridge(), "JSBridge");

在 web 页面中调用

//调用方法一

window.JSBridge.foo(); //返回:'foo'

//调用方法二

window.JSBridge.foo2('test');//返回:'foo2:test'

JS 和 IOS

• 原生调用 JS

class ViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler {

    // 加载完毕会触发(类似于Vue的生命周期钩子)

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

        // 类似于console.log()

        print("触发啦");

        // wkWebView调用js代码，其中doSomething()会被当做js解析

        webView.evaluateJavaScript("doSomething()");

    }

}

• JS 调用 IOS

1. JS 部分

window.webkit.messageHandlers.方法名.postMessage(数据)

2. iOS 部分注册监听

wkWebView.configuration.userContentController.add(self, name: 方法名)

3. iOS 部分遵守协议相关方法

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

    // message.body 就是传递过来的数据

    print("传来的数据为", message.body)

}

url scheme(互通协议)

web 调用

class="ios" type="button" value="使用iframe加载url">



// 加载url 通过iframe 设置URL 目的是让ios拦截

function loadUrl(url) {

  // 创建iframe

  const iframe = document.createElement('iframe');

  // 设置url

  iframe.src = url;

  // 设置尺寸(不希望他被看到)

  iframe.style.height = 0;

  iframe.style.width = 0;

  // 添加到页面上

  document.body.appendChild(iframe);

  // 加载了url之后他就没用了

  // 移除iframe

  iframe.parentNode.removeChild(iframe);

}



document.querySelector('.ios').onclick = function () {

  loadUrl('taobao://click');

}

IOS 监听

// 拦截url

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {

    // 获取url

    let url = navigationAction.request.url?.absoluteString;

    if(url=="taobao://click"){

        print("调用系统功能");

        decisionHandler(.cancel);

    }else{

        decisionHandler(.allow);

    }

}

HyBridApp

• 开发框架

1. 提供前端运行环境
2. 实现前端和原生交互
3. 封装原生功能，提供插件机制 

加载优化

• 骨架屏

<style>

  .shell .placeholder-block{

    display: block;

    height: 5em;

    background: #ccc;

    margin: 1em;

  }

  .novel {

    height: 5em;

    background-color: yellowgreen;

  }

style>

head>

<body>

<div class="shell">

  <div class="placeholder-block">div>

div>

body>

html>

<script>

setTimeout(()=>{

  // 移除 占位dom元素

  document.querySelector('.shell').innerHTML = ''

  // 创建数据的dom元素 添加到页面上

  let p = document.createElement('p')

  p.innerHTML = '黑马程序员'

  p.className = 'novel'

  document.querySelector('.shell').appendChild(p)

},3000)

script>

webview

import UIKit

import WebKit



class ViewController: UIViewController, WKNavigationDelegate {

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

        // 创建webView

        var webView = WKWebView(frame: self.view.bounds)

        // 设置自己为WebView的代理

        webView.navigationDelegate = self

        // 添加到页面上

        self.view.addSubview(webView)



        // 创建URL对象

        var url = URL(string: "https://www.baidu.com")

        // 创建URLRequest对象

        var request = URLRequest(url: url!)

        // 加载URL

        webView.load(request)

    }

}

JSBridge

• 设计思想

1. JS 向原生发送消息
2. 原生向 JS 发送消息

window.JSBridge = {

    invoke: function(action, params, callback) {

        // 生成唯一回调ID

        const callbackId = 'cb_' + Date.now();

        // 存储回调函数

        window[callbackId] = callback;

        

        // 构建标准化消息

        const msg = {

            action: action,

            params: params || {},

            callbackId: callbackId

        };

        

        // 根据平台调用不同原生桥

        if (isIOS()) {

            window.webkit.messageHandlers.nativeBridge.postMessage(JSON.stringify(msg));

        } else if (isAndroid()) {

            window.android.postMessage(JSON.stringify(msg));

        }

    },

    // 原生调用此方法来回调结果

    receiveMessage: function(msg) {

        const { callbackId, result, error } = msg;

        const callback = window[callbackId];

        if (callback) {

            if (error) {

                callback(null, error); // 错误回调

            } else {

                callback(result, null); // 成功回调

            }

            // 执行后删除回调，避免内存泄漏

            delete window[callbackId];

        }

    }

};



// 使用示例：调用原生相机

JSBridge.invoke('takePhoto', { quality: 'high' }, (result, error) => {

    if (error) {

        console.error('拍照失败：', error);

    } else {

        console.log('照片路径：', result.imagePath);

    }

});

解释：

1. 前端调用 JSBridge.invoke 时：存储回调函数，生成唯一的 callbackId（如 cb_1725000000000），确保每个回调能被唯一识别；把回调函数挂载到 window 对象上（即 window[callbackId] = 回调函数），相当于 “暂时存档”，避免函数被垃圾回收。
2. 前端向原生发送 “带回调 ID 的消息”，然后根据平台（iOS/Android）把消息发给原生，此时原生收到的是  “操作指令 + 回调 ID”
3. 原生执行操作（如调用相机），原生接收到消息后，解析出 action 和 params，执行对应的原生逻辑

• iOS：调用 UIImagePickerController（系统相机接口），按 quality: 'high' 配置拍照质量；
• Android：调用 Camera 或 CameraX 接口，同样按参数执行拍照。 这个阶段完全在原生环境（Objective-C/Swift 或 Java/Kotlin）中运行，与前端 JS 无关。

4. 原生将 “结果 + 回调 ID” 回传给前端
   原生执行完操作后（无论成功 / 失败），会构建一个 “结果消息”，包含：callbackId: 'cb_1725000000000'（必须和前端传过来的一致，才能找到对应的回调）； result: { imagePath: '/var/mobile/.../photo.jpg' }（成功时的结果，如照片路径）； 或 error: '用户取消拍照'（失败时的错误信息）。

然后原生会主动调用前端 JSBridge 预留的 receiveMessage 方法，把 “结果消息” 传回去。

5. 前端 receiveMessage 执行回调函数

• 解析原生传过来的消息，提取 callbackId、result、error；
• 通过 callbackId 找到之前挂载在 window 上的回调函数（即 window['cb_1725000000000']）；
• 执行回调函数：
  • 成功：调用 callback(result, null)（如打印照片路径）；
  • 失败：调用 callback(null, error)（如打印 “用户取消拍照”）；
• 执行完后删除 window[callbackId]，避免内存泄漏。

到这一步，回调函数才真正在前端 JS 环境中执行，完成整个跨端通信闭环。

作者：code_YuJun
来源：juejin.cn/post/7544077353371222067

JavaScript 数组扁平化全解析：从基础到进阶，深入理解 flat 与多种实现方式

在现代前端开发中，数组操作是日常编码中最常见的任务之一。而在处理复杂数据结构时，我们经常会遇到“嵌套数组”（即高维数组）的场景。例如，后端返回的数据结构可能是多层嵌套的，我们需要将其“拍平”为一维数组以便于渲染或进一步处理。这种将多层嵌套数组转换为单层数组的过程，就被称为 数组扁平化（Array Flattening）。

本文将带你全面了解 JavaScript 中数组扁平化的各种方法，包括原生 API 的使用、递归实现、reduce 高阶函数应用、利用 toString 和 split 的巧妙技巧，以及基于展开运算符的循环优化方案。我们将深入剖析每种方法的原理、优缺点和适用场景，帮助你构建完整的知识体系。

一、什么是数组扁平化？

数组扁平化，顾名思义，就是把一个嵌套多层的数组“压平”成一个只有一层的一维数组。例如：

const nestedArr = [1, [2, 3, [4, 5]], 6];

// 扁平化后应得到：

// [1, 2, 3, 4, 5, 6]

这个问题看似简单，但在实际项目中非常常见。比如你在处理树形菜单、评论回复结构、文件目录层级等数据时，都可能需要对嵌套数组进行扁平化处理。

二、使用原生 flat() 方法（推荐方式）

ES2019 引入了 Array.prototype.flat() 方法，使得数组扁平化变得极其简单和直观。

✅ 基本语法

arr.flat([depth])

• depth：指定要展开的层数，默认为 1。


• 如果传入 Infinity，则无论嵌套多少层，都会被完全展开。

✅ 示例代码

const arr = [1, [2, 3, [1]]];



console.log(arr.flat());           // [1, 2, 3, [1]]     → 只展开一层

console.log(arr.flat(2));          // [1, 2, 3, 1]       → 展开两层

console.log(arr.flat(Infinity));   // [1, 2, 3, 1]       → 完全展开

✅ 特点总结

• 简洁高效：一行代码解决问题。


• 兼容性良好：现代浏览器基本都支持（IE 不支持）。


• 可控制深度：灵活控制展开层级。


• 推荐用于生产环境：清晰、安全、性能好。

⚠️ 注意：flat() 不会改变原数组，而是返回一个新的扁平化数组。

三、递归实现：最经典的思路

如果你不能使用 flat()（比如兼容老版本浏览器），或者想深入理解其内部机制，那么递归是一个经典且直观的解决方案。

✅ 基础递归版本

function flatten(arr) {

    let res = [];

    for (let i = 0; i < arr.length; i++) {

        if (Array.isArray(arr[i])) {

            res = res.concat(flatten(arr[i])); // 递归处理子数组

        } else {

            res.push(arr[i]); // 非数组元素直接加入结果

        }

    }

    return res;

}



// 测试

const arr = [1, [2, 3, [1]]];

console.log(flatten(arr)); // [1, 2, 3, 1]

✅ 分析

• 使用 for 循环遍历每个元素。


• 判断是否为数组：是 → 递归调用；否 → 直接推入结果数组。


• 利用 concat 合并递归结果。

✅ 缺点

• 每次 concat 都会创建新数组，性能略低。


• 递归深度过大可能导致栈溢出（极端情况）。

四、使用 reduce + 递归：函数式编程风格

利用 reduce 可以写出更优雅、更具函数式风格的扁平化函数。

✅ 实现方式

function flatten(arr) {

    return arr.reduce((pre, cur) => {

        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);

    }, []);

}

✅ 解析

• reduce 接收一个累加器 pre 和当前元素 cur。


• 如果 cur 是数组，则递归调用 flatten(cur)，否则直接使用 cur。


• 使用 concat 将结果合并到 pre 中。

✅ 优点

• 代码简洁，逻辑清晰。


• 更符合函数式编程思想。


• 易于组合其他操作（如 map、filter）。

五、利用 toString() + split() 的“黑科技”技巧

这是一个非常巧妙但需要谨慎使用的技巧，适用于数组中只包含数字或字符串基本类型的情况。

✅ 实现原理

JavaScript 中，数组的 toString() 方法会递归地将每个元素转为字符串，并用逗号连接。

const arr = [1, [2, 3, [1]]];

console.log(arr.toString()); // "1,2,3,1"

我们可以利用这一点，先转成字符串，再用 split(',') 分割，最后通过 +item 转回数字。

✅ 实现代码

function flatten(arr) {

    return arr.toString().split(',').map(item => +item);

}



// 测试

const arr = [1, [2, 3, [1]]];

console.log(flatten(arr)); // [1, 2, 3, 1]

✅ 优点

• 代码极短，实现“一行扁平化”。


• 性能较好（底层由引擎优化）。

✅ 缺点（⚠️ 重要）

❗ 所以这个方法虽然巧妙，但不适合通用场景，仅作为面试中的“奇技淫巧”了解即可。

六、使用 while 循环 + concat + 展开运算符（性能优化版）

这种方法避免了递归调用，采用循环逐步“拍平”数组，适合处理深层嵌套且希望避免栈溢出的场景。

✅ 实现方式

function flatten(arr) {

    while (arr.some(item => Array.isArray(item))) {

        arr = [].concat(...arr);

    }

    return arr;

}

✅ 原理解析

• arr.some(item => Array.isArray(item))：检查数组中是否还存在嵌套数组。


• ...arr：展开数组的所有元素。


• [].concat(...arr)：concat 会对展开后的数组元素自动“拍平一层”。

🔍 举个例子：

[].concat(...[1, [2, 3, [1]]])

// 等价于

[].concat(1, [2, 3, [1]])

// → [1, 2, 3, [1]]  → 拍平了一层

然后继续循环，直到没有嵌套为止。

✅ 优点

• 非递归，避免栈溢出。


• 逻辑清晰，易于理解。


• 性能较好，尤其适合中等深度嵌套。

✅ 缺点

• 每次 concat(...arr) 都会创建新数组，内存开销较大。


• 对于极深嵌套，仍可能影响性能。

七、对比总结：各种方法的适用场景

八、扩展思考：如何实现深度可控的扁平化？

有时候我们并不想完全拍平，而是只想展开指定层数。可以仿照 flat(depth) 实现一个通用函数：

function flattenDepth(arr, depth = 1) {

    if (depth === 0) return arr.slice(); // 深度为0，直接返回副本



    let result = [];

    for (let item of arr) {

        if (Array.isArray(item) && depth > 0) {

            result.push(...flattenDepth(item, depth - 1));

        } else {

            result.push(item);

        }

    }

    return result;

}



// 测试

const arr = [1, [2, 3, [4, 5, [6]]]];

console.log(flattenDepth(arr, 1)); // [1, 2, 3, [4, 5, [6]]]

console.log(flattenDepth(arr, 2)); // [1, 2, 3, 4, 5, [6]]

console.log(flattenDepth(arr, Infinity)); // [1, 2, 3, 4, 5, 6]

九、结语

📌 小贴士：如果你的项目需要兼容老旧浏览器，可以使用 Babel 转译 flat()，或手动引入 polyfill：

// Polyfill for Array.prototype.flat

if (!Array.prototype.flat) {

    Array.prototype.flat = function(depth = 1) {

        return this.reduce((acc, val) => 

            Array.isArray(val) && depth > 0

                ? acc.concat(val.flat(depth - 1))

                : acc.concat(val)

        , []);

    };

}

这样就能在任何环境中愉快地使用 flat() 了！

某些场景下CSS替代JS（现代CSS的深度实践指南）

🧩 前端渲染核心机制解析

水合错误（Hydration Mismatch）深度解析

graph TD

    A[客户端渲染CSR] --> B[服务端渲染SSR]

    B --> C{水合过程 Hydration}

    C -->|成功| D[交互式页面]

    C -->|失败| E[水合错误]

    E --> F[布局错乱]

    E --> G[交互失效]

    E --> H[控制台报错]

水合错误的本质：

在SSR框架（如Next.js）中，服务端生成的静态HTML与客户端React组件的初始状态不一致，导致React在"注水"过程中无法正确匹配DOM结构。

典型场景：

// Next.js组件 - 服务端渲染时获取时间

export default function Page({ serverTime }) {

  // 问题点：客户端初始化时间与服务端不同

  const [clientTime] = useState(Date.now());

  

  return (

    <div>

      <p>服务端时间: {serverTime}</p>

      <p>客户端时间: {clientTime}</p>

    </div>

  );

}



export async function getServerSideProps() {

  return {

    props: {

      serverTime: Date.now() // 服务端生成时间戳

    },

  };

}

根本原因分析：

现代CSS的解决之道

<!-- 纯CSS时间显示方案 -->

<div class="time-container">

  <time datetime="2023-11-15T08:00:00Z">08:00</time>

  <span class="live-indicator"></span>

</div>



<style>

  .live-indicator::after {

    content: "实时";

    animation: pulse 1s infinite;

  }

  

  @keyframes pulse {

    0% { opacity: 0.5; }

    50% { opacity: 1; }

    100% { opacity: 0.5; }

  }

</style>

优势对比：

🛠️ CSS核心解决方案详解

1️⃣ 嵌套选择器：组件化样式管理

/* 卡片组件 - 替代React组件 */

.card {

  padding: 1.5rem;

  border: 1px solid #e0e0e0;

  

  /* 标题区域 */

  &-header {

    display: flex;

    align-items: center;

    

    &:hover {

      background: #f5f5f5;

    }

  }

  

  /* 响应式处理 */

  @media (width <= 768px) {

    border-radius: 0;

    padding: 1rem;

  }

  

  /* 深色模式适配 */

  @media (prefers-color-scheme: dark) {

    border-color: #444;

  }

}

工程价值：

• 作用域隔离：避免全局样式污染


• 维护成本：修改单个组件不影响其他部分


• 开发效率：类似JSX的组件化开发体验

2️⃣ CSS变量 + 相对颜色：动态主题系统

:root {

  --primary: #2468f2;

  --text-primary: #333;

  

  /* 动态派生变量 */

  --primary-hover: hsl(from var(--primary) h s calc(l + 8%));

  --primary-active: oklch(from var(--primary) l c h / 0.9);

}



/* 主题切换器 */

.theme-switcher:has(#dark:checked) {

  --text-primary: #fff;

  --bg-primary: #121212;

}



button {

  background: var(--primary);

  transition: background 0.3s;

  

  &:hover {

    background: var(--primary-hover);

  }

  

  &:active {

    background: var(--primary-active);

  }

}

3️⃣ @starting-style：元素入场动画

.modal {

  opacity: 1;

  transform: translateY(0);

  transition: 

    opacity 0.4s ease-out,

    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  

  /* 初始状态 */

  @starting-style {

    opacity: 0;

    transform: translateY(20px);

  }

}

与传统方案对比：

// React实现模态框动画 - 需要状态管理

function Modal() {

  const [isOpen, setIsOpen] = useState(false);

  

  return (

    <div 

      className={`modal ${isOpen ? 'open' : ''}`}

      onTransitionEnd={() => console.log('动画结束')}

    >

      {/* 内容 */}

    </div>

  )

}



/* 对应CSS */

.modal {

  opacity: 0;

  transform: translateY(20px);

  transition: all 0.4s;

}



.modal.open {

  opacity: 1;

  transform: translateY(0);

}

📱 响应式设计新范式

动态视口单位实战

/* 移动端布局方案 */

.header {

  height: 15svh; /* 最小可视高度 */

}



.hero {

  height: 75lvh; /* 最大可视高度 */

}



.content {

  height: 120dvh; /* 动态高度 */

  overflow-y: auto;

}



.footer {

  height: 10svh; /* 保证始终可见 */

}

单位解析：

✅ 实践总结

水合错误规避策略

CSS优先架构优势

实施路线图：

通过现代CSS技术栈，开发者可在避免水合错误的同时，构建高性能、可访问性强的Web应用，实现真正的"渐进式Web体验"。

原文：xuanhu.info/projects/it…

instanceof 运算符用于检测某个构造函数的 prototype 属性，是否存在于对象的原型链上。

class Cat {

    constructor(name, age) {

        this.name = name;

        this.age = age;

    }

}



const cat = new Cat("Mittens", 3);



console.log(cat instanceof Cat); // true

console.log(cat instanceof Object); // true

instanceof 接收两个参数，v(左)和target(右)，判断v是否为target的实例对象，方法是先查询target的Symbol.hasInstance属性，如果不存在，则判断target的prototype属性是否存在v的原型中。

class Cat {



    static [Symbol.hasInstance](instance) {

        return false

    }



    constructor(name, age) {

        this.name = name;

        this.age = age;

    }

}



const cat = new Cat("Mittens", 3);



console.log(cat instanceof Cat); // false

console.log(cat instanceof Object); // true

console.log(cat instanceof null) // TypeError: Right-hand side of 'instanceof' is not an object

或许有人会想到1 intanceof Number和1 intanceof Object为什么会是false呢？明明(1).__proto__是有值的，为什么呢？这里就不得不提到JS的一个机制"自动装箱"。

我们定义一个变量const n = 1, n是一个原始值，有以下特点：

• 不可变性：原始值本身不能被修改，任何"修改"操作都会创建新值


• 按值传递：赋值时复制值，而不是引用


• 没有属性和方法：原始值本身不是对象，不能直接拥有属性和方法

在访问原始值属性或者方法时，Js会创建一个临时对象，使用后便会销毁。

const n = 1;

n.toString()



// JavaScript 内部实际执行的过程 

// 1. 创建临时 Number 对象：new Number(1) 

// 2. 调用方法：numberObj.toString() 

// 3. 返回结果："1" 

// 4. 销毁临时对象

但是在intanceof操作时，不会进行"自动装箱"，所以得到的结果为false。

一个有趣的效果--动态生成动画导航

在接下来的这个项目中，我们即将使用纯 JavaScript 和 CSS 来创建一个具有动态动画效果的导航栏。这篇文章将详细解析该代码的实现，包括 HTML 结构、CSS 样式、JavaScript 逻辑等方面，帮助你理解每一个步骤和实现思路。文章内容将逐步拆解，涵盖从页面结构、样式设计到功能实现的各个细节。

项目概述

这个项目的核心目标是创建一个包含动画效果的导航栏。具体功能包括：

HTML 结构

HTML 基本框架

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>一个动态动画导航</title>

    <style>

        /* 样式在这里 */

    </style>

</head>



<body>

    <script>

        /* JavaScript 逻辑在这里 */

    </script>

</body>



</html>

HTML 文档是非常标准的结构，包含了 head 和 body 两大部分：

导航栏元素

在页面的 body 中，我们没有直接放置导航栏的 HTML 代码，而是通过 JavaScript 动态生成。接下来我们将深入分析这些 JavaScript 代码的工作原理。

CSS 样式解析

全局样式

body, html, ul, p {

    margin: 0;

    padding: 0;

}

这一段代码是用来移除 body、html、ul 和 p 元素的默认 margin 和 padding，以确保布局没有多余的间隙。这是前端开发中的常见做法，有助于在不同浏览器中获得一致的效果。

导航栏 .nav

.nav {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    position: relative;

    margin-left: 200px;

}

.nav 是一个容器元素，负责展示导航栏中的各个导航项。它使用了 flex 布局，使得每个 li 元素可以水平排列。此外，通过 position: relative 来为可能添加的子元素（如下拉面板）提供定位上下文，margin-left: 200px 是为了给导航栏留出空间。

导航项 .nav li

.nav li {

    min-width: 100px;

    text-align: center;

    border-bottom: 1px solid #ddd;

    color: #535455;

    padding: 12px;

    margin-right: 12px;

    cursor: pointer;

    transition: all ease 0.2s;

}

每个导航项 (li) 有如下样式：

• min-width: 100px：确保每个项至少占据 100px 宽度。


• text-align: center：使文本居中显示。


• border-bottom: 1px solid #ddd：为每个导航项添加一个细线，增强视觉效果。


• padding: 12px 和 margin-right: 12px：设置内外边距，使项之间保持一定的间距。


• cursor: pointer：当鼠标悬停在导航项上时，显示为可点击的手形光标。


• transition: all ease 0.2s：使所有样式变化（如颜色、背景色、缩放等）具有过渡效果，持续时间为 0.2 秒，效果为平滑过渡。

面板 .nav-panel-wrapper

.nav-panel-wrapper {

    border: 1px solid #dedede;

    position: absolute;

    top: 60px;

    left: 0;

    padding: 12px;

    border-radius: 4px;

    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.32);

    display: none;

    overflow: hidden;

}

.nav-panel-wrapper 是每个导航项的下拉面板，包含以下样式：

• position: absolute：使面板相对于 .nav 容器进行绝对定位。


• top: 60px：将面板放置在导航项下方（假设导航栏的高度为 60px）。


• border-radius: 4px：为面板添加圆角，使其看起来更加圆滑。


• box-shadow：为面板添加阴影效果，使其更加立体，增加视觉层次感。


• display: none：面板默认是隐藏的，只有在用户悬停时才会显示。


• overflow: hidden：确保面板内容不会溢出其容器。

动画样式

.scale-up-top {

    animation: scale-up-top 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;

}



@keyframes scale-up-top {

    0% {

        transform: scale(0.5);

        transform-origin: 50% 0%;

    }

    100% {

        transform: scale(1);

        transform-origin: 50% 0%;

    }

}

.scale-up-top 类通过动画效果使面板从小到大逐渐放大，并且设置了动画的持续时间为 0.2 秒，使用了 cubic-bezier 函数来创建缓动效果。@keyframes scale-up-top 定义了放大过程的具体动画帧：从 50% 的缩放大小（即最小状态）逐渐过渡到 100%（即原始大小）。

JavaScript 逻辑解析

工具类 AnimateNavUtils

AnimateNavUtils 是一个工具类，提供了一些常用的方法，简化了 DOM 操作的代码：

• $：根据选择器返回文档中的第一个匹配元素。


• createElement：根据传入的 HTML 字符串创建一个新的 DOM 元素。


• addClass、removeClass、hasClass：分别用于为元素添加、移除、检查 CSS 类。


• insertNode：将一个新的节点插入到指定的元素中，或者替换现有节点。


• create：创建一个新的 DOM 元素节点。


• setStyle：为元素动态设置样式。

这些工具方法大大简化了后续类的实现，使得代码更具可读性和复用性。

动画导航类 AnimateNav

AnimateNav 类是核心部分，负责处理导航栏的渲染、事件绑定和面板的动画效果。

构造函数

constructor({ data }) {

    super();

    this.data = data;

    this.panelDelayTimer = null;

    this.currentIndex = 0;

    this.panelEle = null;

    this.navEle = null;

}

在构造函数中，我们接收一个 data 参数，它是一个包含导航项信息的数组。panelDelayTimer 用来控制面板的显示延迟，currentIndex 用来记录当前导航项的索引，panelEle 和 navEle 分别存储面板和导航栏的 DOM 元素引用。

mount 方法

mount(el) {

    const container = this.isString(el) ? this.$(el) : document.body;

    this.render(container);

}

mount 方法负责将导航栏挂载到指定的 DOM 元素中。如果传入的参数是一个字符串（例如选择器），则查找对应的元素；如果是其他类型，则默认为 document.body。

render 方法

render(container) {

    if (!this.isArray(this.data) || this.data?.length === 0) {

        return;

    }

    const node = this.createElement(`

        <ul class="nav">

            ${this.data.map(item => `<li data-sub="${item.sub}" data-index="${item.index}" class="nav-item">${item.text}</li>`).join('')}

            <div class="nav-panel-wrapper"> </div>

        </ul>

    `);

    ...

}

render 方法负责生成导航栏的 HTML 结构并将其插入到页面中。它首先检查 data 是否有效，确保它是一个数组且非空。接着，它动态创建一个包含 <ul class="nav"> 和 <div class="nav-panel-wrapper"> 的 HTML 结构。

• data.map(item => ...) 生成每个导航项的 <li> 元素，并根据 data-sub 和 data-index 设置相应的自定义属性。


• this.navEle 和 this.panelEle 分别存储了导航栏容器和面板容器的 DOM 元素引用，方便后续操作。


• 最后，调用 bindEvents 方法来绑定事件处理器。

绑定事件 bindEvents

bindEvents() {

    const items = Array.from(this.navEle.querySelectorAll('.nav-item'));

    items.forEach(item => {

        item.addEventListener('mouseenter', (e) => {

            const index = e.target.dataset.index;

            this.showPanel(index);

        });



        item.addEventListener('mouseleave', () => {

            this.hidePanel();

        });

    });

}



showPanel(index) {

    const item = this.navEle.querySelector(`[data-index="${index}"]`);

    const subItems = item.getAttribute('data-sub');

    this.panelEle.innerHTML = subItems ? subItems : '没有子项';

    this.addClass(this.panelEle, 'scale-up-top');

    this.setStyle(this.panelEle, {

        display: 'block',

        top: `${item.offsetTop + item.offsetHeight + 12}px`

    });

}



hidePanel() {

    this.removeClass(this.panelEle, 'scale-up-top');

    this.setStyle(this.panelEle, { display: 'none' });

}

在 bindEvents 方法中，我们为每个导航项添加了 mouseenter 和 mouseleave 事件监听器：

• mouseenter：当鼠标进入某个导航项时，调用 showPanel 方法显示对应的面板，并填充子项内容。


• mouseleave：当鼠标离开导航项时，调用 hidePanel 隐藏面板。

showPanel 方法

showPanel(index) {

    const item = this.navEle.querySelector(`[data-index="${index}"]`);

    const subItems = item.getAttribute('data-sub');

    this.panelEle.innerHTML = subItems ? subItems : '没有子项';

    this.addClass(this.panelEle, 'scale-up-top');

    this.setStyle(this.panelEle, {

        display: 'block',

        top: `${item.offsetTop + item.offsetHeight + 12}px`

    });

}

showPanel 方法根据导航项的索引 (data-index) 显示相应的子项。如果该项有子项（存储在 data-sub 属性中），则将这些子项填充到面板中。如果没有子项，则显示默认的消息（'没有子项'）。然后，通过 scale-up-top 动画类使面板执行放大动画，并将面板的显示位置设为导航项的下方。

hidePanel 方法

hidePanel() {

    this.removeClass(this.panelEle, 'scale-up-top');

    this.setStyle(this.panelEle, { display: 'none' });

}

hidePanel 方法用于隐藏面板。它会移除面板的动画类 scale-up-top，并通过 setStyle 将面板的 display 属性设置为 none，使其消失。

总结

动画和交互效果

来看一个在线示例如下所示:

当然这个导航还有可以优化和扩展的空间，如下:

优化和扩展

整体来说，这个动态导航效果是通过结合 JavaScript 的 DOM 操作和 CSS 动画来实现的，结构清晰，动画流畅，能够为用户提供良好的互动体验。

作为一个信奉代码逻辑的程序员，我做梦也没想到有一天会让AI帮我开发算命网站。

事情是这样的：某天深夜，我突然冒出一个奇葩想法——能不能让Claude Code从零开始搭建一个算命网站？ 不是因为我迷信，而是纯粹的技术好奇心：AI能理解2000年前的玄学智慧吗？

于是我开始了这个"用最现代的技术实现最古老的智慧"的实验。

3天后，网站上线了。更神奇的是，AI对传统文化的理解程度让我这个中国人都自愧不如。

选技术栈：AI的选择让我怀疑人生

我本来打算用熟悉的Vue + Express一把梭，结果Claude Code一开口就让我重新审视了自己的技术认知。

我问它："帮我选个适合算命网站的技术栈"

它的回答让我直接傻眼：

Next.js 14 + TypeScript。我说算命网站用TypeScript？它说："天干地支计算出错了用户会骂死你的，类型安全不是开玩笑的。"我一想，确实，算错了八字那不是要被用户打死。

Supabase。我说为什么不用MongoDB？它说："用户算命记录要能实时同步，万一用户换个设备要查看历史记录呢？"行吧，你考虑得比我周到。

DeepSeek API。这个真的让我意外，我下意识想用GPT，结果它说："中文传统文化，还是国产模型理解得更地道。"后来的事实证明，这个选择太明智了。

最让我佩服的是，它还主动提到了"真太阳时计算"。我当时就懵了，什么是真太阳时？它耐心地给我科普：古代算命要考虑地理位置对时间的影响，不是简单的北京时间。

我心想，这AI对传统文化的理解比我这个中国人还深入啊。

给自己算了一下还是挺满意的

教AI算命：一场智商与玄学的较量

项目最大的难点不是写代码，而是怎么让一个理性的AI理解玄学。

这就像让一个直男理解女朋友的小情绪，难度系数直接拉满。

第一次尝试，我直接甩给AI一个八字："帮我分析一下甲子年乙丑月丙寅日丁卯时"

AI的回答让我哭笑不得："这位朋友可能具有较强的时间观念，因为你的出生时间很规律..."

我当场就想关电脑了。这哪里是算命，这是在分析数据规律啊！

第二次，我学聪明了，告诉它"你是命理大师"。结果它开始发挥想象力，创造了一套"六行理论"，除了传统五行还加了个"气行"。我差点被它的创新精神感动。

第三次，我痛定思痛，决定从根本上改变策略。我不再把它当AI，而是真的把它当成一个有30年经验的老师傅。我给它详细介绍了传统命理的理论体系，告诉它什么能说，什么不能说，甚至教它怎么说话。

这次它终于开窍了，分析起来有模有样，专业术语用得恰到好处，建议也很中肯。

我突然意识到，训练AI就像带徒弟，不是给它知识，而是教它思考方式。

踩坑实录：当代码遇见玄学，bug都变得玄幻了

做这个项目让我深刻体会到什么叫"传统文化博大精深"，每个看似简单的概念背后都藏着巨大的坑。

最让我头疼的是时辰计算。我原本以为很简单，23点到1点是子时嘛，结果Claude Code告诉我："古代的时辰划分和现代时间概念不完全一样，而且要考虑地理位置。"

我当时就懵了，算个命还要考虑地理位置？后来才知道，古人用的是"真太阳时"，北京的中午12点和新疆的中午12点，太阳位置是不一样的。

这就好比你以为做个网站用个时间戳就行了，结果发现还要处理时区、夏令时、闰秒...程序员的痛，古人早就体验过了。

还有一个哭笑不得的bug。AI在分析五行的时候，突然开始"创新"，告诉用户发现了"六行理论"，除了金木水火土，还有个"气行"。我当时想，你这是要颠覆传统文化吗？

后来我在提示词里加了一句"严格按照传统理论，不要创新"，AI这才老实下来。

最隐蔽的坑是日期计算。现代JavaScript处理1900年以前的日期有问题，结果导致古代名人的八字全算错了。我测试的时候用李白的生日，算出来说他五行缺钱...我差点被自己笑死。

每修复一个bug，我都觉得自己对传统文化的理解又深了一层。这感觉很奇妙，就像在用代码穿越时空，和古人对话。

从程序员审美到仙气飘飘

做程序员这么多年，我深知自己的审美水平。我设计的界面通常是这样的：白色背景，黑色字体，偶尔加个边框，完事。

用户打开我设计的网站，第一反应通常是："这...是1990年代的网站吗？"

但算命网站不一样啊，用户来算命，你给他一个Excel表格的界面，他会觉得你在糊弄他。这玩意得有神秘感，得有仙气。

我问Claude Code："怎么让网站看起来有仙气？"

它的回答让我刷新了对UI设计的认知。它告诉我色彩心理学：深紫色代表神秘和智慧，金色代表尊贵和权威，渐变背景能营造空间感...

我听得一愣一愣的，心想这AI怎么还懂心理学？

按照它的建议改了界面后，效果确实不错。原本的Excel风格摇身一变成了"古风仙侠游戏界面"。朋友看了都说："这网站一看就很专业，肯定算得准。"

我当时就想，界面设计真的能影响用户的心理预期。同样的内容，包装不同，用户的信任度完全不一样。

这让我想到另一个问题：在技术驱动的时代，审美能力可能比编程能力更稀缺。会写代码的程序员到处都是，但能设计出让用户一见钟情的界面的，真的不多。

这个布局我很喜欢，但一些ui感觉还可以微调

意外的收获：技术人的文化觉醒

这个项目最大的收获不是技术上的，而是认知上的。

以前我总觉得传统文化和现代技术是两个世界的东西，一个古老神秘，一个理性现代。但做完这个项目后，我发现它们其实是可以融合的。

AI可以学会古老的智慧，代码可以承载文化的传承。技术不是要替代传统，而是要成为传统文化在新时代的载体。

更重要的是，我开始理解用户需求的复杂性。人们使用算命网站，不只是想知道未来会怎样，更多的是希望获得一种心理安慰，一种对未知的控制感。

这让我重新思考技术产品的本质：不是要解决技术问题，而是要解决人的问题。

下一步：用技术重新定义传统

基于这次的经验，我有了一个更大胆的想法：用现代技术重新定义传统文化。

不是简单地把古书电子化，而是用AI、VR、区块链这些新技术，创造全新的文化体验方式。比如用AI生成个性化的《易经》解读，用VR重现古代占卜场景，用区块链记录每个人的文化传承轨迹。

传统文化需要在新时代找到新的表达方式，而技术人恰好有这个能力和责任。

先用three.js写个动画勉强还算满意吧

写在最后：一个程序员的玄学感悟

3天时间，从一个深夜的奇思妙想到一个完整的产品上线。回过头看，这个项目带给我的不只是技术上的提升，更多的是思维上的转变。

最大的感悟是：AI不是工具，而是合作伙伴。它有自己的"想法"，会给你意想不到的建议，会从你没想到的角度解决问题。与其说是我在使用AI，不如说是我们在一起探索未知。

第二个感悟是：用户需求比技术实现更重要。算命网站的核心不是算法有多精确，而是能不能给用户带来心理上的满足。技术是手段，解决人的问题才是目的。

第三个感悟是：传统文化需要新的表达方式。不是要用技术颠覆传统，而是要用技术让传统在新时代重新焕发生机。

如果你也对AI开发感兴趣，我的建议是：不要把AI当成万能的代码生成器，要把它当成一个有智慧的合作伙伴。它能给你灵感，能帮你思考，但最终的判断和决策还是要靠你自己。

最后，如果你也想尝试类似的跨界项目，记住一点：技术栈可以学，算法可以抄，但洞察用户需求的能力，只能靠自己慢慢积累。

下一个项目，还不知道做啥，有想法的朋友可以在评论区说一声

本文基于真实项目开发经验，欢迎技术交流和商业合作！

在查阅 VitePress 具体实践时，我被 UnoCSS 文档中的彩虹动画效果深深吸引。在查看其实现原理之后，本文也将探索如何通过自定义组件和样式增强 VitePress 站点，并实现一个炫酷的彩虹动画效果。

自定义主题

VitePress 允许你通过自定义 Layout 来改变页面的结构和样式。自定义 Layout 可以帮助你更好地控制页面的外观和行为，尤其是在复杂的站点中。

项目初始化

在终端中运行以下命令，初始化一个新的 VitePress 项目：

npx vitepress init

然后根据提示，这次选择自定义主题（Default Theme + Customization）：

┌  Welcome to VitePress!

│

◇  Where should VitePress initialize the config?

│  ./docs

│

◇  Site title:

│  My Awesome Project

│

◇  Site description:

│  A VitePress Site

│

◇  Theme:

│  Default Theme + Customization

│

◇  Use TypeScript for config and theme files?

│  Yes

│

◇  Add VitePress npm scripts to package.json?

│  Yes

│

└  Done! Now run npm run docs:dev and start writing.



Tips:

- Make sure to add  docs/.vitepress/dist and  docs/.vitepress/cache to your .gitignore file.

- Since you've chosen to customize the theme, you should also explicitly install vue as a dev dependency.

注意提示，这里需要额外手动安装 vue 库：

pnpm add vue

自定义入口文件

找到 .vitepress/theme/index.ts 入口文件：

// <https://vitepress.dev/guide/custom-theme>

import { h } from 'vue'

import type { Theme } from 'vitepress'

import DefaultTheme from 'vitepress/theme'

import './style.css'



export default {

  extends: DefaultTheme,

  Layout: () => {

    return h(DefaultTheme.Layout, null, {

      // <https://vitepress.dev/guide/extending-default-theme#layout-slots>

    })

  },

  enhanceApp({ app, router, siteData }) {

    // ...

  }

} satisfies Theme

里面暴露了一个 Layout 组件，这里是通过 h 函数实现的，我们将其抽离成 Layout.vue 组件。

创建自定义 Layout

VitePress 的 Layout 组件是整个网站的骨架，控制了页面的基本结构和布局。通过自定义 Layout，我们可以完全掌控网站的外观和行为。

为什么要自定义 Layout？

• 增加特定的布局元素


• 修改默认主题的行为


• 添加全局组件或功能


• 实现特殊的视觉效果（如我们的彩虹动画）

我们在 .vitepress/theme 文件夹中创建 Layout.vue 组件，并将之前的内容转换成 vue 代码：

<script setup lang="ts">

import DefaultTheme from 'vitepress/theme'

</script>



<template>

  <DefaultTheme.Layout />

</template>

接下来，在 .vitepress/theme/index.ts 中注册自定义 Layout：

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'

import CustomLayout from './Layout.vue'



export default {

  extends: DefaultTheme,

  Layout: CustomLayout,

}

这将会覆盖默认的 Layout，应用你自定义的布局结构。

覆盖原本样式

VitePress 提供了 css 变量来动态修改自带的样式，可以看到项目初始化后在 .vitepress/theme 中有一个 style.css。里面提供了案例，告诉如何去修改这些变量。

同时可以通过该链接查看全部的 VitePress 变量：VitePress 默认主题变量。

VitePress 允许我们通过多种方式覆盖默认样式。最常用的方法是创建一个 CSS 文件，并在主题配置中导入。

比如想设置 name 的颜色，就可以通过：

:root {

  --vp-home-hero-name-color: blue;

}

引入 UnoCSS

UnoCSS 是一个按需生成 CSS 的工具，可以极大简化 CSS 管理，帮助快速生成高效样式。

在项目中安装 UnoCSS 插件：

pnpm add -D unocss

然后，在 vite.config.ts 中配置 UnoCSS 插件：

import UnoCSS from 'unocss/vite'

import { defineConfig } from 'vite'



export default defineConfig({

  plugins: [UnoCSS()],

}

通过 UnoCSS，可以轻松应用样式而无需写冗余 CSS。例如，使用以下类名快速创建按钮样式：

<button class="bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600">

  按钮

</button>

实现彩虹动画

彩虹动画是本文的主角，主要通过动态改变 CSS 变量值来实现色彩的平滑过渡。

定义彩虹动画关键帧

通过 @keyframes，在不同颜色之间平滑过渡，形成彩虹动画效果。创建 rainbow.css 文件：

@keyframes rainbow {

  0% {

    --vp-c-brand-1: #00a98e;

    --vp-c-brand-light: #4ad1b4;

    --vp-c-brand-lighter: #78fadc;

    --vp-c-brand-dark: #008269;

    --vp-c-brand-darker: #005d47;

    --vp-c-brand-next: #009ff7;

  }

  25% {

    --vp-c-brand-1: #00a6e2;

    --vp-c-brand-light: #56cdff;

    --vp-c-brand-lighter: #87f6ff;

    --vp-c-brand-dark: #0080b9;

    --vp-c-brand-darker: #005c93;

    --vp-c-brand-next: #9280ed;

  }

  50% {

    --vp-c-brand-1: #c76dd1;

    --vp-c-brand-light: #f194fa;

    --vp-c-brand-lighter: #ffbcff;

    --vp-c-brand-dark: #9e47a9;

    --vp-c-brand-darker: #772082;

    --vp-c-brand-next: #eb6552;

  }

  75% {

    --vp-c-brand-1: #e95ca2;

    --vp-c-brand-light: #ff84ca;

    --vp-c-brand-lighter: #ffadf2;

    --vp-c-brand-dark: #be317d;

    --vp-c-brand-darker: #940059;

    --vp-c-brand-next: #d17a2a;

  }

  100% {

    --vp-c-brand-1: #00a98e;

    --vp-c-brand-light: #4ad1b4;

    --vp-c-brand-lighter: #78fadc;

    --vp-c-brand-dark: #008269;

    --vp-c-brand-darker: #005d47;

    --vp-c-brand-next: #009ff7;

  }

}



:root {

  --vp-c-brand-1: #00a8cf;

  --vp-c-brand-light: #52cff7;

  --vp-c-brand-lighter: #82f8ff;

  --vp-c-brand-dark: #0082a7;

  --vp-c-brand-darker: #005e81;

  --vp-c-brand-next: #638af8;

  animation: rainbow 40s linear infinite;

}



html:not(.rainbow) {

  --vp-c-brand-1: #00a8cf;

  --vp-c-brand-light: #52cff7;

  --vp-c-brand-lighter: #82f8ff;

  --vp-c-brand-dark: #0082a7;

  --vp-c-brand-darker: #005e81;

  --vp-c-brand-next: #638af8;

  animation: none !important;

}

这段代码定义了彩虹动画的五个关键帧，并将动画应用到根元素上。注意，我们还定义了不带动画的默认状态，这样就可以通过 CSS 类切换动画的启用/禁用。

实现彩虹动画控制组件

接下来，实现名为 RainbowAnimationSwitcher 的组件，其主要逻辑是通过添加或移除 HTML 根元素上的 rainbow 类来控制动画的启用状态，从而实现页面的彩虹渐变效果。

这个组件使用了 @vueuse/core 的两个工具函数：

• useLocalStorage 用于在浏览器本地存储用户的偏好设置


• useMediaQuery 用于检测用户系统是否设置了减少动画

<script lang="ts" setup>

import { useLocalStorage, useMediaQuery } from '@vueuse/core'

import { inBrowser } from 'vitepress'

import { computed, watch } from 'vue'

import RainbowSwitcher from './RainbowSwitcher.vue'



defineProps<{ text?: string; screenMenu?: boolean }>()



const reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)').value



const animated = useLocalStorage('animate-rainbow', inBrowser ? !reduceMotion : true)



function toggleRainbow() {

  animated.value = !animated.value

}



// 在这里对动画做处理

watch(

  animated,

  anim => {

    document.documentElement.classList.remove('rainbow')

    if (anim) {

      document.documentElement.classList.add('rainbow')

    }

  },

  { immediate: inBrowser, flush: 'post' },

)



const switchTitle = computed(() => {

  return animated.value ? 'Disable rainbow animation' : 'Enable rainbow animation'

})

</script>



<template>

  <ClientOnly>

    <div class="group" :class="{ mobile: screenMenu }">

      <div class="NavScreenRainbowAnimation">

        <p class="text">

          {{ text ?? 'Rainbow Animation' }}

        </p>

        <RainbowSwitcher

          :title="switchTitle"

          class="RainbowAnimationSwitcher"

          :aria-checked="animated ? 'true' : 'false'"

          @click="toggleRainbow"

        >

          <span class="i-tabler:rainbow animated" />

          <span class="i-tabler:rainbow-off non-animated" />

        </RainbowSwitcher>

      </div>

    </div>

  </ClientOnly>

</template>



<style scoped>

.group {

  border-top: 1px solid var(--vp-c-divider);

  padding-top: 10px;

  margin-top: 1rem !important;

}



.NavScreenRainbowAnimation {

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-radius: 8px;

  padding: 12px;

  background-color: var(--vp-c-bg-elv);

  max-width: 220px;

}



.text {

  line-height: 24px;

  font-size: 12px;

  font-weight: 500;

  color: var(--vp-c-text-2);

}



.animated {

  opacity: 1;

}



.non-animated {

  opacity: 0;

}



.RainbowAnimationSwitcher[aria-checked='false'] .non-animated {

  opacity: 1;

}



.RainbowAnimationSwitcher[aria-checked='true'] .animated {

  opacity: 1;

}

</style>

其中 RainbowSwitcher 组件是一个简单的开关按钮。以下是其实现：

<template>

  <button class="VPSwitch" type="button" role="switch">

    <span class="check">

      <span v-if="$slots.default" class="icon">

        <slot />

      </span>

    </span>

  </button>

</template>



<style scoped>

.VPSwitch {

  position: relative;

  border-radius: 11px;

  display: block;

  width: 40px;

  height: 22px;

  flex-shrink: 0;

  border: 1px solid var(--vp-input-border-color);

  background-color: var(--vp-input-switch-bg-color);

  transition: border-color 0.25s !important;

}



.check {

  position: absolute;

  top: 1px;

  left: 1px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background-color: var(--vp-c-neutral-inverse);

  box-shadow: var(--vp-shadow-1);

  transition: transform 0.25s !important;

}



.icon {

  position: relative;

  display: block;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  overflow: hidden;

}

</style>

挂载组件

在 .vitepress/theme/index.ts 中，在 enhanceApp 中挂载组件：

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'

import CustomLayout from './Layout.vue'



export default {

  extends: DefaultTheme,

  Layout: CustomLayout,

  enhanceApp({ app, router }) {

    app.component('RainbowAnimationSwitcher', RainbowAnimationSwitcher)

    if (typeof window === 'undefined') return



    watch(

      () => router.route.data.relativePath,

      () => updateHomePageStyle(location.pathname === '/'),

      { immediate: true },

    )

  },

}



// Speed up the rainbow animation on home page

function updateHomePageStyle(value: boolean) {

  if (value) {

    if (homePageStyle) return



    homePageStyle = document.createElement('style')

    homePageStyle.innerHTML = `

    :root {

      animation: rainbow 12s linear infinite;

    }`

    document.body.appendChild(homePageStyle)

  } else {

    if (!homePageStyle) return



    homePageStyle.remove()

    homePageStyle = undefined

  }

}

在导航栏中使用彩虹动画开关

在 .vitepress/config/index.ts 的配置文件中添加彩虹动画开关按钮：

export default defineConfig({

  themeConfig: {

    nav: [

      // 其他导航项...

      {

        text: `v${version}`,

        items: [

          {

            text: '发布日志',

            link: '<https://github.com/yourusername/repo/releases>',

          },

          {

            text: '提交 Issue',

            link: '<https://github.com/yourusername/repo/issues>',

          },

          {

            component: 'RainbowAnimationSwitcher',

            props: {

              text: '彩虹动画',

            },

          },

        ],

      },

    ],

    // 其他配置...

  },

})

这样，彩虹动画开关就成功加载到导航栏的下拉菜单中。

彩虹动画效果

如果想查看具体效果，可查看 EasyEditor 的文档。其中关于彩虹动画效果的详细实现看，可以查看内部对应的代码：EasyEditor/docs/.vitepress/theme at main · Easy-Editor/EasyEditor。

在React中使用Vant组件库的指南

Vant是一套轻量、可靠的移动端组件库，特别适合在React项目中使用。本文将详细介绍如何在React项目中集成和使用Vant组件库，并通过Button按钮和NavBar导航栏等常用组件作为示例，展示其基本用法和高级特性。

一、Vant简介与安装

1.1 Vant是什么

Vant是由有赞前端团队开发的一套基于Vue的移动端组件库，后来也推出了React版本(Vant React)。它提供了60+高质量组件，覆盖了移动端开发的大部分场景，具有以下特点：

• 性能极佳：组件经过精心优化，运行流畅


• 样式美观：遵循统一的设计语言，视觉效果出色


• 功能丰富：提供大量实用组件和灵活配置


• 文档完善：中文文档详细，示例丰富


• 社区活跃：GitHub上star数高，问题响应快

1.2 安装Vant

在React项目中使用Vant前，需要先安装它。确保你已经创建了一个React项目（可以使用create-react-app或其它脚手架工具），然后在项目目录下执行：

bash

npm install vant --save

# 或者使用yarn

yarn add vant

1.3 引入组件样式

Vant的样式文件需要单独引入。推荐在项目的入口文件（通常是src/index.js或src/App.js）中添加以下代码：

jsx

import 'vant/lib/index.css';

这一步非常重要，否则组件将没有样式效果。

二、Button按钮组件使用详解

Button是Vant中最基础也是最常用的组件之一，下面详细介绍它的使用方法。

2.1 基本用法

首先引入Button组件：

jsx

import { Button } from 'vant';

然后在你的组件中使用：

jsx

function MyComponent() {

  return (

    <div>

      <Button type="primary">主要按钮</Button>

      <Button type="info">信息按钮</Button>

      <Button type="default">默认按钮</Button>

    </div>

  );

}

2.2 按钮类型

Vant提供了多种按钮类型，通过type属性来设置：

• primary: 主要按钮，蓝色背景


• success: 成功按钮，绿色背景


• danger: 危险按钮，红色背景


• warning: 警告按钮，橙色背景


• default: 默认按钮，灰色背景


• info: 信息按钮，浅蓝色背景

jsx

<Button type="success">成功按钮</Button>

<Button type="danger">危险按钮</Button>

<Button type="warning">警告按钮</Button>

2.3 按钮形状

除了类型，还可以设置按钮的形状：

• 方形按钮（默认）


• 圆形按钮：添加round属性


• 圆角按钮：添加square属性

jsx

<Button round>圆形按钮</Button>

<Button square>圆角按钮</Button>

2.4 按钮尺寸

Vant提供了三种尺寸的按钮：

• 大号按钮：size="large"


• 普通按钮（默认）


• 小号按钮：size="small"


• 迷你按钮：size="mini"

jsx

<Button size="large">大号按钮</Button>

<Button size="small">小号按钮</Button>

<Button size="mini">迷你按钮</Button>

2.5 按钮状态

按钮有不同的状态，可以通过以下属性控制：

• 禁用状态：disabled


• 加载状态：loading


• 朴素按钮：plain（边框样式）

jsx

<Button disabled>禁用按钮</Button>

<Button loading>加载中...</Button>

<Button plain>朴素按钮</Button>

2.6 按钮图标

可以在按钮中添加图标，使用icon属性：

jsx

import { Icon } from 'vant';



<Button icon="plus">添加</Button>

<Button icon="search">搜索</Button>

<Button icon={<Icon name="like" />}>点赞</Button>

Vant内置了大量图标，可以在官方文档中查看所有可用图标。

2.7 按钮事件

按钮最常用的就是点击事件：

jsx

function handleClick() {

  console.log('按钮被点击了');

}



<Button onClick={handleClick}>点击我</Button>

三、NavBar导航栏组件使用详解

NavBar是移动端常用的顶部导航栏组件，下面详细介绍它的使用方法。

3.1 基本用法

首先引入NavBar组件：

jsx

import { NavBar } from 'vant';

然后在你的组件中使用：

jsx

function MyComponent() {

  return (

    <NavBar

      title="标题"

      leftText="返回"

      rightText="按钮"

      leftArrow

    />

  );

}