Chip Utils

Utility methods used in some of the libraries created with Chip.

Getting Started

To use these utilites in your own project install using npm.

npm install chip-utils

Class

This utility provides syntactic sugar on normal JavaScript class inheritance supporting additional features such as getters/setters and static inheriance.

To set up class inheritance, extend from the generic Class object. Then your classes will have an extend method and can use it to extend to subclasses.

varClass=require('chip-utils/class');functionMyClass(){}Class.extend(MyClass);functionSubClass(){}MyClass.extend(SubClass);

Static properties will also be extended. You may use the static member property as a shortcut to defining statics, but this is not necessary.

// Parent classfunctionResource(data){if(data){Object.keys(data).forEach(function(key){this[key]=data[key];},this);}}Resource.uri='/api/v1'Resource.load=function(){varResourceType=this;return$.getJSON(this.uri).then(function(items){returnitems.map(function(item){returnnewResourceType(item);})});};Class.extend(Resource,{save: function(){varuri=this.constructor.uri+'/'+this.id;// Save code here};});functionPerson(data){Resource.call(this,data);}Resource.extend(Person);// Define this AFTER calling extend writes itPerson.uri+='/people'Person.load()// returns a promise full of Person objects

Using the static member property:

Resource.extend(Person,{static: {uri: '/api/v1/people'}});

Mixins or multiple inhertiance allows for adding methods from multiple classes.

// Person will inherit from Resource, but will also get the methods from EventTargetfunctionPerson(data){// Calling both constructors to ensure we are initialized correctlyResource.call(this,data);EventTarget.call(this);}Resource.extend(Person,EventTarget,{save: function(){this.dispatchEvent(newEvent('save'));returnResource.prototype.save.call(this);}});varp=newPerson();p.on('save',function(){console.log('Person was saved!');});

The extended mixins and the prototype of the class can safely use getters/setters.

functionPerson(firstName,lastName){this.firstName=firstName;this.lastName=lastName;}Class.extend(Person,{getname(){returnthis.firstName+' '+this.lastName;},setname(value){varparts=value.split(' ');this.firstName=parts[0];this.lastName=parts[1];}});functionFriend(firstName,lastName,nickName){Person.call(this,firstName,lastName);this.nickName=nickName;}Person.extend(Friend,{getname(){returnthis.nickName;},setname(value){this.nickName=value;}});varrando=newPerson('John','Smith');varfriend=newFriend('Robert','Haroldson','Bob');console.log(rando.name);// John Smithconsole.log(friend.name);// Bobfriend.name='Rob';console.log(friend.nickName);// Rob

EventTarget

This utility ties into the browser eventing system and exposes it for your libraries to use. This does not work in node.js. EventTarget extends from Class so anything extending it will take advantage of the extension system. Or it may be used as a mixin as described above, just be sure to call the constructor within your subclass' constructor.

To extend the event target:

varEventTarget=require('chip-utils/event-target');functionMyClass(){EventTarget.call(this);}EventTarget.extend(MyClass,{save: function(){// Use the cancelable flag to allow actions to be canceled by listenersvarevent=newEvent('saving',{cancelable: true});this.dispatchEvent(event);if(!event.defaultPrevented){varself=this;$.ajax(type: 'PUT',url: '/items/'+this.id,contentType: 'application/json',data: JSON.stringify(this)).then(function(){// Signal the save is completeself.dispatchEvent(newEvent('save'));},function(err){// Use custom events to add additional dataself.dispatchEvent(newCustomEvent('error',{detail: err}));});}}});

To listen to events on an event target (or remove listeners:

varobj=newMyClass();obj.on('saving',function(event){if(event.target.ownerId!==me.id){event.preventDefault();}});// Will only get called onceobj.one('save',function(){alert('First save');});// `on` and `off` are aliases of `addEventListener` and `removeEventListener`obj.addEventListener('save',myListener);obj.removeEventListener('save',myListener);obj.on('save',myListener);obj.off('save',myListener);

Note

This EventTarget class will only work in the browser (or jsdom) since it uses a native EventTarget to work with the browser's eventing system. It does not support bubbling.