How do I split my web applications?

[clark]

So generally speaking you have projects.  Lets say you have some phaser games like `football` and `shooter`

 

You also have other systems which are wider in scope.  Say `Leaderboard` or `AdSystem`. 

 

What is the modern way of dealing with this? Right now I am trying an IFrame.  So essentially  `Leaderboard` is just a webpage, and `shooter` will load `Leaderboard` into an Iframe.  This sucks for a lot of reasons though. I know it is not the best way. 

 

It is like, `Leaderboard` does not want to be a web page.  It wants to just be a javascript API and hence the confusion. 

 

I am somewhat aware of Modular JS, but I have not went fully external. I know it would involve a lot of refactoring on my side which I am happy to do but I am not sure going in that direction will solve my problem? 

I want to say "new Leaderboard" when I need it rather than use a Script tag to load in leaderboard incase I happen to need it..... Not least because then index.html pages become a pain to maintain. 

Any ideas here? 

 

Thanks for reading! 

[magallanes]

You can use Ajax.

 

With JQuery and a couple of lines + a div you can replace your iframe.

 

http://api.jquery.com/load/

[seeker]

i think you need to build separate modules. with Javascript you can start doing separate classes/functions.

[jfhs]

If you want to use something like:

var leaderBoard = new LeaderBoard(containerElement, "/my-leader-board-content/");

You have to create a "class" that abstracts away the details of requesting the leaderboard data:

// This example assumes you are using jQuery for the AJAX request, but you// can use any other library for this or even roll your own with XMLHttpRequest.function LeaderBoard (parent, url) {        // Create an element to contain the leaderboard:    this._container = document.createElement("div");        // Add it to the parent element:    parent.appendChild(this._container);        // Fetch the leaderboard data:    $.ajax({url: url}).done(this.update.bind(this));}LeaderBoard.prototype.update = function (data) {        // If your URL returns some HTML:    this._container.innerHTML = data;};

In this example, the URL should not deliver a full HTML page. Instead it would give just the HTML for the leader board, without any HTML header and stuff like that. This also assumes you get the leader board content from your own server.

 

I'm not sure this is what you want, but your question is much too vague to answer with any certainty. It all depends on where you get the data from and in what form. It would also help to know how you organize your code... Mind-reading is not my speciality.