прототип для JavaScript - PullRequest
Новая
       4

прототип для JavaScript

0 голосов
/ 05 января 2012

Что такое эквивалентный код 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();
        }
}

Ответы [ 3 ]

2 голосов
/ 05 января 2012

Грубо говоря: 

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;
})();

(Вы можете немного сократить это, если не возражаете против использования анонимных функций; я предпочитаю помочь моим инструментам помочь мне , дав им имена функций.)

В приведенном выше примере 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 или любой из нескольких других .Вы сэкономите много усилий, работая над различиями между браузерами и справляясь с крайними случаями, которые возникают, используя значительную работу, проделанную другими в этой области.

Если ваша цельчтобы удалить Prototype вместо полного удаления библиотек, вот то же самое, например, с использованием jQuery: 

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;
})();

, который использует $().click для hookEvent, $.proxy, чтобы избежать создания явного замыкания (по-прежнемусоздает один, просто делает это для вас за кулисами) и тот факт, что в обработчиках событий jQuery return false - это то же самое, что и остановка распространения и предотвращение действия по умолчанию (точно так же, как у stop в Prototype).Вы также можете использовать stopPropagation и preventDefault, не беспокоясь о различиях между браузерами;JQuery обрабатывает это для вас.Большинство библиотек будут.

Если вы перешли с Prototype, но все еще хотите что-то похожее на его Class функцию, вот один , который вы можете вставить в свой код.Моя цель в этом посте не состояла в том, чтобы заменить Class Prototype (в то время, когда я использовал Prototype), а скорее исправить то, что я обнаружил, - 1043 * неэффективный способ Prototype обрабатывать супер вызовы.Но при этом создается полная реализация, которая может заменить Class.Мне действительно нужно обновить терминологию в нем, потому что, конечно, речь идет не о классах вообще (в JavaScript нет классов), а о каком-то удобном сланце для прототипического наследования JavaScript.

1 голос
/ 05 января 2012

(Inb4 Райнос прибывает со своим 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();
    }
};
0 голосов
/ 05 января 2012

Зависит от того, насколько абстрактным вы хотите его видеть.В простейшем случае: 

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