這篇文章給大家介紹 javascript中AWTK綁定的原理是什么，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)公司是一家網(wǎng)站設(shè)計公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：成都響應(yīng)式網(wǎng)站建設(shè)、成都品牌網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗，以及在手機等移動端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運營、VI設(shè)計、云產(chǎn)品.運維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務(wù)。

一、基本架構(gòu)

Javascript的綁定方法和lua的綁定方法有些不同，主要原因是javascript的引擎有很多種，比如嵌入式系統(tǒng)常用的jerryscript和PC上常用的V8。不同的引擎提供注冊C/C++函數(shù)的能力不同，所以在綁定時我們只對引擎做一個最低能力的要求：提供注冊全局函數(shù)的能力。

我們把綁定的代碼分兩層：

• 引擎相關(guān)的代碼負(fù)責(zé)把awtk的函數(shù)一一映射到j(luò)s層面。

• 引擎無關(guān)的代碼(awtk.ts)負(fù)責(zé)把awtk的函數(shù)包裝成面向?qū)ο蟮慕涌凇?/p>

這樣的好處有：

• 實現(xiàn)簡單。綁定全局函數(shù)是最簡單的，而且每種引擎都有大量的示例可以參考。

• 代碼的重用度高。awtk.ts的代碼產(chǎn)生器只需要一份即可。

• 為上層提供一個統(tǒng)一的接口，換javascript引擎不會對上層應(yīng)用程序造成影響。

二、引擎相關(guān)的代碼(jerryscript為例)

1.成員函數(shù)的綁定

C語言里面的成員函數(shù)其實都是全局函數(shù)，按全局函數(shù)的綁定方式綁定即可，構(gòu)造函數(shù)和非構(gòu)造函數(shù)按同樣的方式處理。如：

jerry_value_t wrap_button_create(const jerry_value_t func_obj_val, const jerry_value_t this_p,
                                 const jerry_value_t args_p[], const jerry_length_t args_cnt) {
  widget_t* ret = NULL;
  widget_t* parent = (widget_t*)jerry_get_pointer(args_p[0], "widget_t*");
  xy_t x = (xy_t)jerry_get_number_value(args_p[1]);
  xy_t y = (xy_t)jerry_get_number_value(args_p[2]);
  wh_t w = (wh_t)jerry_get_number_value(args_p[3]);
  wh_t h = (wh_t)jerry_get_number_value(args_p[4]);
  ret = (widget_t*)button_create(parent, x, y, w, h);

  return jerry_create_pointer(ret, "button_t*");
};

jerryx_handler_register_global((const jerry_char_t*)"button_create", wrap_button_create);

2.對象屬性的綁定

對象的屬性轉(zhuǎn)換成set/get函數(shù)，再按全局函數(shù)注冊。

jerry_value_t wrap_widget_t_set_prop_visible(const jerry_value_t func_obj_val,
                                             const jerry_value_t this_p,
                                             const jerry_value_t args_p[],
                                             const jerry_length_t args_cnt) {
  widget_t* obj = (widget_t*)jerry_get_pointer(args_p[0], "widget_t*");
  bool_t visible = (bool_t)jerry_get_boolean_value(args_p[1]);
  obj->visible = visible;
  return jerry_create_number(RET_OK);
}

jerry_value_t wrap_widget_t_get_prop_visible(const jerry_value_t func_obj_val,
                                             const jerry_value_t this_p,
                                             const jerry_value_t args_p[],
                                             const jerry_length_t args_cnt) {
  widget_t* obj = (widget_t*)jerry_get_pointer(args_p[0], "widget_t*");

  return jerry_create_boolean(obj->visible);
  
}

  jerryx_handler_register_global((const jerry_char_t*)"widget_t_set_prop_visible",
                                 wrap_widget_t_set_prop_visible);
  jerryx_handler_register_global((const jerry_char_t*)"widget_t_get_prop_visible",
                                 wrap_widget_t_get_prop_visible);

3.常量的綁定

常量的綁定，對每一個常量提供一個get函數(shù)即可。如：

jerry_value_t get_WIDGET_PROP_MAX_W(const jerry_value_t func_obj_val, const jerry_value_t this_p,
                                    const jerry_value_t args_p[], const jerry_length_t args_cnt) {
  return jerry_create_string_from_utf8((const jerry_char_t*)WIDGET_PROP_MAX_W);
}

jerryx_handler_register_global((const jerry_char_t*)"WIDGET_PROP_MAX_W", get_WIDGET_PROP_MAX_W);

三、引擎無相關(guān)的代碼

1.類的封裝

• 每個類都有一個nativeObj成員，用來保存C語言中對象的句柄，在構(gòu)造時傳入。

• 每個類都有一個靜態(tài)的create函數(shù)，它負(fù)責(zé)調(diào)用C語言中的構(gòu)造函數(shù)，并創(chuàng)建JS對象。

class Bitmap {
 public nativeObj;
 constructor(nativeObj) {
   this.nativeObj = nativeObj;
 }

 static create() {
   return new Bitmap(bitmap_create());
 }
 ...
}

2.對象屬性的封裝

這里利用了Typescript的set/get函數(shù)，實現(xiàn)起來非常方便：

 set visible(value) {
   widget_t_set_prop_visible(this.nativeObj, value);
 }

 get visible() {
   return widget_t_get_prop_visible(this.nativeObj);
 }

3.成員函數(shù)封裝

自動使用nativeObj作為成員函數(shù)的第一個參數(shù)，然后調(diào)用綁定的C函數(shù)。

 layout() {
   return widget_layout(this.nativeObj);
 }

4.常量的封裝

常量封裝為枚舉，幸運的是，Typescript枚舉可以是數(shù)字類型，也可以是字符串類型，實現(xiàn)起來非常方便。

enum AlignV {
 NONE = ALIGN_V_NONE(),
 MIDDLE = ALIGN_V_MIDDLE(),
 TOP = ALIGN_V_TOP(),
 BOTTOM = ALIGN_V_BOTTOM(),
};

enum WidgetProp {
 X = WIDGET_PROP_X(),
 Y = WIDGET_PROP_Y(),
 W = WIDGET_PROP_W(),
 H = WIDGET_PROP_H(),
 ...
};

四、自動代碼產(chǎn)生器

所有代碼均由自動代碼產(chǎn)生器根據(jù)awtk的IDL生成，具體請參考：tools/js_gen；

• index.js負(fù)責(zé)產(chǎn)生引擎無關(guān)的代碼。

• jerryscript.js負(fù)責(zé)產(chǎn)生jerryscript相關(guān)的代碼。

五、使用示例

function applicationInit() {
  var win = Window.create(null, 0, 0, 0, 0); 
  var ok = Button.create(win, 0, 0, 0, 0); 

  ok.setText("ok");
  ok.setSelfLayoutParams("center", "middle", "50%", "30");

  ok.on(EventType.CLICK, function(evt) {
    var e = PointerEvent.cast(evt);
    print("on click: " + e.x + " " + e.y);

    return Ret.OK;
  }); 

  win.layout();
}

applicationInit()

關(guān)于 javascript中AWTK綁定的原理是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。