Javascript：更好的代碼/更好的設計幫助

我一直在嘗試閱讀和理解更多關於更好的代碼和使用Javascript的設計，真的缺乏教程明確描述有關在不同的代碼中創建代碼的使用比大多數在線代碼的方式。Javascript：更好的代碼/更好的設計幫助

我遇到了下面的代碼，並意識到將函數分配給變量，但我仍然試圖理解利用/如何使用這個對我有利。

這是原型，採用閉合，或者只是做一些，而不是在通常意義上做的一個整潔的程式化方式：

Function doThis(el, type, fn){ ... }

我的主要問題是，爲什麼你會在下面使用這種方法，並它有什麼好處？

非常感謝您的幫助和耐心。

var addEvent = function() { 
    if (window.addEventListener) { 
    return function(el, type, fn) { 
     el.addEventListener(type, fn, false); 
    }; 
    } else if (window.attachEvent) { 
    return function(el, type, fn) { 
     var f = function() { 
     fn.call(el, window.event); 
     }; 
     el.attachEvent('on' + type, f); 
    }; 
    } 
}();

來源：Javascript Tutorial

來源

2011-02-22 Petrogad

ü應該使用jQuery，它的跨瀏覽器和易於理解的（以及相當） – Val 2011-02-22 21:28:47

想到什麼就是你會創建一個函數中的一個函數，而函數是在全球範圍內可用。 – JCOC611 2011-02-22 21:29:49

我的確使用jQuery，但是在編寫自己的庫時，它不會像上面那樣提供共同的概念。 – Petrogad 2011-02-22 21:29:55

看起來比簡單地定義功能的速度優化。

想象一下，你有

Function addEvent(el, type, fn){ 
    if (window.addEventListener) { 
     el.addEventListener(type, fn, false); 
    } else if (window.attachEvent) { 
     var f = function() { 
     fn.call(el, window.event); 
     }; 
     el.attachEvent('on' + type, f); 
    } 
}

這是一個跨瀏覽器的功能補充，工作原理相同，你張貼的例子的事件。當你有成千上萬的addEvent調用時，會產生差異。

在您發佈的示例中，函數是「簡化」，並在啓動時，每個瀏覽器「物化」（注意「（）;」結尾）

你會得到兩種

var addEvent = function(el, type, fn) { 
    el.addEventListener(type, fn, false); 
};

或

var addEvent= function(el, type, fn) { 
    var f = function() { 
    fn.call(el, window.event); 
    }; 
    el.attachEvent('on' + type, f); 
};

根據瀏覽器。之後決定永遠不會被重新評估（因爲瀏覽器在執行過程中不會改變，所以這是沒有用的;-)。因此，每次調用addEvent函數時，函數都會避免1或2次測試！這對於像addEvent這樣的繁重使用函數可能會有所不同。

我希望這會幫助你，

傑羅姆·瓦格納

來源

2011-02-22 21:44:21

在這種特殊情況下，我會認爲這個函數不夠複雜，無法證明額外的間接層。這種方法購買你的能力是創建臨時變量以計算表達式的值。 – Neil 2011-02-22 21:51:44

它的書寫功能的巧妙方法。這不是說每一個封閉，不僅僅是一個正常的功能。真正開始變得冷靜這種聲明函數的方式是，編寫面向對象的JavaScript變得更容易。藉此例如：

var COMMON = {}; 
COMMON.Util = {}; 
COMMON.Util.Sort = function(aArray,fCompare){...};

列出的功能也示出的JavaScript的另一個涼爽方面，函數可以被傳遞/返回，這導致一些涼爽的編程技術。

來源

2011-02-22 21:42:36 aepheus

這不是...

閉包 - 那就是當你訪問一個變量，超出範圍的，但細節是由環境
樣機處理 - 這是當您添加函數或對象的基類時

返回函數的Javascript函數可能很有用。例如，如果您希望代碼的行爲根據您的運行時環境進行更改，您可以通過讓一個函數即時生成其他函數來實現它。

這就是說，就像很多聰明的代碼技術一樣，它讓其他人很難了解你在做什麼。所以維護變得很麻煩，你也可以創建一些難以置信的難以調試的問題。我更喜歡前者的模式，除非有真正獨特的理由這樣做。

不知道如果我回答你的問題，但感覺很好我....

來源

2011-02-22 21:43:17

實際上在該代碼塊中有一個閉包的實例。 – Neil 2011-02-22 21:48:17

一般將功能分配給變量當你創建在Javascript中的一類。

function MyObject() { 
this.WhoAmI = function() 
    { 
     return "I don't know"; 
    }; 

}

你也可以指定一個函數的變量，當你將要使用該功能在其他功能一堆，但不希望該函數暴露給所有的網站上顯示的其他代碼。

您也可以將一個函數作爲參數傳遞給另一個函數。基本上是C＃中的一個代表。

來源

2011-02-22 21:44:53

您發佈的代碼在邏輯上是相同的：

var addEvent; 
if (window.addEventListener) { 
    addEvent = function(el, type, fn) { 
    el.addEventListener(type, fn, false); 
    }; 
} else if (window.attachEvent) { 
    addEvent = function(el, type, fn) { 
    var f = function() { 
     fn.call(el, window.event); 
    }; 
    el.attachEvent('on' + type, f); 
    }; 
}

但也有優點：

純粹主義者會說，分配多次充其量醜陋
如果有內變數一個函數，它們的作用域被包含，從而使全局命名空間更清潔。
可能還有其它....

來源

2011-02-22 21:53:35

Javascript：更好的代碼/更好的設計幫助

回答

相關問題