jQuery に関する投稿を表示しています

ごみばこいんのjQuery依存をなくそうとした

ごみばこいんの jQuery 依存をなくそうとした。
背景としては jQuery の読み込みに 30KB くらい使っていて、でも jQuery をそんなに大活用しているわけでもなくて。
じゃあいらんか、と。

zepto にすることも考えた。が、せっかくなのでまるっと消すことにした。
GitHub - madrobby/zepto: Zepto.js is a minimalist JavaScript library for modern browsers with a jQuery-compatible API


自分で書いていたやつから jQuery な記載を消していった。
$は document.querySelector とか document.querySelectorAll とかで。
XHR がちょっと面倒だなあ…とか思ったけど fetch API あるやん!で解決した、便利。

Fetch API - Web API | MDN

あとは Chrome の DevTool でコンソールで試しながら変数あるかなあとか見たりしながら書いてた。


画像の表示に使っていた lity という lightbox なライブラリが jQuery 依存していたので別のものに切り替える必要があった。

GitHub - jsor/lity: Lightweight accessible and responsive lightbox.

cdnjs を lightbox で探していたらよさそうなのがあった。
luminous という lightbox なライブラリで lity と容量もあまりかわらない(3KB くらい)っぽい。

GitHub - imgix/luminous: A simple lightweight no-dependencies JavaScript lightbox.

imgix 画像加工ができる CDN サービスをやっている会社が提供している lightbox なライブラリとのこと。

imgix • Real-time image processing and image CDN

余談にはなるが日本で同様のものだと ImageFlux が有名だろうか。むしろ画像 CDN でパラメータで扱うのはこれしかしらなかった。。
画像変換サービス ImageFlux|さくらインターネット


あと jQuery に依存していたわけではないが Chrome の DevTool から Performance タブで Load イベントまでの様子を測ってみると Highlight.js がそこそこに時間を使っていてなんとかしたいなあと。

GitHub - highlightjs/highlight.js: Javascript syntax highlighter

これまたいくつか調べてみると prism なるものが見つかった。
テーマを切り替えることもできるし、様々な言語のハイライトに対応しているし、プラグインで拡張できるし、でっかいハイライトするなら WebWorker を使っての asyncRender も有効に使えそうな感じがする。

GitHub - PrismJS/prism: Lightweight robust elegant syntax highlighting.

実際にいれてみると、言語検出機能がないので、特に言語を指定せずにざっくり使っていた部分についてハイライトが効かなかった。のでそれっぽいものを自分でざっくり書いた WordPress で使うので、投稿についたタグの情報とか、コードの中身とかからざっくり判断でわりかし十分。多分間違っていても、そんなに気にならない。


そのほか、処理順を入れ替えたり、遅いやつをもっと遅延させて影響なくしたり requestAnimationFrame を使ってみるなどした。
変更する前と比べて、表示されるまでがだいぶ早くなった、と思う。(主観)

「submitで複数の関数を動かしたいんですけどどうやるんですか」

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

ぼく「うーん?????」
ぼく「あっ(jQueryのsubmitイベントに複数の処理ぶち込みたいんだろうなあ...って普通に書けばいいいと思います!)」

参考:http://api.jquery.com/submit/
要約:$("~~").submit( // ここに関数オブジェクトぶち込む // )

関数オブジェクト is 何:関数オブジェクトは関数オブジェクトや
参考:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope
要約:"function A(){}" もしくは "var A = function(){};" などとしたときの "A" の中身がソレ。
つーかfunction構文とかFunctionのインスタンスつくったときに生成できる。
(以下のサンプル見たほうが早いし用語とか解釈に若干不安が...)

まとめるとこんなかんじ

// ex.1
$("#form").submit(function(){
  // 処理A //
  // 処理B //
});
// ex.2
function AAA() {
  // 処理A //
}
function BBB() {
  // 処理B //
}

$("#form").submit(function(){
  AAA();
  BBB();
});
// ex.3
// 複数バインドしたときには、実行順序は多分バインドした順。A->B
$("#form").submit(function(){
  // 処理A //
});
$("#form").submit(function(){
  // 処理B //
});

おしまい

jQuery.ajaxとかjQuery.getとかでjsを取得したときに実行される

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

A. 公式ドキュメント読め
http://api.jquery.com/jQuery.ajax/

いちおう、めっちゃ要約を。


dataTypeを指定しないとMIMEにもとづいて勝手に解釈するでw
scriptが指定されたときは、取得した内容を実行して、その内容をコールバックに渡してやりま


うーん、時間のあるときに実装もみてみるかーーー

あと、deffered、jqXHRオブジェクトとかいまいちちゃんと分かってないので、そのうちちゃんとやりたいですね。