HTML処理ツール PostHTML入門tutorial_html/css_WEB-ITnose

PostHTML は HTML/XML を変換するツールです。 PostHTML 自体は非常に小さいです。これには、HTML パーサー、HTML ノード ツリー API、およびノー​​ド ツリー文字列化子のみが含まれています。

var posthtml = require('posthtml');var html = '<myComponent><myTitle>Super Title</myTitle><myText>Awesome Text</myText></myComponent>';posthtml()    .use(require('posthtml-custom-elements')())    .process(html/*, options */)    .then(function(result) {        console.log(result.html);        // <div class="myComponent"><div class="myTitle">Super Title</div><div class="myText">Awesome Text</div></div>    });

PostHTML の特徴

お客様は、正規表現を使用してこの置換機能を実行できるとしたら、PostHTML にはどのような利点があるのか​​と尋ねるかもしれません。

HTML に対する PostHTML は、CSS に対する PostCSS と同様です。

Uglify は、プラグイン システムがまだ成熟していない点を除いて JavaScript とは異なります。

PostHTML は自動車の修理工場に似ており、PostHTML プラグインは組立ライン ワークショップです。

PostHTML は、DOM に従って HTML ドキュメントをノード (JavaScript オブジェクト) に分解します。これらのノードの親子関係は PostHTMLTree を形成します。

PostHTML プラグインは、JavaScript で表される PostHTMLTree オブジェクトを取得し、ツリー上のノードを変更、更新、または削除して、特定の関数を実装します。 🎜>

最後に、PostHTML 新しい PostHTMLTree オブジェクトが HTML ドキュメントに変換されます。

PostHTML は特定の機能を提供するのではなく、HTML と PostHTMLTree 間の相互変換を実現するだけであり、プラグインが PostHTMLTree を操作できるようにするための共通 A​​PI とプラグイン モデルを提供することがわかります。これはPostCSSとまったく同じです。これには次の利点があります。

• JavaScript のみ: JavaScript を使用して実装することは、すべてのフロントエンドの夢です。
• モジュール化 : 必要に応じてプラグイン (関数) を組み合わせて使用​​できます。
• 軽量: 多数の未使用の機能が導入されるのを避けるために、必要に応じて追加します。 🎜> 迅速な拡張: PostHTML は、要求を満たせない場合に機能を拡張する便利な方法を提供します。
• 堅牢性: 通常の場合と比較して、DOM 構文に従って HTML を AST に変換します。
• プログラム可能: HTML を JS オブジェクトで表される AST に変換すると、非常に便利です。JS を使用して変更すると、プログラムが簡単になります。
  プロジェクトのホームページ:
http://www.open-open.com/lib/view/home/1448175913745