JS Modular Pattern - публичная функция не выполняется - PullRequest
Новая
       64

JS Modular Pattern - публичная функция не выполняется

0 голосов
/ 30 октября 2018 

$( document ).ready(function() {
  var feature = (function() {
    var items = $( "#myFeature li" );

    var showItem = function() {
      currentItem = $( this );
      // more code goes here;
    };
 
    var showItemByIndex = function( idx ) {
      $.proxy( showItem, items.get( idx ) );
    };       
 
    items.click( showItem );
 
    return {
      showItemByIndex: showItemByIndex
    };
  })();
 
  feature.showItemByIndex( 0 );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myFeature">
  <ul>
     <li>item 1</li>
     <li>item 2</li>
  </ul>
</div>

Приведенный выше фрагмент кода из документации по jQuery отсюда https://learn.jquery.com/code-organization/concepts/

публичная функция feature.showItemByIndex(0) не выполняется, может кто-нибудь пролить свет?

1 Ответ

0 голосов
/ 30 октября 2018

Похоже, что функция showItemByIndex вызывается при загрузке страницы строкой feature.showItemByIndex( 0 ).

Проблема в том, что showItemByIndex на самом деле не делает ничего полезного; Он создает прокси-функцию для showItem (связывающую ключевое слово this) и затем ничего с ней не делает.

Если вы измените пример так, чтобы была вызвана вновь созданная прокси-функция, тогда код выполняется так, как и следовало ожидать. 

$( document ).ready(function() {
  var feature = (function() {
    var items = $( "#myFeature li" );

    var showItem = function() {
      currentItem = $( this );
      console.log('Show Item',this) // added some logging
    };
 
    var showItemByIndex = function( idx ) {
      $.proxy( showItem, items.get( idx ) )(); // call this proxy function!
    };       
 
    items.click( showItem );
 
    return {
      showItemByIndex: showItemByIndex
    };
  })();
 
  feature.showItemByIndex( 0 );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myFeature">
  <ul>
     <li>item 1</li>
     <li>item 2</li>
  </ul>
</div>
...