javascript匿名函數(shù)中的'return function()'作用
我最近看到很多javascript代碼,看起來我錯(cuò)了.在這種情況下,我應(yīng)該建議哪種更好的代碼模式？我將重現(xiàn)我所看到的代碼和每個(gè)代碼的簡短說明：
代碼塊#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)用功能.他們沒有完全完成實(shí)現(xiàn)(他們在嵌套括號(hào)的末尾缺少一個(gè)().另外,由于它們在外部函數(shù)中沒有做任何事情,所以嵌套的自調(diào)用函數(shù)可以剛剛嵌入到外部功能定義.
其實(shí)我不知道他們打算使用自調(diào)用函數(shù),因?yàn)榇a仍然是錯(cuò)誤的.但似乎他們想要一個(gè)自我調(diào)用的功能.
$(document).ready( (function() {
return function() {
/* NOPs */
}
}));
代碼塊#3
再次,程序員似乎試圖使用自調(diào)用函數(shù).但是,在這種情況下,它是過度的.
$(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)致人們不明白的蠕蟲,更改范圍界定,他們不是grokking,并通常使真正奇怪的代碼.這些都是來自某些教程的地方嗎？如果我們要教人們?nèi)绾尉帉懘a,我們可以教他們正確的方法嗎？
你會(huì)建議什么作為一個(gè)準(zhǔn)確的教程向他們解釋為什么他們使用的代碼是不正確的？你會(huì)建議他們學(xué)習(xí)什么模式？
我看到的所有使我提出這個(gè)問題的樣本都是這樣的問題.這是我遇到的最新的特征片段,展示了這種行為.你會(huì)注意到,我沒有發(fā)布一個(gè)鏈接的問題,因?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;
}
}
})());
});
以下是我建議他們重寫代碼的方法：
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;
}
});
});
請注意,我并不是說我的代碼在任何方面都更好.我只是刪除匿名中介功能.我實(shí)際上知道為什么這個(gè)代碼最初沒有做他們想要的,而且我并沒有重寫大家的代碼,但是我確實(shí)想要這個(gè)代碼至少有可用的代碼.
我認(rèn)為一個(gè)真正的代碼示例將不勝感激.如果你真的想要這個(gè)特定問題的鏈接,請給我這個(gè)昵稱.他得到了幾個(gè)非常好的答案,其中我的中檔最好.
你的第一個(gè)例子是奇怪的.我甚至不知道這是否會(huì)以作者可能打算的方式工作.第二個(gè)簡單地將第一個(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(它從閉包之外的一切隱藏).這將允許您通過調(diào)用checkReady.test()來檢查文檔是否已加載(根據(jù)jQuery).這是一個(gè)非常強(qiáng)大的模式,并且具有很多合法用途(命名空間,記憶,元編程),但在您的示例中并不是必需的.
編輯：阿爾,我誤解了你的問題.沒有意識(shí)到你正在呼吁不好的做法,而不是要求澄清模式.更多關(guān)于您詢問的最終形式的問題：
(function () { /* woohoo */ }())
(function () { /* woohoo */ })()
function () { /* woohoo */ }()
總結(jié)
以上所述是小編給大家介紹的javascript匿名函數(shù)中的'return function()'作用，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
window.open不被攔截的簡單實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)硪黄獁indow.open不被攔截的簡單實(shí)現(xiàn)代碼(推薦) 。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
JavaScript數(shù)組及非數(shù)組對(duì)象的深淺克隆詳解原理
JavaScript中數(shù)組的方法種類眾多，在ES3-ES7不同版本時(shí)期都有新方法；并且數(shù)組的方法還有原型方法和從object繼承的方法，本文介紹了JavaScript數(shù)組及非數(shù)組對(duì)象的深淺克隆，希望讀者能從中有所收獲2021-10-10
在這篇文章中給大家分享了關(guān)于JavaScript實(shí)用代碼小技巧的相關(guān)內(nèi)容，有興趣的朋友們可以參考學(xué)習(xí)下。2018-08-08
這篇文章主要介紹了webpack多頁面開發(fā)實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
layui表格設(shè)計(jì)以及數(shù)據(jù)初始化詳解
今天小編就為大家分享一篇layui表格設(shè)計(jì)以及數(shù)據(jù)初始化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了JavaScript中最簡潔的編碼html字符串的方法,非常非常簡潔的一個(gè)方法,小編親測可用,需要的朋友可以參考下2014-10-10
當(dāng)大家使用window.onload執(zhí)行一個(gè)函數(shù)時(shí)，必須要等到頁面上的圖片等信息全部加載完畢之后才執(zhí)行的。但很多時(shí)候圖片的數(shù)量比較多，所以需要很多時(shí)間下載。更令人尷尬的是，當(dāng)網(wǎng)頁文檔（或者說Dom）已經(jīng)加載完畢,而圖片尚未加載完畢，很多用戶已經(jīng)開始瀏覽網(wǎng)頁，但這時(shí)很多由window.onload所觸發(fā)的函數(shù)不能執(zhí)行，這就導(dǎo)致一部分功能不能完美地給用戶使用，更嚴(yán)重的是會(huì)給用戶留下不好的印象！2008-05-05
這篇文章主要介紹了微信小程序生成分享海報(bào)方法（附帶二維碼生成），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序日歷組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
JavaScript利用fetch實(shí)現(xiàn)異步請求的方法實(shí)例
傳遞信息到服務(wù)器，從服務(wù)器獲取信息，是前端發(fā)展的重中之重，尤其是現(xiàn)在前后端分離的大前提下，前后端的數(shù)據(jù)交互是前端的必修科目了，下面這篇文章主要給大家介紹了關(guān)于JavaScript利用fetch實(shí)現(xiàn)異步請求的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07