README

XHP-JS 是一种Hack和JavaScript库的组合，允许您轻松从XHP组件中调用JavaScript函数或创建JavaScript类，并将这些类或引用传递到DOM节点上的其他JavaScript代码。

为了方便，还包含了一个构建React组件的接口。

在 https://code.facebook.com/posts/858739974205250 上可以找到简短的概述。

示例

完整的示例可在 https://github.com/hhvm/xhp-js-example 上找到。

调用JavaScript函数

xhp class JsCallExample extends HTML\element {
  use XHPHTMLHelpers;
  use XHPJSCall;

  <<__Override>>
  protected function renderAsync(): Awaitable<x\node> {
    $this->jsCall(
      'ModuleName',
      'functionName',
      'First argument',
      // This passes the DOM node corresponding to the <div /> below
      $this->toJSElementRef(),
      'Third argument',
    );

    return <div id={$this->getID()} />;
  }
}

$xhp = <html><head /><body>
  <x_js_scope><JsCallExample /><x_js_scope>
</body></html>;
echo await $xhp->toStringAsync();

创建JavaScript对象

xhp class JSInstanceExample extends HTML\element {
  use XHPHTMLHelpers;
  use XHPJSCall;

  <<__Override>>
  protected function renderAsync(): Awaitable<x\node> {
    $this->constructJSInstance(
      'ClassName',
      $this->toJSElementRef(),
      // can pass through other arguments too
    );

    $this->jsCall(
      'MyModule',
      'myFunction',
      // This passes the JS object created above
      $this->toJSInstanceRef(),
    );

    return <div id={$this->getID()} />;
  }
}


$xhp = <html><head /><body>
  <x_js_scope><JSInstanceExample /><x_js_scope>
</body></html>;

创建React组件

此功能基于非常旧的React版本。示例已被删除。

编写JavaScript

我们建议将模块作为CommonJS模块编写，并使用Browserify。

或者，您可以将其创建为window对象的成员。

XHP-JS会将模块视为window对象的成员，并在尝试调用'require("ModuleName")'时回退（这需要在全局范围内定义require()函数）。

例如

$this->jsCall('MyModule', 'myMethod', 'argument');

这段Hack代码可以被认为是创建以下JavaScript

var module = window.MyModule ? window.MyModule : require('MyModule');
module.myMethod('argument');

反过来，您的JavaScript可能看起来像

var MyModule = {
  myMethod: function() {
    // ...
  }
};

module.exports = MyModule; // if using CommonJS + Browserify
window.MyModule = MyModule; // if not

安装

我们建议使用Composer（用于Hack代码）和npm + Browserify（用于JavaScript代码）安装XHP-JS。或者，您可以直接包含xhpjs.js或xhpjs.min.js以在全局范围内声明XHPJS对象。

有关完整示例，请参阅 https://github.com/hhvm/xhp-js-example。

许可证

XHP-JS遵循 MIT许可证。

hhvm / xhp-js

维护者

详细信息

README

示例

调用JavaScript函数

创建JavaScript对象

创建React组件

编写JavaScript

安装

许可证