包含Javascript和串联的最佳实践

Question

I have a medium sized project and I want to divide my fairly long javascript file into several submodules. Afterwards I want to concatenate all my js files with gulp.js and also minify them.

I also would prefer not to use a watch task to concatenating my js every time I edit it, but rather use the separated js modules during development and for deployment I'd like to run my gulp concat task. ( https://www.npmjs.com/package/gulp-concat )

My setup for my question:

I have all my js embraced by a document.ready (I'm using jQuery). For simplicity let's say I have within this 3 functions, content does not matter. I would like to distribute those 3 functions to 3 separate .js files.

$(function() { 
    function myFunction1(){}
    function myFunction2(){}
    function myFunction3(){}
}

What I would like to have:

main.js:

$(function() { 
    // load function1.js
    // load function2.js
    // load function3.js

}

and all the separate functionX.js

By using gulp to concatenate I would like to end up with the code at the beginning (all in one file, and properly embraced by $(function() {}

Now first, I don't know how to load the functions into this, so that during development I have full functional code by just including my main.js and without concatenating. Is this even possible?

I tried to use

$.getScript("function1.js", function(){
});

but after concatenating – not to my surprise – this just remained like it was.

So is there another way of achieving this?

Or would a better option be to write 3 different functions.js, all with their own $(function() {}) and after concatenating I have that part 3 times? While I would just include all of the files during development in my html?

It would be awesome to hear your thoughts about this, and how to work with js modules while not repeating any code.

Thanks a lot.

Answer 1

Ok, I just spoke with another developer and we mainly told me the following way is the way to go:

• write different .js files with different modules (my own code separation for better maintenance)

• all of them including their own immediately invokin function expression to prohibit scope problems and their document.ready function

   (function ($) { // iief = Immediately-Invoked Function Expression, mainly useful to limit scope $(function() { // Shorthand for $( document ).ready() // whatever code }); }(jQuery)); 

• then use eg gulp and write a watch task to concatenate on the fly after change

• use the concat sourcemap function to still see the original files with the correct linenumbers etc. ( Sourcemaps )

• include the all.js (concatenated one)

• minify at the end for staging and deployment

• and use if($('.selector').length){} to check if the code should be executed in dependency of selector existence

So, that's the way I'm following right now. I'd love to hear your thoughts upon that anyway. Cheers