call to an independent file class with module pattern javascript (edited)

Question

call to an independent file class with module pattern javascript (edited)

182 Views Asked by jballes At 17 November 2018 at 20:20

I'm not sure I explained myself correctly. I have a generic class ussed by lots of *.js files let´s said TestClass.

class TestClass {   

constructor(a,b) {
    this.a = a || 0;
    this.b = b || 0;        
}
// methods 
suma(a,b)
 {
    return a+b;
 }  
}

What I need is to use this "classic" class from several *.js files builded using "module pattern"

//const {moduloTest} = require("scripts/testClass.js"); doesn´t work even using the answer in How do I include a JavaScript file in another JavaScript file?

//import{TestClass} from "scripts/testClass.js"; doesn´t work ( even with the extension *.mjs)

example file :

var MyNameSpace = {};
MyNameSpace = (function () {

  // global variables
  var object1 = new TestClass();

  // Private methods      
  function PrivateMethod () {
   console.log("result = ", object1.suma(3,4));
  }

  //   ..........................................................
  // public methods
  return {
    init: function () {},   
    anotherPublicMethod: function () {}      
  } 
}());

new edition to show how I had already included the call to namespace in a very simple html code

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title> module pattern with testClass. </title>

</head>


<!--here the call.-->
<body onload="moduloTest.init();"> 
  <script  src="scripts/ClasePrueba.js"></script>
  <script  src="scripts/modulePattern.js"></script>  

</body>

</html>

Original Q&A

There are 1 best solutions below

**HynekS** · Answer 1 · 2018-11-17T23:41:07.150000

Interesting question. I had to spent a couple of minutes to figure out how make it work. Sorry for using the old module syntax, I was too lazy to configure webpack, thus I needed an enviroment which would run through VSCode & node. I presume that it would work with the new import / export syntax as well:

The 'Module' file, simplified to serve as minimal example:

module.exports = {
  MyNameSpace: (function() {
    //global variables
    var p1 = 0;

    // Private methods
    function private() {
      return 'whatever';
    }      

    // Public methods
    function public() {
      p1 += 1;
      return p1;
    }

    return {
      public: public
    };
  })()
};

The file where we import the 'Module':

// Destructurizing is recommended, otherwise we need to call 
// our methods like MyNameSpace.MyNameSpace.init() 

const { MyNameSpace } = require("./Module.js");

console.log(MyNameSpace) // public: [Function: public] <-- No private methods or vars!
console.log(MyNameSpace.public()); // 1
console.log(MyNameSpace.public()); // 2
console.log(MyNameSpace.public()); // 3

Edit A code showing how to attach TestClassto global object, so it is accessible by other scripts (no import/export or bundling required):

HTML The important part is that the script with shared class is loaded first and synchronously. Then, when attached to global object, it is accessible to all others.

<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <title> module pattern with testClass. </title>
    <script src="./TestClass.js"></script>
</head>
<script>
  alert(window.testClass.suma(1,2))
</script>
<body>
</body>
</html>

JS

class TestClass {
  constructor(a, b) {
    this.a = a || 0;
    this.b = b || 0;
  }
  // methods
  suma(a, b) {
    return a + b;
  }
}

window.testClass = new TestClass();

call to an independent file class with module pattern javascript (edited)

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in MODULE-PATTERN

Trending Questions

Popular # Hahtags

Popular Questions