原文：ExtJS - Efficient coding style guide
作者：Raja
错误: var obj = new Ext.panel.Panel(); 正确: var obj = Ext.create(‘Ext.panel.Panel’);
var stringObj = new String(); var arrayObj = new Array(); var obj = new Object();
var stringObj = ‘’;
var arrayObj = [];
var obj = {};
// 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
// 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" var arrayLength = arrayObj.lenght;
for( var I = 0; I < arrayLenght; i++){
//anti pattern
If(Abc.xyz.foo.bar.againFoo.againBar.finalObj === arrayObj[i]){
Alert(‘Anti pattern code’);
}
} var arrayLength = arrayObj.lenght;
var obj = Abc.xyz.foo.bar.againFoo.againBar.finalObj;
for( var I = 0; I < arrayLenght; i++){
//pattern
If(obj === arrayObj[i]){
Alert(‘pattern code’);
}
}
// antipattern
myname = "global"; // global variable
function func() {
alert(myname); // "undefined"
var myname = "local";
alert(myname); // "local"
}
func(); for (var i = 0; i < myarray.length; i++) { //antipattern use of collection length
// do something with myarray
}
//Right pattern
var arrLength = myarray.length;
for (var i = 0; i < arrLength; i++) {
// do something with myarray
} var man = {hands: 2, legs: 2, head: 1};
//somewhere else in the code
// a method was added to all object
If( typeof Object.prototype.clone === undefined){
Object.prototype.clone = function(){};
}
// 1.
// for-in loop
for (var i in man) {
if (man.hasOwnProperty(i)) { // filter
console.log(i, ":", man[i]);
}
}
/*
result in the console
hands : 2, legs : 2, heads : 1
*/
// 2.
// antipattern:
// for-in loop without checking hasOwnProperty()
for (var i in man) {
console.log(i, ":", man[i]);
}
/*
result in the console
hands : 2, legs : 2, heads : 1, clone: function()
*/ var zero = 0;
if (zero === false) {
// not executing because zero is 0, not false
}
// antipattern
if (zero == false) {
// this block is executed...
} console.log(typeof un); // "undefined"
var jsstring = "var un = 1; console.log(un);";
eval(jsstring); // logs "1"
console.log(typeof un); // "number" alert(parseInt("8")); // "Will print 8"
alert(parseInt("08")); // "Will print 0"
alert(parseInt("08,10")); // "Will print 8"
If we use parseInt(“08”), it gives octal value of 08.
因此，要永远记住使用第二个变量，即redix，来定义数字的类型，无论它是十进制、八进制还是十六进制。 // antipattern
// for illustration only
// global functions
function foo() {
alert(‘global foo‘);
}
function bar() {
alert(‘global bar‘);
}
function hoistMe() {
console.log(typeof foo); // "function"
console.log(typeof bar); // "undefined"
foo(); // "local foo"
bar(); // TypeError: bar is not a function
// function declaration:
// variable ‘foo‘ and its implementation both get hoisted
function foo() {
alert(‘local foo‘);
}
// function expression:
// only variable ‘bar‘ gets hoisted
// not the implementation
var bar = function () {
alert(‘local bar‘);
};
}
hoistMe(); // unsafe and antipattern
var MYAPP = {};
// better
if (typeof MYAPP === "undefined") {
var MYAPP = {};
}
// or shorter
var MYAPP = MYAPP || {};
with (being.person.man.bodyparts) {
arms = true;
legs = true;
} being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs= true;
var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;
componentObj.items.items[0] = newObject;
var anObj = componentObject.items.items[0].items.items[1];
Ext.create(‘Ext.panel.Panel’,{
height: 200,
width: 500,
//layout: ‘hbox’, // anti pattern if layout is not defined
items:[
{
xtype: ‘button’,
id: ‘button1’
flex: 1
},{
xtype: ‘button’,
id: ‘button2’
flex: 1
}
]
});
Ext.create(“Ext.panel.Panel”,{
height: Ext.getBody().getViewSize().height,
width: Ext.getBody().getViewSize().width
});
Ext.create(‘Ext.panel.Panel’,{
height: 200,
width: 500,
layout: ‘hbox’,
items:[
{
xtype: ‘button’,
id: ‘button1’
flex: 1
},{
xtype: ‘button’,
id: ‘button2’
flex: 1
}
]
}); Ext.define(‘MyClass’,{
constructor: function(config){
this.store.on(‘load’, function(){
………..;
}, this);
}
}); Ext.define(‘MyClass’,{
constructor: function(config){
this.store.on(‘load’, this.onStoreLoad, this);
},
onStoreLoad: function(){
………;
}
});record.beginEdit(); record.set(‘name’, ‘Tom’); record.set(‘age’, 17); record.set(‘member’, true); record.endEdit();
//slow code container.add(panel); container.add(button); container.add(grid); //fast container.add(panel, button, grid); //using an array is also fast container.add([panel, button, grid]);
container.suspendLayout = true; doSomethingToChangeLotsOfLayoutChange(); container.suspendLayout = false; container.doLayout();
myStore = ……{
………….,
Buffered: true, // Tell grid to use a paging scroll manager to scroll and refresh table automatically.
perPageCount: 0 // never remove pages from the prefetch buffer;
}
myStore.prefetch({
start: 0,
limit: 999999,
callback: function(){
myStore.load(0, 49);
}
}); Ext.define(‘MyClass’,{
Constructor: function(config){
//this.store.on(‘load’, this.onStoreLoad, this); // this is not good
this.store.mon(‘load’, this.onStoreLoad, this);
},
onStoreLoad: function(){
………;
}
}); var dateString = "03/20/2008";
var dateString = "2008/03/20";
var dateString = "03-20-2008";
var dateString = "March 20, 2008";
var dateString = "Mar 20, 2008";
var dateString = "Oct 2, 2011";
作者会持续更新这篇文章。如果你有任何意见会反馈，可联系作者。
【翻译】Ext JS——高效的编码风格指南,布布扣,bubuko.com
原文地址：http://blog.csdn.net/tianxiaode/article/details/27965201
