はてなブックマーク

Reduxを学び始めたばかりの時、ReduxのチュートリアルのReactのComponentと連携しているコードが何をやっているかわからなかったのだが、コードを書いているうちに少しずつわかってきたので、自分の考えの整理のためと同じところで躓いている人のために順序立てて説明していきたい。 まず、Fluxの処理の流れを再確認しておきたい。Fluxの概念図はググれば色々出てくるが、まずAction,Store,Componentで以下のように表してみる。 Action —–> Store —–> Component (—–> Action…) ここで、Componentに目を向けてみるが、ComponentはStoreからstateを得て、必要に応じてActionを発行する。(実際にActionを発行するのはActionCreaterなのでComponentはそれを呼ぶということになる。) さて

JavaScriptのオブジェクトは参照渡しなので複製したい時は自分で同じオブジェクトを作らないといけない。そこでオブジェクトをディープコピーするclone関数を作ってみた。コードは以下。GitHubにもある。 See the Pen PqRWmw by shigure (@webkatu) on CodePen. 使い方と引数の説明 var cloneObject = clone(object, homogeneity, excludedPrototypes, excludedObjects); 第一引数「object」 第一引数はコピーしたいオブジェクトを指定する。ただ単にディープコピーしたいのであれば第一引数だけ使えばいい。 var a = {a: function() {}, b: [], c: {}}; var b = clone(a); //参照渡しではなく全てコピーされている

innerHTMLでscript要素を追加したり、既に実行されたscript要素をcloneNodeでコピーしてそれを追加しても処理は実行されない。script要素を実行するには、createElementで新たにscript要素を作り、appendChildで追加する必要がある。 例えば、Ajaxなどでhtmlを書き換える時、同時にscript要素にある処理も実行したい場合、新たにscript要素を作ってそこに実行したい処理をコピーしなければいけない。そういう時に使えるスクリプトを書いた。 function cloneScript(element) { var script = document.createElement('script'); var attrs = element.attributes; for(var i = 0, len = attrs.length; i < l

今回は、JavaScriptのaddEventListener/removeEventListenerを使う時に気をつける点を順を追って書いていく。特に無名関数をremoveEventListenerで消す方法を中心に書く。 addEventListenerは1つのターゲットにイベントリスナーを複数登録できる。例えば以下のような場合 window.addEventListener('click', function() { console.log(1); }, false); window.addEventListener('click', function() { console.log(2); }, false); windowをクリックすればコンソールに1と2が表示される。この第二引数をイベントリスナーと言い、関数を指定する(以下、リスナーと書く)。今はaddEventListene