OSDN > Find Software > Multimedia > Graphics > Editors > Raster-Based > Drop & Draw > Ticket List/Search > Ticket #36865

Drop & Draw

Ticket #36865
Ticket List Submit New Ticket RSS

Notes on JavaScript

Open Date: 2016-12-11 08:58 Last Update: 2016-12-19 08:14

monitor

Reporter:

takoyaki_umaaaa

Owner:

(None)

Type:

次回改善項目

Status:

Open

Component:

(None)

MileStone:

(None)

Priority:

5 - Medium

Severity:

5 - Medium

Resolution:

None

File:

None

Details

JavaScript で実装する上で詰まった箇所と今後の方針

【症状】Element に値をセットしても黙って無視される。問題の原因が特定できない。
- 【原因】
  下記が問題原因である場合がほとんどだが、問題についてのフィードバックが全くないため原因特定に非常に時間がかかる。
  1. 設定文字列の最後に単位 (pxなど) がない
  2. 設定文字列に余計な文字が入っている (セミコロンが入っている、など)
  3. Property が Read only である可能性 (CSS 定義など)
  4. Spell miss, または大文字/小文字の間違い
  5. (クロージャなどで) 変数定義が使用箇所よりも後になっている
- 【対策】
  1. Element 操作用 Wrapper Class を作成し、そこを通してアクセスする
    Setter は単位漏れをチェックするして追加するなりエラーを吐くなり人間側が分かるようにする
  2. Spell miss などは Unit test で検出できるようにする
【症状】true になるはずの比較結果が false になる
- 【原因】
1. 文字列を値を "==" や "<=" で比較している
  Edge と Chrome で動作結果が変わる
- 【対策】
  1. Element 操作用 Wrapper Class を作成し、Property は number か enum 保持で統一する
【症状】Mouse downでElementを最前面にする処理(removeChild/appendChild)があるとscrollbarが効かなくなる
- 【条件】
1. ツールバーが複数表示されている
2. ツールバーの中にはボタンが並んでおり、ツールバー内で縦横スクロール表示する
3. ツールバーは選択(mouse down)したものが他のツールバーよりも手前に移動する
- 【症状(詳細)】
1. ボタンを表示しようとスクロールバーをクリックした瞬間にスクロールバーが消える
2. クリックしたツールバーが最も手前に表示される
- 【原因】
1. スクロールバーがmouseイベントをその親にも投げるために親要素の処理が動く
2. スクロールバーがイベントを拾ったことがわからない(親要素が初めてイベントを拾ったような情報で入ってくる)
3. (推測)removeChild → appendChildしたタイミングで要素の初期化が走っているっぽい(Animationも再実施されたりする)
  そのためスクロールバー表示状態も失われると推測
- 【回避策】
1. z-indexを使う(情報が初期化されなければいい)
【症状】要素を回転させた状態でCSS Animationを適用したい
- 【問題点】
  1. User入力での回転(rotateZ())とCSS Animation定義のrotateZ()が被る
- 【対策】
  1. DIVを2枚作成して、User操作は1枚目に、Animationは2枚目に適用させる
  2. 定義を反映させる数だけDIVを重ねたいが、要素を重ねる枚数が増えるほど Microsoft Edge の動作が不安定になる
    そのため今回は2枚重ねまでにする
【症状】CSS定義が反映されない
- 【条件】
  1. CSSファイルの定義が一部反映されない
  2. Styleタグ内の定義が一部反映されない
- 【原因】
  1. 反映されない定義付近に "//" でコメントしている箇所がないか(CSSはブロックコメントのみ)
  2. 要素を半透明にするとblock-shadowやtext-shadowが非常に見づらくなる場合がある
【症状】console.errorが出力されない。変数がundefinedのまま更新されない
- 【条件】
  1. ES6のClass構文を使っている
  2. constructor内で処理している
- 【原因】
  1. はっきりは分からない
  2. (推測)constructor()内はinstanceが作成される前の状態なので外部関数が正しくcallできないのかもしれない
    この辺りの動作は実装依存なのか？それすら不明。
- 【回避策】
  1. constructor()では内部変数の定義と初期化のみにする
  2. 必要な初期化処理は initialize() 関数を別途用意してnewの後に呼び出す
【症状】Pure JavaScriptのProjectから WinJSを使ったProjectにしたら画面周りの動きが変わった
1. 1. かなり酷い
  2. 最初から方針が決まっているならReleaseに近い環境で開発する(当然だが)
    今回のように習得しながらの場合は絶望的。
  - WinJSに拘らず、Cordovaなども考慮に入れて対応していくしかない
【症状】Pure JavaScript環境から WinJS環境に変更すると、一部のElementのscrollbarが効かない
- 見た目上は No.3 の症状と同じに見える
- 【回避策】
  1. scrollbarを表示しているElementに "position: relative" を追加する
    ※ 対応前は未定義だった( == position: static)
- 【原因】
  1. はっきりは分からない
  2. この症状が出たときにscrollbar表示Elementの高さを、親Elementの2倍にしてみた
    すると下半分だけスクロールバーが操作できる状態になった
  3. この現象からの想像でしかないが、position:staticだとscrollbar eventを無視してもっと親のElementに通知するという実装になっているようにしか見えない
    (ちょうどposition:absoluteの親にposition:staticがあっても無視するような)
【症状】Pure JavaScript環境から WinJS環境に変更すると、index.htmlのviewport指定が無視される
- 【原因】
  1. はっきりは分からない。指定が無視されるとか理解できない。Edgeは独自実装を避ける路線で開発されているはずでは？
  2. とりあえず WinJS のコントロールに Viewbox というものがあるらしい。しかし使いたくない。使いたくもないLiblaryに作法を強要されて素直には従えない。コードも共有できないものになるし。