使用CSS連接數(shù)據(jù)庫(kù)的方式

第使用CSS連接數(shù)據(jù)庫(kù)的方式某公司招聘需求如下:

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

自從我上次開始一個(gè)高質(zhì)量的發(fā)帖以來，已經(jīng)有很長(zhǎng)一段時(shí)間了，事實(shí)上，它已經(jīng)很長(zhǎ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ù)庫(kù)的方式。不幸的是，它只能在Chrome中工作，但你可以提供任何你喜歡的SQLite數(shù)據(jù)庫(kù)，并通過CSS查詢它。

它是如何工作的

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

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

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

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

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

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

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

首先我們會(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)出語(yǔ)句。不幸的是，sql.js沒有ES6的版本，所以我自己修改了sql.js，使其能夠順利的被import進(jìn)入項(xiàng)目。

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

constSQL=awaitinitSqlJs({

locateFile:file=`./${file}`,

constDB=newSQL.Database();

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

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

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

DB.run('CREATETABLEtest(nameTEXTNOTNULL)')

DB.run(

'INSERTINTOtestVALUES(),(),(),()',

['A','B','C','D']

)

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

constresult=DB.exec('SELECT*FROMtest')

console.log(result)

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

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

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

classSqlDB{

asyncpaint(ctx,geom,properties){

constresult=DB.exec('SELECT*FROMtest');

ctx.font='32pxmonospace';

ctx.drawText(JSON.stringify(result),0,0,geom.width);

}

不，那樣就太簡(jiǎn)單了。這里的上下文與畫布元素的上下文不同，它只提供了功能的一個(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庫(kù)來導(dǎo)入它，因?yàn)樗呀?jīng)可以從JSPM[7]中獲得。所以，如果你給JSPM一個(gè)npm包，它會(huì)自動(dòng)生成一個(gè)ES6模塊，你可以直接導(dǎo)入到你的瀏覽器中。這是非常棒的，因?yàn)槲艺娴牟幌霝榱艘粋€(gè)有趣的項(xiàng)目而使用打包工具。

importopentypefrom'https://ga.jspm.io/npm:opentype.js@1.3.4/dist/opentype.module.js'

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

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

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

importopentypefrom'https://ga.jspm.io/npm:opentype.js@1.3.4/dist/opentype.module.js'

importbase64from'https://ga.jspm.io/npm:base64-js@1.5.1/index.js'

constfont='T1RUTwAKAIAAAwA...3dayslater...wAYABkAGgAbABwAIAKM'

exportdefaultopentype.parse(base64.toByteArray(font).buffer)

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

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

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

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

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

importfontfrom'./font.js'

constSQL=awaitinitSqlJs({

locateFile:file=`./${file}`,

constDB=newSQL.Database();

DB.run('CREATETABLEtest(nameTEXTNOTNULL)')

DB.run(

'INSERTINTOtestVALUES(),(),(),()',

['A','B','C','D']

classSqlDB{

asyncpaint(ctx,geom,properties){

constquery=DB.exec('SELECT*FROMtest')

constresult=query[0].values.join(',')

constsize=48

constwidth=font.getAdvanceWidth(queryResults,size)

constpoint={

x:(geom.width/2)-(width/2),

y:geom.height/2

constpath=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ù)庫(kù)，那就更好了。事實(shí)上，這是我們可以在PaintWorker的上下文之外與其通信的唯一方式，因?yàn)闆]有與Webworker一樣的消息傳遞API。

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

classSqlDb{

staticgetinputProperties(){

return[

'--sql-query',

asyncpaint(ctx,geom,properties){

//...

constquery=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:SELECTnameFROMtest;

}

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

任務(wù)完成!

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

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

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

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

constfileInput=document.getElementById('db-file')

fileInput.onchange=()={

constreader=newFileReader()

reader.readAsDataURL(fileInput.files[0])

reader.onload=()={

document.documentElement.style.setProperty(

'--sql-database',

`url('${reader.result}')`

}

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

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

8.編寫查詢語(yǔ)句

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

constqueryInput=document.getElementById('db-query')

queryInput.onchange=()={

letquery=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ù)庫(kù)了!

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