oop - Best way to import JavaScript files into one file? - Stack Overflow

admin管理员组

文章数量:1353278

I have a background in coding in languages that have a concept of "classes". Now that I am coding JavaScript, I would like to code in a similar way so that each object oriented "class" I create is its own separate file.

• see Accessing "Public" methods from "Private" methods in javascript class

• see .html

In other languages, I would create import statements at the top of the class file to ensure other custom classes that were used within a class file so that the other custom classes were piled into the final binary.

Of course JavaScript is not a piled language; however, I would still like to be able to be include some kind of "import" statement at the top of custom class files so I could ensure the imported JS "class" file was available for the user's browser to download.

It would be ideal if there were a 3rd party tool that bined all of my separate class files into one JS file so the browser only had to make one HTTP request for a single JS file instead of many calls for each indicidual JS "class". Does anyone know if such a tool exists where it would do the following:

1. allowed me to choose which JS files that I wanted to include in a single JS file
2. crawled thru the files I selected in step 1 and found all the "import" statements at the top of each custom "class" file. These "import" statements could simply be specially formatted ments in the code that the 3rd party recognizes as import statements.
3. The 3rd party would then create the single JS file with all of the files that were selected from step 1 and from all of the imported files that were found in step 2.

Some popular JavaScript frameworks seem to do just that. For example, jQueryUI allows you to customize the download of a single jQueryUI source file by allowing the user to check off which objects you want to use. If you uncheck an element that is needed for an item that you checked off, then the form tells you that there is a dependency you need to rectify before being able to proceed to download the file.

• see /

So is there a 3rd party tool that allows a developer to use some kind of "import" statement ment to ensure that many dependent JS files (and only the ones that the developer needs) to be bined into a single JS file?

I have a background in coding in languages that have a concept of "classes". Now that I am coding JavaScript, I would like to code in a similar way so that each object oriented "class" I create is its own separate file.

• see Accessing "Public" methods from "Private" methods in javascript class

• see http://phrogz/JS/classes/OOPinJS.html

In other languages, I would create import statements at the top of the class file to ensure other custom classes that were used within a class file so that the other custom classes were piled into the final binary.

Of course JavaScript is not a piled language; however, I would still like to be able to be include some kind of "import" statement at the top of custom class files so I could ensure the imported JS "class" file was available for the user's browser to download.

It would be ideal if there were a 3rd party tool that bined all of my separate class files into one JS file so the browser only had to make one HTTP request for a single JS file instead of many calls for each indicidual JS "class". Does anyone know if such a tool exists where it would do the following:

1. allowed me to choose which JS files that I wanted to include in a single JS file
2. crawled thru the files I selected in step 1 and found all the "import" statements at the top of each custom "class" file. These "import" statements could simply be specially formatted ments in the code that the 3rd party recognizes as import statements.
3. The 3rd party would then create the single JS file with all of the files that were selected from step 1 and from all of the imported files that were found in step 2.

Some popular JavaScript frameworks seem to do just that. For example, jQueryUI allows you to customize the download of a single jQueryUI source file by allowing the user to check off which objects you want to use. If you uncheck an element that is needed for an item that you checked off, then the form tells you that there is a dependency you need to rectify before being able to proceed to download the file.

• see http://jqueryui./download/

So is there a 3rd party tool that allows a developer to use some kind of "import" statement ment to ensure that many dependent JS files (and only the ones that the developer needs) to be bined into a single JS file?

• javascript
• oop

Share Improve this question Follow edited May 23, 2017 at 12:06 CommunityBot 111 silver badge asked Jan 28, 2013 at 19:57 jaximjaxim 55511 gold badge99 silver badges2020 bronze badges 2

• assuming no wonky constructs in the .js files, cat *.js > megafile.js would do. – Marc B Commented Jan 28, 2013 at 19:59
• Not exactly what you asked for but JS is not your typical lang, things work a bit differently... Try Grunt: gruntjs. – elclanrs Commented Jan 28, 2013 at 20:02

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

RequireJS was built for exactly this purpose.

Have a look at Require.js. It lets you import various javascript files in a modularized fashion and add the required dependencies between them. Also at the end you can minify them all into one single JS file using r.js

A trivial batch file can do this for you:

@for %i in (classes/*.js) type %i >> build.js

This works best if your JS source files are all in one folder, and this example assumes that folder is named classes. It gets a bit more plicated if you have subfolders, but a similar principle can be applied.

Have a look at GruntJS, JQuery uses it for building. If you don't care for HTTP requests, you can use already mentioned RequireJS, which also has nice async methods to load files, which can improve perfomance in some situations.

Check out this class https://www.youtube./watch?v=KnQfGXrRoPM This allows for importing on the fly within classes. also it allows for importing all classes within an folder and all of its sub folders. and its really simple because it is just a prototype function added to String. just by adding the importer class you will call in classes like ".project.Classfile.js".import(); or ".project.*".import() to get all sub-classes. fork on - https://github./jleelove/Utils

本文标签： oopBest way to import JavaScript files into one fileStack Overflow