How to create data structure in JavaScript?

Question

I am a C# developer that is trying to get his hands on JavaScript as well.

For a data handling program, I want to create a data structure like:

id,
begin,
end,
organiser,
    name,
    city,
    postalcode,
    street,
venue,
    name,
    city,
    postalcode,
    street

Coming from C#, I would create a "class" (gig.js) for the main structure:

function Gig(gig)
{
  this.id = gig.id;
  this.begin = gig.begin;
  this.end = gig.end;
  this.organiser = gig.organiser;
  this.venue = gig.venue;
}

and a "class" (address.js) for organiser and venue:

function Address(a)
{
  this.name = a.name;
  this.city = a.city;
  this.postalcode = a.postalcode;
  this.street = a.street;
}

As I need to refer to the Address-class in the Gig-class, I wanted to reference the address-class in the main class, like

include address.js

I have searched through the web and to my huge surprise, there seems to be no include mechanism at all. HTML5 introduced a way to include JavaScript in another JavaScript, but is seems like no browser is supporting this so far I red some possible solutions here but they all look like hacks for a (from what I expected) simple one line code.

So, how do you do using another JavaScript-File nowadays? Do I need to use an other architectural approach for this? Do I simply include them in the calling html and when I write the code for the main class, I simply hope, that the address class was loaded as well?

Thanks in advance,
Frank

I'm not quite sure what you're asking. Why would the address class not be loaded if you've included it in the HTML? — JJJ, Jun 30 '15 at 13:34
_"For a data handling program, I want to create a data structure like:"_ Would resulting object include properties, values of both `Gig`, `Address` ? — guest271314, Jun 30 '15 at 13:35
@Juhana: As the include is needed by the gig.js, I would count i t as really bad architecture to have the reference in another file. I need the reference in the gig.js, so I would want to put the reference in the gig.js, right? — Aaginor, Jun 30 '15 at 14:15
@guest271314: The Address structure would be used for two properties of the Gig structure, so the resulting structure would include properties of both. — Aaginor, Jun 30 '15 at 14:16
Well, no. Web programming has different conventions for things like this so you can't directly apply C# conventions here. Including all necessary scripts with ` — JJJ, Jun 30 '15 at 14:20
Also, JS doesn't have similar scopes and namespacing as C# so in practice it doesn't make any difference where the script files are included. Including the structure file only where it's needed won't prevent it from polluting the global namespace. — JJJ, Jun 30 '15 at 14:22
I am very much aware that web programming is quite different from programming language like C#. This is why I am here. I mentioned it to show where I come from. I tried to include both scripts in the HTML, but: var test = new Address({...}); in the Gig.js brings a ReferenceError: Address is not defined — Aaginor, Jul 01 '15 at 15:02

bebbi · Answer 1 · 2015-06-30T14:59:29.200

Simple approach: embed the classes in HTML:

<script src="path/to/address.js"></script>
<script src="path/to/gig.js"></script>
<script>
    // address is loaded before gig (sync loading), and now can use both
</script>

for more complex dependencies: A common way to approach it is bundling your modules using browserify

Edit: Since latter seems to be what you're looking for, here's an example:

src/gig.js:

// require dependencies
// one of your source files
var Address = require('./src/address');
// npm package dependency as installed by npm i someLib --save-dev
var someLib = require('someLib');

var Gig = function() {
    this.address = new Address();
}
// provide dependency
export.Gig = Gig;

main.js:

var exampleStuff = require('src/Gig');
go();

You install browserify and additional modules via npm, then bundle:

browserify main.js -o dist.js

then include dist.js in your html <script> tag

Thanks for the Example! I came a view times across npm, so it looks like I should try to get familiar with it. For now, I try out AngularJS and see how far I come with it. — Aaginor, Jul 15 '15 at 09:11

score 1 · Accepted Answer · answered Jun 30 '15 at 15:23

1

Use RequireJS. Requirejs is a library that provides a nice interface for handling dependencies. There is a nice tutorial for it here. Other than that, you are right that there is currently no implemented way to enforce dependencies in JS, other than to hope that whoever is using your JS file has added the right source elements in the html. This is why JavaScript libraries are commonly condensed to one file.

answered Jun 30 '15 at 15:23

William Oliver

1,412
4
24
35

Thanks for the information! I started to use AngularJS and just trying to get used to it. If that isn't sufficient to create data structures, I'll check out RequireJS. Meanwhile, I hope the browser will implement the #include statement :) – Aaginor Jul 15 '15 at 09:07

How to create data structure in JavaScript?

2 Answers2