勉強メモ-IE10 以下を切る場合の JavaScript チェックリスト

IE10 以下を切る場合の JavaScript チェックリスト - Qiitaを読んでのメモ。

undefinedのチェック

if (typeof チェック === 'undefined') {
// 定義されていない
}

日付の取得

Date.now()を利用

クラスの継承

function Sup() {
  console.log('constructor sup');
  this.name = 'super';
}

Sup.prototype.getName = function() {
  return this.name;
}

function Sub() {
  Sup.call(this); // super constructor call
  console.log('constructor sub');
  this.name = 'sub';
}

// extends
Sub.prototype = Object.create(Sup.prototype);
Sub.prototype.constructor = Sub;

var sub = new Sub();
console.log(sub.getName()); // sub

prototypeではなく、自分自身が持つプロパティなどのキーを列挙するObject.keys()

keys()を使わない場合、オブジェクト.hasOwnProperty(プロパティ名)でチェックする

基本で使えるようになったDOM

getElementById
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAllで、複合のID、class、tagを検索できる

querySelectorとquerySelectorAllで、複合のID、class、tagを検索できる

イベント

addEventListener(イベント名,関数)で、いくつも登録できる
削除時に、リスナの参照が必要。

開始

jQueryの$()か、document.addEventListener("DOMContentLoaded",function() {
});

XMLHttpRequest Level2→XHR2。xhrにイベントが設定できる

以下、使えるイベント

onloadstart;
onprogress;
onabort;
onerror;
onload;
ontimeout;
onloadend;

File / FileReader / Blob / Blob URL

XHR2に対応

CORS(Cross-Origin Resource Sharing)

クロスドメイン通信に対応。

pjax

history API / hash changeで実現。ブラウザの戻るボタンに対応したAjaxの実装

JSON / Base64

ネイティブで実装

JSON.stringify({ "a": 10});
JSON.parse('{ "a": 10}');

Base64

window.btoa("hello")
window.atob("aGVsbG8=")

relative URI

スキーマを省略すると、これまでのアクセスと同じ。

'//example.com/script.js'

などと書ける。

tanaka's Programming Memo

プログラミングについてのメモ。