タグ

JavascriptとDOMに関するtksthdnrのブックマーク (3)

  • DOM Builder系のjsテンプレートエンジンまとめ

    前回、どちらかと言えばinnerHTMLよりはDOMを使いましょうと書きました。しかしDOMをちょっと使えば、その余りの煩雑さに閉口することでしょう。では可読性を保持しつつ、XSSも考慮して書くにはどうすればいいでしょうか。 ちょっとしたものであれば、HTML中にdisplay:noneで構造を書き出しておき、それをJavaScriptから使う、というアプローチでもカバーできるでしょう。しかし大規模になると限界が見えてきます。描画に必要ない要素を書き出しすぎると、パフォーマンスの問題も発生します。 そこで、JavaScriptでもテンプレートエンジンを使うことになります。 テンプレートエンジンには二大勢力がある E4Xみたいな変態拡張やJadeなどの独自文法系を除くと、Scriptlet系とDOM Builder系の二種類に大きく分けることができそうです。(系統の名前は適当に決めました。正

    DOM Builder系のjsテンプレートエンジンまとめ
  • もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT

    業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと

    もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
  • JavaScript Shell

    JavaScript Shell A command-line interface for JavaScript and DOM. Open the shell or get the Shell bookmarklet (Firefox only). Features You can enter statements and expressions at the same prompt. The result of each non-void statement or expression is shown. User-defined variables. b = document.body User-defined functions. function f() { return 5; } JavaScript error messages are shown in red. Previ

  • 1