JavaScriptのcall,bind+npmからのライブラリ読み込みで

投稿日：2019年4月28日

npmを使ってライブラリ管理をする場合、個別にライブラリを読み込まず、package.jsonで読み込んだあと、一括してライブラリを読みこむことが一般的です。

で、その時の処理に関して。

例えばleanModalというライブラリがありまして、これを使う場合には普通に、下記のように書いてあげればOKです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!--ここでライブラリを読み込む-->
    <script src="./learnModal.js"></script>
    <script type="text/javascript" >
    $(document).ready(function() {
        $("#open_modal").leanModal({top : 200, overlay : 0.4, closeButton: ".modal_close"});
    });
   </script>
   <style type="text/css">
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#form_block{
   height:400px;
   width: 400px;
   display:none;
   padding-bottom: 2px;
   background:#157;
}
</style>

<body>
    <p><a id="open_modal" href="#form_block">ボタン開く</p>

    <div id="form_block">
    <input type="button" class="modal_close">
    <form>
        <dl>
        <dt>userID:</dt><dd><input type="text" name="name" value=""></dd>
        <dt>email:</dt><dd><input type="text" name="email" value=""></dd>
        </dl>
        <p><input type="submit" value="ログイン"></p>
    </form>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

$("#open_modal").leanModal({top : 200, overlay : 0.4, closeButton: ".modal_close"});

});

</script>

#lean_overlay {

position: fixed;

z-index:100;

top: 0px;

left: 0px;

height:100%;

width:100%;

background: #000;

display: none;

}

#form_block{

height:400px;

width: 400px;

display:none;

padding-bottom: 2px;

background:#157;

}

</style>

<body>

<p><a id="open_modal" href="#form_block">ボタン開く</p>

<form>

<dl>

<dt>userID:</dt><dd><input type="text" name="name" value=""></dd>

<dt>email:</dt><dd><input type="text" name="email" value=""></dd>

</dl>

</form>

</div>

</body>

</html>

これをnpm経由でライブラリ管理しようとすると以下のようになります。
resource.js(コンパイルする予定のjs)

var $ = require('jquery');

//lean-modal
var leanModal = require("lean-modal");

//スコープが閉じているのでグローバルオブジェクト(windowに格納)
window.$ = window.jQuery = $;
window.leanModal = leanModal;

var $ = require('jquery');

//lean-modal

var leanModal = require("lean-modal");

//スコープが閉じているのでグローバルオブジェクト(windowに格納)

window.$ = window.jQuery = $;

window.leanModal = leanModal;

読み込んだあとはwindowオブジェクトに格納してグローバルな変数にします。

HTML部分での読み込み(先ほどと重複する部分は削除)

#bindを使う方法
var leanModal2 =  leanModal.bind($('#open_modal'))
leanModal2({top : 200, overlay : 0.4, closeButton: ".modal_close"})

#callを使う方法bind+関数実行
leanModal.call($('#open_modal'), {top : 200, overlay : 0.4, closeButton: ".modal_close"})

#bindを使う方法

var leanModal2 = leanModal.bind($('#open_modal'))

leanModal2({top : 200, overlay : 0.4, closeButton: ".modal_close"})

#callを使う方法bind+関数実行

leanModal.call($('#open_modal'), {top : 200, overlay : 0.4, closeButton: ".modal_close"})

bindですが、これはthisを変えることができる点がメリットです。

詳しくはleanModalの内部を見ないとわからないのですが、モーダルを付与したい属性に対してthisを割り当ててあげないといけません。

そこで属性を付与してあげたいエレメントに対して、bindを発行してあげ、なおかつ関数を実行してあげるとうまく機能しました。

ちなみにcallというメソッドはbind+関数実行のようです。(今だ理解はあやふやですが・・・)

やや発展的な手法ですが知っておくと利用範囲は広そうです。

JavaScript bind,call,apply入門！

npmを使ったライブラリ読み込みの例など

https://github.com/umanari145/library