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.

asked Apr 5, 2017 at 9:55
5
  • maybe write a script in <head/> stackoverflow.com/questions/18784920/… Commented Apr 5, 2017 at 9:57
  • Or using a bundler like webpack Commented Apr 5, 2017 at 9:58
  • @BalajMarius I have imported script inside <head> tag. I will edit the question in more clearer way. Commented Apr 5, 2017 at 9:59
  • @bharadhwaj what do you mean by "..and I want to include the ParentClass dynamically when the ChildClass is invoked" Commented Apr 5, 2017 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. Commented Apr 5, 2017 at 10:12

2 Answers 2

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/

answered Apr 5, 2017 at 9:59
Sign up to request clarification or add additional context in comments.

Comments

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

answered Apr 5, 2017 at 9:58

4 Comments

I have mentioned in the question, I don't want ES6 because of Browser compatibility issues.
Oh sorry for that
Why you don't try to use commonjs to have require like nodejs have:requirejs.org/docs/start.html
I am trying to make a library with minimal requirements, so I don't want to add the overhead of packages. That is the reason why.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.