JavaScript OOP

[shadowayex]

I'm trying to get a field of an object from within a method of that same object. I have something of the sort:

function myObject(){	this.foo = "bar";	this.func = function()		{			alert(this.foo);		}}

Now, I realize why this doesn't work, but I don't know how to go about getting said field. What do I need to do to get it?

[justsomeguy]

myObject = function(){  return ({	foo: 'bar',	func: function()	{	  return this.foo;	}  });}();myObject.func();

You can extend that to also approximate private and public properties and methods:

myObject = function(){  // private  var priv1 = 'private';  var priv2 = function()  {	alert(priv1);	return 'this is a private function';  }  return ({	// public	foo: 'bar',	func1: function()	{	  alert(this.foo);	},	func2: function()	{	  return priv2(); // no "this" for private	}  });}();myObject.func1();myObject.func2();

Note how the anonymous function is set up. myObject is not set to a function, it is set to the object the function returns. The reason is because the parens at the end execute the function immediately, so myObject is set to the return value of the function (the object that it returns, with the public members).

[shadowayex]

I've got to admit, that's not something I've seen. I'm trying to figure out how to adapt that to my particular project. I have multiple instances of this object, the exact number dictated by situation. So, would I just move the code in your outer function() into another function and just call that function to make instances of that object?

[jeffman]

If you don't want to wrap your head around JSG's object constructor, an easy way to get around the scoping issue in YOUR constructor is to store a reference to this in a variable that will behave as expected when it is enclosed:

function myObject(){	var me = this;	this.foo = "bar";	this.func = function()		{			alert(me.foo);		}}

[justsomeguy]

myObject = function(){  // private  var priv1 = 'private';  var priv2 = function()  {	alert(priv1);	return 'this is a private function';  }  return ({	// public	foo: 'bar',	set: function(v)	{	  this.foo = v;	},	func1: function()	{	  alert(this.foo);	},	func2: function()	{	  return priv2(); // no "this" for private	}  });}obj1 = new myObject();obj2 = new myObject();obj2.set('baz');obj1.func1();obj2.func1();obj2.func2();

The main change was to remove the parens that execute the function immediately, and then create the objects explicitly.

If you don't want to wrap your head around JSG's object constructor

You're taking the fun out of it!

[shadowayex]

JSG: I see how it works now. That's extremely clever.DD: Also very clever. I like it because it's quick and easy, and I'll use it for now, until I take the time to pick through JSG's code.Thanks to both of you =)

[jeffman]

You're taking the fun out of it!

I kind of dig your technique, actually. But you know us old folks . . .

[justsomeguy]

Indeed. It took me a while to get used to it, but using ExtJS sort of forced me to figure it out. It definitely works well in a lot of situations though. These are a little Ext-specific, but the tutorials on this page about Application Layout definitely helped:http://www.sencha.com/learn/Tutorials#Application_Design

[skaterdav85]

I like that pattern too. As discussed in the book JavaScript Patterns, you can create various modules of your page using that approach so that each unit is self contained and your code is well organized. @JSG, how do you use that approach with ExtJS? I'm not familiar with that library but do you do something like pass in the library's global object to a module like this:

var myObject  = (function (obj) {//module code here}(ExtJSObject));

[justsomeguy]

The base Ext object has several methods for dealing with modules like that, for example it makes it easy to override various methods, extend the object to create a new one, etc. This has a couple examples:http://www.sencha.com/learn/Tutorial:Appli...t_for_BeginnersThis shows an example of creating a new component by extending an existing Ext component:http://www.sencha.com/learn/Tutorial:Extending_Ext2_Class

[skaterdav85]

just curious, why did you choose ExtJS over jQuery or YUI?

[justsomeguy]

Because of all of the built-in interface components. The windows, form elements, layout managers, grids, trees etc all make things a lot easier, look consistent, and are easy to theme or skin. I don't even really write HTML anymore for most of my applications, the library handles all of that (including browser detection when necessary). The index page for my major application has some Javascript-checking markup and CSS, a bunch of script tags in the body to load the files and a progress indicator for that, a script tag to kick off execution when everything is loaded, and a hidden iframe to use as a target for when people download files. Everything else is handled in the Javascript. The base component for the application is a viewport, which is a component that fills the entire browser area which you can add the rest of your components to.

[skaterdav85]

interesting. ya i guess with jQuery you would need to find a lot of plugins to implement those UI features. So does that mean the size of the library is a little bit bigger than some of the others? How popular is Ext JS?

[justsomeguy]

I'm not sure how many people use it, but yeah it's definitely bigger. It was pretty easy to mitigate that though. The debug version of the main file is around 1.2MB. The minified version is around 500KB, and after server compression that's down to 140KB. For the login page on my application, the Javascript totals 173KB and CSS is 33KB after the server has compressed everything, so it's not too bad for everything you get with that. That would be about 2MB of code if everything was uncompressed and unminified. For the main admin section, which includes the majority of application code, that gets 247KB of Javascript and the same 33KB of CSS. My main admin file gets compressed from 1.1MB unminified down to 77KB after minifying and server compression.The current version of Ext (or Sencha, after the rename) also includes a stripped-down version without the UI controls that is significantly smaller and just gives the DOM methods and improvements to all of the built-in classes like strings, arrays, functions, etc, plus the utilities for ajax, JSON, etc. That one is Ext Core, or maybe Sencha Core now.

[skaterdav85]

you sure do get a lot with the library. I was really impressed by the sample demos. Everything looked like a desktop app but through a browser. Too bad I can't use it unless i pay for it since most of my projects are commercial.