建站
咨詢
售后
建站咨詢
新聞中心
JavaScript 是個靈活的腳本語言，能方便的處理業(yè)務邏輯。當需要傳輸通信時，我們大多選擇 JSON 或 XML 格式。
創(chuàng)新互聯(lián)建站主要從事網(wǎng)站設計、成都做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務宛城,10多年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220
但在數(shù)據(jù)長度非?？量痰那闆r下，文本協(xié)議的效率就非常低了，這時不得不使用二進制格式。
去年的今天，在折騰一個 前后端結合的 WAF 時，就遇到了這個麻煩。
因為前端腳本需要采集不少數(shù)據(jù)，而最終是隱寫在某個 cookie 里的，因此可用的長度非常有限，只有幾十個字節(jié)。
如果不假思索就用 JSON 的話，光一個標記字段 {"enableXX": true} 就占去了一半長度。然而在二進制里，標記 true 或 false 不過是 1 個比特的事，可以節(jié)省上百倍的空間。
同時，數(shù)據(jù)還要經(jīng)過校驗、加密等環(huán)節(jié)，只有使用二進制格式，才能方便的調(diào)用這些算法。
優(yōu)雅實現(xiàn)
不過，JavaScript 并不支持二進制。
這里的「不支持」不是說「無法實現(xiàn)」，而是無法「優(yōu)雅實現(xiàn)」。語言的發(fā)明，就是用來優(yōu)雅解決問題的。即使沒有語言，人類也可以用機器指令來編寫程序。
如果非要用 JavaScript 操作二進制，最終就類似這樣：
var flags = +enableXX1 << 16 | +enableXX2 << 15 | ...
雖然能實現(xiàn)，但很丑陋。各種硬編碼、各種位運算。
然而，對于先天支持二進制的語言，看起來就十分優(yōu)雅：
- union {
- struct {
- int enableXX1: 1;
- int enableXX2: 1;
- ...
- };
- int16_t value;
- } flags;
- flags.enableXX1 = enableXX1;
- flags.enableXX2 = enableXX2;
開發(fā)者只需定義一個描述即可。使用時，字段偏移多少、如何讀寫，這些細節(jié)完全不用關心。
為了能達到類似效果，起先封裝了一個 JS 版的結構體：
- // 最初方案：封裝一個 JS 結構體
- var s = new Struct([
- {name: 'month', bit: 4, signed: false},
- ...
- ]);
- s.set('month', 12);
- s.get('month');
將細節(jié)進行了隱藏，看起來就優(yōu)雅多了。
優(yōu)雅但不***
但是，這總感覺不是最***的。結構體這種東西，本該由語言提供，如今卻要用額外的代碼實現(xiàn)，而且還是在運行期間。
另外，后端解碼是用 C 實現(xiàn)的，所以得維護兩套代碼。一旦數(shù)據(jù)結構或者算法變了，得同時更新 JS 和 C，很麻煩。
于是琢磨，能否共用一套 C 代碼，同時用于前端和后端？
也就是說，需要能將 C 編譯成 JS 來運行。
認識 emscripten
能將 C 編譯成 JS 的工具有不少，最專業(yè)的要數(shù) emscripten。
emscripten 的使用方式很簡單，和傳統(tǒng) C 編譯器差不多，只不過生成的是 JS 代碼。
- ./emcc hello.c -o hello.html
- // hello.c
- #include
- #include
- int main() {
- time_t now;
- time(&now);
- printf("Hello World: %s", ctime(&now)); return 0;
- }
編譯之后即可運行：
很有趣吧~ 大家可以嘗試下，這里就不多介紹了。
實用缺陷
然而我們關心的不是有趣，而是實用。
事實上，即使一個 Hello World 編譯出來的 JS 也過萬行，多達數(shù)百 KB。就算壓縮再 GZIP，仍有幾十 KB。
同時 emscripten 使用了 asm.js 規(guī)范，內(nèi)存訪問是通過 TypedArray 實現(xiàn)的。
這意味著 IE10 以下的用戶都無法運行。這也是不可接受的。
因此，我們得做如下改進：
減少體積
增加兼容
首先寄托 emscripten 本身，看看能不能通過設置參數(shù)，來達到我們的目的。
不過一番嘗試之后，并沒有成功。那只能自己動手實現(xiàn)了。
減少體積
為什么最終腳本會那么大，里面都放了些什么？分析了下內(nèi)容，大致有這幾個部分：
輔助功能
接口模擬
初始化操作
運行時函數(shù)
程序邏輯
輔助功能
比如字符串和二進制轉換、提供回調(diào)包裝等。這些基本都是用不著的，我們可以給自己寫個特殊的回調(diào)函數(shù)。
接口模擬
提供文件、終端、網(wǎng)絡、渲染等接口。之前見過用 emscripten 移植的客戶端游戲，看來模擬了不少接口。
初始化操作
全局內(nèi)存、運行時、各種模塊的初始化。
運行時函數(shù)
純粹的 C 只能做簡單的計算，很多功能都依靠運行時函數(shù)。
不過，有些常用的函數(shù)，其背后的實現(xiàn)是及其復雜的。例如 malloc 和 free，對應的 JS 有近 2000 行！
程序邏輯
這才是 C 程序真正對應的 JS 代碼。因為編譯時經(jīng)過 LLVM 的優(yōu)化，邏輯可能變得面目全非了。
這部分代碼量不大，是我們真正想要的。
事實上，如果程序沒有用到一些特殊功能的話，把邏輯函數(shù)單獨摳出來，仍然是可以運行的！
考慮到我們的 C 程序非常簡單，所以簡單粗暴的提取出來，也是沒問題的。
C 程序對應的 JS 邏輯位于 // EMSCRIPTEN_START_FUNCS 和 // EMSCRIPTEN_END_FUNCS 之間。過濾掉運行時函數(shù)，剩下的就是 100% 的邏輯代碼了。
增加兼容
接著解決內(nèi)存訪問的兼容性問題。
首先了解下，為何要用 TypedArray。
emscripten 申請了一大塊 ArrayBuffer 來模擬內(nèi)存，然后關聯(lián)了一些 HEAP 開頭的變量。
這些不同類型的 HEAP 共享同一塊內(nèi)存，這樣就能高效的指針操作。
然而不支持 TypedArray 的瀏覽器，顯然無法運行。所以得提供個 polyfill 兼容下。
但經(jīng)分析，這幾乎不可能實現(xiàn) —— 因為 TypedArray 和數(shù)組一樣，是通過索引來訪問的：
- var buf = new UInt8Array(100);
- buf[0] = 123; // set
- alert(buf[0]); // get
然而 [] 操作符在 JS 里是無法重寫的，因此難以將其變成 setter 和 getter。況且不支持 TypedArray 的都是低版本 IE，更不用考慮 ES6 的那些特征。
于是琢磨 IE 的私有接口。比如用 onpropertychange 事件來模擬 setter。不過這樣做效率極低，而且 getter 仍不易實現(xiàn)。
經(jīng)過一番考慮，決定不用鉤子的方式，而是直接從源頭上解決 —— 修改語法！
我們用正則，找出源碼中的賦值操作:
- HEAP[index] = val;
替換成:
- HEAP_SET(index, val);
類似的，將讀取操作:
- HEAP[index]
替換成:
- HEAP_GET(index)
這樣，原先的索引操作，就變成函數(shù)調(diào)用了。我們就能接管內(nèi)存的讀寫，并且沒有任何兼容性問題！
然后實現(xiàn) 8、16、32 位有無符號的版本。通過 JS 的 Array 來模擬，非常簡單。
麻煩的是模擬 Float32 和 Float64 兩個類型。不過本次 C 程序中并未用到浮點，所以就暫不實現(xiàn)了。
到此，兼容性問題就解決了。
大功告成
解決了這些缺陷，我們就可以愉快的在 JS 中使用 C 邏輯了。
作為腳本，只需關心采集哪些數(shù)據(jù)。這樣 JS 代碼就非常的優(yōu)雅：
數(shù)據(jù)的儲存、加密、編碼，這些底層數(shù)據(jù)操作，則通過 C 實現(xiàn)。
編譯時使用 -Os 參數(shù)優(yōu)化體積。最終的 JS 混淆壓縮之后，還不到 2 KB，十分小巧精煉。
更***的是，我們只需維護一份代碼，即可同時編譯出前端和后端兩個版本。
于是，這個「前后端 WAF」開發(fā)就容易多了。
所有的數(shù)據(jù)結構和算法，都由 C 實現(xiàn)。前端編譯成 JS 代碼，后端編譯成 lua 模塊，供 nginx-lua 使用。
前后端的腳本，都只需關注業(yè)務功能即可，完全不用涉及數(shù)據(jù)層面的細節(jié)。
測試版
事實上，還有第三個版本 —— 本地版。
因為所有的 C 代碼都在一起，因此可以方便的編寫測試程序。
這樣就無需啟動 WebServer、打開瀏覽器來測試了。只需模擬一些數(shù)據(jù)，直接運行程序即可測試，非常輕量。
同時借助 IDE，調(diào)試起來更容易。
小結
每一門語言都有各自的優(yōu)缺點。將不同語言的優(yōu)勢相互結合，可以程序變得更優(yōu)雅、更***。
網(wǎng)頁標題：【熱點推薦】在JavaScript中使用C程序
網(wǎng)站URL：http://m.fisionsoft.com.cn/article/cdgccph.html
