实现简易jquery

97 阅读1分钟
(function(g) {
  var Tywl = function(selector) {
    return new Tywl.fn.init(selector);
  };
  // fn代指Tywl的原型
  Tywl.fn = Tywl.prototype = {
    constructor: Tywl,
    version: "1.0.0",
    // Tywl真正的构造函数
    init: function(selector) {
      var el, len;
      if (typeof selector === "Tywl") {
        return selector;
      }
      if (/HTML/.test(selector.toString())) {
        this[0] = selector;
        return this;
      }
      if (typeof selector !== "string") {
        return Tywl;
      }
      el = document.querySelectorAll(selector);
      len = el.length;
      if (!len) {
        return Tywl;
      }
      if (len === 1) {
        this[0] = el[0];
      } else {
        this[0] = el;
      }
      this.len = len;
      this.selector = selector;

      return this;
    },
    // 实例方法
    each: function(callback) {
      var i = 0,
        l = this.len;
      for (; i < l; i++) {
        var el = this[0][i];
        (function(i, el) {
          return callback(i, el);
        })(i, el);
      }
    }
  };

  Tywl.fn.init.prototype = Tywl.fn;

  // 实现扩展函数
  Tywl.extend = Tywl.fn.extend = function(options) {
    var target = this;
    var copy, name;
    for (name in options) {
      copy = options[name];
      target[name] = options[name];
    }
    return target;
  };

  // 扩展工具方法
  Tywl.extend({
    add: function(a, b) {
      return a + b;
    }
  });

  // 扩展实例方法
  Tywl.fn.extend({
    find: function(selector) {
      var s = this.selector + selector;
      return _$(s) === Tywl ? 0 : _$(s);
    },
    css: function(oCss) {
      if (this.len !== 1) {
        return this;
      }
      for (let c in oCss) {
        this[0].style[c] = oCss[c];
      }
      return this;
    },
    animate: function(O) {
    }
  });

  g.Tywl = g.$ = Tywl;
})(window);