Private variables in javascript

09.04.2009

In a chat the concept of private variables in a javascript object came up. I had seen it before but never really had done them before so I thought I would play around with it a bit.

Javascript by default does not have private variables. If you have variables that need to be ‘read-only’ or ‘private’ you can limit it’s visibility with a closure inside your constructor function.

  1.  
  2.  
  3. var foo = function(a) {
  4.         var privateVar = a;
  5.         this.getPrivate = function() {
  6.                 return a;
  7.         }
  8.         this.setPrivate = function(newvar) {
  9.                 a = newvar;
  10.         }
  11. }
  12.  
  13. var bar = new foo(1000);
  14. alert(bar.getPrivate()); // Alerts 1000
  15. bar.setPrivate(‘Hello’); // Sets privateVar to ‘Hello’
  16. alert(bar.getPrivate()); // Alerts ‘Hello’
  17. alert(bar.privateVar);   // Alerts ‘undefined’
  18.  
  19.  

Posted in Javascript No Comments »

Ajaxifying your website

09.04.2009

This tutorial is intended to be a first look at the concept of “Ajaxifying” your website. That is, creating a progressive-enhancement to how users navigate from page to page. Traditionally when a user clicks a link, the new page in it’s entirety will be loaded. If your header / navigation / footer stays the same throughout, there is little need to re-download that content, furthermore to re-render that content after it downloaded.

This is a generic pattern that you can expand on and implement with your web application.

First the Javascript

  1.  
  2. var QuickLink = Class.create({
  3.  
  4.     currentPage : null,
  5.  
  6.     initialize : function() {
  7.         this.attachLinkEvents();
  8.         //Set an interval to check for changes in the URI
  9.         setInterval(function(){
  10.             this.refresh();
  11.         }.bind(this), 1000);
  12.     },
  13.    
  14.     refresh : function() {
  15.         //If a change has taken place, call the dispatch function
  16.         var url = window.location.hash.split(‘#’);
  17.         if (url.length > 1) {
  18.             this.dispatch(url[1]);
  19.         }
  20.     },
  21.  
  22.     attachLinkEvents : function() {
  23.         //Gather a list of links, and replace the default action
  24.         //With our javascript action
  25.         var links = $$(‘a’);
  26.         links.each(function(linkElement, index) {
  27.                 var href = linkElement.href;
  28.                 if(href.indexOf(‘http://www.yourdomain.com/’) != -1) {
  29.                     var uri = href.split(‘http://www.yourdomain.com’)[1];
  30.                     Event.observe(linkElement, ‘click’, function(e){
  31.                         window.location.hash = uri;
  32.                         //Disallow the default click to change pages
  33.                         Event.stop(e);
  34.                     });
  35.                 }
  36.  
  37.                 });
  38.         },
  39.        
  40.         dispatch : function(url) {
  41.         //Check to see if the page you are linking to is NOT the current URL
  42.         //If different, then send your request
  43.         if (this.currentPage != url) {
  44.             this.currentPage = url;
  45.             var myAjax = new Ajax.Updater(‘content’, url, {
  46.                 parameters : { ‘quick’ : true }
  47.             });
  48.         }
  49.  
  50.  
  51.         }
  52.  });
  53.  
  54. //initialize
  55.  
  56.  new QuickLink();
  57.  
  58.  

Your template

  1.  
  2. <? if ($_POST[‘quick’]!=true) { ?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7.         <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  8.         <title>Page Title</title>
  9. </head>
  10. <body>
  11. <div id="content">
  12. <? } ?> 
  13.         Some content here
  14. <? if ($_POST[‘quick’]!=true) { ?>
  15. </div>
  16. </body>
  17. </html>
  18. <? } ?>
  19.  

In conclusion

What we are doing is using AJAX just to refresh the content area. Your template checks to see if it was an AJAX request and if so, does not send the header and footer of your content back. This saves you in the following areas:

  • Does not have to re-download everything
  • If you have scripts that need to be initialized, the scripts will not need to be reparsed

Moving further

If using a more advanced setup like an MVC framework or if your app has different scripts or elements depending on the page I suggest on the server side you instead send back a payload including dependent scripts and maybe flags to highlight elements as well. Then you can use output buffering to store the HTML chunk in part of the payload. Return the response as a JSON object have your Javascript put things where they need to go and THEN write the innerHTML of the content part of the payload.

Posted in Ajax, Performance No Comments »

Quick and dirty GZIP Compression w/ .htaccess

09.04.2009

There are bigger solutions to this problem that you may need to consider. But if you have a medium trafficked site this will work.

  1.  
  2. <FilesMatch "\\.(js|css|html|htm|php|xml)$">
  3.         SetOutputFilter DEFLATE
  4. </FilesMatch>
  5.  

A little something for Expires headers & ETags too

  1.  
  2. <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
  3.         Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
  4.         Header unset ETag
  5.         FileETag None
  6. </FilesMatch>
  7.  

Posted in Performance, Web No Comments »

© Copyright 2009, JoshMattVander. Powered by Wordpress
Valid XHTML 1.0 Strict : Valid CSS 2