Javascript note

Angular, React, Vue 比較

• 一番まとまってる気がする: http://iwasiman.hatenablog.com/entry/2018/04/23/200000
• 開発者はReactとAngularのどちらを選ぶべきか？ - WPJ

ES6で書いてJSに変換してくれるすげぇ簡単なタスクランナーの設定

1、以下をnpm install

• babel-core
• babel-preset-env
• babel-preset-react
• babelify
• browserify

2、以下をnodeで叩く

/*
INFO:
- process.argv[2]: 第一引数が代入されている `node node/compile.js {ここ}`
*/
compile(process.argv[2]);

function compile(SITE_ID) {
  var fs = require("fs");
  var browserify = require("browserify");
  browserify("./src/" + SITE_ID + ".js")
    .transform("babelify", {presets: ["env", "react"]})
    .bundle()
    .pipe(fs.createWriteStream("./build/" + SITE_ID + ".js"));
}

その要素にbindされているイベントと、その定義場所を知る

var ev = $._data(element, 'events');

変数の監視について

• Object.observe() でデータバインディング革命 - HTML5 Rocks
• JavaScriptで変数が変更されたのを監視して、なんかする方法 - Qiita
• RxJS の Observable / Observer の概要 - Qiita

BookmarkLet

• ブックマークレットで jQuery を使う魔法の 210 文字

DOMを拡張する方法

• DOMを拡張してみる - Qiita

ES6で使えるメソッドまとめ:

• ES2016 / ES2017で実装される機能まとめ - Qiita
• ES仕様(es2015〜es2017)まとめ - Qiita

ヒアドキュメント関係:

• 変数も組み込める: https://qiita.com/_shimizu/items/837b529de9f3302e315c
• ES6: Template literals - JavaScript | MDN

.styleより.setAttribute

.styleは挙動がおかしいときがある

// thumbEl.style.backgroundImage = 'url(' + imgPath + ')';
thumbEl.setAttribute('style', 'background-image: url(' + imgPath + ')');

class関係:

• #わかりやすい JavaScript (ES5) でクラスを実現するための基本
• jsにおけるprivateの表現: JavaScriptのクラスでprivateを実現してみたかった人生だった - 生涯未熟

document.weite script問題

scriptのasyncについて

• asyncをつけないと、jsファイルの実行が完了するまで、HTML のパースは再開されません。続き...

評価されるタイミング #基本

// evaluate $xxx immediately:
ready($xxx);

// doesn't evaluate $xxx immediately:
ready(function(){
  $xxx();
});

use properly.
使い分けると良い。