npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

js-oop

v1.0.0

Published

jsOOP aids in object oriented programming in JS.

Downloads

224

Readme

jsOOP

This library is a way to "sugar" some object oriented functionality in Javascript. It's syntactically based on MooTools Class.

Consuming jsOOP

jsOOP builds are made using Browserify using Standalone builds. This means you can use the files contained in the dist folder either by using script tags in HTML, using RequireJS and AMD Modules, or in NodeJS using CommonJS.

Creating a Class

So to define a class with a function called foo you'd do the following:

var NewClass = new Class({
  foo: function() { }
});

Reserved Keywords

There are a few reserved keywords in this library which are:

  • initialize
  • Extends
  • parent

initialize

Initialize is used to define a constructor within a function like so:

var NewClass = new Class({
  initialize: function() {
    console.log( 'I AM CONSTRUCTOR ** said with transformer voice **' );
  },
  foo: function() { }
});

Extends

Extends is used to define inheritance of objects. Let's continue with our example and create a new class that will inherit from NewClass and will be called NewNewClass.

var NewClass = new Class({
  initialize: function() {
    console.log( 'I AM CONSTRUCTOR ** said with transformer voice **' );
  },
  foo: function() { 
    console.log( 'I am foo of base class' );  
  }
});

var NewNewClass = new Class({
  initialize: function() {
    console.log( 'I AM CONSTRUCTOR NEW NEW' );
  },
  
  Extends: NewClass,
  
  foo: function() { 
    console.log( 'I am foo of sub class' );  
  }
});

As a note Extends is spelt with a capital "E" since in Javascript extends is a reserved keyword for future purposes.

Extends will also work with other non jsOOP functions/classes. For instance you could even extend jQuery.

parent

parent is actually a funtion which will be added to each and every Class. It is used to call super class functions.

To note if you're extending another class and parent is already defined this function will not be added but you can still have the same functionality via a utility function on Class (more on that below).

For instance in our example above we could call the super classes function foo using the following syntax:

var NewClass = new Class({
  initialize: function( msg ) {
    console.log( msg );
  },
  
  foo: function() { 
    console.log( 'I am foo of base class' );  
  }
});

var NewNewClass = new Class({
  initialize: function() {
    console.log( 'I AM CONSTRUCTOR NEW NEW' );
    
    this.parent( 'I AM CONSTRUCTOR ** said with transformer voice **' );
  },
  
  Extends: NewClass,
  
  foo: function() { 
    console.log( 'I am foo of sub class' );
    
    this.parent();
  }
});

If for some reason a class you've extended already has a property or function named parent it wont be overwritten. However you you can still have this same functionality by using a utility function built onto Class.

Class.parent( this );

The only difference is that you have to explicetely define the scope of the function you'll be calling from.

Also note that this.parent(); or Class.parent( this ); will work for constructors, getters and setters also. Getters and setters?

getters and setters

Yep with this library you can quickly define getters and setters. This is how you'd define getters and setters:

var TiredOfTheAboveExample = new Class({
  _myProp: 0,
  _secondProp: 'I EXIST',
  
  myProp: {
    get: function() {
      return this._prop;
    },
    
    set: function( value ) {
      this._prop = value;
    }
  },
  
  secondProp: {
    get: function() {
      return this._secondProp;
    },
    
    set: function( value ) {
      this._secondProp = value;
    }
  }
});