I found it to be a very interesting article. It mainly talks about how new trends in the web are barking up old problems, like the Flash splash page, or the shoutbox.
On thing I found very interesting was the part called Modern-Day Bloated, Cut-And-Paste Scripts.
Being involved with jQuery on a day-to-day basis, you start using some plugins, or even write some of your own.
But once you start stacking plugins, the browser has to load all of these plugins, generating more request. Which is generally a good idea.
Now whenever creating a new webproject, I use one JS file: lib.js. This JS file contains everything I need, it’s like a swiss pocket knife!
Structure is usually like following (depends on your project needs):
jQuery
jQuery UI
Plugins
$(document).ready(function(){ /**magic here **/});
You could argue by saying: but doesn’t the filesize increase by a lot, letting the user download a 250k file is quite a lot!
I agree, but play your cards right in server configuration with a little help from Google’s mod_pagespeed or simply by getting goot ETags or Expires headers, the load happens just once (!!). And the rest of your surfing experience stays snappy.
Recently I discovered Internet Explorer caches some AJAX calls.
I was using jQuery to make some AJAX calls in a web-admin interface I’m building. I noticed none of the data changed as I tried to refresh (using an AJAX call). conclusion:: IE caches AJAX calls… very annoying.
You could go around and alter every method in your Struts/Spring/… application to force no-cache. But that would take some time. Instead, I wrote a Filter.
Hold on though, you don’t want every page to get the no-cache headers, that would seriously decrease your site performance (all pages would be force-reloaded instead of browser-cached). So we’ll only filter out AJAX calls.
Luckily, jQuery passes a header argument: X-Requested-With: XmlHttpRequest
But I do miss a bit of Object Orientation in most of them.
I decided to take a bit of each, and create my own approach.
I won’t explain it much, it should be understandable with the comments in code:
(function($){/**
** Seperate object. So each element applied with this plugin has an object structure
**/function PluginObject(container,options){//I like to keep a reference to the object I'm working onvar holder = container;//Store 'this' as an instance variable. This comes in handy when you want to speak to it as a reference in clickhandlers etc.var _self =this;this.init=function(){//initialize UI and data here}this.test=function(){//This function serves as a demo method that can be called from outside}this.render=function(){// Do complicated rendering here// Trigger the onRender that could be set through the optionsthis.trigger('onRender');}this.init();}
$.fn.myplugin=function(action,options){/**
** 'action' can be an argument for a function to call
** If no action is defined, and we just start with the options, initialize is called
**/if(typeof(action)=='object'){
options = action;
action ='initialize';}elseif(action == undefined){
action ='initialize';}if(options == undefined){
options ={};}/**
** Set, or update the options
**/function setOptions(el){// If any of the options is a function, bind that as an event// this can be something like: 'onRender'
$.each(options,function(event, fn){if(typeof(fn)=='function'){//Unbind the event if it was already bound
el.unbind(event);//Bind the event with the given function
el.bind(event, fn);}});//Extend the options with the defaults, and the options already saved in the object
options = $.extend({}, defaults, el.data('shelf.options'), options);// Save the options in the object's data
el.data('shelf.options', options);};// Default optionsvar defaults ={
width:'900px',
title:'Cool Stuff'};/**
** This is called everytime we do $(..).myplugin(..)
**/returnthis.each(function(el){
el = $(this);
setOptions(el);if(action =='initialize'|| el.data('shelf')== undefined){// Initialize the object, save it in itself
el.data('shelf',new PluginObject(el, options));}// if called like $(..).myplugin('test'), this is calledif(action =='test')
el.data('shelf').test();// This will call render(), render will also trigger 'onRender'if(action =='render')
el.data('shelf').render();});};})(jQuery);
Do you develop plugins differently? Or got a good link? I would love to hear about it!
Getting the values of radio buttons in Javascript can be a bit of a pain in the behind at times.
You’ll have to assign a different ID to each radiobutton, loop over them to see which one is checked, and return that value.
Too much hassle.
However, jQuery selectors to the rescue!
Suppose you have the following radio buttons: