prototype to javascript

Question

此原型代碼的等效JavaScript代碼是什麼？

var Confirm = Class.create(); 
Confirm.prototype = { 
     initialize: function(element, message) { 
       this.message = message; 
       Event.observe($(element), 'click', this.doConfirm.bindAsEventListener(this)); 
     }, 

     doConfirm: function(e) { 
       if(! confirm(this.message)) 
         e.stop(); 
     } 
} 

Answer 1

取決於你想要的抽象程度。最簡單的例子：

<button onclick="return confirm('Are you sure?')">something</button> 

Answer 2

粗略地說：

var Confirm = (function() 
    function Confirm(element, message) { 
     var self = this; 
     this.message = message; 
     hookEvent(element, "click", function(event) { 
      self.doConfirm(event); 
     }); 
    } 
    Confirm.prototype.doConfirm = Confirm$doConfirm; 
    function Confirm$doConfirm(e) { 
     if (!confirm(this.message)) { 
      if (e.stopPropagation) { 
       e.stopPropagation(); 
      } 
      else { 
       e.cancelBubble = true; 
      } 
      if (e.preventDefault) { 
       e.preventDefault(); 
      } 
      else { 
       e.returnValue = false; 
      } 
     } 
    } 

    return Confirm; 
})(); 

（您可以縮短略有如果你不介意使用匿名函數;我更喜歡help my tools help me通過給函數的名稱）

在上面，hookEvent是一個實用函數，您必須提供，要麼調用addEventListener或attachEvent（以支持IE8和更早版本），如下所示：

function hookEvent(element, eventName, handler) { 
    // Very quick-and-dirty, recommend using a proper library, 
    // this is just for the purposes of the example. 
    if (typeof element.addEventListener !== "undefined") { 
     element.addEventListener(eventName, handler, false); 
    } 
    else if (typeof element.attachEvent !== "undefined") { 
     element.attachEvent("on" + eventName, function(event) { 
      return handler(event || window.event); 
     }); 
    } 
    else { 
     throw "Browser not supported."; 
    } 
} 

注意跨瀏覽器兼容性需要多少工作量。您不必使用Prototype，但我強烈建議您使用另一個像樣的庫，即使不是Prototype，如jQuery，YUI，Closure或any of several others。您將節省lot努力解決跨瀏覽器差異，並處理利用其他人在這一領域所做的重要工作而提出的邊緣案例。

如果你的目標是將關閉的原型，而不是完全動過庫，這裏是使用jQuery例如同樣的事情：使用$().click爲hookEvent，$.proxy以避免產生一個明確的關閉（仍然

var Confirm = (function() 
    function Confirm(element, message) { 
     this.message = message; 
     $(element).click($.proxy(this.doConfirm, this)); 
    } 
    Confirm.prototype.doConfirm = Confirm$doConfirm; 
    function Confirm$doConfirm(e) { 
     if (!confirm(this.message)) { 
      return false; 
     } 
    } 

    return Confirm; 
})(); 

創建一個，只是在幕後爲你做），事實上，在jQuery事件處理程序中，return false與停止傳播和阻止默認操作（就像Prototype的stop）一樣。您也可以使用stopPropagation和preventDefault，而不用擔心瀏覽器的差異; jQuery爲你處理它。大多數圖書館都會

如果你離開Prototype，但仍然想要類似Class功能，here's one，你可以放入你的代碼。我在該博客文章中的目標不是取代Prototype的Class（當時我正在使用Prototype），而是解決了我發現Prototype的巨大處理超級調用的低效方式。但是在這樣做的時候，一個完整的實現可以替代Class創建。我真的需要更新其中的術語，因爲它當然不是關於類（JavaScript沒有類），它只是用於JavaScript的原型繼承的一些方便的管道工具。

Answer 3

（Inb4 Raynos到達與他的pd瘋狂。）

function Confirm(element, message) { 
    this.message = message; 

    element.addEventListener("click", this.doConfirm.bind(this), false); 
} 

Confirm.prototype.doConfirm = function (e) { 
    if (!confirm(this.message)) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
};