カスタムタグを定義して使用しても大丈夫ですか?(これは将来のhtmlタグと競合しません)-outerHTMLを変更してそれらを置き換え/レンダリングしている間??
以下のデモを作成しましたが、正常に動作しているようです
<!DOCTYPE HTML>
<html lang = "en-US">
<頭>
<script type = "text / javascript" src = "jquery.min.js"> </ script>
</ head>
<本体>
<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 ct = "d"> </ blahblah>
</ div>
</ body>
<スクリプト>
/*cspaを実際のhtmlに置き換えるための以下のコード--woaahそれはうまく機能します*/
関数ReplaceCustomTags(){
//cspaはランダムな用語です-実際には何も意味しません
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">モデルからの説明</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はカスタム属性を多用します。(カスタムタグの例もあります)。私の質問は技術戦略の観点からではありませんが、なぜそれがコードのスケーラビリティ/保守性に戦略的に問題を引き起こすのか理解できません。
私にとって、<ns:contact .....>のようなコードは、<div custom_type ="contact"....>のようなコードよりも読みやすくなっています。唯一の違いは、カスタムタグは無視されてレンダリングされないのに対し、divタイプはブラウザによってレンダリングされることです。
Angular.jsは、カスタムタグの例(ペイン/タブ)を示しています。上記の例では、outerHTMLを使用してこれらのカスタムタグを置き換えていますが、ライブラリにそのようなコードは表示されていませんが、outerHTMLを使用してカスタムタグを置き換えることで、近視眼的で間違ったことをしていますか?