使用自定义 HTML 标签并用 outerHTML 替换自定义标签好吗？

Posted 2023-05-09

【中文标题】使用自定义 HTML 标签并用 outerHTML 替换自定义标签好吗？

【英文标题】：Is using custom HTML tags and replacing custom tags with outerHTML okay?

【发布时间】：2013-01-11 05:50:12

【问题描述】：

可以定义和使用自定义标签吗？ （这不会与未来的 html 标签冲突） - 同时通过更改 outerHTML 替换/呈现这些标签？？

我在下面创建了一个演示，它似乎工作正常

正文> /* 下面的代码用实际的 html 替换 cspa —— 哇，它工作得很好 */ 函数替换自定义标签（） // cspa 是一个随机术语——实际上并没有任何意义 var grs = $("*"); $.each（grs，函数（索引，值） var tg = value.tagName.toLowerCase(); 如果（tg.indexOf（“c-”）==0） 控制台.log（索引）； 控制台.log（值）； var obj = $(值); 变量 newhtml; if(tg=="c-textfield") newhtml= ''; 否则 if(tg=="c-namefield") newhtml= ''; 否则 if(tg=="c-textarea") newhtml= '来自模型的一些描述'; obj.context.outerHTML = newhtml; z = 对象； ); if(typeof(console)=='undefined' || console==null) console=; console.log=function() $(document).ready(ReplaceCustomTags); 脚本>

【参考方案1】：

我想不出你为什么要这样做。

如果您必须从事一个忽略所有常见做法和惯例的其他人编写的项目，您会怎么想？如果他们不再在公司寻找他们为什么以某种方式做某事会发生什么？

您必须通过 javascript 才能使其正常工作这一事实应该是一个巨大的危险信号。除非您有很好的理由，否则请帮自己一个忙并使用预先存在的标签。六个月后，你会记得你为什么这样做吗？

【讨论】：

谢谢 - 但我无法从战略上理解它。我们将需要客户端 JS 来使其工作 - 它是一个非常大的应用程序，我们希望将 UI 呈现给客户端。我检查了最新的浏览器，直到 IE8，它似乎对我们有用。实际上，我们确实从标准标签和自定义属性开始，例如 <div custom_type="contact" ....> - 很快就发现它不那么可读。对我来说，以这种方式使用自定义标签与使用像 ExtJS 这样的库相同，我们在其中编写 Ext.create('Ext.Panel').... 开发人员不必查看所有 HTML 元素是在其中创建的跨度>

如果它对你有用，而且你的公司正在采用它，那么你就有了“非常好的理由”。一定要记录下你的标准，并保持最新。以后，您不希望花更多的时间试图找出代码而不是修复一个小错误。

【参考方案2】：

它可能很好用，但它可能不是一个好主意。屏幕阅读器和搜索引擎可能很难/不可能阅读您的页面，因为它们可能无法解释 JavaScript。虽然我明白这一点，但最好使用此模板进行开发，然后将其“烘焙”为 HTML，然后再将其放到服务器上。