Let's put this simply, if you want to write code that can access other code at any point in the page whether it's a function in a CMS block or in some template then you don't have to worry too much about getting things to communicate VERY SIMPLY!
Okay, try running the code below!
var namespace = {};
namespace.widget = {};
namespace.widget.utils = function() {
return {
output: function() {
console.log('Utils are used');
}
}
}();
namespace.widget.tooltip = function(utils){
utils.output();
}(namespace.widget.utils);Works lovely doesn't it. Now run the code below with the 2 functions swapped around
var namespace = {};
namespace.widget = {};
namespace.widget.tooltip = function(utils){
utils.output();
}(namespace.widget.utils);
namespace.widget.utils = function() {
return {
output: function() {
console.log('Utils are used');
}
}
}();Doesn't work very well at all. I can put them in order or have an init function at the bottom of the page though! You say!
Well forget you and forget that! :-P
So exactly the same as above but in Yo at it's bare minimum
var Yo = new Yo();
Yo.init({});
Yo.add('widget.tooltip', { utils: 'widgets.utils' }, function (dep) {
dep.utils.output();
});
Yo.add('widget.utils', function () {
return {
output: function() {
console.log('Utils are used');
}
}
});As long as it's after the Yo script in the header, these widgets can be added anywhere in a CMS, body, header, widget PHP template anywhere. They will wait to communicate and have full access to their open methods.
That is generally all there is to it! Download the Yo Script and have a tinker with some simple scripts of your own just to understand there is nothing more than that.
var CompanyName = {};
CompanyName.whatever = {};
var Yo = new Yo();
Yo.init({
// defaults to Yo if not set.
namespace: CompanyName.whatever,
// defaults to 'module' if not set. For example
scriptRoot: 'scriptiesHere',
// For dependencies you want available for all other scripts
globalDependencies: {},
// For outputting scripts Added, Loaded and dependency Connections, default: false
debugMode: true,
// For outputting only logs by the scripts / keywords listed, case sensitive
debugScripts: ['scriptX', 'scriptY']
}); var CompanyName = {};
CompanyName.whatever.banana = {};
var Yo = new Yo();
Yo.init({
namespace: CompanyName.whatever.banana,
});
// adds all scripts to - CompanyName.whatever.banana.module
Yo.init({
namespace: CompanyName.whatever,
scriptRoot: 'scriptiesHere'
});
// adds all scripts to - CompanyName.whatever.scriptiesHereOr if you don't add a Company namespace, Yo becomes the host for all of your scripts.
var Yo = new Yo();
Yo.init({});
// Default - Yo.modules are where all added scripts goYou can make as many instances of Yo if you want to split scripts into their own ecosystems. Though that will rarely happen.
var Egg = new Yo();
Egg.init({});
var Cheese = new Yo();
Cheese.init({}); Yo.add('Lister', { dependencyScript: 'script.name' }, function(dep) {
});Or
Yo.add('Lister', function() {
});Or with namespaces
Yo.add('widgets.some.overly.long.namespace.branchLister', function() {
var output = function(_name) {
console.log('Hello lister from ' + _name);
}
return {
output: output
};
}); Yo.add('Lister', { something: 'widget.something', different: 'widget.different' }, function(dep) {
dep.something.show();
dep.different.show();
});
Yo.add('widget.something', { different: 'widget.different' }, function (dep) {
var show = function () {
console.log('say HI from something');
};
dep.different.show();
return {
show: show
}
});
Yo.add('widget.different', function () {
var show = function () {
console.log('say HI from different');
};
return {
show: show
}
});Let's clean this up just a little and imagine these scripts are anywhere
(function () {
var dependencies = {
something: 'widget.Something',
different: 'widget.Different'
};
Yo.add('Lister', dependencies, function(dep) {
dep.something.show();
dep.different.show();
});
})();
(function () {
var dependencies = {
differentNameSameScript: 'widget.Different'
};
Yo.add('Something', dependencies, function (dep) {
var show = function () {
console.log('say HI from something');
};
dep.differentNameSameScript.show();
return {
show: show
}
});
})();
Yo.add('Different', function () {
var show = function () {
console.log('say HI from different');
};
return {
show: show
}
});Woooagh, what's going on there? All we're doing is wrapping self invoking anonymous functions around the Yo scripts and moving the dependencies object into a variable to make it cleaner for listing.
Also notice a big thing the script Different is used by 2 scripts and yet the name has been changed, so in one it is called different: dep.different and in the other it is differentNameSameScript: dep.differentNameSameScript. So if you have a way of naming scripts like Service, Controller or Directives thanks to using AngularJS you may end up with folders like this.
- widgets
- modal
- service.js
- directive.js
- videoPlayer
- service.js
- directive.js
- modal
Or however you do it, there could be scripts that have the same name which you are pulling into other scripts.
So like above you could do
var dependencies = {
modalService: 'widgets.modal.service',
videoPlayerService: 'widgets.videoPlayer.service'
};
Yo.add('CheckDaCone', dependencies, function(dep) {
dep.modalService.view();
dep.videoPlayerService.activate();
});What if you have a script that could be anywhere which is needed by everything?
(function () {
Yo.add('CheckDaCone', function(dep) {
$('body').html('lets Get Using Jquer yNow');
});
})();
Yo.add('jQuery');
// Or a global script which returns a load of helper methods
(function () {
Yo.add('CheckDaCone', function(dep) {
dep.mainStuff.mathsStuff.addBoth(1, 1);
console.log(dep.mainStuff.websiteVars.email);
});
})();
Yo.add('mainStuff'. function () {
var mathsStuff = {
addBoth: function (a, b) {
return a + b;
}
};
var websiteVars = {
email: 'checkDaCone@youerd.com',
country: 'USA'
}
return {
mathsStuff: mathsStuff,
websiteVars: websiteVars
};
});
// if you want a script to ignore global scripts
(function () {
Yo.add('CheckDaCone', false, function() {
});
})();You have a few small tools to help you debug. Simply activate debug mode in Yo.init and either leave debugScripts empty to render all logs, or, enter any script names or strings.
Yo.init({
debugMode: true,
debugScripts: ['scriptX', 'scriptY', 'any string']
});For strings just enter if you just want to render added script logs
{
debugScripts: ['YO.ADD:']
}You can also view the render order of the scripts in the console which outputs an array
Yo.loadOrderIf you include the debugScripts option with loadOrder you can see the render order of just the scripts you're focusing on
Yo.init({
debugMode: true,
debugScripts: ['script1', 'script2', 'script3']
});
Yo.loadOrderYou can just get the minified file if you want it asap and add it to the top of your page. But if you want to download the repo and tinker with it:
$ npm install
$ npm run build
if you have npx installed then great if not get that running OR use whatever you like to use to serve a folder as a local.
$ npx serve ./dist
You can then add any files you want to the dist folder for testing reasons. nice and simple as it all should be