Backbone.jsライブラリの一部としてES2015を使用する

AngularとReactに取り組んでいるチームのメンバーはやさしいですが、自信を持って開発者をES2015に移行していますが、Backbone.jsライブラリで新しい仕様標準を使用する可能性について少しお話ししたいと思います。 現在、ブラウザでES2016を使用する主なアプローチは同じであり、使用されているフレームワーク/ライブラリに依存しません。 そして、それは以下で構成されています：ES2015でコードを記述し、 トランスパイラー （例： Babel ）を使用して、以前のES5標準で（ブラウザーで実行される）コードを取得します。

しかし、Backbone.jsライブラリのフレームワーク内でES2015のモジュール、クラス、およびその他の「チップ」を使用する方法は？ これは、カットの下で議論されます。

まず、モデル、コレクション、ビュー、およびルートのすべてのファイルをes6モジュールの形式で整理する必要があります。 私の意見では、モジュールを構築するための最良のツールはwebpackです。プロジェクトで使用する場合、後で後悔することはほとんどありません。 それでは、ビューの1つとなるモジュールの作成を始めましょう。

import $ from 'jquery'; import Backbone from 'backbone'; import _ from 'underscore';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このモジュールで必要な依存関係をインポートしました。 他のライブラリを使用していますか？ 同じことをします。

次に、 MyCustomViewクラスを宣言します 。

 class MyCustomView extends Backbone.View { // our other code }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、作成されたクラスは標準のBackbone.Viewクラスから継承されます。 さらに、他のモジュールで使用するために、MyCustomViewをエクスポートする必要があります。

 class MyCustomView extends Backbone.View { // our other code } export default MyCustomView;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モジュール構造の準備が完了し、作成されたクラスにメソッドを追加します（関数プロパティではなくメソッド）：

 class MyCustomView extends Backbone.View { initialize() { } render() { } // our other code } export default MyCustomView;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これまでのところ、すべてが予測可能ですが、el、tagName、eventsなどのプロパティはまだ発表されていません。 彼らはどのように見えるでしょうか？ ゲッターを介して宣言を実装する方法、またはコンストラクターメソッドで宣言する方法の2つがあります。両方の例を示します。

 class MyCustomView extends Backbone.View { get tagName() { return 'div'} get className() { return 'example' } get template() { return _.template(myTemplate)} get events() { return { 'click': 'sayHelloWorld' } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンストラクターを使用すると、次のようになります。

 class MyCustomView extends Backbone.View { constructor() { super(); this.tagName = 'div'; this.className = 'example'; this.events = { 'click': 'sayHelloWorld' }; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同様の状況は、モデルとコレクションの属性にあります。

ES2015規格のすべての「機能」をさらに使用することに障害はありません。 他のフレームワーク/ライブラリと同じように、構造化、テンプレート文字列、イテレータ、矢印関数、新しいタイプのコレクション、Promise、シンボルを使用できます。Backbone.jsとのつながりはありません。

たとえば、初期化メソッドで矢印関数を使用する場合：

 class MyCustomView extends Backbone.View { initialize() { setTimeout(() => {this.render()}, 1000); } render() { } // our other code }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、プロジェクトの構造を最小限に変更することで、Backbone.jsライブラリを使用してES2015に簡単に切り替えることができます。 Reactなどの急速に開発されているライブラリを開発することなく、言語のすべての機能を使用できるようになりました。