javascript - Access function defined in separate .js file from a .js file - Stack Overflow

admin管理员组

文章数量:1391995

I've seen quite a few questions regarding loading a .js file into an HTML file, and I know how to do that. However, say I have the file "classlist.js." How can I go about using the classes defined in that javascript file in another javascript file? I keep seeing answers that suggest using the

<script type="text/javascript" src="filepath"></script>

syntax. When used in a .js file, though, it throws a syntax error on the "<" so I assume this code is invalid.

So, how would one utilize a function in a .js file that was defined in a separate .js file... that works, and is efficient (If there is one)?

EDIT: I'm going to clarify some thing for the future, since I'm still fairly new to Javascript, and it looks like there were a number of other factors I didn't even know came into play.

I had two .js files, one of which declared classes that were extensions of classes in the other file. I wanted to use the extended classes in a webpage, and I thought I had to load the originial classes into the second .js file, THEN load that .js file into the HTML file. I wasn't programming pletely outside of HTML.

Sorry for any misunderstanding, hopefully this thread is helpful to somebody else in the future.

I've seen quite a few questions regarding loading a .js file into an HTML file, and I know how to do that. However, say I have the file "classlist.js." How can I go about using the classes defined in that javascript file in another javascript file? I keep seeing answers that suggest using the

<script type="text/javascript" src="filepath"></script>

syntax. When used in a .js file, though, it throws a syntax error on the "<" so I assume this code is invalid.

So, how would one utilize a function in a .js file that was defined in a separate .js file... that works, and is efficient (If there is one)?

EDIT: I'm going to clarify some thing for the future, since I'm still fairly new to Javascript, and it looks like there were a number of other factors I didn't even know came into play.

I had two .js files, one of which declared classes that were extensions of classes in the other file. I wanted to use the extended classes in a webpage, and I thought I had to load the originial classes into the second .js file, THEN load that .js file into the HTML file. I wasn't programming pletely outside of HTML.

Sorry for any misunderstanding, hopefully this thread is helpful to somebody else in the future.

• javascript
• function
• loading

Share Improve this question Follow edited Nov 14, 2012 at 15:26 Curlystraw asked Nov 14, 2012 at 14:54 CurlystrawCurlystraw 22933 silver badges99 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Assuming you are talking about javascript in a web browser, all js files are loading in an html file, typically index.html. You need to use the script tag to load the javascript in the proper order in that html file, not in the javascript file. So if file B requires the things in file A, you need to load file A first, meaning put the script tag that loads file A before the script tag that loads file B.

Two answers:

Non Browser

If you're using JavaScript in a non-browser environment (NodeJS, RingoJS, SilkJS, Rhino, or any of a bunch of others), the answer depends on the environment — but many of these use the CommonJS require mechanism. E.g.:

// Get access to public symbols in foo.js
var foo = require("foo.js");

// Use the `bar` function exported by foo.js
foo.bar();

Browser

If you're using JavaScript in a browser, you put script tags like the one you quoted in the HTML, in the order in which they should be processed (so, scripts relying on things defined in other scripts should be included after the scripts they rely on).

If you want to maximize efficiency in terms of page load time, bine the scripts together on the server (probably also minifying/pressing/packing them) and use just the one script tag.

The answers posted above should do the trick however since you mentioned doing it efficiently you can consider taking a look at javascript module based loaders like require js( http://requirejs/ ) based on AMD

You have to put the reference to classlist.js in your HTML file (not your Javascript file), before any other SCRIPT element which requires it. For example, within the 'head' element:

<html>
<head>
  <script src="testclass.js"></script>
  <script src="file_using_testclass.js"></script>
  <script>
    var tc = new TestClass();
  </script>
</head>

本文标签： javascriptAccess function defined in separate js file from a js fileStack Overflow