LoginSignup
5
5

More than 5 years have passed since last update.

Backbone.jsをモジュール化するライブラリを公開しました

Last updated at Posted at 2013-10-07

 Backbone.Moduleというライブラリを公開しました。
 

これは何?

 Backbone.jsの各クラスを必要な機能ごとにモジュール化して再利用できるライブラリです。 jQueryのプラグイン感覚で必要な機能のモジュールをつなぎ合わせて開発できるようになります。
 基本的にはBackbone.jsでイベントがextendできない問題を解消して再利用性を高めたものです。ただし、そのままだとjavascriptの仕様上スーパークラスのメソッドをラップする形の拡張がやりづらいのと、モジュールがグローバルな名前空間を汚染する問題があるので、そこをサポートする機能を追加してあります。

使い方

 Backbone.jsのセットを一揃い、そして最後にBackbone.ModuleのファイルをHTMLにリンクします。

    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/underscore.js" type="text/javascript"></script>
    <script src="js/backbone.js" type="text/javascript"></script>
    <script src="js/backbone.module.js" type="text/javascript"></script>

 次にモジュールを登録します.

    Backbone.Module.regist('my.cool.module',//モジュール名.
    {
        events:{
        "click":"onClick"   
    },
    onClick:function(event,next){
        if(next){//スーパークラスに同じメソッドがあれば、引数の最後に追加されます.
            next.call(this,event);
        }
        window.alert('click');
    }

    })

 登録したモジュールを拡張して登録したいときは次のようにします

        Backbone.Module.registWrap('my.cool.module.extend',//モジュール名
            'my.cool.module',//拡張したいモジュール。登録済みのモジュール、またはオブジェクト(複数指定可能)
            {
                events:{
                     "mouseover":"onMouseover"  
                },
                onClick:function(event,next){
                         next.call(this,event);//my.cool.moduleのonClick
                         window.alert('extend!');
                 },
                 onMouseover:function(event,next){
                      if(next){
                           next.call(this,event);
                       }
                       window.alert('mouseover');
                  }
             });

 利用するときには、Backbone.jsの基本クラスをモジュールで拡張します。Viewを拡張したいのならば  

    var view = Backbone.Module.extendView('my.cool.module.extend',//拡張したいモジュール名(複数指定可)
                                    {
                                                el:"#test" 
                                     }
                     );

    $(function(){
         new view();
    });

Todoとか

 モジュールとテストがほとんどないので、追加する必要があります。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5