Quantcast
Channel: JavaScriptMVC Forum
Viewing all articles
Browse latest Browse all 3491

Re : Control Architecture: One highly-configurable control class or many specific classes?

$
0
0
Thanks for the replies; much appreciated.

I have a somewhat underlying question: In your apps, to apply the same functionality to different elements in the UI, do you ever create more than one instance of a particular control class? Or do you always extend it into subclasses and create one instance of each subclass?

Here's an example of what I mean:
  1. // Option A: One reusable control
  2. can.Control('CreateForm', {
  3.       defaults: {
  4.             listToAddTo: null,
  5.             loadMask: "Creating...",
  6.             afterCreate: null
  7.       }
  8. }, {
  9.       // functionality for form validation, model creation, loadmask, etc
  10. });

  11. // two instances: one form creates new domains, one creates new users
  12. new CreateForm($domainCreateForm, {
  13.       listToAddTo: myListOfDomains,
  14.       loadMask: "Creating Domain...",
  15.       afterCreate: function(newDomain) { /* select newDomain */ }
  16. });
  17. new CreateForm($userCreateForm, {
  18.       listToAddTo: myListOfUsers,
  19.       loadMask: "Creating User...",
  20.       afterCreate: function(newUser) { /* select newUser */ }
  21. });
That's what we have today -- but it's currently not covered by tests. We have other 'reused' ("thick"?) control classes for forms which have different functionality (like deleting models, handling lists, etc).
  1. // Option B: A base class with two single-use controls
  2. can.Control('BaseCreateForm', {      // this is 100% identical to CreateForm, above
  3.       defaults: {
  4.             listToAddTo: null,
  5.             loadMask: "Creating...",
  6.             afterCreate: null
  7.       }
  8. }, {
  9.       // functionality for pulling field values for the model, creating the model, showing/hiding loadmask, etc
  10. });

  11. // Instead of two instances of one class, make one instance each of two classes
  12. // (Presumably, these live in separate files)
  13. BaseCreateForm('DomainCreateForm', {
  14.       loadMask: "Creating Domain...",
  15.       afterCreate: function(newDomain) { /* select newDomain */ }
  16. });
  17. BaseCreateForm('UserCreateForm', {
  18.       loadMask: "Creating User...",
  19.       afterCreate: function(newUser) { /* select newUser */ }
  20. });

  21. new DomainCreateForm($domainCreateForm, {
  22.       listToAddTo: myListOfDomains
  23. });
  24. new UserCreateForm($userCreateForm, {
  25.       listToAddTo: myListOfUsers
  26. });
The second form is what we're considering refactoring to, because it more cleanly separates 'innate' information (the loadmask and afterCreate callback) from 'instance' information (which dom element to use, which model.list to add to), and because it seems better suited for different test suites. We'll end up with a lot of new, nearly-empty js files (one for DomainCreateForm, one for UserCreateForm, etc), but I think it'll be worth it.

In both cases, though, nearly all of the actual functionality lives in one class, the instances themselves are created via a higher-level controller (with models/observes passed in), etc.

Thanks again,
Steven

Viewing all articles
Browse latest Browse all 3491

Trending Articles