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

gulpインストールとタスクの実行

今更ですが、gulpインストールと作業に関して。 less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。 別件でgul …

no image

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

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

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …

no image

vuexについて

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

no image

AngularJSでのDB接続

AngularJSでデータベースへのアクセスをしたいときの処理を記述します。 注意点としては、なんといっても非同期なことです。同期させることも無理ではないようですが、基本非同期ですので、この点を理解し …

アーカイブ