We're developing a snippet that is embedded in 3rd party sites, and uses jQuery.
The snippet checks if the site already has jQuery loaded. If so, it uses that library, otherwise it loads our own copy (currently jQuery 1.4.4, we're migrating to the latest soon).
There are breaking changes in jQuery. One such change, for example is the change in semantics of attr(), and introduction of prop().
Are there some guidelines to working with jQuery in a way that will be as backward compatible as possible? Even when we migrate to latest, we still want to use an existing jQuery library if it exists instead of loading a new copy, to save load time and resources.
There are a few solutions to your problem
1. Use a subset of jQuery
Find the subset of jQuery that works upto a reasonable amount back and only use that subset.
Note that I recommend not using .attr at all, ever. since a) it's a minefield and b) it has different behaviour on different versions. You may find the sensible subset of jQuery is quite small. Good luck finding it.
2. Just use the latest version
Use the latest version of jQuery and tell your library users that they need to upgrade.
Seriously everyone should be using the latest version anyway, force them to upgrade.
3. Don't use jQuery
Don't have a dependency on jQuery.
Seriously, the less dependencies you have the better your code is
I prefer 3. as an optimum solution
Take a look at these guidelines:
http://www.davidtong.me/upgrading-jquery-from-1-4-x-to-1-6-1/
it's not the latest version available of jQuery, but it's enough hot.
Version 1.6.4 is a minor release
From version 1.6.4 to 1.7.x some new features and fixes were introduced but nothing seems is breaking code written for jQuery 1.6 version
This is one of my pet peeves with jQuery even though I love what it(jQuery) enables overall.
I wish the jQuery team would have addressed this early in development and created a version initialization method so you could "request" a specific version when building your library. Ideally, you'd have:
(function($, undefined) {
// your code
}(jQuery.noConflict(false, "1.4.4")));
Where jQuery.noConflict would accept a "key" for which API version you would like to use for this library. Each jQuery loaded would check automatically if a previous jQuery was loaded and create a new reference entry for it in an associative array. (check for jQuery/$, request jQuery.jquery to get version, request jQuery.loadedVersions to obtain the previous associations, and build a master list of all loaded APIs) If no valid library was found, it could default to the latest available version or just kick out an error.
Of course, this doesn't help you (unless you want to modify a subset of jQuery APIs and keep them up to date yourself... /yuck) but short of that, it's a bit of a crap shoot.
noConflict will return the jQuery API if $ is not the current jQuery API (thus, not overwriting the $) but it doesn't really handle API conflicts and you'll only ever get the last jQuery API loaded. It would simply ignore the first loaded API (because it's not === to the current code scope jQuery object) and return itself.
Related
I have a client who had a very complex jQuery app custom built by a previous developer within his WordPress site. Its functionality is cleanly broken out into several scripts which get minified together with the libraries they depend on. The libraries rely on an old version of jQuery (3.3.1). The site is complex and we need to be able to use the current version of jQuery to allow other plugins we're using to continue to keep up with upgrades.
The libraries include c. 2018 versions of:
Select2
Isotope
SpriteSpin
EasyResponsiveTabs
ImagesUploaded
jQuery Viewport
Some of these are minified/uglified.
I've used best practices to load jQuery 3.3.1 into a variable jQuery3_3_1 with noconflict();
It's rather easy to change standard jQuery to use jQuery3_3_1. But I need a way to force the libraries to use jQuery3_3_1, otherwise they are not recognized by the scripts (and some of them will have issues using a different version of jQuery than they were built in). Most of these use requireJs(), and I've seen instructions for setting up requirejs.config() code in the footer that will define "jquery" to be a particular version. Doing this would be a great solution, but I have no idea how to get these uglified scripts to use it.
I've read through several similar inquiries, but none have addressed forcing a jQuery version on minified/uglified code. Others speak to a level of expertise in jQuery module development that I don't have and don't have time to scale into.
Is there a way to get all these modules that use require('jquery') to have that reference jQuery3_3_1? I'd love it if there were a way to say, "For all the files that live in this directory, jQuery/jquery (there are 2 ways it is called) means jQuery3_3_1/jquery3.3.1".
Or being that it's a Wordpress site, could this be defined in the wp_enqueue_script() call?
Many thanks for your help!
I read a post answer that you can do search for the code I need from an old version of jQuery and copy it and paste it into a newer version jQuery script. This way I don't have to try and have two versions of jQuery to load at the same time which was unsuccessful. Both the jQuery scripts I have are .min
How do I do this? See the person's answer below
Why would you need two jQuery libraries anyway?! Just use the newer one! ... Let's even say you needed the old one because you need some functions that aren't available in the new framework. Just look them up in search mode and copy past them one by one to the new framework (can only be done if you use jQuery offline like me, which saves loading time during developpement cause it gets cached.) P.S: I hope this doesn't cause any copyrights infrigments.
Editing jquery is very bad practice, do it only for very small projects which maintenance won't have any work with jquery or component updates at all!
Better try using Jquery Noconflict library.
I am about to release a javascript library.
I would like to save the file as [library-name].1.0.0
Then as the library will evolve you will be able to download new versions, e.g.
[library-name].1.0.1.js
[library-name].1.0.2.js
[library-name].1.0.3.js
[library-name].1.1.0.js
[library-name].1.2.0.js
[library-name].2.0.0.js
My question is: is there any reason not to save the version in the name of the file?
I am using other 3rd party libraries and the ones for which I don't store the version I always have to figure out if I have to upgrade or not.
For instance, I use codemirror.js, and I always wonder if I am using the latest version.
If you are giving it for download, then its a good idea to have version number as part of file name. Also its a good idea to add version number along with the license info at the beginning of the file like jQuery does
Checkout - http://code.jquery.com/jquery-1.9.1.min.js
Only case where you shouldn't add version number is when you are referencing a script file throughout your website - because you don't want to change all references whenever you update the script.
I've never released any libraries myself, but putting the version number in the file name sounds like a fine idea to me.
On upgrading, I think not putting the version number in the file name is used for libraries where the author doesn't expect to introduce breaking changes in future versions, only bug fixes and additions that don't affect code already written against the library. This means that people who use the library but don't host it themselves (i.e. who point to the library on a public CDN) automatically point to the latest version, and thus get bug fixes without having to do anything.
But, as you say, for people who download the library and host it themselves, it does mean they have to open the library file to check the version number.
If you want to match what some other library publishers do, you might want to have a look at Semantic Versioning - it codifies the x.x.x version numbering system.
And if you're going to release your library through Github (which I believe is what the cool kids do these days), you might want to use Jonathan "Wolf" Rentzsch's system for doing semantic versioning there.
If you are using unit tests you can make sure that the V1 unit tests all work fine against V2 before releasing the library.
Smashing article on js unit testing
If I understood your question correctly, one reason not to include the version name is that if you're hosting the script users using that CDN-hosted file don't have to change any code when you upgrade.
Background
I am new to Node.JS but very experienced with JavaScript and jQuery. I have had no problem installing jQuery via npm install jquery, however, referencing plugins within the code is another challenge.
I have reviewed this similar StackOverflow question, and the solution appears to work but it seems to me that instantiating a "fake" browser window and injecting your jQuery plugin-based functions each time you need the plugin is possibly not the most efficient approach.
The specific plugin that is failing for me linq.js (yes, I am aware that js linq is available via npm but it is not the same as linq.js!).
NOTE: The plugin to which I am referring does not rely on any DOM elements; in my case, it simply runs JSON objects through various data functions. This is why I don't think I need to instantiate a window object.
Question
How do I properly import and use jQuery plugins in a Node.JS application?
You can't do this. JQuery manipulates DOM on the client-side, which means that it has no business on the server-side where NodeJs runs.
You don't.
You don't use jQuery on the server, ever. It has no place there, you don't have a DOM on the server and jQuery itself is a mediocre library to start with.
If you really want to use a "jQuery plugin" in node, you rewrite the plugin as a standalone module without a jQuery dependency.
As an aside, you also shouldn't need linq.js because it's an API you don't need, you already have array methods. Also your coding C# in JavaScript rather then learning JavaScript.
You also have all the array methods (map, filter, reduce, etc) so you simply do not need this. If you really want some of the sugar linq.js offers use underscore instead. (I personally recommend for ES5 over underscore)
Please use ECMAScript correctly rather then emulating C#.
Is it possible to have 2 different jQuery versions in the same document, and have them to not collide with each other?
For example if I create a bookmarklet and want to base the code on jQuery.
This bookmarklet is injected on some page that uses another version of jQuery then my code would overwrite the version used on the page.
Is it possible to avoid that?
Or are there some other libraries that provides this functionality
Or maybe I should rethink the whole thing.
Thanks for answers and pointers,
bob
jQuery comes with a way to avoid collisions. After you load the first version, you can assign it to a different variable.
var $j = jQuery.noConflict();
And then load your second jQuery version. The first one you load can be accessed with $j(...) while the second one can be accessed with $(...).
Alternatively, somebody made a little helper in an attempt to make it easier to switch between different versions.
Here is a way to detect is JQuery is already present: jQuery in widget
Work out the oldest version of JQuery your code will work with.. And refuse to work if the version present is too old. Only a few people will miss out, most sites using JQuery are pretty up to date..
Why not just have different versions of your javascript, for different versions of jquery, so, look at what version is on the page and get the appropriate code that will work on that version of jquery.
This would be safer, as anything else may be very fragile, as it sounds like you don't have control over the version of jquery that will be on the page.