在需要时或始终通过外部加载jQuery / CSS内联？

Question

I like keeping myself busy building modular web-applications, but don't want to spend time where I can save some..

For example I'm building a news module that should be easily implemented over multiple sites, because the same web-application is used.

However not all websites will need a news module. Is it better/easier/faster to create an inline stylesheet/javascript file built into the module itself, than to create a big external stylesheet/javascript with all the libraries? Even though the file for the news module is not needed on all other webpages?

It seems to be much easier to create an inline library in the module itself. So that this only gets loaded when needed, and saves load time and bandwidth on the other pages.

The other thing is that I like writing 'plug-and-play' modules. Say I move a file across the file server into the module folder, and the application will take care of the rest. With inline sheets, I dont have to add new lines to the header/footer etc.

What is the best solution for this? When also taking into account that I rather spend 10 minutes moving a file and it works, than to spend 1 hour appending external libraries just because its more of a 'good practice'?

Answer 1

If you re building web applications, are you using the MVC patern? Do you separate your concerns? (your Templates/Views, your Models, and your logic(Controllers))

If you follow MVC, it makes easier maintaining and customizing your app.

To answer to your exact question, what you need is RequireJS . This way you have only one place to declare your requirements, and RequireJS will handle the rest.. Load order and more..

Quoting from the requirejs website:

Over time, if you start to create more modular code that needs to be reused in a few places, the module format for RequireJS makes it easy to write encapsulated code that can be loaded on the fly.

Answer 2

Inline is never a solid way to maintain CSS. Take care to separate the description of your layout from your views. You can easily include the file in the same directory as the module so it should not be an issue.

Answer 3

Or if you want just to load "on fly" some script you can use jQuery.getScript , http://api.jquery.com/jQuery.getScript/ . Otherwise you should follow George's way.