Is it best to send JavaScript code (like a function, not a complete file) to the browser?

Question

Assuming a one-page JavaScript-based application will be returned by the server on first request. In addition to some initialization code, which is common for each application, only the part of the application necessary to display the requested page (for example, the index page) is returned by the server at the first request (then it is cached and displayed).

As the user clicks on the application, other parts of the application must be loaded asynchronously (“taken”, “requested” or, nevertheless, you want to call them) from the server. Under the "parts", average javascript code, images, css, etc., are required, required to display the page. Let's focus on the javascript code part in this discussion.

It is important to note that the javascript code that should be returned to the browser is not contained in separate (static) files (which would be easy then and could take place in the future due, for example, for performance reasons), but rather in one file so this is not a 1: 1 assiociation (request: file).

eg. we could have one application, defined as follows:

var LayoutPresenter = App.Presenter.extend('LayoutPresenter', { __view: '<div>{{link "Author" "/author"}} - {{link "Book" "/book"}}</div>' }); var AuthorPresenter = App.Presenter.extend('AuthorPresenter', { __view: '<div><h1>{{name}}</h1></div>', __parent: LayoutPresenter, __context: { name: "Steve" } }); var BookPresenter = App.Presenter.extend('BookPresenter', { __view: '<div><h1>{{title}}</h1></div>', __parent: LayoutPresenter, __context: { title: "Advanced JavaScript" } }); 

App.Presenter is part of the library that I am writing and is available in a browser (or on any other client).

Thus, assuming that the user is viewing a page of a book that has not previously been loaded (neither initially nor cached in the browser), the BookPresenter code, which is a function, should be returned by the server (provided that the LayoutPresenter code is already available in the browser, and the App .Presenter is available anyway, because it is part of the library). I am running node.js on the server side.

How do you recommend solving this problem?

There is an eval function, so you can send javascript as a string and bring it back to life using eval (), but this approach seems like bad practice.

Answer 1

Never use eval - this is evil. A better option would be to use jQuery ajax and set dataType as a script . This will appreciate your js and also provide you with a callback after loading the script.

Refer to Ajax dataTypes and jQuery getScript verbatim . This, of course, assumes that you can split your code into logical modules.

You might also think whether you should check this question (how can I exchange code between Node.js and the browser?)

dNode is the option described in the question above, and it looks pretty exciting in terms of features. You can create a list of functions needed for the Book page, and then call them directly from the server itself. This would eliminate the need to maintain separate js modules for each section of your page. Kudos to @Caolan for the offer.

As interesting as it is, take care to properly cover your functions; You do not want random users to play on your server.