本人翻譯者系奇舞團(tuán)前端工程師

原文標(biāo)題：Yes, I can connect to a DB in CSS

原文作者：Memeloper

原文地址：https://www.leemeichin.com/posts/yes-i-can-connect-to-a-db-in-css.html

大廠技術(shù)  高級(jí)前端  Node進(jìn)階

點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)Node交流群

故事背景

某公司招聘需求如下:

我們正在尋求可以使用CSS連接數(shù)據(jù)庫的前端伙伴~

自從我上次開始一個(gè)高質(zhì)量的“發(fā)帖”以來，已經(jīng)有很長一段時(shí)間了，事實(shí)上，它已經(jīng)很長一段時(shí)間了，那時(shí)候我的詞匯表中可能還沒有“水帖”這個(gè)詞。

為此，我受到了一個(gè)早期項(xiàng)目的啟發(fā)，該項(xiàng)目基于區(qū)塊鏈初創(chuàng)公司將投資者的臉投影到3D立方體上讓我想起了以前的互聯(lián)網(wǎng)，那時(shí)一切都很奇怪。

好漢不提當(dāng)年勇。所以今天，我將討論如何管理我自己的新項(xiàng)目:sqlcss.xyz^[1]

顧名思義，這就是使用CSS連接數(shù)據(jù)庫的方式。不幸的是，它只能在Chrome中工作，但你可以提供任何你喜歡的SQLite數(shù)據(jù)庫，并通過CSS查詢它。

它是如何工作的?

首先我們需要用到一組被親切地稱為Houdini^[2]的api，它讓你的瀏覽器能夠通過Javascript對(duì)象模型來控制CSS。換言之，這意味著您可以定制CSS樣式、添加定制屬性，等等。

可能這個(gè)作品最大的特性是CSS Paint Worklet^[3]，它允許你在一個(gè)元素上“繪制”，就像你知道和喜歡的畫布一樣，并讓瀏覽器把它當(dāng)作CSS中的圖像。這里有一些例子可以用來演示Houdini^[4]。

然而，這個(gè)工作集只提供了Worker API的一個(gè)子集，而且畫布上下文本身也被大量剝離。這樣做的實(shí)際結(jié)果是，您的自定義CSS繪制代碼提供了一個(gè)比您預(yù)期的更小的沙盒。

這意味著什么? 沒有網(wǎng)絡(luò)訪問權(quán)限，因此可以和fetch和XmlHttpRequest說再見了。在繪制上下文上沒有drawText功能。其他各種JS api也消失了，以防你希望解決這些問題。

不過，不用擔(dān)心。并非一切都完了。讓我們把它分解成幾個(gè)步驟。

1. 設(shè)置數(shù)據(jù)庫

這必須是第一步，以便理解概念證明是否可行。

首先我們會(huì)借助于sql.js^[5]。它實(shí)際上是一個(gè)通過emscripten編譯成WebAssembly和老式ASM.js的SQLite版本。不幸的是，我們不能使用WASM版本，因?yàn)樗仨毻ㄟ^網(wǎng)絡(luò)獲取二進(jìn)制文件。ASM版本沒有這個(gè)限制，因?yàn)樗械拇a都可以在一個(gè)模塊中使用。

雖然PaintWorklet限制了worker內(nèi)部的網(wǎng)絡(luò)訪問，但你仍然可以導(dǎo)入代碼，只要它是一個(gè)ES6模塊。這意味著文件中必須有一個(gè)導(dǎo)出語句。不幸的是，sql.js沒有ES6的版本，所以我自己修改了sql.js，使其能夠順利的被import進(jìn)入項(xiàng)目。

現(xiàn)在到了關(guān)鍵時(shí)刻:我可以在我的工作包中建立一個(gè)數(shù)據(jù)庫嗎?

const SQL = await initSqlJs({
  locateFile: file => `./${file}`,
});

const DB = new SQL.Database();

**成功了!**但沒有任何數(shù)據(jù)，所以我們來解決這個(gè)問題。

2. 查詢數(shù)據(jù)庫

一開始最簡單的方法就是設(shè)置一些假數(shù)據(jù),sql.js有兩個(gè)函數(shù)可以做到這一點(diǎn)。

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)

我有了測(cè)試表，里面有一些值。我應(yīng)該能夠查詢這個(gè)并獲得這些值，盡管我不確定得到什么樣的結(jié)構(gòu)化查詢結(jié)果。

const result = DB.exec('SELECT * FROM test')
console.log(result)

正如預(yù)期的那樣，結(jié)果已經(jīng)出來了。不過，渲染展示通過CSS查詢數(shù)據(jù)庫的結(jié)果會(huì)更好。

3. 渲染結(jié)果，最簡單的方法

我認(rèn)為這就像在畫布上寫文本一樣。這有多難，對(duì)吧?

class SqlDB {
  async paint(ctx, geom, properties) {
    const result = DB.exec('SELECT * FROM test');
    ctx.font = '32px monospace';
    ctx.drawText(JSON.stringify(result), 0, 0, geom.width);
  }
}

不，那樣就太簡單了。這里的上下文與畫布元素的上下文不同，它只提供了功能的一個(gè)子集。

當(dāng)然，它仍然可以繪制路徑和曲線，所以缺乏方便的API是一個(gè)障礙，但這一切都不是問題。

4. 不使用文本API創(chuàng)建文本

幸運(yùn)的是，我們可以借助于opentype.js^[6]所提供的解決方案。它可以解析一個(gè)字體文件，然后，給定一個(gè)文本字符串，生成每個(gè)字符的字母形式。這個(gè)操作的實(shí)際結(jié)果是一個(gè)表示字符串的路徑對(duì)象，然后可以將其呈現(xiàn)到上下文中。

這次我不必修改opentype庫來導(dǎo)入它，因?yàn)樗呀?jīng)可以從JSPM^[7]中獲得。所以，如果你給JSPM一個(gè)npm包，它會(huì)自動(dòng)生成一個(gè)ES6模塊，你可以直接導(dǎo)入到你的瀏覽器中。這是非常棒的，因?yàn)槲艺娴牟幌霝榱艘粋€(gè)有趣的項(xiàng)目而使用打包工具。

import opentype from 'https://ga.jspm.io/npm:[email protected]/dist/opentype.module.js'

opentype.load('fonts/firasans.otf')

但這里有一個(gè)問題——它想通過網(wǎng)絡(luò)加載字體，而我不能這樣做!嗨,挫敗了!

……而且?它還有一個(gè)接受數(shù)組緩沖區(qū)的解析方法。我將用base64編碼字體，然后在我的模塊中解碼它。

import opentype from 'https://ga.jspm.io/npm:[email protected]/dist/opentype.module.js'
import base64 from 'https://ga.jspm.io/npm:[email protected]/index.js'

const font = 'T1RUTwAKAIAAAwA ... 3 days later ... wAYABkAGgAbABwAIAKM'

export default opentype.parse(base64.toByteArray(font).buffer)

我告訴過你worklet也沒有處理base64字符串的api嗎?atob和btoa都沒有!我也不得不為此找到一個(gè)普通的JS實(shí)現(xiàn)。

我把這段代碼放在它自己的文件中，因?yàn)樗惶先梭w工程學(xué)……必須在剩下的代碼旁邊使用大約200kb的編碼字體字符串。

這就是我為何要濫用ES模塊來加載我的字體的原因。

5. 渲染結(jié)果，另一種簡單的方式

從現(xiàn)在起，所有繁重的工作都由opentype庫來完成，所以我所需要做的就是用一點(diǎn)數(shù)學(xué)知識(shí)來對(duì)齊。

import font from './font.js'

const SQL = await initSqlJs({
  locateFile: file => `./${file}`,
});

const DB = new SQL.Database();

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)

class SqlDB {
  async paint(ctx, geom, properties) {
    const query = DB.exec('SELECT * FROM test')
    const result = query[0].values.join(', ')

    const size = 48
    const width = font.getAdvanceWidth(queryResults, size)
    const point = {
      x: (geom.width / 2) - (width / 2),
      y: geom.height / 2
    }

    const path = font.getPath(result, point.x, point.y, size)
    path.draw(ctx)
  }
}

registerPaint('sql-db', SqlDb)

最好再來一些HTML和CSS看看發(fā)生了什么。

<html>
  <head>
    <script>
      CSS.paintWorklet.addModule('./cssdb.js')
    </script>
    <style>
      main {
        width: 100vw;
        height: 100vh;
        background: paint(sql-db);
      }
    </style>
  </head>
  <body>
    <main></main>
  </body>
</html>

成功了!但這里沒有足夠的CSS，而且查詢是硬編碼的。

6. 通過CSS查詢

如果必須使用CSS來查詢數(shù)據(jù)庫，那就更好了。事實(shí)上，這是我們可以在Paint Worker的上下文之外與其通信的唯一方式，因?yàn)闆]有與Web worker一樣的消息傳遞API。

為此，需要一個(gè)定制的CSS屬性。定義inputProperties的好處是可以訂閱該屬性的更改，因此如果該屬性的值發(fā)生更改，它將重新呈現(xiàn)。不需要設(shè)置任何訂閱者自己。

class SqlDb {
  static get inputProperties() {
    return [
      '--sql-query',
    ]
  }

  async paint(ctx, geom, properties) {
    // ...
    const query = DB.exec(String(properties.get('--sql-query')))
  }
}

這些CSS屬性被稱為類型化屬性，但它們本質(zhì)上被封裝在一個(gè)特殊的CSSProperty類中，而這個(gè)類本身并不是很有用。因此，你必須手動(dòng)將其轉(zhuǎn)換為字符串或數(shù)字或其他類似的使用它，如上所述。

現(xiàn)在對(duì)CSS做一個(gè)快速調(diào)整。

main {
  // ...
  --sql-query: SELECT name FROM test;
}

引號(hào)在這里被故意省略了，因?yàn)榉駝t在將字符串傳遞給數(shù)據(jù)庫之前，我必須將它們從字符串中刪除。也就是說，這很有效!

任務(wù)完成!

如果你玩過sqlcss。你會(huì)注意到我并沒有滿足于此。在進(jìn)行了一些重構(gòu)之后，又進(jìn)行了一些更改。

7. 導(dǎo)入數(shù)據(jù)庫文件

硬編碼數(shù)據(jù)庫模式和實(shí)際數(shù)據(jù)，有點(diǎn)糟糕。它證明了這個(gè)概念，但我們肯定可以做得更好。

如果您可以查詢?nèi)魏文矚g的數(shù)據(jù)庫，只要您手邊有數(shù)據(jù)庫文件，那就太棒了。我只需要讀取這個(gè)文件并對(duì)其進(jìn)行base64編碼，就像我對(duì)字體文件所做的那樣。

const fileInput = document.getElementById('db-file')
fileInput.onchange = () => {
  const reader = new FileReader()
  reader.readAsDataURL(fileInput.files[0])

  reader.onload = () => {
    document.documentElement.style.setProperty(
        '--sql-database',
        `url('${reader.result}')`
    )
  }
}

我為此做了一個(gè)額外的CSS屬性，在這個(gè)屬性中，您可以將SQLite數(shù)據(jù)庫作為base64編碼的數(shù)據(jù)URI提供。data URI只是為了顯示并確保它對(duì)DOM是有效的,我將在Worker層面解析這些東西。

最后一步是使其更易于查詢，因?yàn)榉駝t您必須進(jìn)入調(diào)試器來操作元素的CSS。

8. 編寫查詢語句

這可能是項(xiàng)目中最簡單的部分。自定義屬性對(duì)于分號(hào)有一點(diǎn)問題，而SQLite并不關(guān)心末尾的分號(hào)是否被省略，所以最簡單的做法是，如果在輸入中找到它，就刪除它。

const queryInput = document.getElementById('db-query')
queryInput.onchange = () => {
  let query = queryInput.value;
  if (query.endsWith(';')) {
    query = query.slice(0, -1)
  }

    document.documentElement.style.setProperty(
    '--sql-query',
    queryInput.value
  )
}

從現(xiàn)在開始，您可以使用CSS導(dǎo)入和瀏覽您自己的數(shù)據(jù)庫了!

我遺漏了一件事，就是所有這些查詢結(jié)果特別多的時(shí)候，如何更好的渲染展示的問題。如果查詢結(jié)果有很多，他們需要分開到單獨(dú)的行。這與本文的主題--使用CSS連接到數(shù)據(jù)庫并沒有太大關(guān)系，所以我認(rèn)為在這里談?wù)撨@個(gè)問題并不合適，但如果你想進(jìn)一步了解這個(gè)"荒謬"的概念，git上的代碼都是可用的^[8]。

譯者補(bǔ)充

1. SQLite是由C語言編寫的嵌入式輕量級(jí)數(shù)據(jù)庫，廣泛用于IOS和Android的App中。若有讀者想要在瀏覽器端應(yīng)用SQLite，推薦使用SQLite的WebAssembly版--sql.js，基本與SQLite的使用沒有太多區(qū)別。在實(shí)際項(xiàng)目使用中，還需特別注意SQLite的安全性問題。
2. 為方便展示，特此截取本文作者所實(shí)現(xiàn)的CSS連接SQLite的部分demo如下:

3. 關(guān)于文中所提到的jspm,這里引用其官網(wǎng)的介紹如下:jspm為導(dǎo)入映射提供了模塊CDN和包管理，允許任何來自NPM的包都可以直接在瀏覽器中加載，無需進(jìn)一步的處理。

參考資料