目录
PostHTML 的特点
首页 web前端 html教程 HTML 处理利器 PostHTML 入门教程_html/css_WEB-ITnose

HTML 处理利器 PostHTML 入门教程_html/css_WEB-ITnose

Jun 21, 2016 am 09:03 AM

PostHTML是一个转换HTML/ XML的工具。 PostHTML本身是非常小的。它只包括一个HTML解析器,一个HTML节点树API和一个节点树stringifier。
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 的优势是什么呀?

PostHTML 之于 HTML,就像 PostCSS 之于 CSS。

Uglify 之于 JavaScript,除了插件体系并不成熟以外。

PostHTML 好比一个汽车翻新工厂,而 PostHTML 插件就是一个个流水线车间:

  • PostHTML 将 HTML 文档按照 DOM 模型分解为一个个 node(JavaScript 对象),加上这些 node 的父子关系,形成 PostHTMLTree;
  • PostHTML 插件获得用 JavaScript 表示的 PostHTMLTree 对象,修改、更新或者移除树上的节点,实现特定功能;
  • 最后 PostHTML 再把新的 PostHTMLTree 对象转换成 HTML 文档。
  • 可见,PostHTML 并不提供具体的功能,仅仅实现了 HTML 和 PostHTMLTree 互相转化,且提供通用的 API 和 插件模型,让插件操作 PostHTMLTree。这与 PostCSS 如出一辙。具备如下的有点:

    • JavaScript only:使用 JavaScript 实现,是每一个前端的梦想;
    • 模块化:你可以按照需求,将插件(功能)组合起来使用;
    • 轻量:按需添加,避免引入大量并不使用的特性;
    • 快速扩展:在需求无法满足的时候,PostHTML 提供了便利的方式来扩展功能;
    • 鲁棒性:按照 DOM 语法,将 HTML 转换为 AST,比起正则匹配来说有更高的准确性、更细的粒度以及更强的控制力;
      可编程:将 HTML 转换为用 JS 对象表示的 AST,可以很方面的使用 JS 来修改,易于编程。

    项目主页:http://www.open-open.com/lib/view/home/1448175913745

    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门文章

    仓库:如何复兴队友
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    1 周前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌

    热门文章

    仓库:如何复兴队友
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    1 周前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌

    热门文章标签

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

    公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

    如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

    如何使用HTML5表单验证属性来验证用户输入?

    &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

    &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?

    如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

    如何高效地在网页中为PNG图片添加描边效果?

    &lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

    &lt; meter&gt;的目的是什么。 元素?

    HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

    HTML5中跨浏览器兼容性的最佳实践是什么?

    &lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

    &lt; datalist&gt;的目的是什么。 元素?

    &gt; gt;的目的是什么 元素? &gt; gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

    &gt; gt;的目的是什么 元素?

    See all articles