什麼是JavaScript函數接受變量的正確方法

我是新來的JS和關於這個問題，我希望你能理解這個問題有點糊塗：什麼是JavaScript函數接受變量的正確方法

當我想在一個功能的使用變量從另一個到來，或事件來如onClick等。這將是它從HTML或其他功能移動到執行功能

工作的正確方法（尚未很好。）例如：我有幾個多選擇題頁面，每個問題是一種新的形式，我想有一個功能對所有提交按鈕，並提交檢測形式的名稱時，所以我應該使用onsubmit="validate(this)？還是有更好的方式來採取的形式的名稱，並把它放到validate功能，

，並在一般情況下，當我使用function something(){}，我想讓它變得變量從外面做我必須做function something(a,b,c){}或做它取決於變量的範圍？嗯..我甚至不知道我的理解不夠，制定一個很好的問題，所以對這個主題的文章或教程的任何引用都會有很大的幫助。

來源

2011-05-12 ilyo

因此，JavaScript有幾個核心功能概念應該能夠提供幫助。首先和formost：爲了處理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 
    } 
    } 
}

您可以使用Immediately Invoked Function Expressions創造必要關閉，以保持正確的狀態。因此，「修復」上面的代碼，你會使用類似：

// 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 ++)) 
    } 
}

來源

2011-05-12 16:08:28 Gabriel

骨幹非常棒，但它不是一個DOM庫，它是一個代碼結構庫。 jQuery的一個好的替代方法是ender。（骨幹的一個很好的選擇是脊柱）。第二個例子還有在循環中創建函數的_BIG_問題。這是一個缺乏塊範圍的常見例子，但它僅僅是糟糕的代碼。 – Raynos 2011-05-12 16:16:49

@Raynos我同意在循環中創建函數是不好的代碼，但不想變出另一個使用示例。我會在示例中注意代碼的不好之處。 – Gabriel 2011-05-12 16:20:55

我們需要一個很好的例子來理解塊範圍的問題:)我還沒有找到一個，這只是一個陷阱而不是糟糕的代碼。 – Raynos 2011-05-12 16:24:28

那麼如果你有一個功能，如：

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，或者使用某種類型的事件處理程序

來源

2011-05-12 15:48:09 Neal

的，我會建議取消礙眼的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.

來源

2011-05-12 15:49:27 Raynos

好，但是說一兩是全球性的，如果我只是使用函數addNumbers（）{ someUseForOne =一個 }' – ilyo 2011-05-12 15:55:45

@llyaD，我們會不惜一切代價避免全局變量。 – Raynos 2011-05-12 15:57:50

@Raynos好的，但如果他們來自外部功能，他們已經是全球性的，或者我誤會了？ – ilyo 2011-05-12 16:02:00

你可以做這樣的事情，不完全是，但你的想法：

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

來源

2013-06-28 03:51:55

什麼是JavaScript函數接受變量的正確方法

回答

相關問題