How to design javascript

Question

I have java script file that reads in a csv file, and has many functions to to visualize the data differently, using d3. I want each visualization to be displayed in different html pages. Ive made every html page, refer to the javascript file. Each page also has its own script that calls functions from the referred javascript file.

The problem, I am facing is that when ever I go to a new page, the function gets called before the data being read. Only works when refreshing the page. I there a way to just read the data in once, and every page can access it.

If you look at the code below, callingFunction() returns undefined (maybe because data is not stored in var data?) The callingFunction() works fine when the page is refreshed.

 <!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <title>D3</title>

        **<script src="my.js"></script>** //my script file

    </head>

    <body>
        <script>
         callFunction(); //uses var data defined in my.js
        </script>

Here is the "my.js":

var data;
function data(file){d3.csv("file", function (error, data) {
            ds = data;
            callFunction();
}

You could save the data in localStorage. But why do you separate pages? Why not use a single page, and have a menu that lets the user select which format to display it in? — Barmar
– Barmar, Commented Jun 3, 2014 at 3:16
Welcome to Stack Overflow! Please read how to ask a good question and also what have you tried. — Jason Aller
– Jason Aller, Commented Jun 3, 2014 at 3:35

Abdennour TOUMI · Accepted Answer · 2014-06-03 03:26:34Z

1

load your script after the target DOM :

<canvas></canvas> ........................... <script type="text/javascript"></script>
Use angularJs Js library: it organize your js code according to MVC design pattern.
If you have more than one method to implement a business logic , Use console.time & console.timeEnd to evaluate code performance .
```
console.time('anID');
 // Here your code
console.timeEnd('anID');
```

edited Jun 3, 2014 at 3:26

answered Jun 3, 2014 at 3:19

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

redandblue Over a year ago

Can you explain more about your first suggestion. I am referring my script just before the closing <head> tag.

Collectives™ on Stack Overflow

How to design javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related