JavaScript：全局變量的代碼示例「使用嚴格」解釋

我正在學習jquery，並開始基於迄今爲止我所知道的（這不是很多）構建表單驗證腳本的第一次嘗試。JavaScript：全局變量的代碼示例「使用嚴格」解釋

這實際上只是驗證腳本的單選按鈕部分，但我認爲我在走得太遠之前就走上了正確的軌道 - 編碼智慧。我知道有一些基本問題需要解決。

腳本（的jsfiddle）：http://jsfiddle.net/pkdsleeper/xNt5n/

的問題：

a. How best to remove the global variables using 
b. jsLint recommends "use strict", so I added it, but im not sure what it does. 
c. any good refs? 
d. Generally, feel free to rip this code apart (cuz I AM trying to learn) but 
    please explain my errors in noob-speak :)

在此先感謝
臥鋪

來源

2011-08-07 sleeper

更新：想想我擺脫了所有的全球變異。不工作在jsFiddle（？），但在本地工作。 http://jsfiddle.net/pkdsleeper/5ta5D/ – sleeper

因爲您選擇了「MooTools」框架，所以它在jsfiddle中不起作用。確保你選擇側邊欄上的jQuery。 – Dennis

謝謝。錯過了那一個:) – sleeper

a。如何最好地使用全局變量除去

將它包裝在一個匿名函數中，並將它作爲提交監聽器指派給窗體。

b。 jsLint建議「嚴格使用」，所以我添加了它，但我不知道它做了什麼。任何好的參考？

不要打擾。對於那些試圖成爲髖關節的人來說，這只是一個熱門詞。您不能在通用網絡上使用嚴格模式功能，因爲太多瀏覽器不支持它們。您可以將它與其他符合ES 3的代碼一起使用，但它僅作爲調試工具，用於在測試過程中發現的錯誤（例如，調用無新建構造函數）。

沒有c？

d。一般情況下，隨意撕碎這個代碼（因爲我正在嘗試學習），但請解釋在小白髮言:)我的錯誤

> $rdoGroup = [], // an empty array which will be used to hold

你似乎使用$來指示引用變量jQuery對象，但$ rdoGroup只是一個數組。這可能會讓人感到困惑。

>  $rdoGroup.push($(this).attr("name"));

$函數非常昂貴，如果您不需要，不要使用它。標準HTML屬性在所有瀏覽器的DOM屬性是可用的，所以：

 $rdoGroup.push(this.name);

高達100倍以上的效率，取決於瀏覽器。

>  for (i = 0; i < $rdoGroup.length; i++) {    
>   if ($rdoGroup[c].toString() !== $(this).attr("name").toString()) {

分配給$ rdoGroup的值是字符串，稱他們的的toString方法是多餘的。如上所述，使用this.name。 name屬性是一個字符串，所以不需要toString。

我認爲如果沒有jQuery，這個練習會比較容易，這似乎在幫助中遠遠不止於此。如果你正在學習JavaScript，我建議你學習JavaScript而不使用任何庫。

一旦您對使用JavaScript有充分的信心，那麼您就可以更好地使用庫來處理庫所擅長的事情，而不是將它用於不擅長的事情。

來源

2011-08-08 01:57:16 RobG

+1表示JS首先應該在沒有涉及庫的情況下學習（我應該說自己...） – Flambino

@RobG「$函數非常昂貴，如果不需要，不要使用它。 ......「我得把我的頭圍繞着這個。我明白你在說什麼，但爲什麼這麼貴？感謝代碼審查。我在這！你們是最棒的！ – sleeper

創建一個jQuery對象很貴，因爲它是一個返回對象的函數調用，它在設置對象的屬性方面做了很多工作。所以只有在你真正需要的時候才創建它們，如果它們要被重用，請繼續引用它們。簡單的DOM方法總是更快，所以如果方便的話使用它們。這裏有一個關於jsperf的快速[美元 - 成本]（http://jsperf.com/dollar-cost）示例。 – RobG

一個。那麼，你很好地擺脫了全局。但是當你的代碼現在看起來，你可以將整個東西包裝在(function(){ ... all your current code in here ... }())中，並且在全局範圍內保留沒有任何。

b。對於「嚴格使用」，請參見this question

c。 typeof questions['c'] === "undefined" ...

d。目前，您的js與標記（html）綁定太緊密，反之亦然。如果您在表單中添加或刪除某些內容，則必須編輯您的js。如果你想使用其他表單的驗證，你必須重新開始整個過程。

驗證器是「不顯眼的javascript」/漸進式增強的主要候選者（這裏是一些素材：A List Apart & Wikipedia）。基本上，您的標記（HTML），您的樣式（CSS）和您的「行爲」（JavaScript）應該都是獨立的，因此它們可以獨立更改。這裏的東西，你可以嘗試：

添加一個類名到您的窗體（S）（例如，「驗證」）
設置你的js尋找form.validate當頁面加載
爲每個表單它發現，添加一個submit事件處理程序
當處理程序觸發時，您搜索給定的表單與您指定的各種其他類名（例如「必需」或「電話號碼」或其他）的輸入。類名告訴你的代碼，應該做什麼樣的驗證。例如，<input type="text" class="required zip-code">意味着a）這是一個郵政編碼，和b）這是一個必填字段。
如果有任何驗證錯誤，請取消提交併以某種方式提醒用戶。否則，請繼續提交。

這顯然是一個非常粗線條的，但我不會寫你的代碼，你:)
的一點是，如果你需要更多的形式或不同形式的或類似的東西，你有一個通用驗證腳本，所有你需要做的就是用適當的類名「標記」輸入。

所有這一切都說：有噸 jQuery插件那裏做表格驗證。自己寫一篇文章絕對是一個很好的練習，但是看看已經存在的內容以及它的工作原理也是一個好主意。不要馬上查看代碼，而是要了解如何使用這些驗證器（例如，他們使用類名稱還是別的？）並嘗試弄清楚它們是如何工作的。

來源

2011-08-08 01:52:35 Flambino

優秀點。特別是關於「理論」。我喜歡課程選項。我在上面！再次感謝！ – sleeper

JavaScript：全局變量的代碼示例「使用嚴格」解釋

回答

相關問題