javascript匿名函數(shù)中的'return function()'作用
我最近看到很多javascript代碼,看起來(lái)我錯(cuò)了.在這種情況下,我應(yīng)該建議哪種更好的代碼模式?我將重現(xiàn)我所看到的代碼和每個(gè)代碼的簡(jiǎn)短說(shuō)明:
代碼塊#1
該代碼不應(yīng)該評(píng)估內(nèi)部函數(shù).程序員會(huì)因?yàn)榇a應(yīng)該運(yùn)行而感到困惑.
$(document).ready( function() { return function() { /* NOPs */ } });
代碼塊#2
程序員可能打算實(shí)現(xiàn)一個(gè)自調(diào)用功能.他們沒(méi)有完全完成實(shí)現(xiàn)(他們?cè)谇短桌ㄌ?hào)的末尾缺少一個(gè)().另外,由于它們?cè)谕獠亢瘮?shù)中沒(méi)有做任何事情,所以嵌套的自調(diào)用函數(shù)可以剛剛嵌入到外部功能定義.
其實(shí)我不知道他們打算使用自調(diào)用函數(shù),因?yàn)榇a仍然是錯(cuò)誤的.但似乎他們想要一個(gè)自我調(diào)用的功能.
$(document).ready( (function() { return function() { /* NOPs */ } }));
代碼塊#3
再次,程序員似乎試圖使用自調(diào)用函數(shù).但是,在這種情況下,它是過(guò)度的.
$(document).ready( function() { (return function() { /* NOPs */ })() });
代碼塊#4
一個(gè)示例代碼塊
$('#mySelector').click( function(event) { alert( $(this).attr('id') ); return function() { // before you run it, what's the value here? alert( $(this).attr('id') ); } });
評(píng)論:
我想我只是沮喪,因?yàn)樗鼤?huì)導(dǎo)致人們不明白的蠕蟲(chóng),更改范圍界定,他們不是grokking,并通常使真正奇怪的代碼.這些都是來(lái)自某些教程的地方嗎?如果我們要教人們?nèi)绾尉帉?xiě)代碼,我們可以教他們正確的方法嗎?
你會(huì)建議什么作為一個(gè)準(zhǔn)確的教程向他們解釋為什么他們使用的代碼是不正確的?你會(huì)建議他們學(xué)習(xí)什么模式?
我看到的所有使我提出這個(gè)問(wèn)題的樣本都是這樣的問(wèn)題.這是我遇到的最新的特征片段,展示了這種行為.你會(huì)注意到,我沒(méi)有發(fā)布一個(gè)鏈接的問(wèn)題,因?yàn)橛脩羲坪跏窍喈?dāng)新手.
$(document).ready(function() { $('body').click((function(){ return function() { if (counter == null) { var counter = 1; } if(counter == 3) { $(this).css("background-image","url(3.jpg)"); $(this).css("background-position","10% 35%"); var counter = null; } if(counter == 2) { $(this).css("background-image","url(2.jpg)"); $(this).css("background-position","10% 35%"); var counter = 3; } if(counter == 1) { $(this).css("background-image","url(1.jpg)"); $(this).css("background-position","40% 35%"); var counter = 2; } } })()); });
以下是我建議他們重寫(xiě)代碼的方法:
var counter = 1; $(document).ready(function() { $('body').click(function() { if (counter == null) { counter = 1; } if (counter == 3) { $(this).css("background-image", "url(3.jpg)"); $(this).css("background-position", "10% 35%"); counter = 1; } if (counter == 2) { $(this).css("background-image", "url(2.jpg)"); $(this).css("background-position", "10% 35%"); counter = 3; } if (counter == 1) { $(this).css("background-image", "url(1.jpg)"); $(this).css("background-position", "40% 35%"); counter = 2; } }); });
請(qǐng)注意,我并不是說(shuō)我的代碼在任何方面都更好.我只是刪除匿名中介功能.我實(shí)際上知道為什么這個(gè)代碼最初沒(méi)有做他們想要的,而且我并沒(méi)有重寫(xiě)大家的代碼,但是我確實(shí)想要這個(gè)代碼至少有可用的代碼.
我認(rèn)為一個(gè)真正的代碼示例將不勝感激.如果你真的想要這個(gè)特定問(wèn)題的鏈接,請(qǐng)給我這個(gè)昵稱.他得到了幾個(gè)非常好的答案,其中我的中檔最好.
你的第一個(gè)例子是奇怪的.我甚至不知道這是否會(huì)以作者可能打算的方式工作.第二個(gè)簡(jiǎn)單地將第一個(gè)包裝在不必要的括號(hào)中.第三個(gè)使用自調(diào)用函數(shù),盡管由于匿名函數(shù)創(chuàng)建了自己的范圍(可能還有一個(gè)閉包),我不知道它有什么好處(除非作者在閉包中指定了其他變量 – 讀取).
自調(diào)用函數(shù)采用模式(函數(shù)f(){/ * do stuff * /}()),
并且被立即評(píng)估,而不是調(diào)用它.所以這樣的事情
var checkReady = (function () { var ready = false; return { loaded: function () { ready = true; }, test: function () { return ready; } }; }()) $(document).ready(checkReady.loaded);
創(chuàng)建一個(gè)封裝,將返回的對(duì)象作為checkready返回到變量ready(它從閉包之外的一切隱藏).這將允許您通過(guò)調(diào)用checkReady.test()來(lái)檢查文檔是否已加載(根據(jù)jQuery).這是一個(gè)非常強(qiáng)大的模式,并且具有很多合法用途(命名空間,記憶,元編程),但在您的示例中并不是必需的.
編輯:阿爾,我誤解了你的問(wèn)題.沒(méi)有意識(shí)到你正在呼吁不好的做法,而不是要求澄清模式.更多關(guān)于您詢問(wèn)的最終形式的問(wèn)題:
(function () { /* woohoo */ }()) (function () { /* woohoo */ })() function () { /* woohoo */ }()
總結(jié)
以上所述是小編給大家介紹的javascript匿名函數(shù)中的'return function()'作用,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript函數(shù)定義的幾種區(qū)別小結(jié)
本篇文章主要是對(duì)javascript函數(shù)定義的幾種區(qū)別進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01滾動(dòng)條的監(jiān)聽(tīng)與內(nèi)容隨著滾動(dòng)條動(dòng)態(tài)加載的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇滾動(dòng)條的監(jiān)聽(tīng)與內(nèi)容隨著滾動(dòng)條動(dòng)態(tài)加載的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02干貨分享:讓你分分鐘學(xué)會(huì)javascript閉包
干貨分享:讓你分分鐘學(xué)會(huì)javascript閉包,如何才能快速學(xué)會(huì)javascript閉包,本文為大家揭曉2015-12-12全面解析JavaScript中的valueOf與toString方法(推薦)
本文給大家介紹JavaScript中的valueOf與toString方法,valueOf() 方法可返回 Boolean 對(duì)象的原始值,toString() 方法可把一個(gè)邏輯值轉(zhuǎn)換為字符串,并返回結(jié)果。對(duì)js中valueof和tostring相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-06-06微信公眾平臺(tái)獲取access_token的方法步驟
這篇文章主要介紹了微信公眾平臺(tái)獲取access_token的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Add a Picture to a Microsoft Word Document
Add a Picture to a Microsoft Word Document...2007-06-06基于JavaScript實(shí)現(xiàn)在線網(wǎng)頁(yè)煙花效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)簡(jiǎn)單的在線網(wǎng)頁(yè)煙花效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02原生JS實(shí)現(xiàn)導(dǎo)航下拉菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)導(dǎo)航下拉菜單效果,用原生JS實(shí)現(xiàn)的一個(gè)導(dǎo)航下拉菜單,下拉菜單的寬度與瀏覽器視口的寬度一樣,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JavaScript中iframe實(shí)現(xiàn)局部刷新的幾種方法匯總
Iframe是一種嵌入網(wǎng)頁(yè)的框架形式,Web頁(yè)面可以通過(guò)更改嵌入的部分,達(dá)到部分內(nèi)容刷新,通過(guò)本文和大家一起學(xué)習(xí)iframe實(shí)現(xiàn)局部刷新的幾種方法匯總,對(duì)iframe局部刷新相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01JavaScript對(duì)象數(shù)組排序?qū)嵗椒\析
這篇文章主要介紹了JavaScript對(duì)象數(shù)組排序?qū)嵗椒\析的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-06-06