Sass + jQuery 実装した時のメモ

# jQueryとscssを使った時のメモ

## イベントとDOMを紐付ける

```html:
<button data-target="hoge" class="btn--play">再生</button>
<button data-target="hoge" class="btn--pause">停止</button>
<audio id="hoge">
```

```javascript:特定のaudio要素だけ参照する場合
function bind_audio (_event, _this) {
    let data_id = "#" + $(_this).data("target");
    return $(data_id).get(0);
}
```
```javascript:audio要素を一時停止
$(".btn--pause").on("click", ()=> {
    bind_audio(e,this).pause();
})
```


## イベントの書き方

```javascript:基本形
// レガシー
$('.obj').click(function(event){
    $(this).func();
    console.log(this) // result:obj
});
// ES2015
$('.obj').click(event => {
    $(this).func();
    console.log(this) // result:obj
})
```
```javascript:bind→loadした状態のDOMツリーのままDOMを指定する
// レガシー
$('.obj').on('click',function(event){
    $(this).func();
    console.log(this)//result:obj
    return false;
});

// ES2015
$('.obj').on('click',(event) => {
    $(this).func();
    console.log(this)//result:obj
    return false;
});
```

```javascript:delegate→loadした状態のDOMツリーにあとからDOMを追加した場合に使う

// レガシー
$(document).on('click scroll', '.obj', function(event){
    $('.obj').fn();
    console.log(this)//result:obj
    return false;
});

// ES2015
$(document).on('click scroll', '.obj',(event) => {
    $('.obj').fn();
    console.log(this)//result:obj
    return false;
});
 
```
```javascript
//複数のイベントを登録　
//第一引数にメソッド
//イベントごとの動作をクラスメソッドみたいに分けて書く
$(document).on({
    'click': function(event){
        $(this).func();
        console.log(this)// result:obj
        event.preventDefault;
    },
    'scroll': function(event){
        $(this).func2();
        console.log(this)// result:obj
        event.preventDefault;
    },
},'.obj');

$(document).on({
    'click': function(event){
        $(this).func();
        console.log(this)// result:obj
        event.preventDefault;
    },
    'scroll': function(event){
        $(this).func2();
        console.log(this)// result:obj
        event.preventDefault;
    },
},'.obj');

$(document).on({
    click(event){
        $(this).func();
        console.log(this)// result:obj
        event.preventDefault;
    },
    scroll(event){
        $(this).func2();
        console.log(this)// result:obj
        event.preventDefault;
    },
},'.obj');
```

### 読みやすくまとめる

```javascript
//　グローバルな変数を宣言
var $hogehoge = "fugafuga";
 
// イベントの発火順に記述
$(".object").on('click',function(){
     my_func( $hogehoge );
});
// ES2015
$(".object").on('click',() => {
     my_func( $hogehoge );
});


//　関数は実行順に定義
function my_func(str) {
    consol.log(str);
}
```

```javascript:イベントをまとめて定義
$(obj).on({
    'touchstart': function(){
        return hoge1
    },
    'touchmove': function(){
        return hoge2
    },
    'touchend': function(){
        return hoge3
    },
    'click': function(){
        return hoge4
    },
});

$(obj).on({
    touchstart() {
        return hoge1 
    },
    touchmove() {
        return hoge2 
    },
    touchend() {
        return hoge3 
    },
    click() {
        return hoge4 
    }
});
```

### あとがき
- componentレイヤーのパーツはwrapperを付けて
他のページに影響が出ない構造にする(ネームスペースみたいな感じ)
もしくは、classをユニークなものにする。出来れば両方してほしい。

- projectレイヤーのSassはcomponentの一番外側の親要素にのみ最低限の干渉をする。
子要素に対してはprojectレイヤーの仕事ではない。


DRY ”Don’t Repeat Yourself”（重複をしない）
YAGNI ”You Aren’t Gonna to Need It"（わからないことを予想して複雑にしない）

### TODO:もう少し機能的な関数に置き換える・・・