skillup

技術ブログ

JavaScript

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

投稿日:

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

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

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

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

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

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

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

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

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

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

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

JavaScript bind,call,apply入門!

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

https://github.com/umanari145/library

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

ケース別JavaScriptライブラリまとめ

Webエンジニアとしてはサーバーサイドのプログラムのみならず、JavaScriptをいじることがおおいでしょう。 私自身、昔はわけがわからず大嫌いだったんですが、最近はデバッグが楽なこともあり、結構愛 …

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

no image

jQueryの書き方について

jQueryの書き方は一般的に以下のように書きます。

上記の処理ですが、細かく書くとDOMが構築されてから実行という意味が含まれていま …