[jQuery]関数名を付けて使い回すことを覚える

大掛かりなサイトになると必要な手段。

ピンポイントな制作だったり小規模なWEBサイトならjsが重複することはないというか、全体にかかるものとそれぞれで使うものを作れば済んじゃうんだけど、規模が増えてくると「こことここでこの処理をやりたい」が出てくる。そうすると都度同じのを書くのは非常にだるいから、関数化して使い回したくなる。function()も関数にできるということを覚えておく。

基本形

$(function(){
    function(){
        alert('aaa');
    }
})

こうするとalertが出る。

$(function(){
    function aaa(){
        alert('aaa');
    }
})

こうすると関数「aaa」を書いたってことになる。このままでは何も起きない。

$(function(){
    function aaa(){
        alert('aaa');
    }
    aaa();
})

これで関数「aaa」は発火する。

操作に仕込む場合

単純に、こういうのがあったとする。

<button>Click</button>

クリックしたら何かしたいってときはこうする。

$(function(){
    $('button').click(function(){
      alert('aaa');
    });
})

関数化したのを呼び出すときはこうする。

$(function(){
    function aaa(){
        alert('aaa');
    }

    $('button').click(function(){
        aaa();
    });
})

.onでも一緒。

$(function(){
    function aaa(){
        alert('aaa');
    }

    $('button').on('click',function(){
        aaa();
    });
})

function(){}に突っ込むってことを忘れなきゃ大丈夫。

function()の「()」の使い方

計算式は同じのを使いたいけど入れる数値は都度変えたいとか、要するに関数内で変数を使いたいってときに使える。

$(function(){
    function aaa(one,two,three){
        alert(one+two+three);
    }

    $('button').on('click',function(){
        //aaabbbccc
        aaa('aaa','bbb','ccc');
    });
})

aaa()で変数名と変数の数を指定して、変数の中身を指定しつつ発火。

関数の発火

↓こういうこともできるんで、状況に応じて使い分ける。

$(function(){
    one = 'aaa';
    two = 'bbb';
    three = 'ccc';

    $('button').on('click',function(){
        aaa();
    });

    function aaa(){
        //aaabbbccc
        alert(one+two+three);
    }
})

発火命令の後に関数を書いても動くっていうのは便利。

html上でも関数を発火させることができる。

<script>
function copyUrl() {
    const element = document.createElement('input');
    element.value = location.href;
    document.body.appendChild(element);
    element.select();
    document.execCommand('copy');
    document.body.removeChild(element);
}
</script>

<a onclick="copyUrl()">URLをコピー</a>
スポンサーリンク

コメント

タイトルとURLをコピーしました