Как правильно JavaScript-функциям принимать переменные?

Question

Я новичок в JS и немного запутался в этом вопросе, надеюсь, вы поймете вопрос:

Когда я хочу использовать в одной функции переменную, приходящую из другой, или из события, такого как onClick и т. д. что было бы правильным способом переместить его из HTML или другой функции в выполняемую функцию

рабочий (ну, пока нет ..) пример: у меня есть страница с несколькими вопросами с несколькими вариантами ответов, каждый вопрос - это новая форма, я хочу иметь одну функцию для всех кнопок отправки и при отправке для обнаружения название формы, поэтому я должен использовать onsubmit="validate(this)? или есть лучший способ взять имя формы и поместить его в функцию validate,

и вообще, когда я использую function something(){} и хочу, чтобы он получал переменные извне, мне нужно сделать function something(a,b,c){} или это зависит от области видимости переменной? хм .. я даже не уверен, что понимаю достаточно, чтобы сформулировать хороший вопрос, поэтому любая ссылка на статью или учебник по этой теме очень поможет.

Answer 1

Я бы порекомендовал ненавязчивый JavaScript.

document.form[0].addEventListener("submit", function(event) {
    switch (event.target.name) {
        // switch form name.
    }
});

Когда вы разрабатываете общую функцию, вы должны думать о аргументах, которые вы хотите принять.

Например

function addNumbers(one, two) {
    // add them
}

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

<div id="bar"> 3 </div>

...

(function() {
    // local variables
    var one = 1;
    var two = 2;

    // Your getting number 3 globally from the HTML.
    var three = document.getElementById("bar").textContent;

    // passed in as parameters
    console.log(addNumbers(one, two)); // 3
    console.log(addNumbers(two, three)); // 5

})();
console.log(one) // undefined.

Answer 2

Итак, в JavaScript есть несколько основных концепций функций, которые должны помочь.Прежде всего: для работы с событиями DOM вам, вероятно, захочется использовать библиотеку, если вы не имеете буквально 0 ожиданий совместимости браузера.Я предлагаю изучить jQUery .

. Тем не менее, ненавязчивый JavaScript (согласно ответу @Raynos) является правильным способом связывания событий в JavaScript и дает вам большую гибкость.Возьмем следующий пример:

function setup_events(){
  var my_form = document.form[0],
      form_name = my_form.name;
  my_form.addEventListener("submit", function(event) {
    console.log( form_name ); // this is retained through the closure.
  });
}

Вы видите, что можете связать данные в функции событий, используя концепцию замыкания или контекст внешней области видимости после того, как внешняя область видимости вернулась из внутренней области видимости.Теперь, когда вы выполните setup_events, вы свяжете событие submit с функцией, которая внутренне имеет доступ к внешней переменной form_name.Это может привести к некоторым неприятным побочным эффектам, если вы не понимаете область действия функции, поэтому ищите код, подобный следующему:

// XXX : BAD CODE
function setup_events(){
  var ul = document.getElementsByTagName('ul')[0], // assumes there is a <ul>
      count = 0;
  for ( var li in ul.childNodes ) {
    li.addEventListener('click', function( event ){
      alert( count ++ ); // this will always alert the count of list, not the list position
    }
  }
}

Вы можете использовать выражений немедленного вызова функций , чтобы создать необходимые замыкания длясохранить правильное состояние.Таким образом, чтобы «исправить» приведенный выше код, вы должны использовать что-то вроде:

// XXX : BETTER CODE
/**
 * NOTE: NEVER CREATE FUNCTIONS INSIDE A LOOP
 * this example only shows the immediate solution to the above problem
 * with regard to function scope and closures.
 */
function setup_events(){
  var ul = document.getElementsByTagName('ul')[0], // assumes there is a <ul>
      count = 0;
  for ( var li in ul.childNodes ) {
    li.addEventListener('click', (function( count ){
      return function ( event ){
        alert( count ); // this will alert the position in the list
      };
    })(count ++))
  }
}

Answer 3

Вы могли бы сделать что-то подобное, не совсем так, но вы поняли:

function onSubmitClick(){
    if(document.getElementById('choice1').checked==true){
        //store result
    }else if((document.getElementById('choice2').checked==true){
        //store result
    }else if(document.getElementById('choice3').checked==true){
        //store result
    }else if(document.getElementById('choice4').checked==true){
        //store result
    }else{
        //they didn't choose any

Answer 4

Хорошо, если у вас есть такая функция:

function something(){
...
}

Вы все еще можете сделать что-то вроде этого:

something(1,2,3);

Результаты будут в ассоциативном объекте функции, поэтому вы можете получить к ним доступ следующим образом:

function something(){
    //check for args:
    if(arguments === undefined){...}
    arguments[0]; //which is 1 in our case
    //etc
}

Но, ссылаясь на on{something}, вам обычно приходится передавать this или использовать какой-либо обработчик событий