cheerp 使用事件的例子

這個文章主要描述在cheerp環境下， c++代碼如何通過js包裝使用dom事件

1 what？事件

事件作爲js異步編程的核心，很好的把邏輯分散開來，形成各個處理的handler。 首先事件的目標和當前目標都是實現了派發接口的，可以響應
事件並且可以添加事件監聽處理的交互對象。
事件流擁有冒泡機制， 即從頂級元素流經目標元素並最終回到頂級元素，即所有的子元素都會作爲事件流中的目標（target）來響應事件。

對於事件的應用，我想會有大量的文檔在網絡上，本文就不佔篇幅了。
如果我們要使用cheerp平臺做事件的派發和回調需要說明的內容就在這裏了。

2事件的例子

在cheerp中註冊一個最頂級的交互元素， 這個元素是window我們擁有window了以後可以擁有js端的玩法在c++端。

A. 首先我們先在js端實現一下瀏覽器端的事件定義，公開這些接口給cheerp。
cheerp定義：

Window * window_get_Window();
CustomEvent * window_getCustomEvent (const String & name);
CustomEvent * window_getCustomEvent (const String & name,  Object * param);

window_getCustomEvent用了overload技術來適應js，然後在js文件中公開這兩個函數。ps：（爲了簡單我把這兩個函數作爲全局函數定義，其實可以定義在包裏）

function window_get_Window () {
    return window;
}
function window_getCustomEvent(type, params) {
    return new CustomEvent(type, {detail:params});
}

B. 在cheerp端定義一個事件類型

 #define MY_EVENT_PUB "pub"

C.用cheerp編寫一個簡單的使用監聽的生成js代碼

   
 class [[cheerp::genericjs]] TestEvent {
 private :
static void MyEventPubHandler(Object *e) {
    console.log("i am catch this event");
}        
public:
TestEvent() {
}

static void init () {
    
    Window * window = window_get_Window();
    window->addEventListener(MY_EVENT_PUB, cheerp::Callback(MyEventPubHandler));
    
    Event  * event  = window_getCustomEvent(MY_EVENT_PUB, false);
    window->dispatchEvent(event);
}

};
D.在webMain入口中使用。

  void webMain () { //wasm 函數
      TestEvent::init();
  }

然後編寫一個makefile 生成兩個不同版本的放在瀏覽器裏run。

    CHERRP_PATH=/cygdrive/c/cheerp/include
    SOURCE=main.cpp
    CHEERP_FLAG=-target cheerp -w
    WASMFLAGS=-cheerp-linear-heap-size=256 -cheerp-linear-heap-size=256 -cheerp-mode=wasm -cheerp-no-math-imul
    WASM_LOADER=-cheerp-wasm-loader=loader.js -cheerp-wasm-file=./build/test.wasm 
    CC=clang++
    DIST_JS=./build/test.js
    DIST_WASM=./build/test_wasm.wasm
    clear:
        @rm -f ./build/*
    
    test.wasm:
        $(CC) $(CHEERP_FLAG) $(WASMFLAGS) $(WASM_LOADER) -O3 -o $(DIST_WASM)  main.cpp 
    
    test.js:
        $(CC) $(CHEERP_FLAG) -O3 -o $(DIST_JS) main.cpp 
        cat head.js >> $(DIST_JS)
        
    all: clear  test.js test.wasm
        @echo "build done"

這樣我們就可以擁有瀏覽器平臺的事件流的能力了。

代碼地址：git