Including Javascript file inside another Javascript file

Question

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.

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

Patrick · Accepted Answer · 2017-04-05 09:59:30Z

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/

Antoine Amara · Accepted Answer · 2017-04-05 09:59:28Z

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

edited Apr 5, 2017 at 9:59

answered Apr 5, 2017 at 9:58

Antoine Amara

6457 silver badges11 bronze badges

I have mentioned in the question, I don't want ES6 because of Browser compatibility issues.
– bharadhwaj
CommentedApr 5, 2017 at 9:59
Oh sorry for that
– Antoine Amara
CommentedApr 5, 2017 at 10:00
Why you don't try to use commonjs to have require like nodejs have:requirejs.org/docs/start.html
– Antoine Amara
CommentedApr 5, 2017 at 10:01
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.
– bharadhwaj
CommentedApr 5, 2017 at 10:10

Add a comment |

Collectives™ on Stack Overflow

Including Javascript file inside another Javascript file

2 Answers 2

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Linked

Related