Class-5 NPM | npm.io

class-5

Introduction

Class5 is a JavaScript library that gives an ES5-way approach to ES6 Class.

Class5 supports generating both normal constructor and derived constructor. For derived constructor, Class5 is able to extend built-in constructor and ES6 Class, as well as user-defined constructor.

Class5 method definition resembles ES6 Class syntax. Just add special prefix on property names, then you can define getter, setter and static methods on the fly.

Class5 is built for supporting legacy browser. However, Class5 doesn't support IE10 and below. By some configuration, you may extend the browser support to IE9.

Code Sample

var Person = Class5({
    constructor: function Person(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    },
    
    speak: function speak(){
        return 'Hello, I am ' + this.fullName + '. I am ' + this.age + ' years old.';
    },
    
    $get_fullName: function(){
        return this.lastName + ' ' + this.firstName;
    },
    
    $set_fullName: function(name){
        name = name.split(/\s/g);
        
        this.firstName = name[ name.length - 1 ];
        this.lastName = name[0];
    }
});

/*
	Expected tree structure:
	
	Person: f(firstName,lastName,age)
	|_ prototype
		|_ constructor: Person
		|_ speak: f()
		|_ get fullName: f()
		|_ set fullName: f(name)
*/

var wisgh = new Person('Kong', 'Wisgh', 16);

/*
	Expected tree structure:
	
	wisgh
	|_ firstName: "Kong"
	|_ lastName: "Wisgh"
	|_ age: 16
	|_ __proto__ : Person.prototype
	
*/

Browser Compatibility

	Chrome	Edge	Firefox	IE	Opera	Safari
Default	7	Yes	4	11	12.1	5.1
`reverseExtend: true`	7	Yes	4	9	12.1	5.1

By default, Class5 doesn't support IE10 and below due to unshimmable behaviour on Object.setPrototypeOf.

Class5 still doesn't support IE8 and below because of unshimmable behaviour on Function.prototype.bind when invoking the bound function as constructor.

Installation

NPM:

npm install class-5

<script> tag:

<!-- Development, uncompressed version -->
<script src="https://unpkg.com/class-5/dist/class-5.js"></script>

<!-- Production, compressed version -->
<script src="https://unpkg.com/class-5/dist/class-5.min.js"></script>