ArcGIS JS API and mixin

2636
1
07-14-2014 12:48 PM
BhavinSanghani
Occasional Contributor II

Does ArcGIS JS API supports mixin approach? Especially, while using javascript framework like ExtJS (or any other js frameworks) - how reusability can be achieved?  One approach may be to keep all the functions in one file, call main function from the other files with some parameters and manage code using if..else..approach. Wondering if any other better approach.

0 Kudos
1 Reply
TyroneBiggums
Occasional Contributor III

Edit: I apologize for the crap code blocks. It looked fine when I posted it. This forum always gives me fits when I add code. Please copy and paste to your IDE and add proper line breaks so that the comments don't comment out the code. I'll try to fix it but I assume it'll still look to crap.

At a high level, the answer is yes, I think you can use the mixin pattern. I'm not sure if you would be butchering the spirit of mixins, but you could give it a go.

Use can use the dojoConfig to package your JavaScript files. Use the defined package's return block as a means of returning your mixins. The dojo packages would simply act as a namespace.

dojoConfig (file, or whatever):

var basePath = location.pathname.replace(/\/[^/]+$/, ""); 
var dojoConfig = {     
     async: true,
     packages: [
         {
             name: "mixins",
             location: basePath + "/js/mixins",
             main: "mixins"
         }
    ]
 };

mixins (file):

define(function () {
     var fooMixins = {
         doThis: function()  {
            // do something
         },

          doThat: function() {
             // do something else
         }
     }

      var barMixins = {
         doThis: function()  {
            // do something
         },

          doThat: function() {
             // do something else
         }
     }
      return {
         fooMixin: function () {
             return fooMixins;
         },

          barMixin: function () {
             return barMixins;
         }
     };
 });

mixin usage (file):

define(['mixins'], function (mixins) {
     return {
         fooMixinUsage: function () {
             // do stuff and extend foo mixin via mixins.fooMixin()
         },

          barMixinUsage: function () {
             // do stuff and extend bar mixin via mixins.barMixin()
         },
     };
 });

Note: I have no idea if this works. I didn't test this. It might just be using mixins just to use them. This could be a complete hack with no value at all.

0 Kudos