cheerp 使用事件的例子

红太狼 2021-04-24 07:13 461阅读 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 -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][]

[git]: https://gitee.com/openn2o/cheerp_event_dispatcher.git