Zero Soup

 

Dynamic Javascript source includes in XUL Applications and Firefox Extenstions

Friday, February 29, 2008

So you want to load a snippet of JavaScript code dynamically from the context of a script executing in your FireFox Application.

The cleanest way to achieve this is to use the rather little known mozIJSSubScriptLoader interface. You can see the documentation for the interface here.

The beauty of this method is that you can load the snippet or code block of JavaScript into a defined scope. Neat! no messy globals or eval() calls.

For example:
Lets say that you have a file test.js that can be accessed at the Chrome path chrome://yourextensionname/content/test.js and it contains the following:

function Foo () {
this.baz = "deep value";
}

Foo.protoype = {
readBaz : function () {
   alert(this.baz);
}
}

Lets say you want to load this test.js file into your application. I suggest creating a function that can load this code into a defined scope as below:

function includeJS(chromeFilePath, NameSpaceContainer) {
var scriptLoader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
  .getService(Components.interfaces.mozIJSSubScriptLoader);
scriptLoader.loadSubScript(chromeFilePath, NameSpaceContainer);
}

You could then use this includeJS() as show below:

var baseURI = "chrome://yourextensionname/";
var MyApplicationNameSpace = {};

try {
 includeJS(baseURI+"content/test.js",MyApplicationNameSpace);
} catch (e) {
 alert("Could not load Namespace: Encountered excpetion "+e);
}

var myFooObj = new MyApplicationNameSpace.Foo();
myFooObj.readBaz();    // will alert "deep value"

As great as this method of loading Javascript is, there are other ways you could consider. You could for instance use Mozilla's io-service coupled with an eval() as below:

function includeJS(chromeFilePath, NameSpaceContainer) {

var IOService = Components.classes["@mozilla.org/network/io-service;1"]
  .getService(Components.interfaces.nsIIOService);
var IOStream = Components.classes["@mozilla.org/scriptableinputstream;1"]
  .getService(Components.interfaces.nsIScriptableInputStream);
var data = IOService.newChannel(chromeFilePath, null, null).open();
IOStream.init(data);
var dataStr = IOStream.read(data.available());
IOStream.close();
data.close();
eval(dataStr, NameSpaceContainer);
}

The problem with both these two methods is that they break when you try to load a Javascript source file which contains special Unicode characters. As a work around for this I suggest using a
technique borrowed from buzzword technology AJAX ;-) , and do a XmlHttpRequest call to a Chrome URL.

For example you could use the following code as replacement to the two previous includeJS() methods:

function includeJS(chromeFilePath, NameSpaceContainer) {
 var httpRequest = new XMLHttpRequest();
 httpRequest.onload = function() {
    eval(this.responseText,NameSpaceContainer);
 };
 httpRequest.open("GET",chromeFilePath, true);
 httpRequest.send(null);
}

This seems to work even for source files that contain funky Unicode characters. You could replace the Chrome URl with file paths relative to your system, but I'd recommend always using a Chrome URL where possible. Its a better, more file system agnostic approach.

Labels: Javascript, Javascript quality, Mozilla, XUL

 

Interesting PHP function scoping caveat

While playing around a personal PHP project the other day I stumbled across some rather unsual PHP scope scenario. I was in the process of migrating some instance methods to static methods when I discovered the following:

Lets look at the some PHP code first:

class BarClass {
  
   public function readData () {
       echo $this->data;
   }
  
   public static function readData2 () {
    echo $this->data;
   }
}

class FooClass {

public $data;

public function __construct ($parameter) {
    $this->data = $parameter;
}

function testScope () {
    BarClass::readData();
}

function testScopeFail() {
    BarClass::readData2();
}
}

$myObj= new FooClass('Spooky Scope');
$myObj->testScope();         // Will print 'Spooky Scope'
$myObj->testScopeFail();     // Will throw an error

What is so intriguing in this little snippet of code is that I'm accidentally calling the BarClass method readData() statically, yet it has the $this instance variable defined within it ...and set to the calling scope!

Amazing. I wonder what kind of interesting things I could conjure up with this.

I included the other method readData2() as part of this post because a static function if properly defined will throw an error. ;-)

Labels: PHP, PHP function scope

 

Implementing a Singleton Design pattern in PHP

Lets say you need your PHP web application to have one and only one instance of a class at a time.

A simple way to achive this is to use the Singleton design pattern.

class Singleton {

private $myPrivateAttribute ;

private function __construct ( $aParameter ) {
 $this->myPrivateAttribute = $aParameter ;
}

public static function make ( $aParameter ) {
 static $instance = null ;
 if ($instance == null) {
  $instance = new Singleton ( $aParameter ) ;
 }
 return $instance ;
}

public function getAttributeValue () {
 return $this->myPrivateAttribute ;
}

public function __clone () {
 trigger_error ( 'Clone of a Singleton is invalid.', E_USER_ERROR ) ;
}
}

The reason this results in only a single object ever being created is that the Contructor is private. Hence you cannot create more objects of the Singleton class.

To verify the Singleton's make() method is infact return the same object on multiple calls try the following code:

$object = Singleton::make("original");
echo $object->getAttributeValue(); // Will print "orginal"
$secondObject = Singleton::make("copy");
echo $object->getAttributeValue(); // Will print "orginal"

Labels: Design Patterns, PHP, Singleton