Question

这是我正在整理的原型类的片段。范围的解决方法对我来说有点不好看，可以改进还是做得不同？

var myClass = Class.create({
    initialize: function() {
        $('formid').getElements().each(function(el){
            $(el).observe("blur", function(){
                this.validateEl(el);
            }.bind(this,el));
        },this);
     },
    validateEl: function(el){
      // validate $(el) in here...
    }
});

另外，在我看来，我可以为事件观察者做这样的事情：

$('formid').getElements().invoke("observe","blur" ...

不知道我怎么会传递元素引用？

Answer 1

我看不出您的代码有什么问题：）

关于观察者你可以这样：

$('formid').getElements().invoke("observe","blur", function(e) {
    this.validateEl(e.element());
}.bind(this));

Answer 2

你确实可以简化这一点：

var myClass = Class.create({
    initialize: function() {
        var self = this;

        // To demo that we keep the instance reference, set a
        // property on the instance
        this.message = "Hi there";

        $('formid').getElements().invoke("observe", "blur", blurHandler);

        function blurHandler() {
            // `self` references our instance
            // `this` references the element we're observing
            self.validateEl(this);
        }
    },
    validateEl: function(el){

        // validate $(el) in here...

        // note that because of the way we called it, within this function,
        // `this` references the instance, so for instance:
        this.foo(); // alerts "Hi there!"
    },
    foo: function() {
        alert(this.message);
    }
});

使用invoke（如你所建议的）和处理程序的命名函数（不必命名，但我发现让函数具有名称非常有用）。处理程序是一个闭包。在initialize函数中，我使用变量指向this，因为该变量随后可用于闭包。（我称之为self，因为这是为了这个原因别名this时的标准做法。）处理程序利用Prototype的本机功能，在事件处理程序中将this设置为被观察的元素。当我们通过闭包的validateEl引用调用self时，我们会按正常方式将其称为成员函数，因此在validateEl中，this指的是实例。< / p>

说到命名函数，你的initialize和validateEl函数都是匿名的，这意味着在调用堆栈等调试器中，你只会看到“（？）”而不是一个好的，方便的名字。我总是推荐实际命名的函数; more here

Answer 3

如果您创建registerBlur方法，我认为它看起来会略显冗长：

var myClass = Class.create({
    initialize: function() {
        $('formid').getElements().each(this.registerBlur, this);
    },
    registerBlur: function(el) {
        Event.observe(el, 'blur', this.validateEl.bind(this, el));
    },
    validateEl: function(el){
      // validate $(el) in here...
    }
});

但我同意Rui Carneiro，我认为你的代码没有任何问题。

从原型类改进此片段

3 个答案: