Communicating between plugins whilst maintaining context in Javascript

I'm making some changes to a JavaScript plugin on a site I've been made steward over. This main plugin has it's own sub-plugins and I'm trying to make certain aspects modular.

Currently, I'm attempting to make a reusable modal window that the sub-plugins ferry data to. This main plugin uses extensive use of prototype.

Right now, the main Plugin calls the sub-plugins "callback" method. The callback method then calls the Plugin.prototype.openModal and supplies it with a html template (html), callback function (what should be done after everything is done), validation (function that will validate the inputs of the modal, if present), and prerender (function that is fired before the modal is launched).

My code is pretty pseudo-cody, but this is what I have:

Prototype for reusable modal window, contained in main plugin:

```
Plugin.prototype.openModal = function(html, callback, validation, prerender) {

var self = this;

var headerFragment = html.hasOwnProperty('header') ? html.header : '',
bodyFragment = html.hasOwnProperty('body') ? html.body : '',
closeButtonText = html.hasOwnProperty('closeText') ? html.closeText : 'Cancel',
confirmButtonText = html.hasOwnProperty('confirmText') ? html.confirmText : 'Save changes';

// Only create the modal when it's called for the first time!
if(!document.getElementById('confirm-modal')) this.createModal();

var modal = $('#modal');
modal.find('.modal-header h3').html(headerFragment);
modal.find('.modal-body').html(bodyFragment);
modal.find('.close-btn').html(closeButtonText);
modal.find('.confirm-btn').html(confirmButtonText);
modal.find('.modal-validation span').text('');

if(typeof prerender === 'function') prerender();

function closeModal(input) {
if(callback && typeof callback === 'function') {
input = input ? input : $('#modal').find('input').val();
callback.call(self, input);
}
$('#modal').modal('hide');
}

function handleAlert(text) {
var

Interesting question,

your code is fairly easy to follow, JsHint cannot find anything serious to complain about.

Since you have a validate function, I would also create a callback function this way your call to openModal could be

this.parchment.openModal(template, this.createLinkCallback, this.validate );

Because you provide the functions themselves as parameters, you no longer need self, and you have a very readable line of code. ( Personally I might have called validate -> validationCallback ).

Furthermore, there is something smelly about the fact that you sprinkle your code with typeof something === 'function', I am not very fond of it, if you are going to check parameter types, you probably should do it up front in your code. Also this line : typeof input === 'object' ? closeModal(input) : closeModal(); so basically if there is an array of inputs you would not return anything, why ? After going thru the trouble of collection the values into an array etc.

Also, consider caching some of your jQuery calls, especially modal.find('input') is pretty expensive computing wise and you use this one a lot.

Finally, you are checking if(input) twice, so that handleAlert('You must enter something!'); under the first if(input) true block becomes dead code.

StackExchange Code Review Q#46840, answer score: 2