Sass + jQuery 実装した時のメモ

18836 ワード
JavaScript es6 es2015 jQuery scss JavaScript テキストリンク

jQueryとscssを使った時のメモ

イベントとDOMを紐付ける

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

イベントの書き方

基本形
// レガシー
$('.obj').click(function(event){
    $(this).func();
    console.log(this) // result:obj
});
// ES2015
$('.obj').click(event => {
    $(this).func();
    console.log(this) // result:obj
})
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;
});
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;
});


//複数のイベントを登録　
//第一引数にメソッド
//イベントごとの動作をクラスメソッドみたいに分けて書く
$(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');

読みやすくまとめる

//　グローバルな変数を宣言
var $hogehoge = "fugafuga";

// イベントの発火順に記述
$(".object").on('click',function(){
     my_func( $hogehoge );
});
// ES2015
$(".object").on('click',() => {
     my_func( $hogehoge );
});


//　関数は実行順に定義
function my_func(str) {
    consol.log(str);
}
イベントをまとめて定義
$(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:もう少し機能的な関数に置き換える・・・

Jupytter Pythonカーネルの修正