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](https://my.oschina.net/u/2897546) -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](https://my.oschina.net/echolee1987) "build done"

這樣咱們就能夠擁有瀏覽器平臺的事件流的能力了。

代碼地址：git

鍾元大老爺 agent.zy@aliyun.com