0

I'm new at this html5boilerplate and jQuery stuff, so please bear with me...

I am a starting a new project based on the H5B v4.3.0 distribution. I want to add the jQuery.form plugin, but I'm not sure where it should go and what it should look like. I see in the plugins.js file the comment saying, "Place and jQuery/helper plugins in here." But, I obviously cannot use 

<script src="js/vendor/jquery.form.js"></script>

in the js file.

I have also seen a reference to RequireJS, but that looks like it is going to add way more complexity than I need right now.

Am I correct in thinking that the jquery.form load should go in plugins.js? If so, what does the command look like? If not, and it stays in the index.html, then what's up with that comment?

Thanks, Thom

OBTW, I did see another answer, but other than saying I should use 

(function($){
  // This is a wrapper for your jQuery stuff 
})(this.jQuery);

it doesn't give me any helpful examples. How about showing me how to put just one plugin inside that wrapper?

Community
  • 1
  • 1
Thom DeCarlo
  • 159
  • 2
  • 12

1 Answers1

3

Adding your plugins into plugins.js is just a recommendation. You can add you script tag to your page if you are more comfortable with that, it's up to you.

But to answer your question, the idea of the plugins.js file is to keep all your plugins in one file so it's just a single request for all your plugins instead of multiple request for a bunch of different plugins.

the best way to do this is to minify all your plugins and copy and paste that minified code into your plugins.js file separating them with relevent comments. Like so:

/*
* jQuery Form Plugin; v20140218
* http://jquery.malsup.com/form/
* Copyright (c) 2014 M. Alsup; Dual licensed: MIT/GPL
* https://github.com/malsup/form#copyright-and-license
*/
;!function(a){"use strict";"function"==typeof define& ...

/*
* Another plugin
* plugin info
*/
;!function(a){"use strict";"function"==typeof define& ...

You can use an online tool like jscompress to minify your javascript files for you.

zgood
  • 12,181
  • 2
  • 25
  • 26
  • Oh, so the plugin.js is expecting the entire (minified) text of the plugin? Wouldn't that get really ugly when many plugins are used or a version is updated? I guess that is what the RequireJS tool (or is it called a plugin or ...?) was created to avoid. – Thom DeCarlo Apr 24 '14 at 17:48
  • Yes plugins.js is expecting the entire text and yes this can get messy in projects that have many plugins. You can also create multiple plugins.js files if the 1 file gets too big (ex: jquery.plugins.js, other.plugins.js, etc). It really depends on the size of the project and what you are most comfortable with. Small project -include scripts on the page, Medium project - minify them in a plugins.js file, large project - RequireJS maybe better – zgood Apr 24 '14 at 18:21
  • I have personally not worked with RequireJS so I cannot speak too much about it. It looks neat and looks like it will go and load all your dependent javascript files as it needs them. It might be overkill in a small project though. I did find a decent tutorial [here](http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/) if you want to do some more research – zgood Apr 24 '14 at 18:24