"Functionality of public methods in JavaScript plugin seems to be malfunction

Recently, I made the decision to redevelop a jQuery plugin using vanilla JavaScript. However, I have encountered an issue with getting the public methods to function properly. Despite all other logic working correctly, the public methods are not responding as expected. As an example, I have included the update method below.

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory(root));
    } else if (typeof exports === 'object') {
        module.exports = factory(root);
    } else {
        root.Plug = factory(root);
    }
})(typeof global !== "undefined" ? global : this.window || this.global, function(root) {

    var _settings;

    var defaults = {
        // default values
    }


    function runPlugin(){
        alert('it works')
    }

    var Plug = function(options) {

        var Plug = {};
        var settings;

        _settings = extend(settings || defSettings, options || {});

        var init = (function() {
            //init logic
            runPlugin();
            ...
        }());

        Plug.update = function(msg){
            alert(msg)
        }
    }

    return Plug;

});


var plug = new Plug({//settings...}); //works
var plug = new Plug().update('test'); //does not work

Answer №1

Make sure to reference this instead of Plug when adding methods within the Plug function:

this.update = ...

and not

Plug.update = ....

(I had to perform some tweaks to make your code sample work)

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory(root));
    } else if (typeof exports === 'object') {
        module.exports = factory(root);
    } else {
        root.Plug = factory(root);
    }
})(typeof global !== "undefined" ? global : this.window || this.global, function(root) {

    var _settings;

    var defaults = {
        // default values
    }


    function runPlugin(){
        alert('it works')
    }

    var Plug = function(options) {

        var settings;

        _settings = Object.assign(settings || defaults, options || {});

        var init = (function() {
            //init logic
            runPlugin();
           
        }());

        this.update = function(msg){
            alert(msg)
        }
    }

    return Plug;

});


var plug = new Plug({}); //works
var plug = new Plug().update('test'); 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Minimize unnecessary rendering in React when toggling between tabs

I am currently working on a React application that utilizes material-ui to generate tabs. <div className={classes.root}> <AppBar position="static"> <Tabs value={value} onChange={handleChange}> <Tab label="Item One" /> ...

Angular: Navigating to another URL causes the page to revert back to the default route

Currently, I am working with Angular 1.3.10, ui-router 0.2.10, and Express 4.14.0 to develop a Reddit-style application, and I'm facing some issues with routing. The simplified version of my Express routes: router.get('/api/home', function ...

What is the best way to empty input, select, and textarea fields after performing a clone operation

I am currently working on creating a form to display items and need a fresh text field when the user clicks the ADD button. function addNewItem() { //ADD ROW AND CLONE var table = document.getElementById('tbl'); var tbody = document.create ...

The information is not appearing in the dropdown menu

The select tag for chapters is not displaying the result from the query properly. Instead of showing in the select tag, the chapter names are being displayed as echo statements. <!doctype html> <html> <head> <meta charset="utf-8"> ...

Have the getter functions for reactive objects in Vue 3 been transformed into computed values?

Is the memoization of bookCount in this instance handled equivalently to a computed reference? const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - ...

What could be causing Jest to prevent me from using the node testing environment, especially when they have made changes to it?

I am currently working on testing a React component within Next.js using Jest. Jest made an official announcement regarding the change of default test environment to Node: Due to this update, the default test environment has been switched from "jsd ...

Identifying edited files within the node_modules directory: A comprehensive guide

While working with the serverless framework, I installed it using npm. During my debugging process, I made some modifications by adding console.log statements to different files within the node_modules folder. Unfortunately, I can't recall which speci ...

Adding elements to an array using JavaScript

What is the correct way to add new values to an array like this? json = {"awesome":"45.22","supercool":"9876"} I attempted json.push("amazingness":"45.22");, but unfortunately it was not successful. ...

Utilizing jQuery.ajax to Send an Array of Objects to a PHP Function

In this scenario, an array of objects is represented as follows: rectangle[0].width = w; rectangle[0].height = h; rectangle[1].width = w; rectangle[2].height = h; rectangle[3].width = w; rectangle[3].height = h; ... We need to figure out how to send thi ...

Using JQuery to make POST requests is successful, however, utilizing the XMLHttpRequest object to make

Currently, I am attempting to make a POST request from Javascript to my server in PHP but without utilizing jQuery. The following code successfully sends the required data to the database: var msg = {}; msg['name'] = 'joe'; msg['m ...

Retrieve the information from a fetch call and save it for later use

Greetings to the wonderful StackOverFlow community. As a beginner in web development, I have countless questions swirling in my mind. The focal point of my query is regarding a fetch request in JavaScript. I am struggling to extract the data (userId) fr ...

Creating a unique theme export from a custom UI library with Material-UI

Currently, I am in the process of developing a unique UI library at my workplace which utilizes Material-UI. This UI library features a custom theme where I have integrated custom company colors into the palette object. While these custom colors work perfe ...

JavaScript now has Type Inference assistance

When attempting to utilize the Compiler API for processing JavaScript code and implementing Type inference to predict types of 'object' in a 'object.property' PropertyAccessExpression node, I encountered some issues. Some simple example ...

How can I delete the global styles defined in _app.js for a particular component in Next.js?

While working with NextJs and TailwindCSS, I encountered an issue where all the extra styles in my globals.css file were causing some trouble. Although it is recommended to import it at the top level in the _app, I tried moving it down to the "layout" comp ...

Unable to retrieve image: status code 402 - payment required

When trying to fetch my Facebook page's posts using the Facebook graph API and nextjs with vercel, I encountered an error: GET imageurl 402 payment required. Oddly enough, this works perfectly fine in localhost: https://i.sstatic.net/JGy2g.png I sus ...

Ajax: Failed to send POST request (404)

After adding a POST script in the manage.ejs file and console logging the data to confirm its functionality, I encountered an issue. Below is the code snippet: <script type="text/javascript"> var guildID = "<%= guild.id %>"; let data = {so ...

What is the significance of -= and += operators in JavaScript programming language?

I'm puzzled by the mathematical process behind this JavaScript code, which results in -11. let x = 2; let y = 4; console.log(x -= y += 9) ...

The Ajax request returned a status of 200, yet an error message was displayed

Even though the status is 200, why does it print the error message inside alert("error...");? function makeSelect() { var blouseoption = document.querySelector('input[name="blouseoption"]:checked').value; var url = "http://dukano.co/sakh ...

What is the process of adding new fields to a model in TypeScript?

I have created a test.model.ts file: export interface ITransaction { description: string; transactionDate: string; isDebit: boolean; amount: number; debitAmount: string; creditAmount: string; } export class Transaction implements ...

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

When displaying a person's name on a page, there are two different methods to consider. It can be extracted from the URL or retrieved from an email form in the CMS used. However, these two approaches sometimes conflict with each other. Currently, I h ...