CODEWITHSUNDEEP
javascriptphpajaxcross-platform
user13955
user13955

Reputation: 870

Javascript: how to best deal with platform specific settings

I'm working on porting an application between different PHP-based CMSs (Wordpress, Joomla, etc.). I have defined some classes which allow my code to run unmodified on each of these platforms (this part is working well). One part which is giving me problems is the fact that some javascript differences between these platforms exist; for example, the URL to call for an ajax request is different for each platform.

Question: what is the best way to deal with such platform differences on the Javascript level, especially in light of the fact that Javascript does not know which CMS platform it's running on? I could just create a different version of my ajax.js for each platform, but this would result in unnecessary code duplication which would make future development & maintenance more difficult, especially since only about 20 instances of the ajax URL would change.

So: is there a way to load a platform specific JS file which, for example, defines the Ajax URL and have that variable persist to my main ajax.js file? This would solve my issue but I'm not sure if this is possible in JS. Are there any other good options to parametrize such issues so that situations like this can be handled elegantly?

Upvotes: 0

Views: 272

Answers (2)

broofa
broofa

Reputation: 38122

I typically handle this by using an adapter object of some sort. I.e. define an interface that your cross-platform code can call into, and then inject platform-specific implementations of that interface. So, for example ...

<script src="adapter.php"></script>
<script src="app.js"></script>

Where app.js is the JS code shared across all applications. To give a brief example, it might be something like:

var App = {
  checkin: function() {
    Adapter.send('GET', Adapter.CHECKIN_URL + '?user=' + user)
  }
}

Meanwhile the adapter.php (or adapter.py or adapter.rb or whatever server-side code you want to run) endpoint is server-side code that decides what platform-specific state to send back. For example you could have it redirect to one or the other of these scripts:

Adapter-New.js:

var Adapter = {
  CHECKIN_URL: '/rest/checkin',

  send: function(method, url) {
    // Maybe we have jquery available in this case
    $.ajax({type: method, url: url});
  }
}

Adapter-Old.js:

var Adapter = {
  CHECKIN_URL: '/old_api_checkin',

  send: function(method, url) {
    // And pretend there's no jquery in this case
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.send();
  }
}

(This is obviously a much contrived and over-simplified version of things, but hopefully it gives you the general idea.)

Upvotes: 1

Jacob Mulquin
Jacob Mulquin

Reputation: 3608

Hmm if I were on this project I would include code in the wrapper class that acts as a dynamic JS file which is included before the main ajax.js page. This file would include variable declarations that are associated with the necessary URLs, etc.

I would imagine it could get pretty messy if more than simple variable substitution is needed.

Upvotes: 0

Related Questions