使用VueJS進(jìn)行應(yīng)用開(kāi)發(fā), 脫離不了對(duì)應(yīng)用間的模塊進(jìn)行拆分, 將大塊界面拆解為組件的過(guò)程. 我們可以很方便的在單文件中使用<template>塊維護(hù)組件的視圖, 使用<script>維護(hù)組件的邏輯部分, 使用<style>維護(hù)組件的樣式. 在我們編寫(xiě) VueJS 組件樣式時(shí), 不得忽略的一點(diǎn)就是樣式污染.

樣式污染產(chǎn)生原因

提及樣式污染, 主要要追溯到Webpack對(duì)CSS文件的打包過(guò)程, 這里我們以Vue-Element-Admin中的Webpack配置項(xiàng)舉例:

const webpackConfig = merge(baseWebpackConfig, {
 plugins: [
 new MiniCssExtractPlugin({
     filename: utils.assetsPath('css/[name].[contenthash:8].css'),
     chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
    }),
 ]
})

Webpack 使用 MiniCssExtractPlugin 插件, 將文件(如Vue單文件組件)中的CSS代碼, 經(jīng)過(guò)處理后, 分離到形如app.hash1234.css的單獨(dú)的CSS文件:

如果沒(méi)有加入防止樣式污染的措施的同時(shí), 項(xiàng)目中存在了大量的同名 ClassName, 那么可能會(huì)產(chǎn)生意想不到的CSS選擇器權(quán)重覆蓋. 這可能使后文件中某部分選擇器權(quán)重更高的類影響整個(gè)應(yīng)用, 而此過(guò)程通常發(fā)生在組件的編寫(xiě)中, 所以一般稱之為組件樣式污染.

Webpack & Vue SFC Object

對(duì)于 Vue 項(xiàng)目而言, 使用 Webpack 將極大的優(yōu)化了工作流程, 因?yàn)橥ㄟ^(guò)Vue Loader, Vue 單文件組件能很好的融合進(jìn) Webpack 工作流中. 通過(guò)跟蹤源碼, 可以發(fā)現(xiàn), 我們寫(xiě)的單文件組件都被處理為了SFC對(duì)象, 即包含了單個(gè)HTML模塊, 單個(gè)腳本模塊, 一個(gè)或多個(gè)樣式模塊, 一個(gè)或多個(gè)自定義模塊的對(duì)象:

// vue-loader/index.js
const descriptor = parse({
  source,
  compiler: options.compiler || loadTemplateCompiler(),
  filename,
  sourceRoot,
  needMap: sourceMap
})

// vuejs/component-compiler-utils/index.js
function parse(options) {
  const { compiler } = options
  output = compiler.parseComponent(source, compilerParseOptions)
  return output
}

// vue.js
function parseComponent(content, options) {
 // ...
  var sfc = {
    template: null,
    script: null,
    styles: [],
    customBlocks: []
  }
  // ...
  return sfc
}

我們可以將SFC結(jié)構(gòu)融合到Webpack進(jìn)行開(kāi)發(fā)的過(guò)程成中, 主要有這幾點(diǎn)影響:

• 允許為 Vue 組件的每個(gè)部分使用其它的 webpack loader，例如在 <style>的部分使用 Sass Loader , 在 <customBlocks>的部分使用自定義 Loader
• 使用 webpack loader 將 <style>和 <template> 中引用的資源當(dāng)作模塊依賴來(lái)處理
• 模擬 Scoped CSS
• 在開(kāi)發(fā)過(guò)程中使用熱重載來(lái)保持狀態(tài)

以下主要介紹Scoped CSS的原理.

Scoped CSS

大白話版本之 Scoped CSS 原理

通過(guò) Webpack 調(diào)用 VueJS 中相應(yīng) Loader , 給組件HTML模板添加自定義屬性 (Attribute) data-v-x, 以及給組件內(nèi)CSS選擇器添加對(duì)應(yīng)的屬性選擇器 (Attribute Selector) [data-v-x], 達(dá)到組件內(nèi)樣式只能生效與組件內(nèi)HTML的效果, 代碼效果如下:

<div class='lionad' data-v-lionad></div>
<style>
.lionad[data-v-lionad] {
 background: @tiger-orange;
}
</style>

源碼跟蹤

Webpack 使用其它 CSS Loader 處理 VueJS 中對(duì)應(yīng) CSS 代碼之前, Vue Loader 已經(jīng)替我們做了一層簡(jiǎn)單的處理, 如果組件中 style 塊包含了 scoped 屬性:

<!-- 某個(gè)VueJS組件中 -->
<template>
  <div class='lionad'></div>
</template>
<style lang="scss" scoped>
  .lionad {
    background: @tiger-orange;
  }
</style>

下代碼即判斷當(dāng)前SFC對(duì)象樣式塊中是否有scoped屬性, 并插入用于 query 中, 順帶一提, 每個(gè)單文件組件被解析后, 都會(huì)生成對(duì)應(yīng)組件ID, ID主要以生產(chǎn)/開(kāi)發(fā)環(huán)境做區(qū)分, 通過(guò)文件路徑+源碼或是文件路徑的值作為哈希特征值的形式生成, 如下:

// vue-loader/index.js
const id = hash(isProduction (shortFilePath + '\n' + source) : shortFilePath)
const hasScoped = descriptor.styles.some(s => s.scoped)
const query = `? vue&type=template${idQuery}${scopedQuery}`
const request = templateRequest = stringifyRequest(src + query)
templateImport = `import { render, staticRenderFns } from ${request}`

HTML模板處理

在用于處理SFC結(jié)構(gòu)中HTML模板的 templateLoader 中, 我們可以得知, query 中所設(shè)置的參數(shù)將合并為 loader options 經(jīng)由 Webpack 轉(zhuǎn)交 templateLoader 再轉(zhuǎn)交 @vue/component-compiler-utils.compileTemplate 處理:

// vue-loader/templateLoader.js
const query = qs.parse(this.resourceQuery)
const { id } = query
const compilerOptions = Object.assign({}, options.compilerOptions, {
  scopeId: query.scoped ? `data-v-${id}` : null
})
const compiled = compileTemplate({ compilerOptions })

實(shí)際 compileTemplate 函數(shù)在處理內(nèi)容時(shí), 編譯函數(shù)使用的是 query 中的 compiler 或 vue-template-compiler, 后者會(huì)將模板文本轉(zhuǎn)換成為 JavaScript 渲染函數(shù), 大致如下:

1. 從HTML模版轉(zhuǎn)換為AST(虛擬語(yǔ)法樹(shù))
2. AST優(yōu)化，處理靜態(tài)模版與動(dòng)態(tài)模板
3. 生成JS函數(shù)，用于在運(yùn)行時(shí)運(yùn)行時(shí)生成純HTML

代碼分別對(duì)應(yīng):

// vue-template-compiler/build.js/createCompilerCreator
var ast = parse(template.trim(), options)
optimize(ast, options)
var code = generate(ast, options)

先前我們的組件ID在 parse 階段解析開(kāi)始標(biāo)簽時(shí)就會(huì)被推入內(nèi)部?jī)?chǔ)存的數(shù)據(jù)結(jié)構(gòu)中:

function elementToOpenTagSegments (el, state) {
 var segments = [{ type: RAW, value: ("<" + (el.tag)) }]
 // _scopedId
 if (state.options.scopeId) {
  segments.push({ type: RAW, value: (" " + (state.options.scopeId)) })
 }
 segments.push({ type: RAW, value: ">" })
 return segments
}

先前我們的HTML模板 <div class='lionad'></div> 中開(kāi)始標(biāo)簽會(huì)被轉(zhuǎn)換成如下數(shù)據(jù)結(jié)構(gòu):

[
  { type: RAW, value: '<div' },
  { type: RAW, value: 'class=lionad' },
  { type: RAW, value: 'data-v-xxxxxx' },
  { type: RAW, value: '>' },
]

樣式模板處理

與 HTML Template 解析的過(guò)程類似, 通過(guò) Webpack 將樣式模板轉(zhuǎn)交 stylePostLoader 進(jìn)行處理, 處理邏輯主要引用了 @vue/component-compiler-utils 中的 compileStyle 部分, 后者對(duì)樣式模板進(jìn)行解析的過(guò)程中, 將會(huì)對(duì)含 scoped 標(biāo)記的模板引入插件 stylePlugins/scoped.js, scoped.js 將 data-v-xxxxxx 添加到選擇器末尾的過(guò)程如下:

selectors.each((selector) => {
  selector.each((n) => {
    if (n.value === '::v-deep' || n.value === '>>>' || n.value === '/deep/') {
      return false;
    }
  });
  selector.insertAfter(node, selectorParser.attribute({
    attribute: id
  }))
})

題外話, 通過(guò)以上代碼, 我們發(fā)現(xiàn)當(dāng)當(dāng)前處理到三種特定類型選擇器會(huì)終止循環(huán), 停止將 data-v-xxx 添加到選擇器末尾:

1. 偽類 ::v-deep
2. 選擇器 >>>
3. 選擇器 /deep/

我們可以利用這個(gè)特征, 在組件中寫(xiě)樣式穿透, 即內(nèi)部組件影響外部組件樣式 (ε=ε=ε=┏(゜ロ゜;)┛ 主動(dòng)樣式污染), 當(dāng)然這在特定的情境下是有用的, 比如當(dāng)我們想主動(dòng)覆蓋第三方UI組件框架的樣式, 卻不想引入新的CSS文件, 或不想寫(xiě)非 Scoped CSS 模板的時(shí)候.

最后

本人前端菜得捉急, 文中不詳盡或有錯(cuò)的地方, 歡迎各位大佬斧正. 如果本文對(duì)你有所幫助, 那是再好不過(guò), 看到這里都是真愛(ài)啊

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論