Skip to content

Repository files navigation

Benchmark result

Build Status

Features

  • Small footprint, no dependency, 0.7K minimized+gzip!
  • Super fast! See benchmark.
  • Work on both server and client side.
  • Support CommonJS.
  • Support getter/setter, constant, main, singleton, mixin, private properties, Aspect Oriented Programming.
  • Plugins mechanism to extend itself.

Setup

JSFace supports both server side (CommonJS) and client side JavaScript (browser).

Browser

bower

bower install jsface
<scriptsrc="bower_components/jsface/jsface.js"></script>

dnsjs

<scriptsrc="https://cdn.jsdelivr.net/jsface/2.4.9/jsface.min.js"></script>

Manually

<scriptsrc="jsface.js"></script>

NodeJS environment

First install JSFace via npm:

npm install jsface

Then use its APIs, for example:

varjsface=require("jsface"),Class=jsface.Class,extend=jsface.extend;

Usage

Define a class

varPerson=Class({constructor: function(name,age){this.name=name;this.age=age;},// Getter/Setteraddress: {get: function(){returnthis._address;},set: function(value){this._address=value;}},toString: function(){returnthis.name+"/"+this.age;}});varperson=newPerson("Rika",20);person.toString();// "Rika/20"

Define a sub-class

varStudent=Class(Person,{constructor: function(id,name,age){this.id=id;Student.$super.call(this,name,age);// Call parent's constructor},toString: function(){returnthis.id+"/"+Student.$superp.toString.call(this);// Call parent's toString method}});varstudent=newStudent(1,"Rika",20);student.toString();// "1/Rika/20"

main

JSFace supports a special method named main(). main() is executed right after the class is created.

Class({constructor: function(name){this.name=name;},getName: function(){returnthis.name;},main: function(Person){// Class is passed to main() as its first argumentvarp=newPerson("Rika");p.getName();// "Rika"}});

Singleton class

varUtil=Class({$singleton: true,echo: function(obj){returnobj;}});Util.echo(2012);// 2012

Static properties

varPerson=Class({$statics: {MIN_AGE: 1,MAX_AGE: 150,isValidAge: function(age){returnage>=this.MIN_AGE&&age<=this.MAX_AGE;}},constructor: function(name,age){this.name=name;this.age=age;}});Person.MIN_AGE===1;// truePerson.MAX_AGE===150;// truePerson.isValidAge(0);// false

Constants

Constants work the same as static properties. The only different is they are immutable.

varPerson=Class({$const: {MIN_AGE: 1,MAX_AGE: 150},constructor: function(name,age){this.name=name;this.age=age;}});Person.MIN_AGE=-1;Person.MIN_AGE===1;// true, MIN_AGE is immutable

Private properties

JSFace supports private static properties, meaning the properties are shared over instances.

varPerson=Class(function(){varMIN_AGE=1,// private variablesMAX_AGE=150;functionisValidAge(age){// private methodreturnage>=MIN_AGE&&age<=MAX_AGE;}return{constructor: function(name,age){if(!isValidAge(age)){throw"Invalid parameter";}this.name=name;this.age=age;}};});

Mixins

JSFace provides a powerful mechanism to support mixins. Reusable code can be mixed into almost anything.

Mixin can be bound when you define classes:

varOptions=Class({setOptions: function(opts){this.opts=opts;}});varEvents=Class({bind: function(event,fn){returntrue;},unbind: function(event,fn){returnfalse;}});varPerson=Class({constructor: function(name,age){this.name=name;this.age=age;}});// Student inherits Person and extends properties from Options and EventsvarStudent=Class([Person,Options,Events],{constructor: function(id,name,age){}});varstudent=newStudent(1,"Rika",20);student.setOptions({foo: true});// student.opts === { foo: true }student.bind();// truestudent.unbind();// false

Or after defining classes:

varStudent=Class(Person,{constructor: function(id,name,age){});extend(Student,[Options,Events]);

Mixin with instance:

varperson=newPerson("Rika",20);extend(person,Options);person.setOptions({foo: true});

Mixin with native classes:

extend(String.prototype,{trim: function(){returnthis.replace(/^\s+|\s+$/g,"");}});" Hello World ".trim();// "Hello World"

No conflict

In browser environment, you might be using another library which also introduces the global namespace Class. JSFace can return the original Class back to the library claims it with a call to jsface.noConflict().

jsface.noConflict();// Code that uses other library's Class can follow here// ...// Define classes by using jsface.Class directlyvarPerson=jsface.Class({});

Plugins

Plug and Play pointcut

JSFace supports Aspect Oriented Programming (AOP) via simple before/after mechanism. You can apply pointcuts over class constructors, class methods, singleton methods, instance methods. You can even apply pointcuts over native classes.

AOP support is implemented as a standalone plugin.

Setup

Browser:

<scriptsrc="jsface.pointcut.js"></script>

then in your code, make an alias to jsface.pointcut:

varpointcut=jsface.pointcut;

NodeJS:

varpointcut=require("jsface.pointcut");

Applying pointcuts

In JSFace, an advisor is a set of pointcuts you want to apply to a subject. You can apply as many advisors as you want.

Person=Class({constructor: function(name){this.name=name;this.counter=0;},foo: function(n){},bar: function(n){}});varadvisor={constructor: {before: function(){this.age=20;},after: function(){this.email="rika@sample.com";}},foo: function(n){// sugar syntax, foo:beforethis.counter++;},bar: {before: function(n){this.counter++;},after: function(n){this.counter++;}}};Person=pointcut(Person,advisor);varperson=newPerson("Rika");person.foo();person.bar();person.name==="Rika";// trueperson.age===20;// trueperson.email==="rika@sample.com";// trueperson.counter===3;// true

Removing pointcuts

Using previous apply pointcut example:

// remove all pointcuts bound to constructor and fooPerson=poincut(Person,"remove constructor foo");// remove advisor, other advisors remainedPerson=poincut(Person,"remove",advisor);// remove all advisors, restore the fresh version of PersonPerson=poincut(Person,"remove");

$ready

$ready plugin is designed to help a parent class to intercept their subclasses' creation.

Sample

varService=Class({$ready: function(clazz,parent,api){vartype=(this!==clazz)&&api.type;// (this !== clazz) means this comes from a sub-classswitch(type){case"session":
// do something with subclass clazz when its type is sessionbreak;case"application":
// do something with subclass clazz when its type is applicationbreak;}}});varSessionService=Class(Service,{type: "session"});varApplicationService=Class(Service,{type: "application"});

Bug tracker

Have a bug? Please create an issue here on GitHub!

License

Copyright (c) Tan Nhu

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Small, fast, elegant, powerful, and cross platform JavaScript OOP library. Support main(), singleton, super call, private, mixins, plugins, AOP and more.

Resources

Stars

299 stars

Watchers

20 watching

Forks

Releases

Packages

Used by

Contributors

Languages