StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POProtecting a Global Javascript "API" Object
text
Body
copied!<p>I currently have a Web Application that runs off a global Javascript-based API, and it is initialized like this:</p> <pre><code>var Api = { someVar: "test", someFunction: function() { return "foo"; } } </code></pre> <p>This API is shared across many "Widgets" that live in the Web Application, and they should all run off this single <code>Api</code> instance so they can pass data to each other.</p> <p>AJAX is currently used to load these Widgets, for example in widgets/mywidget.html, and it's placed in, say, <code><div id='widget_<random number>'>...</div></code></p> <p>Certain other parts of the code may choose to add more functionality to <code>Api</code>, and it's currently done like this:</p> <pre><code>Api.myExtension = { myNewFunction: function() { return "bar"; } } </code></pre> <p>However, some issues arise from this kind of usage:</p> <p><strong>Problem One:</strong> What if one Widget (these may be provided by third-parties) decides to hide some code within, and does something similar to <code>Api = {}</code>, destroying the global <code>Api</code> var everything lives on, and breaking the whole Application? Is it possible to protect this <code>Api</code> variable from being overwritten from outside? Only "extending" is allowed (adding new things), but "removing/changing" is not allowed. i.e.:</p> <pre><code>Api.foo = { test: "bar" } // allowed Api.someVar = "changing the existing someVar"; // not allowed </code></pre> <p>The following code is located "inside" <code>Api</code>, for example:</p> <pre><code>var Api = { Debug: { Messages = new Array, Write: function() { Api.Debug.Messages.push("test"); // allowed } } } Api.Debug.Messages.push("test 2"); // not allowed </code></pre> <p><strong>Probable Solutions I've Thought Of:</strong></p> <ol> <li><p>Suppose we simply use frames to resolve this issue. The <code>Api</code>s provided are now separate from each other. However, there's additional overhead when loading <code>Api</code> again and again if I have many <code>Widget</code>s running, and they can no longer communicate with the "Host" of the widgets (the page where frames reside in), for example, I may want to tell the host to show a notification: <code>Api.Notify.Show("Test")</code>, but it cannot do so because this <code>Api</code> is completely independent from other instances, and it cannot communicate with the "Host"</p></li> <li><p>Using something like a "getter" and "setter" function for the Api to be read and written. I'm unsure on how to implement this, so any help on directions on how to implement this is welcome!</p></li> <li><p>A mixture of 1/2?</p></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload