I am writing a JavaScript plugin for fun. The plugin allows the user to pass options to initialize the plugin and perform actions. It is a simple alert/confirm plugin just for fun.
I am hoping to receive some architecture help with a little bit of code I am working on. It works as is, but I feel like there is a better or more efficient way of doing what I am doing below. The ideal syntax that the user would use (when utilizing the plugin) would go something like this:
new Bulletin('success', 'a title', 'a description', { duration: 2000 }).notify();
Or:
new Bulletin('warning', 'a title', 'a description', { duration: 2000 }).ask();
The plugin has 2 parts:
- Get a few base parameters (color, title, description) as well as some optional parameters (duration, size, class, etc.)
- Pass what type of notification is being initialized: notify (
alert
) or ask (confirm
)
The current plugin implementation is this:
import Notify from './notify';
import Ask from './ask';
var default = {};
var Bulletin = function(color, message, title, options) {
this.settings = Object.assign(defaults, options);
this.color = color;
this.message = message;
this.title = title;
return this;
};
Bulletin.prototype.notify = function() {
Notify(this.color, this.message, this.title, this.settings);
};
Bulletin.prototype.ask = function() {
Ask(this.color, this.message, this.title, this.settings);
};
Question/Problem
As you can see, the code works. I am wondering if there is a better, more efficient way of achieving this though.
Put simple, is there a way to do something like this (maybe ES6 has something?):
- Use the constructor's properties without just referencing them with
this
- Depending on which method is called from the constructor (i.e.
.notify()
), perform different logic- The user of the plugin will be able to call either a
notify
orask
method which will either show analert
orconfirm
(ask for user input) box - think native JavaScriptalert()
andconfirm()
. Therefore, the code that performs those actions would be different. One would simply show adiv
and the other would show adiv
but with buttons for the user to selectyes
orno
. But at the end of the day, they would share a lot of the same options. So what I am trying to avoid is duplicating code that is shared between thenotify
andask
methods, if possible.
- The user of the plugin will be able to call either a
The code for these features (notify
& ask
) is not written yet. I maybe should've waited before asking for a review, but really what I am after, and what will possible drive the rest of the development, is how to create a public JavaScript API that shares parts of "setup" code (gathering params, merging objects, etc.) but then has separate logic depending on which method is called.
Another option is to make the usage something like Bulletin.notify(params)
, but then I would want to be able to perform things like extend
on the options, without writing that code twice for the 2 different types (notify
and ask
).
My inspiration (if you haven't guessed by now) is notie.js if that gives you an idea of where I'm headed. That may provide a clearer picture of what this code will do eventually.
'success'
is not a color; neither is'failure'
. Also, you don't show us.ask()
, which you used in the example code. – QPaysTaxes Nov 17 '15 at 20:00prompt()
references toask()
and thecolor
variable is just poorly named. I think at this point what I want for that variable is it to be more of a style name. Similar to Bootstrap's modify class for many of its components (info, danger, success, etc.). – jamez14 Nov 17 '15 at 20:42Depending on which method is called from the constructor (i.e. .notify()), perform different logic
- I'm not sure what you mean here. What prevents you from doing different logic on the methods? What does "different logic" mean anyways? – Joseph the Dreamer Nov 17 '15 at 21:02