文档章节

cheerp 使用事件的例子

钟元大老爷
 钟元大老爷
发布于 01/14 16:52
字数 690
阅读 4
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
钟元大老爷

钟元大老爷

粉丝 5
博文 55
码字总数 29959
作品 4
海淀
架构师
私信 提问
cheerp 如何使用回调的回答

关于如何使用callback方法的问题很好理解,现在比较时尚的语言里都支持异步编程,事件消息或者回调。 这应该是无关优雅的, 在cheerp中你可以使用javascript一样的思维来考虑问题, 这一切编...

钟元OSS
01/09
0
0
cheerp 交叉调用转化最小开销方式

这个文章主要描述在cheerp环境下, c++和javascript代码减小类型转换开销 在cheerp,基本数据类型的C ++阵列如char,unsigned char,short,unsigned short,int,unsigned int,float和dou...

钟元大老爷
昨天
0
0
[译]实例详解防抖与节流(干货!!!)

lodash源码中推荐的文章,为了学习(英语),翻译了一下~ 原文链接 作者:DAVID CORBACHO 本文来自一位伦敦前端工程师的技术投稿。我们在之前讨论过这个话题(关于防抖与节流),但这次,通过...

前端深海潜水员
2018/11/07
0
0
浅析React之事件系统(一)

大家周末好,2016年的最后几篇文章开始写到了React的一些东西,那么最近就来一些图表君对于React的简单总结和理解,那么今天就开始第一篇,说一说React的事件系统。 总览 简单来说React实现了...

aaronisme
2017/02/05
0
0
理解 Node.js 里的 process.nextTick()

有很多人对Node.js里process.nextTick()的用法感到不理解,下面我们就来看一下process.nextTick()到底是什么,该如何使用。 Node.js是单线程的,除了系统IO之外,在它的事件轮询过程中,同一...

合肥华仔
2013/06/26
15.6K
8

没有更多内容

加载失败,请刷新页面

加载更多

外教比较

确定收费的模式 确定授课的模式 确定教学的方式-用什么样的方式能让人更快更好的学会 确定核心竞争力-比如我们的师资是牛津大学的 英语流利说 收费的模式-报特色课程,比如训练营之类的,其实...

V字仇杀
5分钟前
0
0
上下文无关文法介绍

上下文无关文法 上下文无关文法是用来描述程序语言的一种表达方式,通过简单的符号描述语言的集合。正如我们所知道,一个程序即为一个句子(字符串),语言就是所有句子的集合。上下文无关文...

陶小陶
14分钟前
1
0
eggjs与sequelize简单demo

参考 egg 官方文档 安装 // 依赖npm install --save egg-sequelize mysql2// ts 类型npm install --save @types/sequelize 插件,config/plugin.ts import { EggPlugin } from 'egg';......

Geeyu
今天
1
0
看过上百部片子的这个人教你视频标签算法解析

本文由云+社区发表 随着内容时代的来临,多媒体信息,特别是视频信息的分析和理解需求,如图像分类、图像打标签、视频处理等等,变得越发迫切。目前图像分类已经发展了多年,在一定条件下已经...

腾讯云加社区
今天
4
0
2. 红黑树

定义:红黑树(Red-Black Tree,简称R-B Tree),它一种特殊的二叉查找树(Binary Search Tree)。 要理解红黑树,先要了解什么是二叉查找树。在上一章中,我们学习了什么是二叉树,以及二叉树...

火拳-艾斯
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部