一个仿jquery简单js库的写法

 (function (window) {
      'use strict'
      function defineBayside() {
        var Bayside = {};
        Bayside.alert = function () {
          alert('this is a test messsage from the Bayside framework');
        }

        return Bayside;
      }


      if (typeof (Bayside) === 'undefined') {
        window.Bayside = defineBayside();
      }


    })(window);

 Bayside.alert();

function $(selector) {
  const self = {
    element: document.querySelector(selector),
    html: function () {
      return self.element
    },
    on: function (event, callback) {
      document.addEventListener(event, callback)
    },
    hide: function () {
      self.element.style.display = "none"
    },
    attr: function (name, value) {
      if (value == null) {
        return self.element.getAttribute(name)
      } else {
        self.element.setAttribute(name, value)
      }
    }

  }

  return self;
}

$('h3').on('click', function () {
  alert('clicked');
  $('h2').hide();
  $('h1').attr('class', 'hello')
})