サイト埋め込みコードをつくるには？

kyo_ago @kyo_ago

「１回しかjsが〜」に近いけど、「JSの読み込みと初期化を分離する」ってのもある。分離されてるとサイト側で高速化する余地が出て嬉しい // サイト埋め込みコードをつくるには？ - norinyang メガ進化！ norisu0313.hatenablog.com/entry/2014/06/…

kyo_ago @kyo_ago

例えば、ユーザのスクロール位置取って、「ユーザが表示しようとした時に初期化が走る」とかできる

kyo_ago @kyo_ago

あと、「jsはプレーンでかくべき」ってあるけど、(function ($) { /* code */ })(jQuery.noconfrict(true));すれば元サイトがjQueryとか使ってても安全に自分が持ってるjQueryだけ使える

kyo_ago @kyo_ago

もちろんどこでも読まれるJSにjQuery一式積むのは重さ的にどうかって話はあるけど

kyo_ago @kyo_ago

JSの読み込みと初期化を分離すると、「直近書かれてるDOM要素に対する操作」ってのができなくなる（JSが初期化されるのがDOM構築後だったりするので）

kyo_ago @kyo_ago

これが問題になるのがpostMessageとかで値をやりとする場合で、普通に実装するとwindow.onMessageで受けるので「どの要素に対するメッセージなのか」を確定できない

kyo_ago @kyo_ago

そのため、受け取る全メッセージに「どの要素むけか」を指定してもらう必要があるし、送る全メッセージに「どの要素からか」を送る必要がある

kyo_ago @kyo_ago

この時、DOM要素にid振れればいいけど、普通に考えると書き出しタグは大抵共通なのでDOMの出現順とかで自動でIDを振る必要がある。でもDOMの出現順だとDOM要素が変更された場合に問題が出るかも。UUIDとかの方がいいかもしれない（このへんは不明。自分は出現順でやった）