Git Product home page Git Product logo

archetype's Introduction

Check out a demo here.

What is it

Archetype provides inheritable and "event-y" objects in Javascript. Archetype is built with readability and tweakability in mind. I've tried to keep Archetype objects as close to Plain Old JS Objects (POJOs) as possible.

Inheritance

Trying to fit traditional classes in Javascript has been met with limited success. Instead of going down this route, we'll only the few methods we need and rely heavily on using the prototype chain as much as possible.

extend   var object = archetype.extend({ ... })
Creates a new object with it's prototype set to the object you are extending from (meanin git will have access to all of it's functions and attributes). All attributes passed in will be added to the new object.

var Sloth = archetype.extend({
	initialize : function(name){
		this.name = name;
	},
	numOfToes : 2,
	nap       : function(){ ... },
	eat       : function(food){ ... }
});

create   var newObject = object.create(args)
Creates a new object and sets it's prototype to the object you are creating from. Any arguments passed in will be passed along to the initialize function and then called.

var mySloth = Sloth.create("Woodford");
console.log("Hello " + mySloth.name);

initialize   object.initialize(args)
initialize() is called whenever an object is made using create(). Any arguments passed into create() will be passed into initialize().

mixin   object.mixin({ ... })
mixin() will add any attributes passed to it to the object. Useful for augmenting already created objects.extend() uses it in it's execution.

mySloth.mixin({
	numOfToes : 3,
	hasBowtie : true
});

deep   object.deep(methodName, arg1, arg2, arg3...)
Being able to access functions from object within the prototype chain can be useful, however can be dangerous. Accidentally modifying objects within the prototype chain can have far reaching effects on many objects inheriting from it. Archetype limits this danger by restricting itself to only execute functions (using the current scope) objects inherited from.

deep() traverses the prototype chain and executes every function with a given name in order from oldest to newest. It's Archetypes's form of super. Used in Archetype to call each initialize() in the prototype chain whenever you use create().

Sloth.mixin({
	classification : function(){
		console.log("Suborder : Folivora");
	}
});

mySloth.mixin({
	classification : function(){
		console.log("Family : Bradypodidae");
	}
})
mySloth.deep("classification"); //both the suborder and family will be printed

Events

Every object extended from archetype can also emit their own events, allowing very easy reactive programming.

events   object.events()
events() will return as array of all the current events registered on that object. Useful for debugging.

on   object.on(event, function(arg1, arg2,...))
On sets up a listener for a specific event name. Whenever that event is triggered, each function added with on(), will be called with whatever arguments trigger() was called with. Each event will be given a unique id, which can be used to specifically disable it useing off().

var napEventId = sloth.on('nap', function(adjective){
	console.log('The sloth is taking a ' + adjective + ' nap!');
});

sloth.trigger('nap', 'aggressive');

once   object.once(event, function(arg1, arg2,...))
The same as on() but after it's first call, it will be removed, ensuring it will only be called once.

sloth.once('yawn', function(){
	console.log('The sloth yawned');
});
sloth.trigger('yawn');
sloth.trigger('yawn'); //Won't yawn twice in a row

trigger   object.trigger(event, arg1, arg2, ...)
Trigger activates each listener for a specific event. You can add any additional parameters to be passed to the listener.

off   object.off([event])
Off removes all listeners on an object for a given event anem or event id. If nothing is given, it will remove all listeners on that object.

sloth.on('run_fast', function(){
	console.log('The sloth made a speedy getaway.');
});
sloth.off('run_fast');
sloth.trigger('run_fast'); //Won't trigger the speedy getaway

Other Cool Stuff

Also check out XO, a lightweight MVC framework built on Archetype objects, inspired by Backbone.js

archetype's People

Contributors

stolksdorf avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.