Enhance the functionality of function() by incorporating another function from a different external file

Question

Enhance the functionality of function() by incorporating another function from a different external file

I find myself in a situation where I need to create a web client interface that can interact with different types of hardware. The interface has a core component, and additional features depending on the hardware connected (specifically, the login() process varies per device).

As a C++ developer stepping into the realm of JavaScript extensions for this project, I must admit, I feel quite overwhelmed.

Here is the scenario I crafted for testing purposes:

Source1.js (considered as the universal base interface across all hardware):

function Login() {
    this.type = 'login';
    m_username = 'admin';
    m_password = 'admin';
}

function Constructor() {
    var mClass = new Login();
    this.clicked = function() {
        mClass.clicked();
    }

    this.getLogin = function() {
        return mClass;
    }
}

g_constructor = new Constructor();

Source2.js (contains the custom implementation of Login().clicked()):

function Login() {
    this.clicked = function() {
        document.getElementById("TextHere").innerHTML = m_username + ":" + m_password;
    }
}

The HTML File used for testing:

<html lang="en">
    <head>
        <title>JavaScript Test</title>
        <meta charset="utf-8" />
        <script src="source1.js"> </script>
        <script src="source2.js"> </script>
    </head>
    <body>
        <button onClick="g_constructor.clicked()">Test</button>
        <p>&nbsp;</p>
        <div id="TextHere">Text</div>
    </body>
</html>

In my usual domain of C++, I typically rely on virtual base classes for such implementations. However, when it comes to JavaScript, I am at a loss. Can someone point me in the right direction on how to achieve a similar structure? Specifically, ensuring that every object of Login() type possesses the clicked() function as defined in Source2.js.

javascript

Answer 1

Answer №1

In the realm of JavaScript, things operate slightly differently. Objects are crafted with a prototype object. By defining methods on the prototype object, you can then override them with an actual implementation.

When defining methods on the prototype, it is essential not to define them as a property of this.

// This snippet could be part of source file 1
function Login() {
    this.type = 'login';
    this.m_username = 'admin';
    this.m_password = 'admin';
}

function Constructor() {}

Constructor.prototype = new Login();
Constructor.prototype.clicked = function () {
    alert('You should implement the "clicked" method');
};

var g_constructor = new Constructor();

// This snippet could be part of source file 2 

Constructor.prototype.clicked = function () {
    document.getElementById("TextHere").innerHTML = this.m_username + ":" + this.m_password;
}

<button onClick="g_constructor.clicked()">Test</button>
<p>&nbsp;</p>
<div id="TextHere">Text</div>

You may have observed that m_username is designated as a property of this, otherwise it won't be accessible later on: in JavaScript, a plain variable (when appropriately defined with the var keyword) is only reachable within the function's scope where it was defined.

With the more modern ES6 syntax (utilizing class and extends), the code could appear like this:

// This snippet could be part of source file 1
class Login {
    constructor() {
        this.type = 'login';
        this.m_username = 'admin';
        this.m_password = 'admin';
    }
}

class Constructor extends Login {
    clicked () {
        alert('You should implement the "clicked" method');
    }
}

var g_constructor = new Constructor();

// This snippet could be part of source file 2 

Constructor.prototype.clicked = function () {
    document.getElementById("TextHere").innerHTML = this.m_username + ":" + this.m_password;
}

<button onClick="g_constructor.clicked()">Test</button>
<p>&nbsp;</p>
<div id="TextHere">Text</div>

Note: The getLogin method is not actually necessary, as the g_constructor object already encompasses all the attributes of Login.

Answer 2

In the realm of JavaScript, things operate slightly differently. Objects are crafted with a prototype object. By defining methods on the prototype object, you can then override them with an actual implementation.

When defining methods on the prototype, it is essential not to define them as a property of this.

// This snippet could be part of source file 1
function Login() {
    this.type = 'login';
    this.m_username = 'admin';
    this.m_password = 'admin';
}

function Constructor() {}

Constructor.prototype = new Login();
Constructor.prototype.clicked = function () {
    alert('You should implement the "clicked" method');
};

var g_constructor = new Constructor();

// This snippet could be part of source file 2 

Constructor.prototype.clicked = function () {
    document.getElementById("TextHere").innerHTML = this.m_username + ":" + this.m_password;
}

<button onClick="g_constructor.clicked()">Test</button>
<p>&nbsp;</p>
<div id="TextHere">Text</div>

You may have observed that m_username is designated as a property of this, otherwise it won't be accessible later on: in JavaScript, a plain variable (when appropriately defined with the var keyword) is only reachable within the function's scope where it was defined.

With the more modern ES6 syntax (utilizing class and extends), the code could appear like this:

// This snippet could be part of source file 1
class Login {
    constructor() {
        this.type = 'login';
        this.m_username = 'admin';
        this.m_password = 'admin';
    }
}

class Constructor extends Login {
    clicked () {
        alert('You should implement the "clicked" method');
    }
}

var g_constructor = new Constructor();

// This snippet could be part of source file 2 

Constructor.prototype.clicked = function () {
    document.getElementById("TextHere").innerHTML = this.m_username + ":" + this.m_password;
}

<button onClick="g_constructor.clicked()">Test</button>
<p>&nbsp;</p>
<div id="TextHere">Text</div>

Note: The getLogin method is not actually necessary, as the g_constructor object already encompasses all the attributes of Login.

Answer 3

Answer №2

When comparing JavaScript to C++, it is important to note that JavaScript does not utilize the virtual function concept. Instead, you can achieve similar functionality by using composition. Methods can be added to an object in the following manner:

function A() {
 this.virtualFunction();
  }

A.prototype.virtualFunction = function() {
     alert('A');
   };
 //-------------------------------------

function B() {
      A.call(this);
 }

 B.prototype = Object.create(A.prototype);
 B.prototype.constructor = B;
 B.prototype.virtualFunction = function() {
      alert('B');
  };

  var b = new B();

It should be noted that this example was sourced from another website.

Answer 4

When comparing JavaScript to C++, it is important to note that JavaScript does not utilize the virtual function concept. Instead, you can achieve similar functionality by using composition. Methods can be added to an object in the following manner:

function A() {
 this.virtualFunction();
  }

A.prototype.virtualFunction = function() {
     alert('A');
   };
 //-------------------------------------

function B() {
      A.call(this);
 }

 B.prototype = Object.create(A.prototype);
 B.prototype.constructor = B;
 B.prototype.virtualFunction = function() {
      alert('B');
  };

  var b = new B();

It should be noted that this example was sourced from another website.

Answer 5

Answer №3

Initially, it may not be the best approach to split JavaScript functionality across multiple files. However, if you do wish to do so, one way is to modify the prototype of an existing class like Login and verify its existence before calling a method:

source1.js:

function Login() {
    this.type = "login";
    this._username = "admin";
    this._password = "admin";
}

function Constructor() {
    var mClass = new Login();

    this.clicked = function() {
        if (Object.getPrototypeOf(mClass).hasOwnProperty("clicked"))
            mClass.clicked();
        else
            console.log("Unable to click :(");
    }

    this.getLogin = function() {
        return mClass;
    }
}

g_constructor = new Constructor();

source2.js:

Login.prototype.clicked = function() {
    document.getElementById("TextHere").innerHTML = this._username + ":" + this._password;
}

If you prefer not to check for the method's existence, you can simply add an empty function in your Login.clicked:

var virtualMethod = function() { console.log("Implementation missing!"); }

function Login() {
    this.type = "login";
    this._username = "admin";
    this._password = "admin";

    this.clicked = virtualMethod;
}

Then you can update it in the second file.

Answer 6

Initially, it may not be the best approach to split JavaScript functionality across multiple files. However, if you do wish to do so, one way is to modify the prototype of an existing class like Login and verify its existence before calling a method:

source1.js:

function Login() {
    this.type = "login";
    this._username = "admin";
    this._password = "admin";
}

function Constructor() {
    var mClass = new Login();

    this.clicked = function() {
        if (Object.getPrototypeOf(mClass).hasOwnProperty("clicked"))
            mClass.clicked();
        else
            console.log("Unable to click :(");
    }

    this.getLogin = function() {
        return mClass;
    }
}

g_constructor = new Constructor();

source2.js:

Login.prototype.clicked = function() {
    document.getElementById("TextHere").innerHTML = this._username + ":" + this._password;
}

If you prefer not to check for the method's existence, you can simply add an empty function in your Login.clicked:

var virtualMethod = function() { console.log("Implementation missing!"); }

function Login() {
    this.type = "login";
    this._username = "admin";
    this._password = "admin";

    this.clicked = virtualMethod;
}

Then you can update it in the second file.

Enhance the functionality of function() by incorporating another function from a different external file

Answer №1

Answer №2

Answer №3

Similar questions

connecting with Google Analytics

Engaging in payment processing

In Laravel, Inertia.js will automatically close a modal if there are no validation errors present

Having difficulty in closing Sticky Notes with JavaScript

JavaScript multiline variable declaration

Indeed, verifying parent.parent access

React-Redux Error: The function this.props.AppendCharacter is not defined

configure dynamic content within the slider element

Struggling to send API POST request using Next.js

What is the best way to access the methods in the "parent" class?

How can I achieve the quickest image loading speed with JavaScript?

Transform basic text into nested JSON structure with JavaScript

The hamburger menu for mobile devices is not functioning properly on the website's mobile version, however it operates correctly when the screen is resized

How can I insert an array of string elements into a template element's value attribute in Angular 2?

Is it possible for WebSockets to serve as a substitute for AJAX for handling Database requests?

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

My extension seems to be missing the content script I uploaded

Guide on creating Jasmine tests for $resource in AngularJS

Encountering a problem when using the routingService to navigate inside a JavaScript function

Troubleshooting issue with parsing MySQL data in HTML table using Node.js