管理多个 HTML 片段的命名空间答案

【问题标题】：Manage namespaces of multi HTML fragments管理多个 HTML 片段的命名空间
【发布时间】：2013-06-21 23:31:23
【问题描述】：

请先原谅我的英语...... :)

我将XMLNS 用于HTML 标签并将它们定位在JS 和getElementsByTagNameNS 并使用CSS 选择器xmlns\:tagName 用于CSS 文档，在服务器端我使用DOM PHP 对象 DOMDocument::getElementsByTagNameNS...

我想知道我做得好还是有有效的方法？这种逻辑可能会在将来给我带来问题吗？我不知道 ex: DRUPAL 或 JOOMLA 是如何管理的？

或者你认为我应该在 PHP 中使用 regexp 和 preg_match_replace 在任何 HTML 属性中添加前缀，并在 JS 文件和 CSS 文件中做同样的事情？

结构

                        actor
                          |
                          |
                          v
                   +--------------+         +--------------------------------+
                   |  NPresenter  |         |  NNamespace                    |
          +-------+|--------------|+------->|--------------------------------|
          |        |--------------|         |--------------------------------|
          |        | -display();  |         | +full_qualified_js_name();     |
          |        +--------------+         | +full_qualified_less_name();   |
          |                                 | +full_qualified_layout_name(); |
          |                                 +--------------------------------+
          v
 +------------------+                          (assets)
 |  NModel          |                          +------------+
 |------------------|                          | js         |
 |------------------|------------------------->| less       |
 | +file_content(); |                          | layout     |
 +----------------- +                          +------------+

fully_qualified_*_name() 使用 regexp 和 preg_match_all 返回目标文件的输出，我在布局文件中添加 XMLNS，如下所示：

 <?xml version="1.0" encoding="UTF-8"?>
    <html xmlns:aa='zz' xmlns:ee='rr'>
    <head>
       <title></title>
       <script src="/assets/js/appended_js.js"></script>
       <LINK rel="stylesheet" type="text/css" href="/assets/js/appended_css.css"">
    </head>
    <body>
        <aa:span id="span1">
           <aa:p>aaa</aa:p>
        </aa:span>
        <ee:span id="span1">
           <ee:p>aaa</ee:p>
        </ee:span>
    </body>
    </html>

在较少的文件中，我喜欢以下内容：

/*less*/
aa\:span{background: #00ff00;}

在 js 文件中我喜欢如下：

/*js*/
var Namespace = {
    methode1: function() {
       var target = document.getElementsByTagNameNS("aa","zz");

       return target.length;
    }
};

【问题讨论】：

您可能应该添加一个示例演示代码，以便清楚您实际在做什么。我不确定你问的是不是一些小错误，所以举一些例子，这会变得更清楚。
@hakre 感谢您的反应，我只是发布更多详细信息，如果不清楚请询问...
+1 仅用于编辑，现在更清楚了。
所以唯一让我感到不快的是您正在使用 preg_replace 插入命名空间。你为什么不用 DOM 来做呢？
啊，好吧，我不知道 DOM 有命名空间方法，你的意思是 DOMDocument::createElementNS，我只是在 [link]php.net/manual/en/domdocument.createelementns.php) 中看到它，谢谢，我会测试它...

标签： php dom architecture xhtml xml-namespaces

【解决方案1】：

在 Javacript 方面，您可以使用 jQuery Xmlns plugin。它允许您使用命名空间感知 css 选择器。

var feedTitle = $().xmlns(
  {
    atom : 'http://www.w3.org/2005/Atom'
  },
  function () {
    return this.find("atom|channel > atom|title");
  }
).text();
$('#feedTitle').text(feedTitle);

在 PHP 中，您可以使用 Xpath 来查询您的 DOM。

$dom = new DOMDocument();
$dom->loadXml($file);
$xpath = new DOMXpath($dom);
$xpath->registerNamespace('atom', 'http://www.w3.org/2005/Atom');

$feedTitle = $xpath->evaluate('string(//atom:channel/atom:title)', NULL, FALSE));

要在命名空间中创建元素，请使用 DOMDocument::createElementNS()。

三个重点：

如果您定义自己的命名空间，则结果不再是 HTML。浏览器将无法识别/渲染元素。
不要将命名空间前缀与实际命名空间混淆。命名空间是 xmlns:* 属性中的字符串。它应该是一个全局唯一的字符串。（这就是为什么这里经常使用 url。）命名空间前缀是命名空间字符串的短别名，但在重新定义之前仅对当前文档的当前分支有效。
您始终为查询（css 选择器或 xpath）定义自己的命名空间映射前缀。这样您的查询就很明确了。

【讨论】：