Is my design going overboard with dependency injection while constructing loosely connected JavaScript modules?

I am in the process of developing a section of my website that will utilize a moderate amount of JavaScript, and I am striving to write it in the most efficient way possible. I am transitioning from a mindset rooted in JS 2010 to one more aligned with 2016.

At this stage, there is no need for a framework like Angular 2. Therefore, I have opted for Webpack and Typescript 1.8 with ES2015+.

On the server-side, I am working with ASP.NET MVC 5, and my approach here mirrors the way I construct apps on the server: heavily relying on Dependency Injection.

Applying a similar philosophy to the client side led me to create the following structure:

    export class Match {
    // properties and methods defined here 
}

All the selectors are included in the class through injection. This methodology results in a loosely coupled design (aside from JQuery), but I am unsure if this level of separation is excessive.

Answer №1

When it comes to the client-side, I am unsure if I am going too far with this particular class.

In my personal opinion, this seems like overkill. It almost feels like a case of polyglot programming taken to an extreme.

Instead, I believe it would be more beneficial to focus on separating as much logic as possible from the UI, and keeping the UI purely reflective of the data state.

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

Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

Is it possible to change the text case of Button text inside Material UI Button to sentence case with CSS? https://mui.com/components/buttons/ The text inside the button - ADD FRIEND should be transformed to sentence case as Add friend. I attempted to o ...

How can I prevent links from being deleted in a UML state diagram using Jointjs?

My UML state diagram created with jointjs features interconnected states linked through lines. When the links are hovered over, a cross symbol appears, allowing users to delete the link by clicking on it. I am looking to prevent the cross symbol from sho ...

Keep going in the for await loop in NodeJS

My code snippet looks like this: for await (const ele of offCycles) { if ((await MlQueueModel.find({ uuid: ele.uuid })).length !== 0) { continue; } <do something> } I'm curious if it's possible to use a continue st ...

Transformation of Array of Objects to Array of Values using Node.js

I am looking to transform the following: [{ prop1: '100', prop2: false, prop3: null, prop4: 'abc' }, { prop1: '102', prop2: false, prop3: null, prop4: 'def' } ] into this format: [[100,false,null,'abc&ap ...

Ways to adjust your selection to the space or new line before or after

$('button').on('click', function(){ const selection = window.getSelection(); selection?.modify('move', 'backward', 'word'); selection?.modify('extend', 'forward', 'to the next space ...

form for submitting multiple data via Ajax

I am working with two forms (request and feedback) where I need to use jQuery Ajax to send the data. When a user submits a request, the subject line will display "Request". If they submit feedback, the subject line will display "Feedback". Here is my cur ...

The error message "Access-Control-Allow-Origin header is missing on the requested resource" is still appearing despite having the correct CORS middleware set up

I am encountering the error message "No 'Access-Control-Allow-Origin' header is present on the requested resource" despite having implemented the necessary middleware in my express server. Here is the code snippet of the middleware placed before ...

Utilizing a variable to pass props to a component (instead of a static component) within React Router 5

In react-router 5, you can pass props to a child component in this way: <Route path="/" exact render={ props => <MyPage title={myTitle} dataPath={myDataPath} {...props} />} /> However, I am using a route model in my ...

Retrieving data from a database using a Symfony2 controller in JavaScript

I have been trying to retrieve a list of categories from my database and store it in my JavaScript code for future use. However, I have run into issues with this task as the list appears empty after being returned to JavaScript. Below is the code for my S ...

Ways to determine the total number of npm packages installed, excluding development dependencies

Is there a specific NPM command I can run from the CLI to count only the installed NPM Modules in my package that are not Dev Dependencies? When I use npm ls, it lists all packages without distinguishing between regular dependencies and DevDependencies. ...

Error encountered during installation of Webpack and webpack-dev-server

I'm currently working on setting up Webpack and Babel for utilizing React without Create React App (CRA). While trying to install webpack-dev-server, I encountered some dependency issues. PS C:\Users\Lebedev\Desktop\projects\ ...

The role of callback functions in TypeScript

As I embark on my journey with Angular 2 and TypeScript, one concept that has me a bit puzzled is how to implement callback functions. I understand that this might be a basic question, but when I look at this typical JavaScript code: someOnject.doSomethin ...

How to troubleshoot Props not functioning in nextjs-typescript?

I'm having trouble with props in my project and I can't seem to figure it out! Here are the three files. I'm still learning typescript but everything seems fine in the code, yet it's not working! Here is index.tsx file: const Home: ...

How to retrieve the current event handler's value with jQuery

To assign an onclick event handler using jQuery, I simply use the following code: $('#id').click(function(){ console.log('click!'); }); Now, my question is how can I retrieve a reference to the function that is currently handling th ...

Executing jQuery script on dynamically loaded content

My website utilizes AJAX requests to load pages dynamically. One specific page includes a marquee script that I would like to implement. Unfortunately, due to the dynamic loading of the page, the marquee script is not functioning as expected. I have come ...

What is the proper method for typing unidentified exports that are to be used in TypeScript through named imports?

Currently, I am developing an NPM package that takes the process.env, transforms it, and then exports the transformed environment for easier usage. The module is structured like this: const transformedEnv = transform(process.env) module.exports = transf ...

Issues with resetting AngularJS form---"The AngularJS form

I have been putting in a lot of effort to make this work. Despite my knowledge about child scopes, prototypal inheritance, and the use of dot notation for the model, I am facing an issue with resetting the form. You can access the hosted form here. The rel ...

Stop images from constantly refreshing upon each change of state - React

Within my component, I have incorporated an image in the following way: <div className="margin-10 flex-row-center"> <span> <img src={spinner} className="spinner" /> ...

Executing a jQuery post request without utilizing AJAX or a form

Is there a method in jquery to perform a post submission without using a form? For example, can I utilize the function $.post("script.php",{var1:"abc", var2: "cde"}) in a way that rather than running in the background, it will actually submit the values ...

Exploring the capabilities of Angular 2 and delving into inquiries regarding IIS

I'm diving into the world of Angular 2 as a beginner. Previously, I used to include JavaScript (like jQuery.js) in my HTML and then upload the finished page to my IIS website. Now that I'm learning Angular 2, I've had to install Node.js, NP ...