Bitsmist
Docs» 概要

概要

ここではBitsmistJSの中心であるUnitクラスについて簡単に説明し、より詳しい説明への入り口とします。

プロパティとメソッド

BitsmistJSでは、パークと呼ばれるものをユニットにアタッチすることによって、ユニットに機能を追加します。ユニットにはプロパティとメソッドを追加することができますが、様々なパークが追加する機能の名前の衝突を防ぐため、プロパティとメソッドの追加は最小限にしています。代わりにアセットと呼ばれる入れ物を用意しており、各パークはそこへ機能を追加していくことになります。アセット内のアイテムは、“basic.scan”といったように、ピリオド区切りで各パーク固有の接頭語をつけることで、名前の衝突を防ぎます。

詳細についてはこちらをご覧ください。

  • ユニットの解説 - プロパティとメソッド

設定

各ユニットはJSON、またはJavascriptオブジェクト形式で記述される設定内容に従って、動作を行います。設定には全ユニットに関わるグローバル設定と、各ユニットに固有の設定があります。ユニットの設定と、グローバルの設定は連結されており、ユニット設定にない設定は、自動的にグローバルの設定から取得するようになっています。ユニットの設定は“setting”アセットに格納されています。

詳細についてはこちらをご覧ください。

  • ユニットの解説 - 設定

ロード

各ユニットのJavascriptファイルは、ブラウザにロードされる必要があります。ロード方法にはオートロードとマニュアルロードがあります。オートロードはユニットのタグの属性にbm-autoload属性を指定することで、自動的に必要なファイルをロードし、タグをインスタンス化します。マニュアルロードはscriptタグに明示的に必要なファイルを記述し、ユニットをロードします。前者は手軽なのですが、ロードするファイルがユニットごとにデフォルトでは3つ必要になります。後者の場合は、例えばWebpackなどを使うと、複数のユニットを一つにまとめることができます。

詳細についてはこちらをご覧ください。

  • ユニットの解説 - ロード

イベント

BitsmistJSの特徴のひとつが、イベントドリブンです。各ユニットでは様々なタイミングでイベントが発生します。イベントが発生すると、BitmistJSが引数を準備し登録されているイベントハンドラを呼び出します。各イベントに対するイベントハンドラ内に処理を記述することで、ユニットの動作を作成していきます。

詳細についてはこちらをご覧ください。

  • ユニットの解説 - イベント

HTML

各ユニットはデフォルトでは1つのHTMLファイルを持ちます。各ユニットのHTMLファイルは、ロードしてユニットに適用(ノードに追加)される必要があります。複数のHTMLファイルを切り替えて表示したり、逆に全くHTMLを使用しないユニットを作成することもできます。これらの機能は、SkinPerkによって処理されます。さらにShadow DOMの適用も、SkinPerkによって行われます。

ユニットは初期化中に“basic.transform”スペルを使い、beforeTransform・doTransform・afterTransformイベントをトリガーします。

詳細についてはこちらをご覧ください。

  • ユニットの解説 - HTML

CSS

各ユニットはデフォルトでは1つのCSSファイルを持ちます。各ユニットのCSSファイルは、ロードしてユニットに適用される必要があります。BitsmistJSではCSSの適用に標準技術のConstructable Stylesheetsを採用しており、設定に記述することで、共通のCSSと各ユニット専用のCSSといった複数の構造化されたCSSをユニットに適用することができます。また、複数のCSSを切り替えて使ったり、逆にCSSを全く使用しないユニットを作ることもできます。これらの機能はStylePerkによって処理されます。

BitsmistJSでは、通常の<style>タグを使用したスタイルのロードと適用もできますが、Constructable Stylesheetsを使って、よりコンポーネント化することが可能です。Shadow DOMの使用時には、必須の機能です。

ユニットは初期化中に“basic.transform”スペルを使い、beforeTransform・doTransform・afterTransformイベントをトリガーします。

詳細についてはこちらをご覧ください。

  • ユニットの解説 - CSS

パークによる拡張

BitsmistJSの核であるUnitユニットはごく単純な機能しか持ちません。各ユニットはパークを適用することで、機能を拡張できます。

例えばサンプルのハローユニットでは、イベントハンドラを設定でセットしましたが、これはEventPerkによって処理がされています。またHTMLファイルのロードと適用は、SkinPerkによって行われます。

パークには次の機能があります

  • ユニットの処理中の特定のタイミング(イベントハンドラ)で処理を行う。
  • ユニットのインスタンスやプロトタイプにスキル・インベントリ等を追加する。

デフォルトでは以下のパークがUnitユニットに適用されています。

  • BasicPerk
  • EventPerk
  • SettingPerk
  • SkinPerk
  • StatusPerk
  • StylePerk
  • UnitPerk

詳細についてはこちらをご覧ください。

  • ユニットの解説 - パークによる拡張
Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist

Table of Contents

Table of Contents

  • 概要
    • プロパティとメソッド
    • 設定
    • ロード
    • イベント
    • HTML
    • CSS
    • パークによる拡張

紹介

  • 概要
  • インストール
  • サンプルユニットを作る

ユニットの解説

  • 概要
  • プロパティとメソッド
  • 設定
  • ロード
  • イベント
  • HTML
  • CSS
  • パークによる拡張

リファレンス - ユニット

  • Unit

リファレンス - パーク

  • Perk(ベースクラス)
  • BasicPerk
  • EventPerk
  • SettingPerk
  • SkinPerk
  • StatusPerk
  • StylePerk
  • UnitPerk

リファレンス - ストア

  • Store
  • ChainableStore

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

  • AjaxUtil
  • ClassUtil
  • URLUtil
  • Util