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

定义和使用自定义标签是否可以？（这不会与未来的html标签冲突） - 通过更改outerHTML替换/渲染它们

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


    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <script type="text/javascript" src="jquery.min.js"></script>
    </head>

    <body>

    <div id="customtags">
        <c-TextField name="Username" ></c-TextField> <br/>
        <c-NameField name="name" id="c-NameField"></c-NameField> <br/>
        <c-TextArea name="description" ></c-TextArea> <br/>
        <blahblah c-t="d"></blahblah>
    </div>
    </body>


    <script>

    /* Code below to replace the cspa's with the actual html -- woaah it works well */    
        function ReplaceCustomTags() {
            // cspa is a random term-- doesn;t mean anything really
            var grs = $("*"); 
            $.each(grs, function(index, value) {
                var tg = value.tagName.toLowerCase();
                if(tg.indexOf("c-")==0) {
                    console.log(index);
                    console.log(value);
                    var obj = $(value);
                    var newhtml;
                    if(tg=="c-textfield") {
                        newhtml= '<input type="text" value="'+obj.attr('name')+'"></input>';
                    } else if(tg=="c-namefield") {
                        newhtml= '<input type="text" value="FirstName"></input><input type="text" value="LastName"></input>';
                    } else if(tg=="c-textarea") {
                        newhtml= '<textarea cols="20" rows="3">Some description from model</textarea>';
                    }
                    obj.context.outerHTML = newhtml;
                }


                z = obj;
            });
        }

        if(typeof(console)=='undefined' || console==null) { console={}; console.log=function(){}}

        $(document).ready(ReplaceCustomTags);
    </script>
    </html>

更新问题：

让我再解释一下。请假设在浏览器上启用了JavaScript - 即应用程序不应该在没有javascript的情况下运行。

我见过使用自定义属性定义指定标记中的自定义行为的库。例如，Angular.js大量使用自定义属性。（它还有自定义标签的示例）。虽然我的问题不是从技术战略的角度来看 - 但我不明白为什么它会在战略上导致代码的可扩展性/可维护性出现问题。


按照我的代码，＆lt; ns：contact .....＆gt;比＆lt; div custom_type =“contact”....＆gt;更具可读性。唯一的区别是自定义标签被忽略而不被渲染，而div类型则由浏览器呈现


Angular.js确实显示了自定义标记示例（窗格/标签）。在上面的例子中，我使用outerHTML来替换这些自定义标记 - 虽然我没有在库中看到这样的代码 - 我是否通过使用outerHTML替换自定义标记来做一些短视和错误的事情？

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

2 个答案: