$(function() {
$('.foo').on('click', function() {
$.get(url, function(data) {
$('.target').html(template(data));
$('.target button').on('click', function() {
// ...
});
});
});
// 7000 lineas más
});
<script>
foo = "bar";
window.foo = "bar";
var baz = 2;
</script>
<script>
var foo = "bar";
var baz = function() { /* ... */ };
</script>
Si necesitas un global, intenta usar solo uno como un namespace
window.App = {};
App.Templates = {};
App.Helpers = {};
<a href="#" onclick="doSomething(123)">Click me!</a>
// Get all of the user ids
var ids = $('.users').map(function(i, el) {
return $(el).data('user-id');
});
// How many emails are read?
var readCount = $('.emails.read').length;
$('.follow').on('click', function(ev) {
var follow = $(ev.target).data('user-id');
$.post('/follow', { data: follow });
var currentFollows = parseInt($('.follow-count').text(), 10);
currentFollows += 1;
$('.follow-count').text(currentFollows);
});
<script>
var foo = "bar";
</script>
<script>
function() {
var foo = "bar";
}
</script>
<script>
function() {
var foo = "bar";
} // SyntaxError: Unexpected token (
</script>
<script>
function nombre() {
var foo = "bar";
}
</script>
<script>
function() {
var foo = "bar";
}
</script>
<script>
(function() {
var foo = "bar";
});
</script>
<script>
(function() {
var foo = "bar";
})();
</script>
(function() {
// Code here...
})();
(function() {
function bindActions() {
/* ... */
}
var $foo = $('.foo');
$foo.on('click', function(ev) { /* ... */ });
})();
console.log($foo);
ReferenceError: $foo is not defined
(function(_, $) {
var $foo = $('.foo');
$foo.on('click', function(ev) {
_.each(items, function(item) {
// ...
});
});
})(window.underscore || window.lodash,
window.jQuery || window.Zepto);
var getElement = (function() {
function getElementByClass(selector, context) { /* ... */ }
function getElementByID(selector, context) { /* ... */ }
return function(selector, context) {
if (selector[0] === '.') {
return getElementByClass(selector, context);
} else if (selector[0] === '#') {
return getElementByID(selector, context);
}
}
})();
getElement('.foo', document.body);
function Module() {
// declarar bariables y funciones privados
return {
// métodos publicos
};
}
function Counter() {
var count = 0;
return {
increment: function() {
count += 1;
return count;
},
reset: function() {
count = 0;
return count;
}
};
}
var counter = Counter();
counter.increment();
> 1
counter.increment();
> 2
counter.reset();
> 0
pubsub.subscribe('change:page', function(data) {
$('.currentPage').text(data.currentPage);
$('.totalPages').text(data.totalPages);
});
$('button').on('click', function() {
currentPage += 1;
pubsub.publish('change:page', {
page: currentPage,
totalPages: totalPages
});
});
Instead of "click" -> "Update the DOM" break it up
"click" -> "tab changed"
"tab changed" -> Update tab body
"tab changed" -> Change active tab
"tab changed" -> Update page title
$('.follow').on('click', function(ev) {
var follow = $(ev.target).data('user-id');
$.post('/follow', { data: follow });
var currentFollows = parseInt($('.follow-count').text(), 10);
currentFollows += 1;
$('.follow-count').text(currentFollows);
});
$('.follow'.on('click', function(ev) {
var userId = getModelForElement(ev.target).get('id');
pubsub.publish('follow-user', { userId: userId });
});
pubsub.subscribe('follow-user', function(data) {
$.post('/follow', data);
});
pubsub.subscribe('follow-user', function(data) {
this.numFollowers += 1;
$('.follow-cout').text(this.numFollowers);
});