うつ病にならずに麺を解く方法

この記事は、反応、格納庫、またはそこで何を使用するかに関するあなたの甘いインターフェースについてではありませんか？ この記事では、jQueryヌードルがたくさんある状況について説明します。 いいえ、ベーコンビューに包まれたjQueryヌードルの山にしましょう。



^{この記事ではBackbone.View.Elementsライブラリを使用します}

問題1：低発現セレクター

私たちは皆、麺を見ました、私たちは皆知っています：JSeの麺-おそらくすべてがレイアウトに適しているわけではありません。 そして、もしそうなら、おそらく、コードは家でのあいまいな操作で溢れています。 このようなコードを読むことは困難です。なぜなら、ここで何が起こっているのかについて作者の考えを見失うことなく、要素の不明瞭な名前を覚えておく必要があるからです。 それでは、コードに少し表現力を与えましょう。

_selectors: function () { return { elemName: '.block__elem-name' }; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてのセレクターを1か所に追加し、必要な要素にわかりやすい名前を付けます。 ところで、次のようにそれらを選択します。

 this._elem('elemName');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

の代わりに

 this.$('.block__elem-name');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私たちの場合、これは表現力を少し追加したと言うことができますが、おそらくクラスに名前を付けるためにBEMを使用するプロジェクトがないことを忘れないでくださいが、フォームのセマンティックセレクタを甘く嗅いでいます

 'div > tr.row[data-active=”true”] a.red-Button'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

購入ボタン用。



ビュー内の要素を選択する機能に加えて、セレクター自体を名前で取得する機会もありました。

 this._selector('elemName');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これも必要です。



もう1つの利点は、レイアウトが変更された場合、コードの重複が減ったため、セレクタを1か所だけ変更する必要があることです。

問題2：アイテムの保存

次のように発生します。

 $('div > tr.row[data-active=”true”] a.red-Button').blahBlah();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、このような10行の後：

 $('div > tr.row[data-active=”true”] a.red-Button').anotherBlahBlah();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

あなたの顔から手のひらを引き裂く、あなたは変数にそれを取ります

 var $buyButton = $('div > tr.row[data-active=”true”] a.red-Button');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ああいいえ、あなたはバックボーンを持っています-プロパティに入れてください

 this._$buyButton = this.$('div > tr.row[data-active=”true”] a.red-Button');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、すでにBackbone.View.Elementsに接続しましたか？

 this._$buyButton = this._elem('buyButton');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

本当にそれだけの価値はありません_elem



すべてをキャッシュしているので、

 this._elem('buyButton');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

キャッシュ、話す？ すべてが変わったらどうしますか？

はい、プログラミングには2つの問題があると聞きました。 だから

 this._findElem('elemName');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

キャッシュなしで見る

 this._dropElemCache('elemName');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特定のアイテムのキャッシュをクリアします。

 this._dropElemCache();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

時間が来たことを認識すると、キャッシュ全体がきれいに輝きます。 たとえば、レンダリング後。

グローバル要素

また、jQueryで最も一般的に使用される要素をラップして、アプリケーションでこれを複数回実行しないようにします。 会う：

 this._$window; this._$body; this._$document;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

問題3：命令型スタイル

スタイルを記述するための言語全体があるように見えますが、そうではありません-それはあなたが染料を見つけることができる麺のポイントです：

 $('div > tr.row[data-active=”true”] a.red-Button').css({color: 'magenta'});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

宣言性を備えたPepperとCSSをうまく組み合わせます：

 .button_active { color: magenta; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、クラス操作を処理しました。 最初に、1つの場所ですべてのクラスを示します。

 _classes: function () { return { activeButton: 'button_active' }; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、あなたがしたい-クラスを追加する

 this._addClass('activeButton', 'buyButton');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要に応じて-削除：

 this._removeClass('activeButton', 'buyButton');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要に応じて-スイッチ：

 var condition = !!Math.round(Math.random()); this._toggleClass('activeButton', 'buyButton', condition);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスが既に記述されている場合、セレクターを取得できます。

 this._selector('activeButton'); // returns '.button_active'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要素を検索できます：

 this._elem('activeButton');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アクティブなボタンは変更される可能性が高いため、キャッシュを忘れないでください

 this._findElem('activeButton');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4番目の問題：すべてが複雑な場合

セレクターとクラスが動的に形成されることが起こります：

 var id = 5, state = 'highlighted'; $('.item[data-id=”' + id + '”]').addClass('item_state_' + state);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、複雑なセレクターが機能します。

 _classes: function () { return { itemInState: 'item_state_%s' }; }, _selectors: function () { return { itemById: '.item[data-id=%s]' }; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、次のことが当てはまります。

 this._class('itemInState', 'highlighted'); //  'item_state_highlighted' this._selector('itemInState', 'highlighted'); //  '.item_state_highlighted' this._selector('itemById', 5); //  '.item[data-id=5]'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、上記の操作は次のように実行されます。

 var id = 5, state = 'highlighted'; this._addClass(['itemInState', state], ['itemById', id]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

item_state_highlightedクラスは、.item [data-id = 5]セレクターによって検出された要素に追加されます

末端複雑度セレクター

 _classes: function () { return { item: 'item_%(mod)s_%(value)s' }; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

各場所には独自の名前があります

 this._elem('item', { mod: 'state', value: 'focused' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

セレクター'.item_state_focused'



よるjQueryコレクションの検索

問題5：データの取得

日付属性の少しの砂糖。

 this._data;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビューのルート要素のデータを格納します。 div



がある場合

 <div data-some-ids=”[5,6,7]”></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビューを初期化します

 this._data['someIds']; //   [5,6,7]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、データが特定の要素に保存されている場合、それはあなたを助けます

 this._getElemData('elemName', 'someIds');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてのデータを取得するには：

 this._getElemData('elemName'); //  {someIds: [5,6,7]}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

インストールと使用について

GitHub： github.com/backbonex/backbone.view.elements

Backbone.View.Elementsを使用する場合と使用しない場合のtodomvc