看不到邏輯把函數作爲（參數）而不是{做某事}

我是JavaScript和JQuery的新手，需要幫助來看看這個例子中的邏輯：如果我想隱藏div click事件正確的解決辦法是這樣的：看不到邏輯把函數作爲（參數）而不是{做某事}

$(document).ready(function() { 
    $('div').click(function() { 
     $('div').hide(); 
    }); 
});

但對我來說會更有意義，如果它看起來像這樣：

$(document).ready() { 
    $('div').click() { 
     $('div').hide();  
    }; 
};

希望有人理解爲什麼我覺得這混亂並能解釋我明顯錯過了什麼。

來源

2013-09-26 guldvarg

好吧，也許你可以創建另一個JS基於語言。 ECMAScript 6引入了[Arrow Functions]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions）。 – undefined

那麼你可能會喜歡Coffeescript。 – Thilo

請參閱[Javascript提示不要污染具有實用函數的全局名稱空間]（http://blog.bigbinary.com/2009/03/18/javascript-tip-do-not-pollute-global-namespace-with-utility-functions .html） –

謝謝大家很大的幫助！這一切都歸結爲我的誤解是因爲我沒有意識到調用和聲明函數之間的區別。

呼叫：function();

聲明：function(){};

對不起，我困惑的問題，想這不會是最後一個;）最好的問候，的Kristofer

來源

2013-09-27 12:10:32 guldvarg

匿名函數是用來避免污染全局命名空間

假設

1）

var x="test" 
    function a(){ 
    alert(x);// x then its global to whole script available to the page 
    }

2）如果u定義

function() { 
     var x="test" 
     function a(){ 
     alert(x); //will bo local to this anonymous function and will not pollute the global x variable and still global for methods inside this anonympous function. 
    } 
    }

來源

2013-09-26 08:13:09 dev

你真正看到什麼是使用回調函數，你可以傳遞一個匿名函數或者一個名字在預定義功能

$('div').click(// Callback within scope of selector when event is fired);

你也可以這樣做：

function doStuff() { 
    console.log('doing stuff...'); 
} 

$('div').click('doStuff');

如果你使用你的榜樣，做$（「格」）點擊（），它實際上將觸發點擊。事件在div上。

來源

2013-09-26 08:19:02

匿名函數的原因是它在ready函數中被調用。這樣jQuery可以在調用傳遞給ready函數的函數之前和之後執行一些操作。當然jQuery.ready功能要複雜得多，但要說明我的意思，讓我們假裝是：

jQuery.ready = function(yourAnonymusFunction) { 
    // do something before ... 

    // call the function you passed 
    yourAnonymusFunction(); 

    // do something afterwards 

}

隨着你的語法，這其實應該是：

$(document).ready = function() { 
    $('div').click() { 
    $('div').hide();  
};

你會覆蓋就緒功能。

來源

2013-09-26 08:20:02 gnom1gnom

函數ready將函數作爲參數。當函數ready執行時，所做的只是將該函數添加到元素準備就緒時要執行的函數列表中。這被稱爲call-back。

因此，在您的代碼中，您需要定義一個函數，然後將該函數傳遞給$.ready。 Javascript是完全動態的，沒辦法知道ready本身是一個接受函數作爲參數的函數，這就是爲什麼你需要使用一個語法來指定「作爲一個函數調用ready，傳入這個代碼塊I我現在定義爲一個函數「。

話雖如此，這是一個非常常見的JavaScript模式，並有很大的壓力讓sytax更加簡潔。

來源

2013-09-26 08:43:05 maninalift

UI編程的本質Event driven。

在這個範例中，無論您使用何種語言，您都必須定義在事件發生時將運行的事件處理程序。在您的例子是更具表現如果使用較不緊湊的語法：

$('div').on('click', reaction);

在純OOP（例如JAVA）反應將是實現特定接口的對象：

import java.util.Observer; 
public class ResponseHandler implements Observer { 
    ... 
} 
ResponseHandler reaction = new ResponseHandler();

現在，歡迎來到Javascript！

由於Javascript函數爲Higher-order，因此將函數作爲參數傳遞是常用操作，它們被命名爲callbacks。當定義這個回調函數時，javascript也非常冗長。

您必須使用全功能表達式來定義回調（有名或無名）。或者你可以移動到Coffescript化妝品來瀏覽這些函數定義（但它們只是語法糖，因爲函數定義是無論如何）。

您發明的{}語法或coffescript箭頭語法實際上隱藏了實際的反應。

$('div').on('click', reaction);

反應在JavaScript僅僅是一個函數，一個回調函數。

現在，jQuery事件是一個reactor engine的實現，允許您的應用程序代碼與實際引擎完全分離。這意味着jQuery應用程序是一組對事件反應的定義：

每當文檔準備就緒時，請執行此操作。
每當用戶點擊div，就這麼做。
每當鼠標進入跨度時，請做任何事情。

來源

2013-09-26 09:55:03 David

我認爲你的關注更多的是語法而不是邏輯。

你應該檢查CoffeeScript出

你的代碼看起來像這樣

$(document).ready -> 
    $("div").click -> 
    $("div").hide()

然而CoffeScript更像是需要被編譯爲JavaScript（這是很容易做到）模板語言。但是編譯的好處值得額外的麻煩。 :)

嘗試一下這裏http://js2coffee.org/

來源

2013-09-26 10:09:21 equivalent8

如果您使用的是Web框架Ruby on Rails，從版本3.1（我認爲）框架將自動將您的CoffeeScript資源編譯爲JS – equivalent8

看不到邏輯把函數作爲（參數）而不是{做某事}

回答

相關問題