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

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

vuexについて

vueの変数管理に関して、vuexについて勉強したことなどを。 ざっくり言ってしまうとvuex=グローバル変数という感じかと思います。 このキーワードで検索したところヒットした記事があったんで多分間違 …

no image

静的解析ツールについて

  ある程度の規模のプロジェクトだったら使っているであろう静的解析ツールについて。 Contents1 PHP CodeSniffer2 JavaScript eslit3 C# Style …

no image

新技術のメリットを理解したい場合(jQueryと比べた場合のVueのメリットなど)

Vueを昨年度ぐらいからコツコツと勉強しています。 正直、その理由の半分ぐらいは「流行っているから」というのが大きいですね(汗) エンジニアとしてはやはり新しい技術自体を追い求めること自体に「快感」の …

no image

モジュールバンドラrollupについて

モジュールバンドラというと一般的にはwebackが一般的ですが、rollupというモジュールバンドラを調査したところ、良さげな感じなので、ちょっとメモ。 サンプル https://github.com …

アーカイブ