ECMA6 OOP With Classes, Extend a New Feature

About: Nowadays attempting creating small apps to dive into the world of programming and Software Development

The next instructable is building on the last 2 and it's still the same app for which we add a new feature.

We will measure the time in H:M:S:MS, how long it takes till the calculation is finished.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1:

Here is the edited diagram with the new module "MeasureTime".

So the huge benefit of OOP is you can extend easily the desired feature.

Step 2: New Directory, File

We create a new directory and file (bench/measuretime.js) in the projectfolder.

Step 3: Content of the MeasureTime.js

The measureTime.js is a minimalistic stopwatch that counts from 0 milliseconds, when it's started. It's synchronized with new Date().getTime() (Systemtime), so that the accuracy is by 1/1000sec.

Then it gets converted (modulo - remainder) returned as H,M,S,MS, when the watch is stopped.

Step 4: ImportScripts

The odd thing is, the worker has its own module loader (importScripts) and for the generic JS there is still no native module loader support. (using require.js)

postMessage has now 2 parameters summarized in an array.

By importing you can use the stoptimer with startBench and stopBench like showed in the pic.

Step 5: Controller File

We assign to the elapsed.innerHTML the returned time from the worker.

Step 6: Testing

When we test the app, the elapsed time should appear.

The updated app is as zip available, happy coding/testing.

Step 7:

Share

    Recommendations

    • Indoor Lighting Contest

      Indoor Lighting Contest
    • Make It Fly Challenge

      Make It Fly Challenge
    • Growing Beyond Earth Maker Contest

      Growing Beyond Earth Maker Contest

    Discussions