摘要：本文以這個模塊的開發過程梳理如何應用到前端工程中。注使用完成開發至少需要基礎的編碼能力。具體其他信息可以參考上該模塊的。配置主要針對源碼文件，需要添加正確的進行處理。下一篇應用到前端工程下和

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications. WebAssembly(縮寫 Wasm)是基于堆棧虛擬機的二進制指令格式。Wasm為了一個可移植的目標而設計的，可用于編譯C/C+/RUST等高級語言，使客戶端和服務器應用程序能夠在Web上部署。

webassembly的介紹可以參考圖說 WebAssembly。

本文以@ne_fe/gis這個模塊的開發過程梳理webassembly如何應用到前端工程中。
注：使用emscripten完成weassembly開發至少需要基礎的c/c++編碼能力。

該模塊主邏輯由c++編寫，webpack配合emscripten附帶的emcc編譯器將其編譯到wasm。提供大批量坐標的經緯度轉換功能，在十幾萬坐標點轉換的情況下，依然有優秀的性能表現。
具體其他信息可以參考npm上該模塊的Readme。

emscripten是webassembly官方推出的將c/c++代碼編譯成wasm文件的工具。
具體安裝可以參照官網文檔。

主要針對c++源碼文件，需要添加正確的loader進行處理。使用的loader為cpp-wasm-loader，下面是我的webpack.config.js所寫大概配置，其他配置跟普通的webpack配置大致相同。

module.exports = {
  ...
  resolve: {
    extensions: [ ".js", ".vue", ".c", ".cc", ".cpp", ".wasm" ],
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
  ...
  module: {
    ...
     {
        test: /.(c|cc|cpp)$/,
        use: {
          loader: "cpp-wasm-loader",
          options: {
            // 這里的兩個參數，第一個是讓emcc能夠識別c++11的語法與特性
            // 第二個是讓emcc能夠將EMSCRIPTEN_BINDINGS宏里面所指定的類與方法能夠在綁定到模塊導出的js對象上，讓js能夠直接調用
            // 還可以傳入其他clang編譯器可接受的參數          
            emccFlags: existingFlags => existingFlags.concat([ "-std=c++11", "--bind" ]), // add or modify compiler flags
            // emccPath: "path/to/emcc", // only needed if emcc is not in PATH,
            memoryClass: false, // disable javascript memory management class,
            fetchFiles: true,
            asmJs: false, // 不生成wasm.js
            wasm: true, // 生成wasm文件
            fullEnv: true,
          },
        },
      },
    ...  
  },  
}；

emscripten的主要api可以參考官方文檔上的說明，不過建議參考本地頭文件（emsdk安裝路徑/emsdk/emscripten/1.38.22/system/include/），相比文檔，本地頭文件更能看得明白。

以高德地圖坐標轉gps坐標代碼為例

// em.cc
#include 
#include 
#include 
#include 
#include 
#include 

#define PI 3.14159265
#define ee 0.00669342162296594323
#define a 6378245.0

using namespace emscripten;

extern "C"
{  
  std::vector gcj02towgs84(float lat, float lng);
  bool out_of_china(float lat, float lng);
  float transformlat(float lat, float lng);
  float transformlng(float lat, float lng);
  val translateFromGPSInCPP(val data, std::string target, int type);

  // 相應地圖坐標轉gps坐標
  // data為坐標點數組，target為轉換目標 
  // type 是否轉換坐標對象 0 只會對數值做計算轉換  1 不僅會對數值做計算轉換，還會轉為騰訊地圖經緯度對象
  // val 為c++中代表js對象的數據類型，頭文件為
  val translateFromGPSInCPP(val data, std::string target, int type) {
    unsigned l = data["length"].as();
    val res = val::array();
    val _mid = val::object();
    val amap = val::global("AMap");
    val bmap = val::global("BMap");
    val _Object = val::global("Object");
    val qq = val::global("qq");
    for(unsigned i = 0; i < l; ++i) {
      val midObj = data[i];
      float lat = midObj["latitude"].as();
      float lng = midObj["longitude"].as();
      std::vector translateOneResult;
      if (target == "a") {
        translateOneResult = wgs84togcj02(lat, lng); // 轉高德坐標
      } else if (target == "b") {
        translateOneResult = wgs84tobd(lat, lng); // 轉百度坐標，忽略
      } else {
        translateOneResult = wgs84togcj02(lat, lng); // 轉騰訊坐標，忽略
      }
      if (type == 0) { // just translate number
        _mid.set("latitude", translateOneResult[0]);
        _mid.set("longitude", translateOneResult[1]);
      } else {
        if (target == "a") {
          if (!amap.isUndefined()) {
            _mid = amap["LngLat"].new_(translateOneResult[1], translateOneResult[0]);
          }
        }
        if (target == "b") {
          if (!bmap.isUndefined()) {
            _mid = bmap["Point"].new_(translateOneResult[0], translateOneResult[1]);
          }
        }
        if (target == "t") {
          val tmap = qq["maps"];
          if (!qq.isUndefined() && !tmap.isUndefined()) {
            _mid = tmap["LatLng"].new_(translateOneResult[0], translateOneResult[1]);
          }
        }
        _Object.call("assign", _mid, midObj);
      }
      res.set(i, _mid);
    }
    return res;
  }

  std::vector gcj02towgs84(float lat, float lng) {
    std::vector res;
    bool out_of_china_res = out_of_china(lat, lng);
    if (out_of_china_res) {
      res.push_back(lat);
      res.push_back(lng);
    } else {
      float lng1 = lng - 105.0;
      float lat1 = lat - 35.0;
      float dlat = transformlat(lng1, lat1);
      float dlng = transformlng(lng1, lat1);
      float radlat = lat / 180.0 * PI;
      float magic = sin(lat / 180.0 * PI);
      magic = 1 - ee * magic * magic;
      float sqrtmagic = sqrt(magic);
      dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
      dlng = (dlng * 180.0) / (a / sqrtmagic * cos(radlat) * PI);
      const float mglat = lat - dlat;
      const float mglng = lng - dlng;
      res.push_back(mglat);
      res.push_back(mglng);
    }
    return res;
  }

  bool out_of_china(float lat, float lng) {
    return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
  }
  
  float transformlat(float lat, float lng) {
    float ret = -100.0 + 2.0 * lat + 3.0 * lng + 0.2 * lng * lng + 0.1 * lat * lng + 0.2 * sqrt(abs(lat));
    ret += (20.0 * sin(6.0 * lat * PI) + 20.0 * sin(2.0 * lat * PI)) * 2.0 / 3.0;
    ret += (20.0 * sin(lng * PI) + 40.0 * sin(lng / 3.0 * PI)) * 2.0 / 3.0;
    ret += (160.0 * sin(lng / 12.0 * PI) + 320 * sin(lng * PI / 30.0)) * 2.0 / 3.0;
    return ret;
  }
  
  float transformlng(float lat, float lng) {
    float ret = 300.0 + lat + 2.0 * lng + 0.1 * lat * lat + 0.1 * lat * lng + 0.1 * sqrt(abs(lat));
    ret += (20.0 * sin(6.0 * lat * PI) + 20.0 * sin(2.0 * lat * PI)) * 2.0 / 3.0;
    ret += (20.0 * sin(lat * PI) + 40.0 * sin(lat / 3.0 * PI)) * 2.0 / 3.0;
    ret += (150.0 * sin(lat / 12.0 * PI) + 300.0 * sin(lat / 30.0 * PI)) * 2.0 / 3.0;
    return ret;
  }

  EMSCRIPTEN_BINDINGS(module) {
    function("translateToGPSInCPP", &translateToGPSInCPP);
  }
}

測試代碼運行的瀏覽器為chrome63
translateFromGPSInJS方法是js實現的，為了兼容不能使用webassembly技術的瀏覽器
同時由于新版瀏覽器如chrome70及以上、firefox60及以上、safari12及以上優化了數組的性能，js實現與webassembly實現效果差距不大，只使用js進行經緯度轉換

import wasm from "./em.cc";
async function test() {
  const innerModule = (await wasm.init()).emModule;
  const gpsarr1 = [];
  gpsarr1.push({ longitude: lngX, latitude: latY });
  for (let i = 1; i < 50000; i++) {
    let lngX = 116.3;
    let latY = 39.9;
    lngX = lngX + Math.random() * 0.0005;
    if (i % 2) {
      latY = latY + Math.random() * 0.0001;
    } else {
      latY = latY + Math.random() * 0.0006;
    }
    gpsarr1.push({ longitude: lngX, latitude: latY });
  }
  // performance Webassembly vs Js
  console.time("translateFromGPSInCPP");
  const res1 = await innerModule.translateFromGPSInCPP(gpsarr1, "t", 0);
  console.timeEnd("translateFromGPSInCPP");
  console.log("res1", res1);
  const gpsarr2 = JSON.parse(JSON.stringify(gpsarr1));
  console.time("translateFromGPSInJS");
  const res2 = await gpsjs.translateFromGPSInJS(gpsarr2, "t", 0);
  console.timeEnd("translateFromGPSInJS");
  console.log("res2", res2);
}
test();

以下是7次測試50000條經緯度轉換的執行耗時(ms)

最后經過測試5000、500條坐標的經緯度轉換
萬條數量級坐標的經緯度轉換，webassembly的執行效率是js的8-10倍。
千條數量級坐標的經緯度轉換，webassembly的執行效率是js的4-6倍。
百條數量級坐標的經緯度轉換，webassembly的執行效率是js的1.5-2.5倍。

公司的編譯環境缺少emscripten，所以在容器中編譯，最后發布到npm公共倉庫。

?
?
下一篇：WebAssembly應用到前端工程（下）—— webpack和webassembly