JSFiddle - React, Tailwind, and code Playground
HTML
<div class="example">
<a class="super-complex-selector" href="#">Click me and view log.</a>
</div>
<div class="example2"><span>HTML() WILL TAKE OVER!?</span></div>
CSS
body
{
background-color:#00e4fe;
}
JavaScript
/*
* jQuery Condom (Use namespaces to protect your global integrity.)
* Version 0.0.1
*
* Copyright (c) 2011 Mario "Kuroir" Ricalde (http://kuroir.com)
* & Micha Niskin ([email protected])
* Licensed jointly under the GPL and MIT licenses,
* choose which one suits your project best!
*/
(function($){var g={};$.ns=function(f){g[f]=g[f]||{};return{add:function(c,d){var e=typeof c=="object"?c:{};if(e!==c)e[c]=d;$.each(e,function(a,b){g[f][a]=function(){b.apply(this,arguments);return this}});return this},methods:function(){log(g[f])}}};$.fn.ns=function(a){if(g[a])$.extend(this,g[a]);return this}})(jQuery);
/* Demo here */
$(document).ready(function(){
$.ns('demo').add('oneFunction', function() {
log('One Function has been executed. On Selector', this.selector);
}).add('html', function(msg) {
$(this).html('o o o ' + msg + ' o o o')
});
$.ns('test').add({
click: function() {
// This demonstrates namespaces.
$(this).click(function(){
$(this).css('color','green').html('No more!');
});
},
example: function() {
$(this).html("Multi-definition");
}
});
$('.super-complex-selector').click(function(){
$(this).ns('demo')
.oneFunction()
.css('color', 'red')
.html('Click me Again') // we override this in demo.
.ns('test').click();
});
var msg = 'html() is not overriden in the global namepsace..';
$('.example2 span').html(msg)
.ns('demo').html(msg); // But it is in the demo space.
});
// usage: log('inside coolFunc',this,arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
log.history = log.history || []; // store logs to an array for reference
log.history.push(arguments);
if(this.console){
console.log(...