JSFiddle - React, Tailwind, and code Playground

by Atsushi Nakatsugawa

HTML

<script src="https://moongift.s3.amazonaws.com/hifive/1.3.1/h5.dev.js"></script>
<link rel="stylesheet" href="https://moongift.s3.amazonaws.com/hifive/1.3.1/h5.css">
<script src="https://moongift.s3.amazonaws.com/hifive/1.3.1/ejs-h5mod.js"></script>
<h1>
hifive クラス実験場
</h1>
<p><strong>動的拡張のテストです</strong></p>
<textarea id="result" rows="10" cols="50"></textarea>

JavaScript

'use strict';
$(function() {
  var HelloClass = h5.cls.RootClass.extend(function (super_) {
    return {
      // クラス名（完全修飾名）
      name: 'HelloClass',
      
      // 動的拡張を可能にする
      isDynamic: true,
      
      // クラスのメソッド定義
      method: {
        constructor: function (params) {
        	// 親クラスのコンストラクタ呼び出し
          super_.constructor.call(this);
        }
      }
    };
  });

  h5.u.obj.expose('Hello', {
    HelloClass: HelloClass
  });
});

$(function() {
  var hello = Hello.HelloClass.create();
  
  // これはエラーになりません
	hello.unknown = "New property!";
  
  $("#result").val(hello.unknown);
});