聖誕夜，讓你的程式碼都變成聖誕樹吧！

TJ君發表於2021-12-24

今天是聖誕夜，有多少小夥伴是出去過節了呢？當然肯定有更多的小夥伴是等著和TJ君一起分享聖誕夜的編碼快樂！

既然是聖誕夜，那我們今天怎麼也要聊聊和聖誕有關的東西，對不對？

那麼你以為TJ君要給你介紹如何編寫一個聖誕樹？

嗯點子不錯，不過似乎太簡單了？好吧好吧，TJ君肯定不會讓小夥伴們失望，拿出一個壓箱底的好東東~~~

js2image

這是一個神奇的開源專案，有多神奇呢？它可以把js原始碼壓縮成一個ascii字元畫的原始碼的工具，就像這個樣子：

不要小看它哦，被壓縮後的程式碼可還是直接可以執行的哦！

安裝依賴

# Ubuntu
$ sudo apt-get install graphicsmagick

# Fedora
$ sudo dnf install GraphicsMagick

# OS X
$ brew install graphicsmagick

# Chocolatey (package manager for Windows)
# (Restart of cmd/PowerShell is required)
$ choco install graphicsmagick

不過要注意的是，js2image有一點小侷限，就是暫時不支援windows系統（看作者的更新頻率可能後面也不會支援了T_T），並且需要圖片不能透明、要是白底。

使用

在Node.js中，可按如下命令進行安裝：

$ npm install js2image --save

具體的使用方法如下：

var Js2Image = require('js2image');

var image = './resource/tree.png';
var source = './resource/jquery.js';
var target = './target/xmas.js';
var options = {};

// 獲取結果的code
var sourceCode = fs.readFileSync(source);
Js2Image.getCode(sourceCode, image, options).then(function (code) {
  // code為生成的程式碼
  console.log(code);
})

// 或者直接寫入檔案
Js2Image.writeToFile(source, image, target, options).then(function (code) {
  // 生成的程式碼已被寫入到檔案target
  // code為生成的程式碼
  console.log(code);
});

根據作者的思路，js2image的實現思路有三個步驟：

  • 1、使用現成已有的庫來生成圖片的字元畫。
  • 2、將目標的js程式碼進行分割，然後將分割的程式碼分塊裝入第一步的字元畫裡。（分割的原理是將js原始碼解構成一個陣列）
  • 3、對於那些不能分開的js語法，特別需要注意要特殊處理，儲存在一起。（難點在於如何提取出所有，記住是所有，不可分割的語法）

具體的核心思路，在作者的程式碼裡都實現啦，感興趣的小夥伴，趕緊來一探究竟！聖誕夜讓我們把程式碼都變成聖誕樹吧！獲取程式碼地址如下：
https://mp.weixin.qq.com/s/27BMDTf7ybnGj9Z08cPxBw

相關文章