您好,登錄后才能下訂單哦!
我最近看到很多javascript代碼,看起來我錯了.在這種情況下,我應該建議哪種更好的代碼模式?我將重現我所看到的代碼和每個代碼的簡短說明:
代碼塊#1
該代碼不應該評估內部函數.程序員會因為代碼應該運行而感到困惑.
$(document).ready( function() { return function() { /* NOPs */ } });
代碼塊#2
程序員可能打算實現一個自調用功能.他們沒有完全完成實現(他們在嵌套括號的末尾缺少一個().另外,由于它們在外部函數中沒有做任何事情,所以嵌套的自調用函數可以剛剛嵌入到外部功能定義.
其實我不知道他們打算使用自調用函數,因為代碼仍然是錯誤的.但似乎他們想要一個自我調用的功能.
$(document).ready( (function() { return function() { /* NOPs */ } }));
代碼塊#3
再次,程序員似乎試圖使用自調用函數.但是,在這種情況下,它是過度的.
$(document).ready( function() { (return function() { /* NOPs */ })() });
代碼塊#4
一個示例代碼塊
$('#mySelector').click( function(event) { alert( $(this).attr('id') ); return function() { // before you run it, what's the value here? alert( $(this).attr('id') ); } });
評論:
我想我只是沮喪,因為它會導致人們不明白的蠕蟲,更改范圍界定,他們不是grokking,并通常使真正奇怪的代碼.這些都是來自某些教程的地方嗎?如果我們要教人們如何編寫代碼,我們可以教他們正確的方法嗎?
你會建議什么作為一個準確的教程向他們解釋為什么他們使用的代碼是不正確的?你會建議他們學習什么模式?
我看到的所有使我提出這個問題的樣本都是這樣的問題.這是我遇到的最新的特征片段,展示了這種行為.你會注意到,我沒有發布一個鏈接的問題,因為用戶似乎是相當新手.
$(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; } }); });
請注意,我并不是說我的代碼在任何方面都更好.我只是刪除匿名中介功能.我實際上知道為什么這個代碼最初沒有做他們想要的,而且我并沒有重寫大家的代碼,但是我確實想要這個代碼至少有可用的代碼.
我認為一個真正的代碼示例將不勝感激.如果你真的想要這個特定問題的鏈接,請給我這個昵稱.他得到了幾個非常好的答案,其中我的中檔最好.
你的第一個例子是奇怪的.我甚至不知道這是否會以作者可能打算的方式工作.第二個簡單地將第一個包裝在不必要的括號中.第三個使用自調用函數,盡管由于匿名函數創建了自己的范圍(可能還有一個閉包),我不知道它有什么好處(除非作者在閉包中指定了其他變量 – 讀取).
自調用函數采用模式(函數f(){/ * do stuff * /}()),
并且被立即評估,而不是調用它.所以這樣的事情
var checkReady = (function () { var ready = false; return { loaded: function () { ready = true; }, test: function () { return ready; } }; }()) $(document).ready(checkReady.loaded);
創建一個封裝,將返回的對象作為checkready返回到變量ready(它從閉包之外的一切隱藏).這將允許您通過調用checkReady.test()來檢查文檔是否已加載(根據jQuery).這是一個非常強大的模式,并且具有很多合法用途(命名空間,記憶,元編程),但在您的示例中并不是必需的.
編輯:阿爾,我誤解了你的問題.沒有意識到你正在呼吁不好的做法,而不是要求澄清模式.更多關于您詢問的最終形式的問題:
(function () { /* woohoo */ }()) (function () { /* woohoo */ })() function () { /* woohoo */ }()
總結
以上所述是小編給大家介紹的javascript匿名函數中的'return function()'作用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。