Kolay IKamp, 19.07.2017
var isLoggedIn = false; // GOOD
var cx = false; // BAD
+new Date(); // BAD
Date.now(); // GOOD
// BAD
// Login user
user.login();
// GOOD
// Validate credentials and login user.
if (user && user.credentials) {
user.login();
}
else {
user.fetchCredentials().then(user.login);
}
// BAD
if (x) {
var k = 6;
}
else {
var k = 7;
}
// GOOD
var k = 7;
if (x) {
k = 6;
}
// GOOD
var k = x ? 6: 7;
// BAD
var renderPage = function() {
// render views
...
...
...
// init menu
...
...
...
...
// bind events
...
...
};
// GOOD
var renderViews = function() {
...
...
...
};
var initMenu = function() {
...
...
...
...
};
var bindEvents = function() {
...
...
};
var renderPage = function() {
renderViews();
initMenu();
bindEvents();
};
// BAD
var name = 'Fatih';
var sayName = function() {
console.log(name);
}
name = 'Erdem';
sayName();
// GOOD
(function() {
var name = 'Fatih';
var sayName = function() {
console.log(name);
}
})();
name = 'Erdem';
sayName();
// BETTER
var module = (function() {
var name = 'Fatih';
var sayName = function() {
console.log(name);
}
return {
sayName: sayName
};
})();
module.sayName();
name = 'Erdem';
module.sayName();
// BAD
var login=function (username, password){
...
}
// GOOD
var login = function(username, password) {
...
};
// BAD
var obj = new Object();
obj.username = 'fatihacet';
obj.email = 'acetfatih@gmail.com';
// GOOD
var obj = {
username: 'fatihacet',
email: 'acetfatih@gmail.com'
}
var arr = new Array(); // BAD
var arr = []; // GOOD
// BAD
var data = {
user: {
profile: {
name: 'Fatih',
username: 'fatihacet',
email: 'acetfatih@gmail.com'
},
orders: { ... },
addresses: { ... },
}
};
if (data.user.profile.username && data.user.profile.email) {
...
}
// GOOD
var profile = data.user.profile;
if (profile.username && profile.email) {
...
}
// BAD
var createMenu = function() {
$('.menu').addItems();
$('.menu').addClass('ready');
$('.menu').show();
}
// GOOD
var createMenu = function() {
var $menu = $('.menu');
$menu.addItems();
$menu.addClass('ready');
$menu.show();
}
// BETTER
var createMenu = function($menu) {
$menu.addItems();
$menu.addClass('ready');
$menu.show();
}
// BAD
var body = document.body;
items.forEach(function(item) {
var el = createElement(item);
body.appendChild(el);
});
// GOOD
var body = document.body;
var container = document.createElement('div');
items.forEach(function(item) {
var el = createElement(item);
container.appendChild(el);
});
document.body.appendChild(container);
// BAD
var menu = document.querySelector('menu');
menu.style.border = '1px solid #333';
menu.style.color = '#FFF';
menu.style.padding = '20px 0';
// GOOD
var menu = document.querySelector('menu');
menu.classList.add('someClassName');
<div class="container">
<div class="item">
<div class="user">
<img class="avatar" src="..." />
</div>
</div>
</div>
// BAD
$('.avatar').parent().parent().hide();
// GOOD
$('.avatar').closest('.item').hide();