Question

我只是在徘徊，试图模仿某些jQuery函数（尝试为jQuery函数编写vanilla javascript）我在这里编写了这个

function ezWork(element) {
    if (typeof element === 'string') {
        document.getElementById(element);
        console.log('Got element');
    }
}


ezWork.prototype.on = function(event, callback) {
    if (typeof event === 'string') {

        if (event === 'click') {
            if(window.addEventListener) {
                element.addEventListener('mousedown', callback);
                alert('addEventListener called');
            } else if (window.attachEvent) {
                element.attachEvent('onmousedown', callback);
            } else {
                element.onmousedown = callback;
            }
        }
    }
}

ezWork('click').on('click', function(e) {
    e.preventDefault();
    alert('Worked');
});

http://jsfiddle.net/aJmMa/

我只是好奇为什么我得到.on没有定义（我正在这样做我认为应该怎么做，而不是我是否知道这是正确的方法来做到这一点，我'我只是想学习，我正在尝试做什么来为函数添加函数的正确方法是什么？）

非常感谢您的帮助！

我现在得到的错误是，'。'未定义。

Answer 1

var ezWork = (function(win, doc) {

  // Constructor
  function EzWork(element) {
    this.element = this._init(element);
  }

  EzWork.prototype = {
    _init: function(element) {
      return doc.getElementById(element);
    },

    on: function(event, callback) {
      // simplified...
      this.element.addEventListener(event, callback);
    }
  };

  // Shortcut to create a new instance without using 'new'
  return function(element) {
    return new EzWork(element);
  };

}(window, document));

ezWork('click').on('click', function(e) {
  e.preventDefault();
  alert('Worked');
});

演示： http://jsbin.com/oquduf/2/edit

Answer 2

因为ezWork()未返回ezWork的实例。实际上，它不会返回任何。一旦你解决了这个问题，你会发现element未定义。您必须添加它并将其作为属性访问。

function ezWork(element) {
    if (!(this instanceof ezWork)) {
        return new ezWork(element);
    }
    if (typeof element === 'string') {
        element = document.getElementById(element);
        console.log('Got element');
    }
    this.element = element;
}

http://jsfiddle.net/aJmMa/1/

了解如何使用函数函数，使用原型

2 个答案: