Git Product home page Git Product logo

js_best_practices's Introduction

JavaScript best practices W3C

Avoid globals

Module Pattern

myModule = function(){
  var current = null;
  function init(){...}
  function change(){...}
  function verify(){...}
}();

It is easy to call functions and access variables from other places without having to go through the myModule:

myModule = function(){
  var current = null;
  function init(){...}
  function change(){...}
  function verify(){...}
  return{
    init:init,
    set:change
  }
}();

Calling myModule.set() will now invoke the change() method.

myModule = function(){
  var current = null;
  function init(){...}
  function change(){...}
  function verify(){...}
  return{
    init:init,
    set:change
  }
}();

myModule.set()

Naming js

_underscore

It is private or protected, use

var Person = (function() {
   var _trueAge = 50,
       _trueWeight = 140;
 
   return {
      age : _trueAge - 15,
      weight : _trueWeight - 30
   };  
})();
 
Person.age; // 35
Person.weight; // 110
Person._trueAge; // undefined (cause it's private, yo)

UPPERCASE Constants

If the variable is a constant, never change his value, write it uppercase

var SPEEDOFLIGHT = 299,792; // kilometers per second

JavaScript Hungarian Prefixes

a - array b - boolean f - float fn - function i - integer n - node o - object s - string

var aData = [1, 2, 3];
var bFound = false;
var fGoldenRatio = 1.618;
var fnCallback = function() { };
var iCurrentPage = 1;
var nNewRow = document.createElement("tr");
var oSettings = {
    type: "GET",
    url: "test.json",
    dataType: "jsonp"
};
var sLabel = "First Name";

More: https://www.darklaunch.com/javascript-hungarian-notation-variable-prefix-naming-convention

Capital First Letter: 'Class' JS

In old JavaScript version, we don't have classes but constructor functions yes

function Person(name) {
  // If the new keyword is absent, the constructor will be the window.
  // In this case, compensate, and return a new instance
  if ( this.constructor !== Person ) {
    return new Person(name);
  }
 this.name = name;
}

// Intentionally forgot the "new" keyword 
var Joey = Person('Joey');
Joey.name; // Joey

Performance JS

jQuery: data-atributes performance

js_best_practices's People

Watchers

James Cloos avatar Fernando Muñoz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.