使えるかもしれない!?jQueryのちょっと凝ったテクニック3選


いいね

みなさんjQuery使ってますか?

最近はReact.jsやVue.jsが盛んに取り上げられていますが、
SEOを考慮したサイトを作るにはやっぱりjQueryって選択肢も多いと思います。

そこで今回はjQueryでもしかしたら使えるかもしれない!?テクニックを3つ紹介します。




① jQueryをBody最下部に設置する

jQuery本体をBody最下部に設置したいけど、サーバサイドのフレームワークの制約上、コンテンツ内にインラインのjQueryコードも書きたい!!ってことありませんか?

そんなときにはこんな書き方はどうでしょう?

<html>
  <head>
    <script> window.jQueryDomReady = function(p){ (jQueryDomReady.procs = jQueryDomReady.procs || []).push(p); } </script>
  </head>
  <body>
     <div>
       <!-- コンテンツ -->
       <script>
         jQueryDomReady(function(){
            /* ここでjQueryコードが記載できる */
         });
       </script>
     </div>
     <script type="text/javascript" src='/js/jquery-x.x.x.min.js'></script>
     <script> jQueryDomReady.procs && jQueryDomReady.procs.map(function(p){ $(p); }); </script>
  </body>
</html>

$(function(){ }) の代わりに jQueryDomReady(function(){ }) が使えるようになります。

動作としては、jQueryDomReadyに関数を溜め込んで、
jQueryが使えるようになったあと、その関数を$()へ挿入しています。


② イベント設定し即実行する方法

クリック等のイベントに関数を設定したら、ページ読み込み時にもその関数を実行させたい時ってありますよね?イベントに設定している無名関数に名前を付け実行していませんか?別に完璧なんですが、違ったアプローチもできます。

<script>
$(".sample").onclick(function(){
   console.log("クリックしたらここが動くよ")
}).trigger('click'); // 即イベントを発火させることで、ページ読み込み時に実行される
</script>

見たとおりですが、イベントを設定して即イベントを発火しています。
注意点として、triggerより後ろでバインドしたイベントは発火されません。


③ jQueryコードをパーツごとに分ける方法

jQueryってイベントをバインドしたり、要素探索したりと結構煩雑になっちゃいますよね。
なるべくパーツごとに分離したいところです。そこで紹介するのは TodoMVCのjQuery編で紹介している書き方です。

<script>
  var App = {
    init: function () {
      this.items = ['BASIC', 'C', 'C++', 'C#', 'Emacs Lisp', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby'];
      this.$input = $(".js-input");
      this.$button = $(".js-button");
      this.bindEvents();
      this.render(this.items);
    },
    bindEvents: function () {
      this.$button.on('click',this.filter(this)); /* 呼び出し先のthisをAppコンテキストにしたいため、bind */
    },
    render: function (items) {
      items.forEach(function(val){
         console.log(`ここでHTMLを描画する ${val}`);
      });
    },
    filter: function(e){
      var str = this.$input.val();
      this.render(this.items.filter(function(i){ return i.indexOf(str) !== -1;}));
    },
  };
  App.init();
</script>

これは、オブジェクトリテラル( var App = {};) を用いてコンテキストを作成し、そこに処理をまとめようというアプローチです。要素探索、イベントをバインド、ロジック、描画がちゃんと分離されています。よく見る書き方ではないですが、保守性は高そうですね。



使えそうでしたか?

今回は普通とはちょっと違うテクニックをまとめてみました。jQueryはフレームワークではないので、良い意味でも悪い意味でも決められた書き方がありません。試行錯誤して効率良くコーディングしていきたいですね。





採用検索 - 詳細条件の設定