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

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

JavaScriptのコールバック関数について

JavaScriptでのコールバック関数について。 たまにでてきますが、これまた慣れないと手間取ります。 コールバック関数に関してまとめると以下のような感じでしょうか。 ある関数(func1)の引数と …

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …

no image

クロスドメインがらみのajax

ajaxで別ドメインに対して、プログラムを実行したい時に注意すべきことなどを。 Contents1 ログ、レスポンスヘッダをとにかく追う2 特定ドメインからの許可3 フレームワーク側での認証ロジック( …