Bitsmist Frameworks
Docs » 概要

概要

特徴

BitsmistJSはWeb ComponentsをベースとしたJavascriptのフレームワークです。

  • 独立した素のHTMLファイル: JSXは使いません。ウェブデザイナーにとっても扱いやすいです。
  • コンポーネント: コンポーネントベース。全てのコンポーネントはカスタムエレメントとして実装されます。
  • オートローディング: 必要な時に必要なファイルがロードされます。
  • イベントドリヴン: イベントハンドラがどこにあるのか一目瞭然です。

index.htmlのサンプル

BitmistJSではコンポーネント(カスタムエレメント)を作り、それらを組み合わせることでサイトを構築していきます。動作が必要なくインターフェースだけのHTMLのみのコンポーネント、インターフェースと動作が必要なHTML+Javascriptのコンポーネント、またインターフェースがなく動作だけのJavascriptのみのコンポーネントを作ることができます。

HTMLのみのコンポーネント

index.html
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/bitsmist/bitsmist-js_v1@0.9.19/dist/bitsmist-js_v1.min.js"></script>
</head>
<body>
<pad-hello bm-autoload="/pad-hello.html"></pad-hello>
</body>
</html>
pad-hello.html
<h1>Hello, World!</h1>

HTMLとJavascriptから成るコンポーネント

index.html
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/bitsmist/bitsmist-js_v1@0.9.19/dist/bitsmist-js_v1.min.js"></script>
<title>BitsmisJS Sample</title>
</head>
<body>
<pad-hello bm-autoload="/pad-hello.js"></pad-hello>
</body>
</html>
pad-hello.html
<h1>Hello Component</h1>
<button id="btn-greet">Greet</button>
pad-hello.js
class PadHello extends BITSMIST.v1.Component
{
    _getSettings()
    {
        return {
            "settings": {
                "name": "PadHello"
            },
            "events": {
                "btn-greet": {
                    "handlers": {
                        "click": "onBtnGreet_Click"
                    }
                }
            }
        };
    }
 
    onBtnGreet_Click(sender, e, ex)
    {
        alert("Hello, world!");
    }
}
 
customElements.define("pad-hello", PadHello);
Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist Frameworks

Table of Contents

Table of Contents

  • 概要
    • 特徴
    • index.htmlのサンプル
      • HTMLのみのコンポーネント
      • HTMLとJavascriptから成るコンポーネント

全般

  • 概要
  • インストール
  • サンプルコンポーネントを作る

コンポーネントについて

  • ロード
  • 設定
  • イベント
  • オーガナイザによる拡張

リファレンス - コンポーネント

  • Component

リファレンス - オーガナイザ

  • EventOrganizer
  • LoaderOrganizer
  • OrganizerOrganizer
  • SettingOrganizer
  • StateOrganizer
  • TemplateOrganizer

リファレンス - ストア

  • Store
  • ChainableStore

リファレンス - ユーティリティ

  • AjaxUtil
  • ClassUtil
  • Util