MooToolsのElement()コンストラクターに相当するjQueryはありますか?
-
05-07-2019 - |
質問
私は自分のウェブサイトでJavaScriptレポートエンジンを開始し、MooToolsを使用していくつかのプロトタイプ作成を開始します。私はこのようなことができるのが本当に好きです:
function showLeagues(leagues) {
var leagueList = $("leagues");
leagueList.empty();
for(var i = 0; i<leagues.length; ++i) {
var listItem = getLeagueListElement(leagues[i]);
leagueList.adopt(listItem);
}
}
function getLeagueListElement(league) {
var listItem = new Element('li');
var newElement = new Element('a', {
'html': league.name,
'href': '?league='+league.key,
'events': {
'click': function() { showLeague(league); return false; }
}
});
listItem.adopt(newElement);
return listItem;
}
私が見たものから、jQueryの<!> quot; adopt <!> quot; typeメソッドは、html文字列またはDOM要素のみを受け取ります。 MooToolsの Element と同等のjQueryはありますか?
編集:ここで探している大きなことは、リンクへのクリックイベントのプログラムによる添付です。
解決
構文的には、jQueryを使用する方が良いかもしれませんが、おそらくより効率的に使用できます
document.createElement('li')
また、最低限の文字列比較テストとマイナートークン解析の必要性を排除します。
flydom は、多くのdomノードの生成を主張する場合、関心をくすぐることもあります。 (理論的にはもっと速いはずですが、テストはしていません)
注:内部的に、jQuery(<!> quot; <!> lt; html <!> gt; <!> lt; / html <!> gt; <!> quot;)は、これを効果的に行うように見えます(単純化された):
jQuery(matcher) --> function(matcher)
{
return jQuery.fn.init(matcher) --> function(matcher)
{
return this.setArray(
jQuery.makeArray(
jQuery.clean(matcher) --> function(matcher)
{
div = document.createElement('div');
div.innerHTML = matcher;
return div.childNodes;
}
)
);
}
}
したがって、<!> quot; document.createElement
<!> quot;を想定します。したがって、<!> quot; requirement <!> quot;であり、必要なものを知っている(つまり、サードパーティのデータを$( datahere )
と比較しない)場合、jQuery(document.createElement('div'))
はimhoになります多数の正規表現と遅い文字列操作を回避するために、同様に論理的で速度を上げてください。
比較:<=> 効果的にこれを行うように見えます(簡略化されています):
jQuery(matcher) --> function(matcher)
{
return jQuery.fn.init(matcher) --> function(matcher)
{
this[0] = matcher;
this.length = 1;
return this;
}
}
他のヒント
jQueryでも同じことが言えます。基本的に新しい要素を作成するには、必要なHTMLを入力するだけです。
function showLeagues(leagues) {
var $leagueList = $("#leagues");
$leagueList.empty();
$.each(leagues, function (index, league) {
$leagueList.append(getLeagueListElement(league));
});
}
function getLeagueListElement(league) {
return $('<li></li>')
.append($('<a></a>')
.html(league.name)
.attr('href', '?league=' + league.key)
.click(function() {
showLeague(league);
return false;
})
)
;
}