Efficiently Managing and Recording Complex JavaScript Projects Across Multiple Files

Embarking on a sizable JavaScript project, I've decided to organize everything within one or more namespaces to limit the use of global scope. Currently, only one element exists in the global scope.

To maintain organization, I prefer keeping each class in its own file rather than using "modules," akin to other programming languages.

I developed a compilation script using NodeJS to merge all the files into a single JavaScript file by the end of the day.

Although I had what I thought was a solid method, I'm encountering difficulties with getting JSDoc(3) to cooperate. This makes me question if my approach is incorrect or if there's a particular trick regarding JSDoc that I might be overlooking.

In the source code, each namespace corresponds to a folder, and each class has a file with an identical name.

The structure of each class file resembles this:

var BaseNS = BaseNS || {};
BaseNS.SubNS = BaseNS.SubNS || {};

BaseNS.SubNS.MyClass = (function() {
    function MyClass() {
    }

    Object.defineProperties(MyClass.prototype, {
       'someProp', { 
            getter: function() { return this._someProp = this._someProp || 0; },
            setter: function(val) { this._someProp = val; }
       }
       // ... more
    });

    MyClass.prototype.someMethod = function() {};
    // ... more

    return MyClass;
}}());

When compiled together, the script manages dependencies to arrange classes in the correct order while removing redundant namespace declarations.

This method seems clean and straightforward, but writing JSDoc documentation poses a challenge in achieving the desired results.

My intention is to implement a "class-like" structure for this application, which operates largely independent of the DOM. Additionally, I aim to develop the entire project in vanilla, modern JavaScript without utilizing tools like RequireJS.

Any suggestions on how to document this effectively or improve the organization?

Thank you.

Answer №1

After experimenting for about four hours yesterday, I believe I have discovered the optimal structure that balances efficiency with minimal comments for proper parsing.

"use strict";

/** @namespace */
var NS = NS || {};

/** @namespace */
NS.Sub = NS.Sub || {};

/**
 * @class
 */
NS.Sub.SomeClass = (function(NS) {
    /**
     * @constructor
     * @lends NS.Sub.SomeClass
     */
    var SomeClass = function() {
        /** @method */
        this.someFunc = function(cookie) {

        };

        Object.defineProperties(this, /** @lends NS.Sub.SomeClass */ {
            /**
             * @type {number}
             * @instance
             */
            somePublicProp: {
                getter: function() { return this._somePublicProp || 24; },
                setter: function(val) { this._somePublicProp = val; }
            }
        });
    };

    return SomeClass;
})(NS);

If anyone has suggestions on improving this further, I would appreciate hearing them. Specifically, I am struggling to eliminate the need for

var SomeClass; ... return SomeClass
. I would prefer to directly return it (ideally without a name), but then JSDoc loses track of my method, requiring more comments, which is not ideal.

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

Verifying every checkbox is taking a significant amount of time in the gridview

I've encountered an issue while trying to check all checkboxes within a gridview that contains approximately 2000 to 2500 records. The process takes a significant amount of time and in some cases, the page becomes unresponsive when attempting to click ...

What is the ideal destination for my Ajax request to be sent?

When utilizing jQuery, in the event of sending an Ajax request you must provide the URL to direct towards. For instance: $.get("someurl", function(data) { console.log(data); }); The query at hand is: should the URL indicate a page on the server, trea ...

The click event will not be activated by the class

http://jsfiddle.net/yTkTd/ I have another function that works perfectly, but this particular one is causing me some issues. There are no console errors or anything, it just doesn't seem to trigger. UPDATE: PLEASE REFER TO THE NEW JSFIDDLE EXAMPLE ht ...

What could be causing the abundance of API calls from Yandex Metrica?

In my Nextjs SPA, there is an iframe widget that is rendered using React. Inside this widget's index.html file, I have inserted the Yandex Metrica script and set up a goal tag to track user clicks on the registration button. The goal tracking is wor ...

Pressing the enter key to input password

I have searched through various resources for an answer to my problem, but none of them seem to address it in a way that helps. As a beginner in coding, I may need some extra guidance. Currently, I am only able to submit a password by clicking with the mo ...

ES6: Using DataURI to provide input results in undefined output

In my current project, I am facing a challenge. I am attempting to pass image dataURI as an input from a url link to the image. To achieve this task, I know that I have to utilize canvas and convert it from there. However, since this process involves an &a ...

Easy way to eliminate empty elements following a class using jQuery

I'm encountering a situation where I have a group of elements following a specific class that are either empty or contain only white space. <div class="post-content"> <div class="slider-1-smart"> --- slider contents --- < ...

The node-transmission package seems to be malfunctioning

Recently, I attempted to install a package from this GitHub repository: https://github.com/FLYBYME/node-transmission on my local Node.js setup. However, upon running the example.js file provided in the repository, I encountered the following error: Error: ...

The jQuery script fails to function properly within dynamically loaded content via ajax

After browsing through various articles and seeking help from Google, I've managed to do some basic coding as a designer. However, there's a complex problem that I'm struggling with. On my main page, I have news displayed and when scrolling ...

Perform a POST request in JavaScript and handle the response in PHP

Currently, I am in the process of gathering data through a form and executing this JavaScript: fetch('process.php', { method: 'POST', body: formData, }).then(response => alert( response ) ); The execution of process.php hap ...

Issue encountered: "An error has occurred stating that your cache folder contains files owned by root. This is likely a result of a bug present in older versions of npm. This issue arose during the execution of the

While attempting to create a new react app using the command npx create-react-app example_app, I encountered the following issue: [ Your cache folder contains root-owned files, due to a bug in previous versions of npm which has since been addressed sudo ...

Clicking in Javascript can hide the scroll and smoothly take you to the top of the page

For my website, I found this useful tool: It's been working great for me, but one issue I've encountered is that when I click on a picture using the tool, its opacity changes to 0 but the link remains in the same spot. I'm trying to figure ...

Tips for retaining a number even when the page is refreshed

Is there a way to keep the number increasing even after refreshing the webpage? Currently, the number resets every time the page is refreshed. Any suggestions on how to fix this? Here is the number <form method="POST"> &l ...

Hiding labels using JQuery cannot be concealed

Why isn't this working? -_- The alert is showing, but nothing else happens. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeaderContent"> <script type="text/javascript"> if (navigator.userA ...

JavaScript - Node.js Error: Unable to modify headers once they have been sent

I am currently encountering some challenges with my Node.js setup. My objective is to utilize the newsapi.org API to retrieve the latest top headline news. However, when I navigate to 'http://localhost:8082/news/api/tech-crunch', it directs me t ...

The Node.js Express server seems to be having trouble accessing static files

After successfully starting the express server, I encountered an issue when trying to load static files which resulted in an error message reading "Cannot GET /URL". The static files are located within a folder named "Login" and both the app.js and "Logi ...

Unexpected interactions between Socket.io and React using hooks

Currently, I am delving into the world of Socket.io with React utilizing Hooks. My goal is to create a timer that starts upon pressing the start button, and then every second, send the current time in the state to the server using socket.io. The server co ...

Leveraging configuration files for HTML pages without any server-side code

I am currently working on developing an app using phonegap. At the moment, I have the reference to a script in every page like this: <script language="javascript" src="http://someServer/js/myscript.js"></script> If the server 'someServer ...

What are the steps for creating personalized sliders with WordPress?

Seeking guidance on how to code WP Template files to enable control from the WP dashboard for adding or removing slider images. A sample code snippet is provided below. <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indi ...

"Converting an image in Byte[] format to a Base64 string in JavaScript: A step-by-step

Can anyone help me figure out how to convert an image from an SQL database into a Base64 string? The image is currently in the format {byte[6317]}. ...