法：

 //添加到容器(父級節(jié)點)的結(jié)尾，并返回新增節(jié)點
 parentNode.appendChild(新節(jié)點);
 //參照節(jié)點之前插入節(jié)點，并返回新節(jié)點
 parentNode.insertBefore(新節(jié)點,參照節(jié)點)
 //用新節(jié)點替換當(dāng)前節(jié)點，并返回被替換節(jié)點（當(dāng)前節(jié)點）
 parentNode.replaceChild (新節(jié)點,當(dāng)前節(jié)點 )
 //移除節(jié)點，并返回移除的節(jié)點
 //不能直接刪除自己，是需要先到父級元素，再來刪除自己
 parentNode.removeChild(當(dāng)前元素)
 //克隆節(jié)點，返回一個被克隆的新節(jié)點
 //一個布爾值參數(shù)，默認(rèn)false為淺拷貝，只復(fù)制容器，true為深拷貝，包括內(nèi)容全部復(fù)制
 被克隆的元素.cloneNode(true|false)

html和css代碼

 <button id="btn">最前插入新節(jié)點</button>
 <ul id="uu">
     <li>桃園豪杰三結(jié)義 <button class="rep">替換</button> <button class="del">刪除</button></li>
     <li>孫堅跨江擊劉表 <button class="rep">替換</button> <button class="del">刪除</button></li>
     <li>呂奉先射戟轅門 <button class="rep">替換</button> <button class="del">刪除</button></li>
     <li>關(guān)公賺城斬車胄 <button class="rep">替換</button> <button class="del">刪除</button></li>
     <li>玄德荊州依劉表 <button class="rep">替換</button> <button class="del">刪除</button></li>
     <li>趙子龍單騎救主 <button class="rep">替換</button> <button class="del">刪除</button></li>
     <li>諸葛亮痛哭龐統(tǒng) <button class="rep">替換</button> <button class="del">刪除</button></li>
     <li>關(guān)云長敗走麥城 <button class="rep">替換</button> <button class="del">刪除</button></li>
     <li>武侯彈琴退仲達(dá) <button class="rep">替換</button> <button class="del">刪除</button></li>
     <li>魏主政歸司馬氏 <button class="rep">替換</button> <button class="del">刪除</button></li>
 </ul>

JavaScript代碼

文為Varlet組件庫源碼主題閱讀系列第六篇，Varlet支持自定義主題及暗黑模式，本篇文章我們來詳細(xì)看一下這兩者的實現(xiàn)。

主題定制

Varlet是通過css變量來組織樣式的，什么是css變量呢，其實很簡單，首先聲明自定義的css屬性，隨便聲明在哪個元素上都可以，不過只有該元素的后代才能使用，所以如果要聲明全局所有元素都能使用的話，可以設(shè)置到根偽類:root下：

:root {
  --main-bg-color: red;
}

如代碼所示，css變量的自定義屬性是有要求的，需要以--開頭。

然后在任何需要使用該樣式的元素上通過var()函數(shù)調(diào)用即可：

div {
  background-color: var(--main-bg-color);
}

只要更改了--main-bg-color屬性的值，所有使用該樣式變量的地方都會更新，所以主題定制靠的就是這個。

Varlet組件的樣式變量總體分為兩種：基本的、組件自身的。

公共的基本樣式變量定義在varlet-ui/src/styles/目錄下：

每個組件都會引入這個文件，比如Button組件：

除此之外每個組件也會有自身的變量，同樣比如Button組件：

想要修改默認(rèn)的值也很簡單，直接覆蓋即可。運(yùn)行時動態(tài)更新樣式也可以直接修改根節(jié)點的樣式變量，此外Varlet也提供了一個組件來幫我們做這件事，接下來看看這個組件是怎么實現(xiàn)的。

組件式調(diào)用

組件式調(diào)用可以有范圍性的定制組件樣式，避免全局污染，使用示例：

<script setup>
import { ref, reactive } from 'vue'

const state = reactive({
  score: 5,
})

const styleVars = ref({
  '--rate-primary-color': 'var(--color-success)',
})
</script>

<template>
  <var-style-provider :style-vars="styleVars">
    <var-rate v-model="state.score" />
  </var-style-provider>
</template>

StyleProvider組件源碼如下：

<script lang="ts">
import { defineComponent, h } from 'vue'
import { formatStyleVars } from '../utils/elements'
import { call, createNamespace } from '../utils/components'

const { n } = createNamespace('style-provider')

export default defineComponent({
  name: 'VarStyleProvider',
  props: {
    styleVars: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { slots }) {
    return () =>
      h(
        'div',
        {
          class: n(),
          style: formatStyleVars(props.styleVars),
        },
        call(slots.default)
      )
  },
})
</script>

實現(xiàn)很簡單，就是創(chuàng)建一個div元素來包裹組件，然后將css變量設(shè)置到該div上，這樣這些css變量只會影響它的子孫元素。

函數(shù)式調(diào)用

除了使用組件，也可以通過函數(shù)的方式使用，但是只能全局更新樣式：

<script setup>
import { StyleProvider } from '@varlet/ui'

let rootStyleVars = null

const darkTheme = {
  '--color-primary': '#3f51b5'
}

const toggleRootTheme = () => {
  rootStyleVars = rootStyleVars ? null : darkTheme
  StyleProvider(rootStyleVars)
}
</script>

<template>
  <var-button type="primary" block @click="toggleRootTheme">切換根節(jié)點樣式變量</var-button>
</template>

StyleProvider函數(shù)如下：

const mountedVarKeys: string[] = []

function StyleProvider(styleVars: StyleVars | null = {}) {
    // 刪除之前設(shè)置的css變量
    mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key))
    mountedVarKeys.length = 0
    // 將css變量設(shè)置到根元素上，并且添加到mountedVarKeys數(shù)組
    const styles: StyleVars = formatStyleVars(styleVars)
    Object.entries(styles).forEach(([key, value]) => {
        document.documentElement.style.setProperty(key, value)
        mountedVarKeys.push(key)
    })
}

實現(xiàn)也非常簡單，直接將css變量設(shè)置到html節(jié)點上，同時會添加到一個數(shù)組里，用于刪除操作。

暗黑模式

Varlet內(nèi)置提供了暗黑模式的支持，使用方式為：

<script setup>
import dark from '@varlet/ui/es/themes/dark'
import { StyleProvider } from '@varlet/ui'

let currentTheme = null

const toggleTheme = () => {
  currentTheme = currentTheme ? null : dark
  StyleProvider(currentTheme)
}
</script>

<template>
  <var-button block @click="toggleTheme">切換主題</var-button>
</template>

也調(diào)用了前面的StyleProvider方法，所以實現(xiàn)原理也是通過css變量，其實就是內(nèi)置了一套暗黑模式的css變量：

總結(jié)

可以發(fā)現(xiàn)使用css變量來實現(xiàn)主題定制和暗黑模式是非常簡單的，兼容性也非常好，各位如果有涉及到換膚的需求都可以優(yōu)先考慮使用。