Very important links related to this post:
Hi gyes. I am working on javascript from years and during this I have identified some important points that we must follow to make our application more responsive, more efficient and bug free. I am presenting these points in my several posts (Links of all these post provided at the top and bottom). My each post related with "Efficient Coding Style" is having 8 points. I have tried my best to explain it and tried to provide example code for better understanding. I am requesting you to please go through examples. These will provide lots of information.
One thing more, if you have any point that I have missed in my posts related with "Efficient Coding Style", please mention that in feedback column at the bottom, so that I can include that in these list.
Gyes, lets make it one place for all important points that should be followed while coding in Javascript and ExtJs.
1)
Never use
“new” keyword: Using ‘new’ keyword to create an instance of a component or
a class in ExtJs is a wrong practice as it does not follow the component life
cycle. Always use Ext.create() function to create an object. E.g.
Wrong: var obj =
new Ext.panel.Panel();
Right: var obj =
Ext.create(‘Ext.panel.Panel’);
2)
Initiate
Literals: Do not directly create objects of literals if you want to just
create the blank object in javascript like
var stringObj =
new String();
var arrayObj = new
Array();
var obj = new
Object();
These are not right way to create object in
javascript, because if we use these process, control will traverse through
whole class hierarchy. So, instead of these, we should use following ways to
create object of these classes:
var stringObj =
‘’;
var arrayObj = [];
var obj = {};
But you might be inheriting legacy code
written by others, so you should be aware of one “feature” of this constructor
(or yet another reason not to use it). The feature in question is that the
Object() constructor accepts a parameter and, depending on the value passed, it
may decide to delegate the object creation to another built-in constructor and
return a different object than you expect. E.g.
//
Warning: antipatterns ahead
// an empty object
var o = new
Object();
console.log(o.constructor
=== Object); // true
// a number object
var o = new
Object(1);
console.log(o.constructor
=== Number); // true
3)
Smart use
of getCmp(): It will return you an item object matching the id you passed
it. This will be the fastest method to return an item. All items when created
with an id are registered in a single object using their id as a key. So
Ext.getCmp( myId) will look up and return theRegistrationObject["myId"];
So it will be very quick.
But it fails if we provided same id to more
than one component. In that case, it will return the last one. Beside this, we
should not use it to get the object. We should try to use it once and apply its
outcome at many places by keeping the outcome in a variable.
If we need to use same id for more than one
component, we can use itemId. Let’s finddifference between id and itemId here.
4) Avoid unnecessary global variables: The problem with the global variable is
that they are shared among all the code in your javascript application or web
page. They live in the same global namespace and there is always a chance of naming collisions – when two separate
parts of an application define global variables with the same name but with
different purposes. Second drawback of using unnecessary global variable is
larger memory consumption as these global variable are generally not garbage
collected and they never release memory.
5) Use var keyword with global variable: There is one slight difference between
globals with var keyword and globals without var keyword – the difference is in
the ability to undefine these variables using the delete operator:
Globals created with var ( Those created in
the program outside any function) cannot be deleted. E.g.
//
define three globals
var global_var =
1;
global_novar = 2;
// antipattern
(function () {
global_fromfunc = 3; //
antipattern
}());
// attempt to
delete
delete global_var;
// false
delete
global_novar; // true
delete
global_fromfunc; // true
// test the
deletion
typeof global_var;
// "number"
typeof
global_novar; // "undefined"
typeof
global_fromfunc; // "undefined"
6) Try to remove unused variables and
functions: Do not keep unused variables, functions and unnecessary comments
in your code as these will only increase your file size and thus file loading
time will be increased.
7) Avoid object or variable creation in loop: If
not needed, do not create even a single variable or object inside any loop
because their numbers will increases with every iteration of loop causing
memory leakage.
8)
Avoid
unnecessary use of panel: Most
of the ExtJS applications suffer from panel explosion. Everything is done using
a panel, or to be more accurate, everything is done using several panels. The
problem is using a panel when there are much more lightweight alternatives.
Everyone loves panels but truth be told they're overkill for most parts of a
UI. I once saw a UI that displayed a few dozen thumbnail images and each image
was rendered as the HTML content of a different panel. All those panel were
totally unnecessary. Consider instead...
·
Could
you use HTML and CSS instead of a full component? An Ext.Template or Ext.XTemplate
might prove helpful.
·
Could
you just use a custom Ext.Component? There are various config settings
for injecting HTML into a component: autoEl, html, tpl
& data.
·
Could
you use a DataView to render all of your data instead of a number of
individual components?
·
Could
you use an Ext.container.Container rather than an Ext.panel.Panel
to reduce the overhead?
.....To be continued in "Efficient coding style in ExtJs: Volume 2"
.....To be continued in "Efficient coding style in ExtJs: Volume 2"
Very important links related to this post:
No comments:
Post a Comment
Please provide your precious comments and suggestion