ガシガシJavaScriptをかかないWebアプリで、比較的単純なJQueryだけのプロジェクトのときに極力名前空間を汚さず大してめんどくさくなく書く方法のメモ
見返したらただの感想文になってしまった。
とりあえず
(function($) { ... })(jQuery);で引数ありの即時関数で包んでその中に愚直に処理を書くのが楽そう。
プロトタイプベースのオブジェクト指向でガシガシ書くのはオワコンっぽいんでとりあえずこんな感じでいいんじゃないでしょうか？
そもそもガシガシ書く場合、少なくともES6以上(or TypeScript)を使うはず。
こんな感じでよいかなと…。
化石のようなプロジェクトで対応する場合、この書き方が良いかと思われる。
関数も大体はオブジェクトリテラルで雑に定義しとけばだいたい事足りると思われる。
とか書いたらフロントエンドやってる人に怒られるかな…。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="test" style="width: 100px; height: 50px; background-color: gray;"> </div> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script> jQuery.noConflict(); (function($) { console.log('immediately invoked function start'); var mainFunc = { bindMouseOver: function() { $('#test').bind("mouseover", function() { alert("onmouseover"); }); }, }; $(document).ready(function() { console.log('ready function start'); mainFunc.bindMouseOver(); console.log('ready function end'); }); console.log('immediately invoked function end'); })(jQuery); </script> </body> </html>
HTTP/1.1(＋ブラウザの組み合わせ)だとリクエストが同時に6までしか飛ばなかったはずなので、
<script>がたくさん増えた場合、まぁ、仕方ないってあきらめるのがいいんでしょうね。
こういうプロジェクトの場合。
いや、webpackとかでbundleしろよってのもあるかもしれない。
うん、ここまで書いて、化石プロジェクトにつぎ足しするとき時間があればwebpack+TypeScriptでいい、という結論になりそう(;^ω^)。いやでもめんどくさい…
