JavaScript, мысли "вслух": 2012

xtpl, пока только видео

// Конечно это только зарисовка, но судите сами
https://docs.google.com/open?id=0B1EVC8FDeUvPcnRXTGpIUU9pT00

Opera 12.00 + history.pushState + relative url

// Друзья, будьте осторожны, Opera не всегда правильно формирует
// относительные пути при работе с History API. Неадекватное поведение
// замечено в 12.00 (12.12b всё окей).
//
// Суть проблемы:
// 1. Мы находимся на странице /home/
// 2. Меняем history.pushState({}, '...', '/blog/');
// 3. Динамически добавляем ссылки с относительным путем: href="./?id=1"
// 4. В Opera получаем "/home/?id=1", а не "/blog/?id=1"
http://jsfiddle.net/RubaXa/dU9PR/2/

iOS6: xhr upload

// Аха-ха, когда тестировал upload файлов, загружал один и тотже
// файл, а оказалась, что эта дурилка кеширует POST, так что
// только "?nocache=__random__", только хардкор!

Opera vs. Mac

// FileReader:
// — работает с 11.11 по 12.02 (12 версий)
// — ушел на обед с 12.10 по 12.11
// — 12.12b вроде вернулся

FileAPI: Новый пример работы

// Пример загрузки аватары
http://rubaxa.github.com/FileAPI/example.userpic.html

Идеальный тест

// Вставьте в "body" параграф с классом "highlight" и текстом "It's working!".

FileAPI

// Совсем забыл:
http://habrahabr.ru/company/mailru/blog/159587/

IE7: Три часа, 10 000 строк html'а, чтобы найти это

// (1) Error: object doesn't support this property or method
navigator.javaEnabled ? navigator.javaEnabled() : false;

// Okay. Проверяем:
typeof navigator.javaEnabled; // unknown

alert(navigator.javaEnabled); // Error (1)

// зато так
alert(navigator.javaEnabled()); // true

Мне определенно начинает нравиться IE10

window.matchMedia(''); // Error: "Invalid argument."

window.matchMedia('42'); // [object MediaQueryList]

Гммм...

// Так, я всегда думал:
events.on(document, 'click', function (evt){
  var node = evt.target;
  do {
  if( node.nodeType == 1 ){ // first step
  var href = node.href;
  if( /^http/i.test(href) ){ // ok, it's link
  if( node.tagName == 'IMG' ){
  // IE: Hello, RubaXa!
  // me: FFFFFUUUUUUUUuuuu!11
  }
  }
  }
  } while( node = node.parentNode );
});


// КАК, ПОЧЕМУ?
// Лучше запишу!
var img = new Image;
img.src = 'http://.../fuck.yeah';
if( img.href == 'http://.../fuck.yeah' ){
  // Ха-ха-ха!
}

// Ну, Ок, а если так
img.href = 'try.again';
img.href == 'http://.../fuck.yeah'; // true!!1

// Good night!

jsPerf.com

// Прежде, чем оптимизировать какой-то кусок, поищите его тут:
http://jsperf.com/search?q=trim

IE10 & FileAPI

// Если  вы не знали, то IE10 поддерживает HTML5/FileAPI:
var reader = new FileReader;
reader.readAsBinaryString(file); // error: Object doesn't support method or property "readAsBinaryString"

// Но, выход есть!
var reader = new FileReader;
reader.onload = function (evt){
  var base64 = evt.result.replace(/^data:[^,]+,/, '');
  var binaryString = window.atob(base64); // bingo!
};
reader.readAsDataURL(file);

Fastest html escape

// http://jsperf.com/htmlescape-vs-goog-string-htmlescape
// Если вам нужна самая быстрая функция htmlEspcae, то:

// (1) Просто и быстро
var htmlEscape = (function (){
  var _rhtml = /[&<>\"]/g,
  _map = { '&': '&', '<': '<', '>': '>', '"': '&quote;' },
  _replace = function (c){ return _map[c]; }
  ;

  return function(str) {
  if( typeof str === "string" ){
  if( _rhtml.test(str) ){
  return str.replace(_rhtml, _replace);
  }
  }
  return str;
  }
})();

// (2) goog.string.htmlEscape -- быстро и очень быстро в Chrome/Node/V8
// http://closure-library.googlecode.com/svn/docs/closure_goog_string_string.js.html
var googStringHtmlEscape = (function (){
  var _ramp = /&/g,
  _rlt = /,

  _rgt = />/g,
  _rquote = /\"/g,
  _rhtml = /[&<>\"]/
;

  return function (str){
  // quick test helps in the case when there are no chars to replace, in
  // worst case this makes barely a difference to the time taken
  if( typeof str !== 'string' || !_rhtml.test(str) ) return str;

  // str.indexOf is faster than regex.test in this case
  if( str.indexOf('&') != -1 ) str = str.replace(_ramp, '&');
  if( str.indexOf('<') != -1 ) str = str.replace(_rlt, '<');
  if( str.indexOf('>') != -1 ) str = str.replace(_rgt, '>');
  if( str.indexOf('"') != -1 ) str = str.replace(_rquote, '&quote;');

  return str;
  }
})();