JavaScript Best

Practices

Fatih Acet

Kolay IKamp, 19.07.2017

Anlamli degisken

isimleri kullanin



    var isLoggedIn = false; // GOOD

    var cx = false; // BAD

En basit kodu yazmaya

ozen gosterin.



    +new Date(); // BAD

    Date.now(); // GOOD

Kodunuza aciklama ekleyin



    // BAD
    // Login user 
    user.login();


    // GOOD
    // Validate credentials and login user.
    if (user && user.credentials) {
      user.login();
    }
    else {
      user.fetchCredentials().then(user.login);
    }


Okunabilirlikten ödün vermeden kisa kodu yazabilirsiniz



    // BAD
    if (x) {
        var k = 6;
    } 
    else {
        var k = 7;
    }


    // GOOD
    var k = 7;
    if (x) {
      k = 6;
    }
    

    // GOOD
    var k = x ? 6: 7;

Cok buyuk fonksiyonlari, anlamli ve kucuk fonksiyonlara ayirmaya calisin



    // 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();
    };

    

Global namespace’den uzak durun



    // 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();

Kod standartlarini takip eden araclar kullanin (ESLint)



    // BAD
    var login=function (username, password){
        ...
    }

    // GOOD
    var login = function(username, password) {
        ...
    };

Shorthand Notation kullanin



    // 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

Degiskenleri cache'leyin



    // 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) {
        ...
    }

Degiskenleri cache'leyin



    // 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();
    }

DOM islemlerini azaltin



    // 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);

Gorsel isleri CSS ile yapin



    // 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');

DOM yapisina bagli kalmayin



    <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();
Made with Slides.com