Hi Paul,
Model 1
MYFRAMEWORK = {};
MYFRAMEWORK.obj = {
fn1: function () {
MYFRAMEWORK.obj.fn2();
},
fn2: function () {
MYFRAMEWORK.obj.fn1();
}
};
Model 2
MYFRAMEWORK = {};
MYFRAMEWORK.obj = {
fn1: function () {
this.fn2();
},
fn2: function () {
this.fn1();
}
};
I wrote this type of model. I Have another doubt. How to call one method to another? I Call two types .Which one i use? Which method is speed to Access(Performance Related)? Any other Best way to access object method?
MuthuRaja
With the first you’re going to face a lot of work if you change the global name. Using the second is better.
You’re setting up there an endless loop too though, so be wary of that.
Hi Paul
I have Learned lot of things from you. thx a lot. Its very useful to me.
With the first you’re going to face a lot of work if you change the global name. Using the second is better.
You’re setting up there an endless loop too though, so be wary of that oh sorry! this is just sample
Model 2
MYFRAMEWORK = {};
MYFRAMEWORK.obj = {
fn1: function () {
this.fn2();
},
fn2: function () {
this.fn3();
},
fn3: function () {
return something
}
};
shall I proceed this way (only concept) Any best way to access methods?
Anther doubt?
My web application have 5000 function separatly defining.
I will change each function to method.
My question is one global object , It has 5000 methods, Is any performance Problem?
If any problem Give the solution Paul.
MuthuRaja
If at all possible try to access the methods internally, using the this keyword.
Sometimes you’ll need to access them using the global constructor, such as when using setTimeout, but try to keep it to a minimum.
5000? Is that a mis-key? Five Thousand!? Even jQuery only has a few hundred. What on earth could warrant 5000 methods?
You will have performance problems there if people try to download the whole lot at once. You may want to extract several chunks of methods out to separate modules so that you can later on load them in separately.
Hi paul,
I wrote small framework sample
var muthuObj={};
muthuObj.extend=function(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
};
muthuObj.extend(muthuObj,{
show:function(){
console.log(‘show’);
},
hide:function(){
console.log(‘hide’);
},
toggle:function(){
console.log(‘toggle’);
}
});
muthuObj.extend(muthuObj,{
leads:function(){
console.log(this.show());
},
contacts:function(){
console.log(this.hide());
},
accounts:function(){
console.log(this.toggle());
}
});
I called muthuObj.leads() function.
firebug console throw currect answer, but two undefined showed.
I make any mistake?
Muthuraja
Your leads method tries to log the return value of the show method. The show method doesn’t return anything though, hence the “undefined” message.
The leads method does this:
console.log(this.show());
The show method does this:
console.log('show');
So what actually gets run is this:
console.log(console.log('show'));
[list][]The inner console.log gets run, which gives you the ‘show’ that you see.
[]The show function doesn’t return anything, which is why it returns undefined, which is output by the outer console.log
[*]The leads method doesn’t return any value, so it returns undefined too explaining the second undefined that you see.[/list]
If you update the leads function to this, it will work properly with no undefined statements.
leads:function(){
this.show();
},
Hi CletusSpuckler,
var muthuObj={};
muthuObj.extend=function(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
};
muthuObj.extend(muthuObj,{
doc:document,
getId:function(id){
return this.doc.getElementById(id);
},
show:function(id){
return this.getId(id).style.display=‘block’;
},
hide:function(id){
return this.getId(id).style.display=‘none’;
},
toggle:function(id){
var ces=this.getId(id).style;
ces.display=(ces.display==“block” || ces.display==“”)?“none”:“block”;
}
});
Hi Paul(I am your student) this is the first step of my small framework. is any drawback in my framework? please currect me if it’s wroung means?
MuthuRaja
If the reason for this.doc is to shorten what is typed, document is the same length.
You’ll also find it more difficult to access this.doc from within other functions that the methods call, so leaving it as document throughout your functions is perfectly okay.
Second, do the show/hide functions work on inline elements? Some elements are block, some are inline.
Also, getElementById is a good name for a method since it does exactly what you’d expect it to do; getId, however, does not in your case. The method does not return an id…
Not sure what you would want to do with the return values of show() and hide() etc…? You could return muthuObj instead, which would allow for chaining of commands (muthuObj.show(“id1”).hide(“id2”); for example). That’s how most JS frameworks tend to work.
Hi,
You could return muthuObj instead, which would allow for chaining of commands (muthuObj.show(“id1”).hide(“id2”); for example). That’s how most JS frameworks tend to work.
How to Implement in chaining concept(muthuObj.show(“id1”).hide(“id2”) in my above framework example?
show: function (id) {
this.getId(id).style.display = 'block';
return this;
},
waaw, its working fine, thx CletusSpuckler,
var muthuObj={};
muthuObj.extend=function(destination, source){
for (var property in source)
destination[property] = source[property];
return destination;
};
muthuObj.extend(muthuObj,{
getId:function(id){
return document.getElementById(id);
},
show:function(id){
this.getId(id).style.display=‘block’;
return this;
},
hide:function(id){
this.getId(id).style.display=‘none’;
return this;
},
toggle:function(id){
var ces=this.getId(id).style;
ces.display=(ces.display==“block” || ces.display==“”)?“none”:“block”;
return this;
}
});
its working properly. Once again check it.
this chain model script execution time will slow or fast?
Do you want to time some execution tests to measure the difference?
Sure. I will measure the execution time. Thx Paul.
MuthuRaja