1

I like the Node.JS style of JavaScript, where I can write all of my functionalities into smaller files and then require those neatly from within my code. I'm even thinking about trying to write a framework to mimic that behavior in client-side JS.

My goal would be to implement the module loading system as accurately as possible - See Module docs.

For require(), I can use things detailed in answers to this question, most notably JQuery's $.getScript(). It seems to me that other aspects of the module loading system should be possible as well.

So I'm asking more experienced programmers here first, before I waist my time: Is there something that I'm missing that's going to cause such an attempt to fail miserably, or can this be successfully done?

Improve this question
3
  • 5
    It will work. It has already been done. Take a look at RequireJS.
    – Adam Zuckerman
    Aug 8, 2014 at 23:18
  • @AdamZuckerman awesome...
    – J.Todd
    Aug 8, 2014 at 23:26
  • 1
    @jt0dd RequireJS is not the only option, try Google "site:stackoverflow.com client side require" for some more. Out of the returned results this is my personal favorite: stackoverflow.com/questions/5168451/…
    – xmojmr
    Aug 9, 2014 at 12:47

4 Answers 4

Reset to default
4

No. Node.js require() is based on the Common.js module system which uses synchronous loading.

Unless you do some server-side preprocessing (bundling) to serve all scripts at once, this is impossible in the browser, where resources are should be loaded asynchronously. You might want to have a look at browserify.

However, there is the Asynchronous Module Definition proposal which has an async require function that takes a callback. This is widely implemented in various libraries, you probably don't have come up with your own. RequireJs is a well known one, you will find others when searching for "AMD loader".

Improve this answer
4
  • You're right but both amdjs and commonjs offer the same api stackoverflow.com/a/16522990/1660118
    – Marco de Jongh
    Aug 22, 2014 at 16:57
  • No, if you read that answer carefully you notice that their api is very different (sync require & exports vs async require & define). The only thing they share is the module identifier concept. What is mentioned there is that RequireJS, a particular AMD implementation, also allows to load commonjs modules to some extend, by scanning it's source and statically preloading everything mentioned in … = require(…) statements.
    – Bergi
    Aug 22, 2014 at 17:13
  • 1
    @Bergi Could you do it with synchronous AJAX? And before you throw up your lunch at the phrase "synchronous AJAX", could you do it with synchronous AJAX in a Web Worker environment? I understand that this gets away from the main question (which probably isn't interested in Web Workers at all), but I'm personally curious. (I understand that communication with anything outside such a require+Worker environment must of course be asynchronous.) Functionally, I suppose I'm asking if synchronous loading is the only impediment to a genuine reproduction of Node's require?
    – apsillers
    Aug 22, 2014 at 20:18
  • @apsillers: You're right, it should be possible with SJAX, although it's gotta be slow and inconvenient. It might work in a Worker with the synchronous importScript. I can't think of another reason why reproducing the node behaviour wouldn't be possible, any other hindrances should be vincible.
    – Bergi
    Aug 23, 2014 at 15:22
1

The concept you are looking for is called AMD which stand for Asynchronous Module Definition

The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such >that the module and its dependencies can be asynchronously loaded. This is particularly well >suited for the browser environment where synchronous loading of modules incurs performance, >usability, debugging, and cross-domain access problems.

Full specification

As mentionend in the comments there are multiple libraries for doing this. You can find a pretty complete comparison of all available frameworks here

Improve this answer
0

Yes. There are libraries which do this for you, like require.js or many others. When you would like to implement this yourself, you can load the sourcecode of your javascript files using XmlHttpRequest and then eval them.

However, doing this might not be the best idea from the performance point of view. Each javascript file will need to be downloaded with a separate HTTP request. This request can not happen before the script file which requested it was downloaded and executed. This can increase your page load time significantly.

But there is a workaround which allows you to work with many independent script files in development, but then deploy them as a single file in production. There are tools like Minify (which requires PHP) or YUI Compressor (which runs offline and outputs a new JS file) which can merge multiple JS files into one. As a by-effect it also reduces the size of every individual script so the overall traffic is reduced and it performs some obfuscation which discourages people (a bit) from stealing your scripts.

Improve this answer
0

You should look at browserify it probably does exactly what you are looking for. You can write code the node way and with a simple command build it all into one file. I think it is a great tool and paradigm. I wrote my little framework using this pattern, it works naively on node and all major browsers including IE 6.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.