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_) {
  	var id = 0;
    return {
    
      // クラス名（完全修飾名）
      name: 'HelloClass',
      
      // クラスのフィールド定義
      field: {
        _id: null
      },
      
      accessor: {
      	id: {
        	get: function() {
          	return id;
          },
          set: function(i) {
          	id = i;
          }
        }
      },
      
      // クラスのメソッド定義
      method: {
        constructor: function (params) {
        	// 親クラスのコンストラクタ呼び出し
          super_.constructor.call(this);          
        	id++;
        }
      }
    };
  });

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

$(function() {
	// 一つ目のインスタンス
  var hello1 = Hello.HelloClass.create();
  var result = $("#result");
  result.val('hello1 の id -> ' + hello1.id);
  
  // 2つ目のインスタンス
  var hello2 = Hello.HelloClass.create();
  result.val(result.val() + "\n" + 'hello2 の id -> ' + hello2.id);
  
  hello2.id = 10;
  
  result.val(result.val() + "\n" + 'hello1 の id -> ' + hello1.id);
});