Big Sky :: xtag と angular1 を足して2で割った感じに使える薄い JavaScript ライブラリ「sj.js」

SPA でアプリケーションを作る際、angular1 の時はどうも「書かされている」感がして好きになれませんでした。x-tag を使って自前でカスタムエレメントを作っても良いのですが、それでも書かされている感がしますし、若干大げになりがちです。そんな中、angular 寄りで、かつ x-tag よりも薄い JavaScript ライブラリを tokuhirom がガシガシと作ってくれました。

GitHub - tokuhirom/sj.js

Tiny javascript view for custom elements based on incremental-dom. This library supports angular1 like templating.
https://github.com/tokuhirom/sj.js

x-tag の様に js 一つで動きます。そしてだいたい angular っぽく動きます。動作はコチラで確認して下さい。


<div sj-app="">

 

<p>Input something in the input box:</p>

<p>Name : <input type="text" sj-model="this.name" placeholder="Enter name here"></p>

<h1>Hello <span sj-bind="this.name"></span></h1>



</div>

まずこのソースの短さを見て下さい。コードは何も書いてません。機能的には angular のそれと同じですがモデル(sj-model)やバインド(sj-bind)を指定する際に this が必要という事が異なります。angular や riot.js の場合は独自に式をパースし実行ていますが、そこをスコープに依存した JavaScript 式で書ける様にしてあります(元々は式パーサも実装していましたがコードベースが肥大してきたのでこの方式に転換)。またテンプレートは angular の様に {{ name }} という書き方にする事は出来ません。以下の様にノードを用意する必要があります。


<h1>Hello <span sj-bind="this.name"></span></h1>

当初はこの {{ name }} というテンプレートを実装していましたが、サーバサイドテンプレートとの相性が良くない(間違って使った場合に意図しない eval 発火が起きる)のを理由に、バインド方式に変更されました。

イベントハンドラも一通り揃っています。


<script>

function CounterApp() {

  this.counter = 0;

  this.count = function() {

    this.counter++;

    this.update();

  }

}

</script>



<div sj-app="CounterApp">

<button sj-click="this.count()">Click Me!</button>

<p sj-bind="this.counter"></p>

</div>

this は sj-app 属性を持ったのノードを指します。試しに動かしてみたい方はコチラで確認して下さい。

また sj-app にはコールバック関数名を指定できるので初期化を行う事もできます。自前でデータを更新したい場合は update() を呼び出します。もちろん repeat も動きます。その他のサンプルはココから参照して下さい。

また sj ではカスタムタグを生成する事も可能です。


customElements.define('sj-books', class extends sj.Element {

  template() {

    return `

      <h3>Books</h3>

      <input type="text" sj-model="this.filter" placeholder="検索するキーワードを入力して下さい" class="books-filter" />

      <input type="button" sj-disabled="!!!this.filter" sj-click="this.clear()" value="クリア" />

      <div class="books-container">

        <div sj-repeat="x in this.books">

          <div class="item" sj-if="this.matched(x,this.filter)" sj-click="this.clicked($index)">{{x.name}}</div>

        </div>

      </div>

    `;

  }



  initialize() {

    this.books = [];

    this.clear = () => {

      this.filter = '';

      this.update();

    };

    this.clicked = (index) => {

      const URI = 'http://www.amazon.co.jp/gp/search/';

      location.href = URI + `?field-keywords=${encodeURIComponent(this.books[index].name)}`;

    };

    this.matched = (x,filter) => !!!filter || x.name.toLowerCase().indexOf(filter.toLowerCase()) != -1;

  }



  get books() {

    return this.b;

  }



  set books(b) {

    this.b = b;

    this.update();

  }

});