Как я могу назвать эту функцию, используя onclick в HTML?

Question

Я только начал поддерживать код someones, и я не уверен, что происходит здесь.

$(document).ready(function() { 

    function Test() { 

     var that = this; 
     that.testFunc = function() { 
     } 
    }  
} 

Я хочу выполнить этот testFunc onclick из HTML. Как мне это сделать? В любом случае, я могу это упростить? Я запутался в этом стиле кодирования

Answer 1

Лучший способ сделать это - использовать метод .click() в jQuery.

$('.element').click(testFunc); 

Если вы хотите/должны использовать HTML onClick атрибут:

<input type="button" onclick="testFunc();" /> 

Answer 2

Не используйте <button onclick="...">. Если вы используете jQuery, получите элемент с помощью selectors и настройте event listener.

$('button').click(function(){ 
    ... 
}); 

Код, который вы разместили в нем немного брэйми и не читается. Он может использовать рефакторинг.

Если вы настаиваете на выходе его, как это, вы можете сделать это ...:

$(document).ready(function() { 
    function Test() { 
     var that = this; 
     that.testFunc = function() { 
      //alert('i will also fire when this.testFunc() is called.'); 
     } 

     // alert('i will fire'); 
     this.testFunc(); 
    } 

    $('button').click(function(){ 
     Test(); 
    }); 
}); 

Here's a fiddle of that working.

Кодирование стиля является плохой попыткой OO-JavaScript. W3Schools(я знаю ...) может быть хорошим местом, чтобы начать понимать, что это такое. Альтернативно, this post on Stack - это ключевое слово this, а также ссылки на большие ресурсы.

TLDR; Код выглядит действительно умным, но просто запутанным и мусорным.

Update

Итак, вот что происходит.

$(document).ready(function() {  // when the page is loaded, run this function 
    function Test() {     // create a named function called Test. 
             // Note that this function is only visible (so can only be called) within the anonymous function being run after $(document).ready. 
     var that = this;    // set a variable ('that') to 'this' - a special keyword. At this point, 'this' will refer to the Global scope. 
     that.testFunc = function() { // create a function called testFunc on the object which is now 'that' - i.e. Global scope, the Window object. 
             // basically, create window.testFunc. 
      //alert('i will also fire when this.testFunc() is called.'); 
     } 

     // alert('i will fire'); 
     this.testFunc();    // call window.testFunc(); 
    } 

    $('button').click(function(){ 
     Test();      // run the Test function explained above 
    }); 
}); 

Так что, если вы не реорганизовывать, что вам нужно сделать что-то вроде:

$(document).ready(function(){ 
    function Test(){ 
     var that = this; 
     that.testFunc = function(){ 
      ... 
     }; 
    } 

    $('button').click(function(){ 
     testFunc(); 
    }); 
    Test(); 
}); 

В принципе, вам нужно запустить тест() для создания testFunc в рамках глобальной области. Код трудно поддаться, и его можно легко интерпретировать, поэтому я умоляю вас реорганизовать и сделать это правильно.

Here's (another) fiddle кнопки, только что вызывающей testFunc.

Answer 3

Простое обращение с обработчиком testFunc() должно быть достаточным, так как testFunc присваивается контексту окна. То есть, предполагая, что в какой-то момент вызывается Test().

JSFiddle Example