1

I have two classes, say ParentClass and ChildClass in 2 separate files. I am directly invoking a function inside ChildClass and I want to include the ParentClass dynamically when the ChildClass is invoked. I DON'T want to use any external library or packages such as jQuery, require.js etc. Also I DON'T want to use ES6 or nodejs require as said here, because of browser compatibility issues.

Here is how my files looks like,

parentclass.js

var ParentClass = function(param1, param2) {
    // Class related code here
};

ParentClass.prototype.parentClassFunction = function() {
     // Code for the function here...
};

childclass.js

var ChildClass = function(param1, param2) {
    // Some class related code here...

    this.parentClassFunction();

    // Some other code...
};

ChildClass.prototype = Object.create(ParentClass.prototype);

HTML file

.....
<head>
  ...
  <script src="childclass.js"></script>
  ...
</head>
<body>
  ...
  <script>
    var value = new ChildClass(10, 20);
  </script>
  ...
</body>

Is there any way by which I can achieve this? Your help is appreciated.

Thanks in advance. :)

NOTE: I had a brief look into this, this and this question.

Community
  • 1
  • 1
bharadhwaj
  • 2,059
  • 22
  • 35
  • maybe write a script in

    http://stackoverflow.com/questions/18784920/how-to-add-dom-element-script-to-head-section

     –  Apr 05 '17 at 09:57
  • Or using a bundler like webpack – enno.void Apr 05 '17 at 09:58
  • @BalajMarius I have imported script inside tag. I will edit the question in more clearer way. – bharadhwaj Apr 05 '17 at 09:59
  • @bharadhwaj what do you mean by "..and I want to include the ParentClass dynamically when the ChildClass is invoked" –  Apr 05 '17 at 10:02
  • @BalajMarius I mean, when `ChildClass` is invoked, it uses functions in `ParentClass`, but I don't what to add every dependent js file manually in HTML and rather want to choose it dynamically when needed. Hope it is clear. – bharadhwaj Apr 05 '17 at 10:12

2 Answers2

1

Best option is to bundle all the files with a precompiler or something like that.

in your childclass.js you should use require('parentclass.js') or import use something like Browserify to solve the dependencies automagically.

Here are some links: - http://browserify.org/ - https://webpack.github.io/

Patrick
  • 1,562
  • 1
  • 16
  • 33
0

If you are use ES6 features you can use import:

for example:

import { Childclass } from '/path/to/childclass';

Here is the documentation for import:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Antoine Amara
  • 645
  • 7
  • 11