未在 webkit 上调用 Javascript 对象回调

Question

我已经定义了一个这样的js“类”：

var TelephoneFormGroup = function(targetId, removePhoneCallback) {

    this.phone = '';
    this.phone_type_options = [];
    this.counter = 0;
    this.targetId = targetId;
    this.form_group = {};
    this.removePhone = removePhoneCallback;

    this.buildFormGroup = function() {
        var outerDiv = document.createElement('div');
        outerDiv.className = 'form-group';

        var label = document.createElement('label');
        label.className = 'label-control col-sm-3';

        var innerDiv = document.createElement('div');
        innerDiv.className = 'col-sm-8';

        var inputId = document.createElement('input');
        inputId.type = 'hidden';
        inputId.name = 'data[Telephone][' + this.counter + '][id]';

        var inputPhoneTypeId = document.createElement('select');
        inputPhoneTypeId.name = 'data[Telephone][' + this.counter + '][phone_type_id]';
        inputPhoneTypeId.className = 'form-control col-sm-3';

        var removePhoneIcon = document.createElement('i');
        removePhoneIcon.className = "glyphicon glyphicon-remove";

        var removePhoneLink = document.createElement('a');
        removePhoneLink.appendChild(removePhoneIcon);
        removePhoneLink.title = "Remover Telefone";
        removePhoneLink.href = "#";
        removePhoneLink.dataset.toggle = "tooltip";

        removePhoneLink.onclick = this.removePhone;

        label.appendChild(removePhoneLink);
        label.innerHTML += 'Telefone ' + this.counter;

        var that = this;
        Object.keys(this.phone_type_options).forEach( function(key) {
            inputPhoneTypeId.options[inputPhoneTypeId.options.length] = new Option(that.phone_type_options[key], key);
        });

        var inputPhone = document.createElement('input');
        inputPhone.type = 'text';
        inputPhone.name = 'data[Telephone][' + this.counter + '][phone]';
        inputPhone.className = 'form-control phone col-sm-9';


        outerDiv.appendChild(label);
        outerDiv.appendChild(innerDiv);
        innerDiv.appendChild(inputId);
        innerDiv.appendChild(inputPhoneTypeId);
        innerDiv.appendChild(inputPhone);

        this.form_group = outerDiv;
    },

    this.render = function() {
        if (this.targetId == null || this.targetId == '') throw 'Empty target id';

        if (typeof(this.targetId) === 'string') {
            document.getElementById(this.targetId).appendChild(this.form_group);    
        } else if (typeof(this.targetId === 'object')) {
            this.targetId.appendChild(this.form_group);
        };

    }

};

我的问题是 removePhoneLink.onclick = this.removePhone; 没有在 webkit 浏览器上触发。在 Firefox (mac) 上正常工作，但在 safari/chrome (mac)、safari/chrome (ipad) 上不工作。

我错过了什么？

谢谢！

Answer 1

tl;dr 在附加事件处理程序之前将元素附加到 DOM

感谢您提供有趣的案例。经过几次尝试，我认为 WebKit 在注册事件处理程序之前需要附加到 DOM 的元素（偶然发现 Todd Motto's example，他确实在附加事件处理程序之前使用 jQuery 获取了元素！）

这里是您的代码的a working fiddle，带注释。 主要是在render方法之后添加了一个bindEventHandlers方法，用链式方法（a la jQuery）将整个对象变成了一个流畅的接口，在“类”上添加了一个静态计数器。 简短摘录：

• 跟踪实例化了多少对象

  TelephoneFormGroup.counter = ++TelephoneFormGroup.counter || 0;
  this.counter = TelephoneFormGroup.counter;
  

• 将回调封装在一个方法中并使用apply 调用它（确保在正确的对象上调用该方法，在另一个项目中遇到了一些问题）

  this.removePhone = function(){
      removePhoneCallback.apply(this);
  };
  

• 将this 绑定到您的Object.keys 的forEach（已删除var that=this; 技巧）

  Object.keys(this.phone_type_options).forEach( function(key) {
      inputPhoneTypeId.options[inputPhoneTypeId.options.length] = new Option(this.phone_type_options[key], key);
  }.bind(this));
  // Here, we tell forEach we want 'this' to be bound to the object, not the current item being iterated over (i.e. that=this trick)
  

• 由于removePhoneLink 构造现在分两个阶段构建（构建标记，然后附加事件处理程序），我们使用动态创建的 id 将其耦合

  ...
  // in buildFormGroup()
  removePhoneLink.id = "btnRemove"+this.targetId;
  ...
  
  // called after attaching the form group to the dom
  this.bindEventHandlers = function() {
      document.getElementById("btnRemove"+this.targetId).onclick = function(e) {
          this.removePhone();
      }.bind(this);
  }
  

我希望它适用于您的用例。我在 Chrome 和 Safari (Mac OS X Yosemite) 上尝试过。

编辑：我发现您的代码很有趣、简单，但足够复杂，足以让我进行一段时间的小测试。您的所有方法都绑定到实例化对象。使用 JavaScript 和原型模式，您应该向对象的原型添加方法（如 this fiddle for your code）。
我做了一个小基准来比较这两种技术，检查内存使用情况和完成方法的时间 (machine spec)。
我会使用 Chrome 开发者工具（堆大小运行，运行之间刷新，然后渲染时间运行，运行之间刷新）。 查找the results there (fiddle.md)。
如您所见，在实例化 50 个对象之前，它不会产生太大差异。然后，您的原型渲染速度将提高 18%，并且内存使用率提高近 30%（运行 50,000 个对象）。 所以我猜是为了生产用途，去原型？