How should you design a library with a multifunctional constructor? - javascript

Recently I was playing around with writing a small library for music theory in JS. One of the features I wanted to add was a jQuery style selector for creating/finding notes. For example:
Notes("a#") === Note {_note: 0, accidental: 1}
However, the structure of the library looked something akin to:
var Notes = function(sel) {
// initialisation stuff
var Note = function() {
// stuff for note objects
};
var scales = {
...
};
var selector(sel) {
// evaluate sel
return new Note(...);
};
if(sel !== undefined) {
return selector(sel);
}
return {
Note: Note,
scales: scales
};
};
module.exports = new Notes();
This way, I could use the library like this:
var Notes = require("Notes");
Notes.scales.major.c === [0,2,4,...];
But not like this:
var thisNote = Notes("A#");
As Notes was obviously an object that had been returned from the original Notes function. To use the selector function I'd have to expose it and then call it like this:
var thisNote = Notes.selector("A#");
But I want to mimic the jQuery/sizzle style (I had a bit of a search of jQuery's source, but couldn't find anything that helped).
How can I/should I have approached the design to allow for this kind of functionality? Would using prototypes instead of Closures been a more sensical approach? Or should I have aliased the library's name to another method to achieve the desired effect?

jQuery is like this:
function wrap() {
// do wrapping of DOM nodes
return {
value: function () { /*..*/ },
add_class: function () { /*..*/ }
};
}
wrap.extend = function () { /*..*/ }
wrap.ajax = function () { /*..*/ }
wrap("#abc"); // has `.value` and `.add_class)
wrap.ajax();

Related

Define dot functions like jQuery's ".map()", ".each()", etc

I have 2 functions and one constructor defined like this :
let mx = function(arr) {
return new mx.fn.init(arr)
}
mx.fn = mx.prototype = {
constructor: mx,
}
init = mx.fn.init = function(arr) {
//do things and return an object containing data about arr
}
So this code works well and calling mx(array) returns the wanted object.
Now, how can I define functions to manipulate this object? I would like to define functions like, for example, mx(array).addRow(row) to change data in the object returned by mx(array) but can't manage to do it.
I tried to define it in mx.fn like this :
addRow: function(arr) { //do smth } but it doesn't work.
I also tried to do mx.prototype.addRow = function(row) { //do smth }.
Do you know if this is possible? It looks like jQuery's $('#id').css('color': 'red') a lot but I'm not sure if this works the same way.
I'm new to a lot of these concepts so I'm a bit lost in all those prototypes...
Thanks in advance for your help!
You need to set the prototype of the init function.
let mx = function(arr) {
return new mx.fn.init(arr)
}
let init = function(arr) {
//do things and return an object containing data about arr
}
mx.fn = init.prototype = {
addRow(row){
// do something
},
init: init
}

How to organise this module pattern and elegantly deal with ajax calls

I have couple of modules that do their own thing, but need them to sometimes access a property of one another (not that intertwined, just one json obj). Like so
var Bananas = (function() {
// Bananas.properties would look like this
// Bananas.properties = { 'color' : 'yellow' };
var methodToGetProperties = function() {
API.get('bananas')
.done(function(data) {
Bananas.properties = data;
}
};
var publiclyReturnProperties = function() {
if (!Bananas.properties) {
methodToGetProperties();
} else {
return Bananas.properties;
}
};
var doSomethingBananas = function() {
bananas.doing.something;
bananaHolder.innerHTML = Bananas.properties;
}
var init = function() {
doSomethingBananas
}
return {
init: init,
properties: publiclyReturnProperties,
};
})();
var Apples = (function() {
var doSomethingApples = function() {
apple.innerHTML = Bananas.properties.color;
};
var init = function() {
doSomethingApples();
};
return {
init: init
};
})();
Bananas.init(); Apples.init();
Now, the way I do it now is by simply revealing the methodToGetProperties, which returns the API call, and then work on using jQueries deferred method wherever I call it. But I feel this ruins my code by putting .done everywhere.
I've been reading up to singleton pattern and feel it might be the solution to my problem, but I'm not sure how to implement it. Or maybe implement a callback function in methodToGetProperties, but again not confident as to how.
Would kindly appreciate advice on how to organise my app.

JavaScript/jQuery variable scope in class (this)

I'm writing simple slider for my website. This slider contains list items. I want to use OOP approach.
My actual code:
var miniSlider = function(objId)
{
this.obj = $("#" + objId);
this.obj.settings = [];
this.obj.settings['items'] = $('ul li', this.obj).length;
this.pagerNext = this.obj.find("i.next");
this.pagerPrev = this.obj.find("i.prev");
this.pagerNext.on("click", function() {
alert(this.obj.settings['items']);
});
};
I can invoke a few other sliders (yes, that's why I introduced a class):
miniSlider("mini-slider");
The problem is that when I'm in jQuery this.pagerNext.on("click", function() { }); this is no longer my object but - it's become a clicked element. How can I access this.obj.settings after click in a well done way (and with multi sliders support)?
EDIT:
Here is a full code created with a cooperation with SOF community :)
var MiniSlider = function(objId)
{
this.obj = $("#" + objId);
this.obj.settings = {
items: $("ul li", this.obj).length,
autoChangeTime: 8000
};
this.obj.activeElement = null;
this.pagerNext = this.obj.find("i.next");
this.pagerPrev = this.obj.find("i.prev");
var self = this;
this.pagerNext.on("click", function() {
self.obj.activeElement = $('li.active', self.obj);
if(self.obj.settings.items > 0)
{
if(self.obj.activeElement.is(':last-child'))
{
$('li.active', self.obj).removeClass('active');
$('li', self.obj).first().addClass('active');
}
else
{
self.obj.activeElement.next().addClass('active').prev().removeClass('active');
}
}
});
this.pagerPrev.on("click", function()
{
self.obj.activeElement = $('li.active', self.obj);
if(self.obj.settings.items > 0)
{
if(self.obj.activeElement.is(':first-child'))
{
self.obj.activeElement.removeClass('active');
$('li', self.obj).last().addClass('active');
}
else
{
self.obj.activeElement.prev().addClass('active').next().removeClass('active');
}
}
});
this.obj.parent().on('mouseenter mouseleave', function(e) {
if (e.type == 'mouseenter')
{
$(this).addClass('stop');
}
else
{
$(this).removeClass('stop');
}
});
setInterval(function() {
if(self.obj.settings.items > 0 && !self.obj.parent().hasClass("stop"))
{
self.pagerNext.click();
}
}, this.obj.settings.autoChangeTime);
};
and invoke:
new MiniSlider("mini-slider");
Alex gave you the solution to the this problem in your callback, but there is another problem in your code.
You are calling the miniSlider() function without a new operator:
miniSlider("mini-slider");
That means that inside the function, this is not a unique object, but is actually the window object!
You need to use the new operator to create an individual object for each call:
new miniSlider("mini-slider");
But you should also change the name of this function to follow the JavaScript convention that constructors begin with a capital letter. Call it MiniSlider and use it like so:
new MiniSlider("mini-slider");
If you follow this convention (which most experienced JavaScript programmers do), it will help you remember when to use new. If the function begins with a capital letter, it's a constructor and you need to use new with it. Otherwise, you don't.
If you'd like to be able to use your constructor without new, that is also possible with a bit more code, e.g.:
function MiniSlider( objId ) {
if( this == window ) return new MiniSlider( objId );
// the rest of your constructor code goes here
}
But generally people don't bother with that and just use the initial capital letter on the constructor as a reminder to use new.
Also, as a suggestion, I like to use a meaningful name when I save this in a variable, and then I use that name consistently instead of using this at all. Doing it this way it might look like:
var miniSlider = function(objId) {
var slider = this;
slider.obj = $("#" + objId);
slider.obj.settings = [];
slider.obj.settings['items'] = $('ul li', slider.obj).length;
slider.pagerNext = slider.obj.find("i.next");
slider.pagerPrev = slider.obj.find("i.prev");
slider.pagerNext.on("click", function() {
alert(slider.obj.settings['items']);
});
};
Why do I prefer that approach over using this in most places and another variable like self where you need it? This way I don't have to remember which to use: I can always use slider in the code instead of this. (Of course you could use self or any other name; I just like to have a more meaningful name if I'm going to the trouble of making up a name at all.)
Another minor problem in the code is in these two statements:
slider.obj.settings = [];
slider.obj.settings['items'] = $('ul li', slider.obj).length;
You shouldn't use an Array when you are going to be giving it named properties like this. Use an Object instead. Arrays should only be used when you have numeric indexes like 0, 1, 2, etc. And with an object literal you can set the property at the same time:
slider.obj.settings = {
items: $('ul li', slider.obj).length
};
Also, when you use that property:
alert(slider.obj.settings['items']);
you can write it more simply as:
alert(slider.obj.settings.items);
Either way it does the same thing.
Save a reference to this in a local variable, and use that variable instead of this in the nested function.
var self = this;
this.pagerNext.on("click", function() {
alert(self.obj.settings['items']);
});

What is a good approach to be able setting function to object in JavaScript?

//namespace
if (!window.SlidePanel) {
window.SlidePanel = (function () {
var SlidePanel = {};
return SlidePanel;
})();
}
SlidePanel.panel = function (el) {
this.$ = el;
}
SlidePanel.panel.prototype = {
insert: function () {
},
show: function () {
},
hide: function () {
}
}
SlidePanel.up = new SlidePanel.panel($('div#up-panel'));
SlidePanel.bottom = new SlidePanel.panel($('div#bottom-panel'));
SlidePanel.left = new SlidePanel.panel($('div#left-panel'));
SlidePanel.right = new SlidePanel.panel($('div#right-panel'));
I want to be able to set show and hide functions in some place of code. I thought to add setShowFn and setHideFn function to SlidePanel.panel.prototype like this
SlidePanel.panel.prototype = {
...
setShowFn: function (fn) {
this.show = fn;
},
setHideFn: function (fn) {
this.hide = fn;
}
}
Is this a good approach or there is more elegant way to do this?
If you want to override the show or hide function on just one instance of a SlidePanel.panel, you're free to just update that instance:
SlidePanel.up.show = function() { /* ... */ };
That breaks the inheritance of show for that specific instance, without changing any other instances that still use the show property from the prototype.
If you want to update show for all instances that are using the inherited version, you can do this at any time:
SlidePanel.panel.prototype.show = function() { /* ... */ };
...since the instances have a reference back to the prototype, and so changes to the prototype happen "live." Note that any instance on which you've done the first example above will be unaffected, because it's not using the version of show from the prototype anymore.
And yes, you're free to encapsulate this in your setShowFn and setHideFn functions if you want to; just be aware that there's nothing other than convention/documentation preventing code from assigning to the properties directly even if you do.

Is there a Javascript equivalent of Ruby's andand?

In trying to make my Javascript unobtrusive, I'm using onLoads to add functionality to <input>s and such. With Dojo, this looks something like:
var coolInput = dojo.byId('cool_input');
if(coolInput) {
dojo.addOnLoad(function() {
coolInput.onkeyup = function() { ... };
});
}
Or, approximately equivalently:
dojo.addOnLoad(function() {
dojo.forEach(dojo.query('#cool_input'), function(elt) {
elt.onkeyup = function() { ... };
});
});
Has anyone written an implementation of Ruby's andand so that I could do the following?
dojo.addOnLoad(function() {
// the input's onkeyup is set iff the input exists
dojo.byId('cool_input').andand().onkeyup = function() { ... };
});
or
dojo.byId('cool_input').andand(function(elt) {
// this function gets called with elt = the input iff it exists
dojo.addOnLoad(function() {
elt.onkeyup = function() { ... };
});
});
I don't know Dojo, but shouldn't your first example read
dojo.addOnLoad(function() {
var coolInput = dojo.byId('cool_input');
if(coolInput)
coolInput.onkeyup = function() { ... };
});
Otherwise, you might end up trying to access the element before the DOM has been built.
Back to your question: In JavaScript, I'd implement andand() as
function andand(obj, func, args) {
return obj && func.apply(obj, args || []);
}
Your example could then be written as
dojo.addOnLoad(function() {
andand(dojo.byId('cool_input'), function() {
this.onkeyup = function() { ... };
});
});
which isn't really that much shorter than using the explicit if statement - so why bother?
The exact syntax you want is not possible in JavaScript. The way JavaScript executes would need to change in a pretty fundamental fashion. For example:
var name = getUserById(id).andand().name;
// ^
// |-------------------------------
// if getUserById returns null, execution MUST stop here |
// otherwise, you'll get a "null is not an object" exception
However, JavaScript doesn't work that way. It simply doesn't.
The following line performs almost exactly what you want.
var name = (var user = getUserById(id)) ? user.name : null;
But readability won't scale to larger examples. For example:
// this is what you want to see
var initial = getUserById(id).andand().name.andand()[0];
// this is the best that JavaScript can do
var initial = (var name = (var user = getUserById(id)) ? user.name : null) ? name[0] : null;
And there is the side-effect of those unnecessary variables. I use those variables to avoid the double lookup. The variables are mucking up the context, and if that's a huge deal, you can use anonymous functions:
var name = (function() {return (var user = getUserById(id)) ? user.name : null;})();
Now, the user variable is cleaned-up properly, and everybody's happy. But wow! what a lot of typing! :)
You want dojo.behavior.
dojo.behavior.add({
'#cool_input': {
onKeyUp: function(evt) { ... }
}
});
How about something like this:
function andand(elt, f) {
if (elt)
return f(elt);
return null;
}
Call like this:
andand(dojo.byId('cool_input'), function(elt) {
// this function gets called with elt = the input iff it exists
dojo.addOnLoad(function() {
elt.onkeyup = function() { ... };
});
});
As far as I know there isn't a built-in JavaScript function that has that same functionality. I think the best solution though is to query by class instead of id and use dojo.forEach(...) as you will be guaranteed a non-null element in the forEach closure.
You could always use the JavaScript equivalent:
dojo.byId('cool_input') && dojo.byId('cool_input').whateverYouWantToDo(...);
I've never used dojo, but most javascript frameworks (when dealing with the DOM) return the calling element when a method is called from the element object (poor wording, sorry). So andand() would be implicit.
dojo.addOnLoad(function() {
dojo.byId('cool_input').onkeyup(function(evt) { /*event handler code*/
});
});
For a list:
Array.prototype.andand = function(property, fn) {
if (this.filter(property).length > 0) this.map(fn);
}

Categories