Backbone - общая структура

Главная концепция - держать данные отдельно от ДОМа страницы, так креши во вью не приводят к потерям данных на странице.

Создание модели

var MyModel = Backbone.Model.extend({});

var myModel = new MyModel({myField: "..."});
myModel.set('myField', 'some value');

Создание вьюхи:

var MyView = Backbone.View.extend({
  render: function(){
   $(this.el).html('<li>' + this.model.get('myField')  + '</li>
');
  }
});

var myView = new MyView({model: myModel});
myView.render();
$('#app').html(myView);

Js FE modularity

Если каждый js файл будет создавать свои глобальные переменные и пользоваться ими в процессе работы приложения-страницы, то другие файлы-модули могут перетереть такие переменные не зная, что их выбранное имя уже кем-то занято.

Для это и придумали подход к модульности через неймспейсинг

module1.js:

var MODULE1 = (function(){
   var privateField1={...};
   var privateField2={...};

   var privateMethod1=function{...};
   var privateMethod2=function{...};

   return {
     publicField1: {...},
     publicField2: {...},
     publicMethod1: function(){...},
     publicMethod2: function(){...}
   };
})();

Global Imports

Ну если быть до конца искренним, то глобальные переменные все же нужны, но очень в ограниченном и аргументированном количестве.
Когда мы их испльзуем внутри наших моделей мы сталкиваемся с главными проблемами:
1) Мы можем их случайно изменить.
2) У нас очень много вложенностей-замыканий и это очень неефективно обращаться из них в глобальный скоуп с точки зрения произодительности. Эти проблемы решаются передачей глобальной переменной на этапе создания модуля на странице:

var MODULE1 = (function(neededGlobalInside){
   var privateField1={...};
   var privateField2={...};

   var privateMethod1=function{...};
   var privateMethod2=function{...};

   return {
     publicField1: {...},
     publicField2: {...},
     publicMethod1: function(){...},
     publicMethod2: function(){...}
   };
})(global1);

Эта процедура называется global imports

Augmentation
Процедура, которая помогает нам расширить существующий модуль
augmentation1-for-module1.js:

MODULE1 = function(oldNS){
   var newprivateField1={...};
   
   var newprivateMethod1=function{...};
   oldNS.newpublicMethod1: function(){...};
    
   return oldNS;
}(MODULE1);

Работа с исчислениями

Работа с денежными рассчетами:

int result = parseFloat((0.2 + 0.3).toFixed(1));

С плавающей точкой дают сбив с очень маленькой цифрой за рядом нулей, это фиксится строгим указанием сколько цифр мы хотим видеть после точки, но проблема в том, что тоФиксед возвращает строку, для этого мы парсим ее обратно в число:)

typeof NaN; // -> "number"
console.log(NaN === NaN); // -> false
isNaN("42"); // -> false, потому что строка

parseInt(intStr, radix); //radix -> 10, 8, 16, 2

Тестирование производительности в Js

Грубый метод измерения времени выполнения блока кода
console.time("Id");
//блок кода
console.timeEnd("Id");

Более точный:

function SpeedTest(testImplement, testParams, repetitions){
  this.testImplement = testImplement;
  this.testParams = testParams;
  this.repetitions = repetitions || 10000;
  this.average = 0;
}
SpeedTest.prototype = {
  startTest: function(){
    var beginTime, endTime, sumTimes = 0;
    for (var i = 0, x = this.repetitions; i < x; i++){
      beginTime = +new Date();
      this.testImplement( this.testParams );
      endTime = +new Date();
      sumTimes += endTime - beginTime;
    }
    this.average = sumTimes / this.repetitions;
    return console.log("Average execution across " +
                        this.repetitions + ": " +
                        this.average);   
  }
}

Полезные Js

http://www.smashingmagazine.com/2009/02/08/50-extremely-useful-javascript-tools/
http://www.javascriptkit.com/cutpastejava.shtml
http://www.scripterlative.com/

• Binary Floating Point Values
• JavaScript: The Right Way
• Code Conventions for JavaScript
• 45 Useful JavaScript Tips and Tricks
• Thinkful: Best Practices 1 and 2

Прототипирование в Javascript

valueOf - возвращается сам обьект, на котором вызван данный метод, смысл только для классов, которым мы переопределим этот метод и будем обьект предствлять как простое значение типа хеш.
constructor - что создало обьект. Например для строки: function String(){[native code]}, для обьекта {}: function Object(){[native code]}, или для кастомного класса: function MyClass(a, b){this.a = a; this.b = b;}
toLocaleString - для обьекта класса Date значения результата данного метода будут отличаться в зависимости под какую локаль настроен браузер клиента, а так обычно результат идентичен со следующей вункцией.
toString - функции представляются в виде строки сорцов, для этих обьектов это самое интересное применение.
isPrototypeOf - true если объект на котором вызывают этот метод является прямым прототипом параметра.
propertyIsEnumerable - true возвращает только на свойства определенные именно в этом обьекте, на свойства выше в цепочке прототипов возвращается false, если true - то это поле появится в for..in. Но почему тогда если добавить в прототип Array, то такие поля появятся в for..in?
hasOwnProperty - true если свойство принадлежит именно самому объекту, а не одному из прототипов по цепочке. Я так понимаю с предыдущим методом есть оличие в том, что некоторые поля прототипов ответятся как тру в предыдущем методе.

Пример использование методом Object

Object.prototype.findOwnerOfProperty = function(propName){
  var currentObject = this;
  while(currentObject !== null) {
    if (currentObject.hasOwnProperty(propName)) {
      return currentObject;
    } else {
      currentObject = currentObject.__proto__;
    }
  }
  return "No property found!";
}

Можно ставить прототипом и не класс, а обьект:

  var shoe = { size: 6, gender: "women", construction: "slipper"};
  
  var magicShoe = Object.create(shoe);
  magicShoe.jewels = "ruby";
  magicShoe.travelAction = "click heels";
  magicShoe.actionRequired = 3;

  shoe.isPrototypeOf(magicShoe);//true
  

Этот новый метод криэйт в последнийх реализациях JS позволил упростить старый добрый метод наследования.
Допустим у нас есть два класса:

function Animal(name) {
    this.name = name
    this.canWalk = true
}
Animal.prototype = {
    live: function(){}
};

function Rabbit(name) {
    this.name = name
}

Старый метод:

function extend(Child, Parent) {
    var F = function() { };
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.superclass = Parent.prototype;
}

extend(Animal, Rabbit);

Новый метод:

Rabbit.prototype = Object.create(Parent.prototype);

Собрать комиты по таске в буфер

git log --author="Andrii Ieremenko" --grep=PDR-520 --pretty=format:"%h" | pbcopy 

Прикольная статья

https://www.coveros.com/cucumber-jvm-setup/