How to build a project in gulp+browserify so that you can create completely independent class objects at the end?

P

para_noir_in_my_box2022-03-03 12:32:54

gulp.js

para_noir_in_my_box, 2022-03-03 12:32:54

An application was developed, the output is the ability to create an object and work with it.
But here it was required to create a second object of this class on the same page, and I realized that I made a fundamental mistake during development.
Now I will describe an example.

main.js

import App from './app.js';
window.App = App;

app.js

import {increment} from './counter.js';
import {subIncrement} from './sub-counter.js';

export default class App {
    increment() {
        increment();
    }
    subIncrement() {
        subIncrement();
    }
}

counter.js

let i=0;

export function increment() {
    i++;
    console.log(i);
}

subcounter.js

import {increment} from './counter.js';

export function subIncrement() {
    increment();
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Новости</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    </head>
    <body>
        <script>
            function loadApplication() {
                let app1 = new App;
                app1.increment();
                app1.increment();
                app1.subIncrement();

                let app2 = new App;
                app2.increment();
                app2.increment();
                app2.subIncrement();
            }
        </script>
        <script
            src="./js/main.js"
            onload="loadApplication();"
        ></script>
    </body>
</html>

In the console we see

That is, the plug-in code is not closed to the instance of the class that was created, it is common to all.
And I want everything that is connected in the project to be in the context of the objects being created.

Modules like counter.js are included in a project in a lot of places. As an option, somehow drag down a certain object id from the class so that there is work inside the modules in the context of this id, but almost all modules and everyone who uses them will have to be rewritten.

I tried to figure out how to close all this inside some (function () {}) (), but I did not have the mind.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander, 2022-03-03
@Seasle

Because you work directly with only one file - counter.js. If you want a new context every time - make a mini-factory (higher-order function):

function createCounter() {
    let counter = 0;

    function increment() {
        counter++;
        console.log(counter);
    }

    function decrement() {
        counter--;
        console.log(counter);
    }

    return {
        get value() {
            return counter;
        },
        increment,
        decrement
    };
}

and in the class you already initialize them:

class App {
    constructor() {
        this.counter = createCounter();
        this.subCounter = createCounter();
    }

    increment() {
        this.counter.increment();
    }

    subIncrement() {
        this.subCounter.increment();
    }
}