2

i'm creating a website in PHP, that has Javascript elements as well. This one, will be having what is like a plugin system where a plugin can be dynamically added to the website.

I've created the plugin system, but i don't like certain elements of the design. In particular, i'm using an MVC pattern, but there is a problem with javascript abstraction.

I have a certain file that loads all the plugins. Then, there is a javascript file that dynamically adds boxes to a window, depending on the selection that was made, for what plugin should be used.

It goes like this in a js file :

 if (SelValue == 'image_list')
   image_list(form_name, new_div, parent_div);

 if (SelValue == 'multiple_columns')
   multiple_columns(form_name, new_div, parent_div);

Then, right below, follows the declaration of imagelist() and so on. Of course, this is pretty cumbersome and certainly does not look like a good practice. I would like to have all of these abstracted and isolated, so that a plugin is just a simple step to add to my code, if possible.

Do you know of any design pattern or practice that could fit this scenario ?

Improve this question
1

3 Answers 3

Reset to default
2

You could create a Object holding all functions like image_list and multiple_columns. Using those would look like:

plugins[SelValue](form_name, new_div, parent_div);

Adding a new function would look like this:

plugins.image_list = function (form_name, new_div, parent_div) {
    /* … */
}

This definition could go in a different file. Is that what you meant?

Edit: Pretty single-file version:

plugins = {
    image_list: function (form_name, new_div, parent_div) {
        /* … */
    },
    multiple_columns: function (form_name, new_div, parent_div) {
        /* … */
    },
};
plugins[SelValue](form_name, new_div, parent_div);
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Well, i'm actually quite hesitant about using multiple js files, because of performance purposes. With that in mind, i would like to make it follow a design pattern style, like the open/closed principle or programming on interfaces. I was thinking about it close to your solution, but since this is js and not c++, multiple files can be a problem.
Well, you don’t have to put it in different files. Just use a hash/object to DRY away the if / switch.
It's certainly a prettier version than the one i have now. Well, it seems that javascript and too much oop is not in accordance anyway, so this could indeed be the most preferable solution. Since i do have to put the declarations in one file, it will be kinda bloated anyway :/
1

If you're not going to have more than 2 IF statements, that would be sufficient. However, if you're going to be extending it (or could foresee it expanding), then I would suggest using a Factory/Command design pattern. Implementation details would include a table or a dictionary to replace the multiple IF-statements that you would have.

Improve this answer

1 Comment

yes, it's actually like 15 IFs already ;) I am looking at that pattern now.
1

The module pattern would probably fit your needs very well. This pattern basically would treat each "plugin" as a module, which itself should be fully functional and independent. Then you have a module loader/controller, which is responsible for loading the correct modules, and enabling modules to communicate with each other.

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

http://www.yuiblog.com/blog/2007/06/12/module-pattern/

Improve this answer

1 Comment

that is interesting, i'm taking a closer look thanx

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.