Introduction: ECMA6 OOP With Classes, Extend a New Feature

Picture of ECMA6 OOP With Classes, Extend a New Feature

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.

Step 1:

Picture of

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

Picture of New Directory, File

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

Step 3: Content of the MeasureTime.js

Picture of 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

Picture of 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

Picture of Controller File

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

Step 6: Testing

Picture of Testing

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

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

Step 7:


About This Instructable




Bio: Nowadays attempting creating small apps to dive into the world of programming and Software Development
More by sphere360:Binary Clock in ECMA/JSHTML-Table VisualizationECMA6 OOP with classes, extend a new feature
Add instructable to: