0

Goal:

  1. Create object/methods to run the following in a closure/namespace:
  2. Collect data from a form.
  3. Exchange data with the server.
  4. Pass data received from server AND code from #1 to new objects/methods loaded after success of #3.

I thought that es6 classes might be perfect but ran into some issues, for example:

class A {
  constructor(){
    this.myVar = 'foo';
  }

  dataXchange(data) {
    //send to server
    //set response:
    this.myVar = 'bar'; //serverData
    $(el).load(html); // this page includes script with class B
  }

  otherMethod () {}
}
//////////////////////
class B extends A {
  constructor(myVar, otherMethod) {
    super(myVar, otherMethod);
    this.newVar = myVar;
  }

  // Do more stuff here or use otherMethod
}

The obvious problem is instanceOfB.newVar === 'foo' not bar.

I have read quite a bit on this and cannot seem to make clear sense of how to best achieve the objective. I am 2 years slowly self taught so any help would be appreciated.

KyleM
  • 618
  • 5
  • 17
  • 1
    What do you mean by "*as-hidden-as-possible*"? Hidden from whom? – Bergi Dec 14 '17 at 00:58
  • Why do you need to use two different properties (`.myVar` and `.newVar`) at all? And why do you use subclassing? – Bergi Dec 14 '17 at 00:59
  • @Bergi that was simply a poor example iheritance is fine ... subclassing was the thought because the second set of code will not load to page until after server exchange... this is a must by hidden I mean from the user as in like closure – KyleM Dec 14 '17 at 01:00
  • 1
    What do you mean by "hidden from the user"? After all, it runs in the user's browsers, so you cannot hide anything there. – Bergi Dec 14 '17 at 01:34
  • If the second part of code only loads with the data exchange, it should not use subclassing at all. It only would need to access the already existing instance (on which `dataXchange` was called in the first place) and be done with it. Tbh, I still have no clue what your [actual problem](https://meta.stackexchange.com/q/66377) is? – Bergi Dec 14 '17 at 01:36
  • Ok ill remove the hidden from user part, I meant keeping it out of global namespace. My issue is how to pass 'bar' which is data returned from server (xhr/websocket/whatever) to the newly loaded js and use it as needed, as well as be able to use 'foo' there too. – KyleM Dec 14 '17 at 02:27
  • Basically namespace the first code but then add to it and manipulate it later after user interaction – KyleM Dec 14 '17 at 02:29
  • 1
    @KyleM Classes are almost *never* the right tool to start with in JavaScript, so a big part of your problem is just trying to use classes before you've tried other techniques. I'm not 100% sure what you're trying to achieve, but we can find a much simpler technique. Secondly, It seems like you're using jQuery, which hasn't been necessary in any of my projects in years. My guess is that you just need to have a simple module with a data structure that you pass to page B after you `fetch` some info for it. Can you post a simpler example of what data you start with and what pag3e B needs? – james_womack Dec 14 '17 at 02:45
  • That is the simplified code. I do not have the liberty to share the actual. Your module explanation seems correct, can you expand on that? I am looking for a modern and correct way to achieve this https://stackoverflow.com/a/5947280/747761 – KyleM Dec 14 '17 at 02:49

0 Answers0