1

別の開発者が作成したこのコードを理解しようとしていますが、JavaScript の知識が不足しています。この関数は、サイトのヘッダー メニューを受け取り、それをモバイル スタイルのメニューに変換することになっています。

jQuery が として渡される理由を理解してい$ます。CPCU変数がどのようにそれ自体に返されるのか、またはなぜ として返されるのかわかりませんCPCU || {}。CPCUこの状況で変数がどのように機能しているかを誰かが理解するのを手伝ってくれますか?

var CPCU = (function (_cpcu, $) {
  'use strict';

  /**
   * Mobile Menu
   */

  var mmenu = _cpcu.Menu.mobile = _cpcu.Menu.mobile || {};
  // Properties.
  mmenu.id = '#mobile-menu';
  mmenu.el = $('');
  mmenu.api = {};
  mmenu.button = '#header-content .menu.button';
  mmenu.aniClass = 'animate';
  mmenu.opts = {
    slidingSubmenus: false
  };
  mmenu.config = {
    classNames: {
      selected: 'active'
    }
  };
  // Methods.
  mmenu.init = function () {
    mmenu.el = $(mmenu.id);
    // Move the active class to from the A to the LI, must happen before mmenu init.
    $('#mobile-menu').find('a.active').parent('li').addClass('active');
    // Now we can init the menu. otherwise it doesn't pick up the active LI.
    mmenu.api = mmenu.el.mmenu(mmenu.opts, mmenu.config).data('mmenu');
    mmenu.button = $(mmenu.button);
    mmenu.button.data('lines', $('.line1,.line2,.line3'));
    mmenu.button.click(function () {
      mmenu.api.open();
    });
    mmenu.api.bind('open', function () {
      mmenu.button.data('lines').addClass(mmenu.aniClass);
    });
    mmenu.api.bind('close', function () {
      mmenu.button.data('lines').removeClass(mmenu.aniClass);
    });
  };
  // Set up doc ready.
  $(document).ready(function () {
    mmenu.init();
  });
  return _cpcu;
})(CPCU || {}, jQuery);
4

2 に答える 2

4

関数をすぐに呼び出し、拡張するオブジェクトを渡し、拡張後に同じオブジェクトを再度返すことにより、より多くのプロパティ/機能でオブジェクトを拡張しようとしています。

まず、がすでに定義されているCPCU || {}場合CPCUは、それを関数に渡します。そうでない場合はfalsyCPCUになるため、新しい空のオブジェクトであるの右側が渡されます。これは内部のパラメーターとして使用され、追加のプロパティなどが割り当てられます。||_cpcu

このアプローチを使用すると、機能のさまざまな部分をさまざまな領域に分割できます。おそらく、特定の変数をそれらの領域に非公開にしたり、保守を容易にするために別のファイルに保存したりできます。

このコードは実際にはバグがあるため、「試行中」と言います。これCPCUが実行されるまでに が実際に定義されておらず、 に渡される{}場合、次の行:

var mmenu = _cpcu.Menu.mobile = _cpcu.Menu.mobile || {};

mobile未定義のプロパティのプロパティにアクセスできないため、エラーになりMenuます。そのため、開発者はパターンを使用してコードのさまざまな領域を分割しましたが、このセクションは実際には別のセクション (Menuプロパティを定義するセクション) に依存して事前に実行されているため、全体の意味がありませんCPCU || {}。

于 2016-04-20T14:52:46.333 に答える
1

このパラメーターは、投稿したコードの先頭にある宣言の前に、他のコードが既に初期化さCPCU || {}れている可能性を考慮してあります。パターンは一般的なものです。var CPCUCPCU

したがって、CPCUが定義されていない場合 (おそらくよくあるケースですが、もちろん私はあなたのソフトウェアについてあまり知りません)、無名関数に渡される値は新しい空のオブジェクト ( {}) になります。ただし、CPCU がすでに定義および初期化されている場合は、現在の値が代わりに渡されます。

したがって、仮説として、あるページに、<script>投稿したコードの前にタグを介してインポートされた別のスクリプトがあり、次のようなことをするとします。

var CPCU = { debug: true };

投稿したコードが実行されると、CPCUすでに値があることがわかります。これは通常、柔軟性を追加し、予期しない可能性を考慮するために行われます。

于 2016-04-20T14:52:04.887 に答える