class.js: Create classes with Node.js, jQuery and JavaScript

Recommend this page to a friend!
  Info   View files Documentation   View files View files (27)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 65 All time: 480 This week: 4Up
Version License JavaScript version Categories
class-js 1.0.1Custom (specified...5Node.js, jQuery, Language
Description Author

This package can create classes with Node.js, jQuery and JavaScript.

It creates constructor functions that can be used with the new operator to create objects a a new class.

The creator function can take an object with the definition of all the new class functions.

It supports inheritance by calling the class object extend function. More methods can be added dynamically.

Innovation Award
JavaScript Programming Innovation award nominee
February 2017
Number 2
EcmaScript 6 already supports JavaScript classes like in other languages but not all browser and environments on which JavaScript runs support EcmaScript 6.

This package can emulate the creation of classes using either Node.js, jQuery and JavaScript in a way that works in environments that support only EcmaScript 5.

Manuel Lemos
Picture of Emil Kilhage
  Performance   Level  
Name: Emil Kilhage <contact>
Classes: 5 packages by
Country: Sweden Sweden
Age: ???
All time rank: 1112 in Sweden Sweden
Week rank: 6 Up1 in Sweden Sweden Up
Innovation award
Innovation award
Nominee: 4x

Winner: 2x

Details

class.js

About

* Copyright 2011, Emil Kilhage * Released under the MIT License * Last Updated: 2011-04-29 18:10:51 * Current version: 1.1.0

This library allows you to create Class-like functions in a very effective and nice way. I found this very useful when working with large projects needing structure, scalability and all the other stuff that the ordinary object oriented model gives you in other languages, which JavaScript is kind of missing natively (at least in an easy way).

This project is inspired by John Resig's "Simple JavaScript Inheritance": http://ejohn.org/blog/simple-javascript-inheritance/ and "makeClass": http://ejohn.org/blog/simple-class-instantiation/ They have been integrated with each other and improved in many ways..

I've made a lot of unit testing on this that covers all the functionality, and many ways to use this. Everything around this is also very performance optimized.

__The library comes in 3 environment releases:__

* js: Works for any browser environment * node.js: Designed for node.js environment * jQuery: Designed as a jQuery-plugin

The source code between these is the same, the only difference is how they are built.

It doesn't have any dependencies and works in all environments. I've ran the unit tests in following environments:

* Browsers: IE 7,8, Firefox, Chrome * node.js versions: 0.5

If you find any problems, report a bug, make a pull-request...

The master branch is kind of work in progress, to get the lastest stable version look at the tag with highest version-number...

Examples:

node.js


// You can name 'Class' whatever you want...
var Class = require("path/to/the/lib/node.class.js");

var MyClass = Class({

    // define your class...

});

var instance = new MyClass();

js


var MyClass = Class({

    // define your class...

});

var instance = new MyClass();

jQuery


var MyClass = jQuery.Class({

    // define your class...

});

var instance = new MyClass();

More detailed examples:

This examples below is made with the jQuery release

  • Create a basic class...

var YourClass = jQuery.Class({

    // Constructor is moved here..
    init: function( message ) {
        this.message = message;
    },

    doShit: function() {
        // code ....
    },

    getMessage: function() {
        return this.message;
    }

    // more methods .....

});

  • Initalizing read this: http://ejohn.org/blog/simple-class-instantiation/

var object = new YourClass( "YES" );

// The new keyword isn't needed, but recommended since its
// faster and makes your code more readlable..
var object = YourClass( "YES" );

object.getMessage(); // --> "YES"

object.doShit(); // --> call a method

  • Create a new class that extends from an existing class.

var ExtendedClass = YourClass.extend({

    init: function() {
        // constructor code ..
    },

    doShit: function() {
        // code ..
        this._parent(); // --> this will call the parent doShit method in the "YourClass" class
        // code..

        // you could also do like this:
        this._parent.getMessage();
        // which calls the parent getMessage-method
        // that returns this.message instead of null..
    },

    // Change the behaviour of this
    getMessage: function() {
        return null;
    }

});

  • Add properties to a existing class prototype on the fly.
  • Only adds the properties to new instance'ses of the class

ExtendedClass.addMethods({

    doSomething: function() {
        // code ...
    },

    doSomethingMore: function() {
        // code ...
    },

    doShit: function() {
        this._parent(); // call the doShit method that this method overwrites
    }

});

  • Add properties to an class instance on the fly

var Class = jQuery.Class({

    get: function(){
        return "Oh";
    }

});

var instance = new Class();

instance.get() === "Oh";

instance.addMethods({

    get: function(){
        var ret = this._parent();

        return ret + "My";
    }

});

instance.get() === "OhMy";

var org_instance = new Class();

org_instance.get() === "Oh";

  • You also have the possibility to add static properties in an easy way.

var Base = jQuery.Class({

    staticMethod: function() {
        return "Hi";
    },

    prototype: {

        init: function() {
            this.message = "Hello";
        },

        getMessage: function() {
            return this.message;
        }

    }

});

var ExtendedClass = Base.extend({

    there: " there!",

    staticMethod: function(){
        return this._parent() + this.there;
    },

    prototype: {

        getMessage: function() {
            return this._parent() + ExtendedClass.there;
        }
    }

});

Base.staticMethod() // -> "Hi"

ExtendedClass.staticMethod() // -> "Hi there!"

var ext = new ExtendedClass();

ext.getMessage() // -> "Hello there!"

  • All instances will have a property called 'constructor' that always will be a reference to the class-constructor, this enables you to access the constructor-properties dynamically without hard-code the constructor name.

var Class = jQuery.Class({

    property: "hi there",

    prototype: {

        get: function() {
            return this.constructor.property;
        }

    }

});

var instance = new Class();

instance.get() -> "hi there"

  • All classes will have static function called "inherits" that can be used to check if a class inherits from another class

var Base = jQuery.Class({});
var Ext = Base.extend({});
var Ext2 = Ext.extend({});

Ext.inherits(Base); -> true

Ext.inherits(Ext2); -> false

Ext.inherits(Ext); -> false

Ext2.inherits(Base); -> true

Ext2.inherits(Ext); ->true

  • One thing to think of when you are working with objects/arrays inside your instances is that you always should declare these inside the constructor. If you don't and are declaring an object as a property inside the class-declaration all instances of this class will share this property.

var MyClass = $.Class({

    prototype: {
        // Avoid this as long as the behavior is intended
        shared_object: {
            prop: 1
        },

        init: function () {
            // A true instance property
            this.unshared_object = {
                prop: 1
            };
        }

    }

});

var a = new MyClass();
var b = new MyClass();

// This will change shared_object in all
// instances of MyClass the exists today and
// that will be created
a.shared_object.prop = 2;

a.shared_object.prop === 2;
b.shared_object.prop === 2;

// This however will only change 'unshared_object'
// in only instance 'a'.
a.unshared_object.prop = 2;

a.shared_object.prop === 2;
b.unshared_object.prop === 1;

var c = new MyClass();

c.shared_object.prop === 2;
c.shared_object.prop === 1;

www.glooby.com www.glooby.se

  Files folder image Files  
File Role Description
Files folder imagebuild (5 files, 1 directory)
Files folder imagesrc (3 files)
Files folder imagetest (1 file, 2 directories)
Accessible without login Plain text file bower.json Data Auxiliary data
Plain text file jquery.class.js Class Class source
Plain text file jquery.class.min.js Class Class source
Plain text file js.class.js Class Class source
Plain text file js.class.min.js Class Class source
Accessible without login Plain text file Makefile Data Auxiliary data
Accessible without login Plain text file MIT-LICENSE Lic. License text
Plain text file node.class.js Class Class source
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  build  
File Role Description
Files folder imagelib (4 files)
  Plain text file build.js Class Class source
  Accessible without login Plain text file dev.js Aux. Auxiliary script
  Plain text file lint.js Class Class source
  Plain text file uglify.js Class Class source
  Plain text file utils.js Class Class source

  Files folder image Files  /  build  /  lib  
File Role Description
  Plain text file jslint.js Class Class source
  Plain text file parse-js.js Class Class source
  Plain text file process.js Class Class source
  Accessible without login Plain text file squeeze-more.js Aux. Auxiliary script

  Files folder image Files  /  src  
File Role Description
  Plain text file class.js Class Class source
  Accessible without login Plain text file comment Data Auxiliary data
  Plain text file README.md Class Class source

  Files folder image Files  /  test  
File Role Description
Files folder imagebrowser (3 files)
Files folder imagenode (1 file)
  Plain text file test.js Class Class source

  Files folder image Files  /  test  /  browser  
File Role Description
  Plain text file jquery.js Class Class source
  Accessible without login Plain text file speed.php Data Auxiliary data
  Accessible without login Plain text file test.php Data Auxiliary data

  Files folder image Files  /  test  /  node  
File Role Description
  Accessible without login Plain text file test.js Aux. Auxiliary script

 Version Control Unique User Downloads Download Rankings  
 100%
Total:65
This week:0
All time:480
This week:4Up