如何將JavaScript轉化成Swift？（一）

最近遇到了一個詭異的需求：

將一個弱類型語言JavaScript轉化成強類型語言Swift

方案一：

強轉，將JavaScript的語法和Swift的語法一一對應

在Js中 一個方法的關鍵詞是 function 在Swift中是 func，咱們遍歷一下Js代碼，將全部的 function 轉化成 func

嗯。。。 感受太傻了。。。沒有一點做爲一個程序猿的追求

方案二：

將Js轉化成AST，將Js的AST轉化成Swift的AST，而後再轉回Swift

嗯。。。這個貌似牛逼哄哄，可是遇到了幾個難點:

一、Js的AST和Swift的AST很難找到對應關係

JavaScript中定義一個a變量:

var a = 1

Swift中定義一個a變量:

var a = 1

他們的AST分別以下：

二者的語法描述如出一轍，可是AST卻相差不少，很難找到差別性

二、JavaScript中經過 escodegen 這個庫 將AST從新生成爲源碼，可是在Swift和Java中並未找到相應的官方庫或者第三方庫來進行轉化

三、JavaScript中有ES五、ES6，咱們能夠編寫ES6的語法而後經過Bebal將ES6翻譯成ES5，用到就是 JavaScript 和 AST 之間的相互轉換，可是Swift並中沒有相似的需求，因此相應的資料代碼極少

方案三：

將Js的AST轉化成Swift

既然不能將Swift的AST轉化成Swift，可不能夠將Js的AST轉化成Swift呢？

如何操做？：

這裏借鑑了JS Parser的三板斧

1.經過 esprima 把源碼轉化爲AST

2.經過 estraverse 遍歷並更新AST

3.經過 escodegen 將AST從新生成源碼

簡單說一下原理：

• 首先經過 esprima 將js 源碼翻譯成 AST，
• 經過 estraverse 遍歷AST 補充一些特徵（好比類型）
• 修改 escodegen 源碼，生成Swift源碼

修改 escodegen 源碼

新建一個Js的項目，安裝 esprima、escodegen依賴，

新建 test.js 須要解析的js代碼：

function testFunc() {
    var a = 1
    var b = "1"
    var c  = false
    if (a<20) {
      b = "Good day";
    }
    console.log(b)
    var car = {type:"Fiat", model:500, color:"white"};
    console.log(car.type)
}
  
複製代碼

新建 swift.js 用來讀取 test.js 代碼，生成 test.swift 文件：

const esprima = require('esprima');
const escodegen = require("escodegen");
var fs = require("fs")

// 讀取test.js代碼
var data = fs.readFileSync('test.js');
let code =  data.toString()

// 解析js的語法
let tree = esprima.parseScript(code);

// 解析ast
let transformCode = escodegen.generate(tree);

// 生成swift文件
fs.writeFile('test.swift', transformCode,  function(err) {
   if (err) {
       return console.error(err);
   }
});
複製代碼

進行編譯。。。

node swift.js

下面開始修改 escodegen 裏面的 escodegen.js 文件

將 function 替換成 func

FunctionDeclaration: function (stmt, flags) {
             return [
                 generateAsyncPrefix(stmt, true),
                 'function',
                 generateStarSuffix(stmt) || noEmptySpace(),
                 stmt.id ? generateIdentifier(stmt.id) : '',
                 this.generateFunctionBody(stmt)
             ];
        },
複製代碼

這段代碼是用來處理 function 節點，咱們只須要將 function 修改爲 func 便可，很簡單！

Js是弱類型，如何判斷類型？

VariableDeclarator: function (stmt, flags) {
            var itemFlags = (flags & F_ALLOW_IN) ? E_TTT : E_FTT;
            console.log("+++++++++++++++++ 執行 VariableDeclarator+++++++++++++++++")
            // 增長數據類型
            // console.log(stmt.mold.name)
            if (stmt.init) {
                 if (stmt.mold.name) {
                     return [
                         this.generateExpression(stmt.id, Precedence.Assignment, itemFlags),
                         space,
                         '=',
                         space,
                         this.generateExpression(stmt.init, Precedence.Assignment, itemFlags)
                     ];
                 }
                ];
            }
複製代碼

這是處理變量的一個方法， 這段代碼的返回結果是：a = 1 , 咱們只須要在 a 前面加上 類型便可，這裏用 Js的 typeof 方法進行判斷，而後將 number、string、boolean 和swift 的Int、String、Bool進行映射

如何將 console.log 修改爲 print

// 進行字符串替換 
for (let i = 0; i < result.length; i++) {
    const element = result[i];
    if (element.indexOf("console.log")!=-1) {
        result[i] = element.replace(/console.log/, "print")
    }
}
複製代碼

比較簡單粗暴。。。

如何將Js的對應翻譯成 Swift的對象？

這個稍微複雜，由於Js弱類型的特性，他不須要額外去寫一個類定一個對象，可是Swift須要，因此這裏咱們須要讀取Js的對象，而後生成一個類

在 Js 中 描述一個對象

var car = {type:"Fiat", model:500, color:"white"}
複製代碼

在Swift中描述一個對象

class Car: NSObject {
    var type: String = ""
    var model: Int = 0
    var color: String = ""
    init(type: String, model: Int, color: Int) {
        self.type = type
        self.model = model
        self.color = color
    }
}

let car = Car(type: "Fiat", model: 500, color: "white")
複製代碼

在 ObjectExpression 方法中 能夠經過

if (expr.properties) {
    let properties  = expr.properties
    for (let i = 0; i < properties.length; i++) {
        const element = properties[i];
        // 生成對應的文件
        console.log(element.key.name)
    }
}
複製代碼

將 var car = {type:"Fiat", model:500, color:"white"} 中的type、model、color讀取到，而後生成對應的Swift文件

剩下的就是將

var car = {type:"Fiat", model:500, color:"white"}
複製代碼

替換成

let car = Car(type: "Fiat", model: 500, color: "white")
複製代碼

只須要生成對象的時候記錄一下類名，將 ‘{’ 替換成 ‘Car(’ ，將 ‘)’ 替換成 ‘}’便可

生成對象的代碼：

// 生成類名
            let className =  getClassName(expr) 
            var swiftObject = 'class ' + className + ': NSObject { \n'

            if (expr.properties) {
                let properties  = expr.properties
                for (let i = 0; i < properties.length; i++) {
                    const element = properties[i];
                    // 生成對應的文件
                    swiftObject += space + space + "var " + element.key.name + ': ' + typeOfSwift(element.value.value) + '\n'
                }
            }

            swiftObject += '}'

            fs.writeFile('./Swift_Code/Model/' + className + '.swift', swiftObject,  function(err) {
                console.log(err)
                if (err) {
                    return console.error(err);
                }
             });

複製代碼

成果

完成了上述的翻譯就能夠完美的將 test.js 代碼翻譯成 test.swift 啦

func testFunc() {
    var a:Int = 1;
    var b:String = '1';
    var c:Bool = false;
    if (a < 20) {
        b = 'Good day';
    }
    print(b);
    var car = Car(
        type: 'Fiat',
        model: 500,
        color: 'white'
    );
    print(car.type);
}
複製代碼

for循環如何翻譯？Js的網絡請求如何翻譯成Swift

如何將JavaScript轉化成Swift？（二）

未完待續。。。。