cheerp 使用事件的例子

最新推荐文章于 2021-02-27 09:33:13 发布

weixin_33895516

最新推荐文章于 2021-02-27 09:33:13 发布

阅读量103

点赞数

文章标签： c/c++ python git

原文链接：https://my.oschina.net/littlemonkeyc/blog/3001317

版权

2019独角兽企业重金招聘Python工程师标准>>>

这个文章主要描述在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

转载于:https://my.oschina.net/littlemonkeyc/blog/3001317