All geek questions in one place

Many conditions with yepnope

I am using yepnope.js as a downloaded resource. I want to execute code in the JS module only when all dependencies for this module are loaded. I do not want to load downloaded JS dependencies.

Suppose I have dependencies of D1.js and D2.js. I tried

yepnope({ load: ['D1.js', 'D2.js], complete: function() { //execute my code here } });

This works, but resources are loaded every time, even if they have already been loaded before.

If I run a few tests:

 yepnope([{ test: $().d1, nope: 'D1.js' }, { test: $().d2, nope: 'D2.js' }]);

It is unclear where to put the fully completed function - the one that starts after loading all resources.

Can this be done with yepnope, or do I need to use another component?

Thanks.

+6
source share
2 answers

Callbacks run after the appropriate scripts have been executed (and not just for loading). All scripts are executed in order, so if you put the callback or complete property on the last object, it will work last.

+3
source

Let's say you need to conditionally load jquery.js, jquery.jgrowl.js and jquery.powertip.js. You expect the following code to work:

 yepnope([{ test: typeof(window.jQuery) === 'undefined' || jQuery.fn.jquery.match(/^1\.[0-9]+/) < 1.7, yep: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js' }, { test: typeof(window.jQuery) === 'undefined' || typeof(window.jQuery.fn.jGrowl) === 'undefined', yep: ['//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.2.12/jquery.jgrowl.min.js', '//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.2.12/jquery.jgrowl.css'], complete: function() { console.log('completed loading jGrowl (should fire first, or not at all)'); } }, { test: typeof(window.jQuery) === 'undefined' || typeof(window.jQuery.fn.powerTip) === 'undefined', yep: ['//cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.1.0/jquery.powertip.js', '//cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.1.0/jquery.powertip.min.css'], complete: function() { console.log('completed loading powertip'); jQuery.jGrowl("Growling!"); } } ]);

However, if this is done on a page where jquery.powertip.js is already loaded, but jquery.jgrow.js is not, this will cause an error because the "full" callback is launched immediately, and not when all the files are loaded.

The following fiddle demonstrates this error with yepnope 1.5.4: http://jsfiddle.net/dergachev/HHxK2/

Note also that in the current yepnope trunk (master branch), this error disappears. This is likely due to the following tickets (which were never supported until 1.5.4):

+4
source

Source: https://habr.com/ru/post/924902/

More articles:


All Articles