I know what you are talking about and have faced the same problem where chaining functions, getting data from HTML elements etc creates a clutter in your codebase and refactoring it could be a huge pain as well.
Even if you use MVC frameworks out there but you don't organize your code correctly you will still end up with a messy codebase.
What I have been using for myself that worked in practice already is to write your jQuery code in plugin format. This way making it reusable for other projects if needed, cutting down on code duplication, forcing you to encapsulate change and most of all it becomes open for extension but closed for modification - so all of those great practices that make up a clean code base.
(function($){
var PluginName = function(element)
{
var elem = $(element);
var obj = this;
var settings = $.extend({
someSetting: "someValue"
});
this.func1 = function(someArgument)
{
some code
};
this.func2 = function()
{
some more code
};
};
$.fn.pluginName= function()
{
return this.each(function()
{
var element = $(this);
if (element.data('pluginName')) return;
var pluginName = new PluginName(this);
element.data('pluginName', pluginName);
});
};
})(jQuery);
Then once you have all of your code in one place that represents one responsibility (SRP) you can go ahead and use it like so:
jQuery(this).pluginName();
var pluginName = jQuery(this).data('pluginName');
pluginName.func1(someArgument);
