jQuery.cleanの利用方法とideas_jqueryの分析

1. jQuery.clean の使用方法
jQuery.clean(elems、context、fragment、script);
2. アイデア分析
1 . パラメータ コンテキストを処理し、それがドキュメント ルート ノードであることを確認します
2. パラメータ elems 配列を処理します (配列をループします)
2.1. elem は文字列に変換します
2.2 . elem は不正な値です。このページから出てください。 2 番目のループ
2.3. elem は文字列です。 2.4. 文字列にエンティティ番号または HTML タグがない場合は、テキスト ノード
を作成します。文字列はエンティティ番号または HTML タグです

コードをコピーします コードは次のとおりです:

div 要素を作成し、ドキュメント フラグメントに挿入します
xhtml スタイル タグを処理します
要素をラップし、ラップされた文字列を div の innerHTML として使用します
ラップの深さが 1 より大きい場合は、最初の要素のみが使用されますラッピング要素のレイヤーは残ります
IE6 および 7 で空の table タグに自動的に追加された tbody をクリアします
IE9 未満のブラウザでは削除される先頭の空白文字列を div の最初のテキスト子ノードとして使用します要素
要素を div (nodeList オブジェクト) の子ノード コレクションに再割り当てします。
今回は削除します。 ループ内のドキュメント フラグメント内の div は、次のループでクリーンな div 要素を維持します。

2.3. elem がテキストノードの場合は、返される ret 配列に直接追加します。それ以外の場合は、elem(nodeList Object) が配列にマージされます
2.4. IE6 と 7 の選択状態 (チェック済み) のバグを修正します。 ) ラジオタイプとチェックボックスタイプのノードが無効です
3. 処理パラメータフラグメント
3.1. ret 内の各ノードをドキュメントフラグメントフラグメントに追加します
3.2. ノード内のスクリプトの子ノードを抽出します。 ret 配列に追加します。追加されたスクリプトの位置は、元の親要素の位置
の後ろになります。 4. ret 配列

3. ソース コードのコメント解析 に戻ります。および関数で使用される関数

コードをコピーコードは次のとおりです:

var nodeNames = "abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|"
"header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
wrapMap = {
option: [ 1, ""、"" ]、
凡例: [ 1, "

", "

" ],
thead: [ 1, "", "" ],
tr: [ 2, "", "" ],
td: [ 3, "", "" ],
col: [ 2, "gt;", "" ]、
エリア: [ 1, "" ],
_default: [ 0, "", "" ]
},
rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta| param)(([w:] )[^>]*)/>/gi,
rtagName = /<([w:] )/,
rtbody = / rhtml = /<|?w ;/,
rleadingWhitespace = /^s /,
rcheckableType = /^(?:checkbox|radio)$/,
rscriptType = // (java|ecma)script/i;
// 設定チェックボックスまたはラジオ表单元素の默认选中状態态
function fixDefaultChecked( elem ) {
if ( rcheckableType.test( elem. type ) ) {
elem.defaultChecked = elem.checked;
}
}
// 创建一安全文档碎片
function createSafeFragment( document ) {
var list = nodeNames .split( "|" ),
safeFrag = document.createDocumentFragment(); // ie6,7,8浏览器はsafeFrageをHTMLDocument型として作成します
// 针对ie9以下浏览器
if (safeFrag.createElement) {
while ( list.length ) {
SafeFrag.要素の作成(
list.pop()
);
}
}
return safetyFrag;
}
//
// 该関数API：http://www.css88.com/jqapi-1.8/#p=jQuery.grep
jQuery.extend({
grep: function( elems, callback, inv ) {
var retVal ,
ret = [],
i = 0,
length = elems.length;
inv = !!inv;
// 項目のみを保存します
// バリデーター関数を渡します
for ( ; i < length; i ) {
retVal = !!callback( elems[ i ], i );
if ( inv !== retVal ) {
ret.push( elems[ i ] );
}
}
return ret;
}
});

2、ソースコード分析

复制代码代码如下:

jQuery.extend({
clean: function( elems, context, flagment, scripts ) {
// 変数を宣言
var i, j, elem, tag, Wrap, Depth, ; ( !context || typeof context.createDocumentFragment === "未定義" ) {
0; (elem = elems[i]) != null; i ) {
// elem が数値の場合は変換します文字列に変換します 🎜> elem = ""; Continue;
}
// HTML 文字列を D に変換しますOM ノード
// 配列項目 (文字列) を DOM ノード
に変換します if ( typeof elem = == "string" ) {
テキスト ノード
if ( !rhtml.test( elem ) ) {
elem = context.createTextNode( elem );

これは #document-fragment タイプであり、ie9 より下です。ブラウザでは、safe は HTMLDocument タイプのノードであり、nodeNames 配列は空です。
col,embed ,hr, img、input、link、meta、paramのラベルに加えて、
// ラベルの開始と終了を行うラベルの末尾までのラベル
elem = ELEPLACE (rxhtmltag, "＆lt; $ 1＆gt;＆lt; $ 2＆gt;"）;
lem）| = wrap [0];
div.innerhtml = wrap [1] elem wrap [2];
//右の深さに移動
1。例: パーセル要素の最初のレイヤーを含みます)
While (深さ--) {
DIV = DIV.LastChild;
if ( ! jQuery.support.tbody ) {
// 文字列は

、*可能性* 偽(伪造的)
// 判断文字串中否か空tbody标签
hasBody = rtbody.test(elem);
// 最も外側のラベルがtableで、tbodyが手動でテーブルに追加されていない場合、
🎜> tbody = tag === "table" && !hasBody ?
div.firstChild && div.firstChild.childNodes:
// 文字列が裸の または
/ 空の THEAD または TFOOT タグが 1 つだけある場合文字列
// 変数 tBody は div.childNodes " && !hasBody ?
for ( j = tbody.length - 1; j >gt;= 0 ; --j ) {
tfoot タグ
if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
空のテーブルタグを自動的にクリア Joined tbody
tbody [ j ].parentNode.removeChild( tbody [ j ] );

// IEEはinnerhtmlが使用されるときにリーディングホワイトスペースを完全に殺します;
// elem が DOM ノード (テキスト ノード) の場合
if ( elem.nodeType ) {
ret.push( elem );
}
// 内のノードをマージします返された配列
{
.merge( ret, m );
= null ;
// ラジオとチェックボックスのチェックをデフォルトにリセットします。 他のタグに挿入した後の 1 つのボタン、選択された状態は失敗します (次のコードはこのバグを修正します)
if (! Jquery.support.appendchecked) {
for (i = 0; (elem = 0; (elem = 0; (elem = 0; elem = 0; ret [i]）！= null;
// 指定されたドキュメント フラグメントに要素を追加します
// ret 配列内の各 DOM ノードを指定されたドキュメント フラグメントに挿入します
// dom ノード内のスクリプト ノードを抽出し、ret 配列に追加します、位置は元の親要素のインデックス位置の後です
if ( flagment ) {
// 各スクリプト要素の特別な処理
handleScript = function( elem ) {
// かどうかを確認しますExecutable
// ELEM 要素が存在しないか、Type 値が JavaScript または ECMAScript の場合
if (! Elem.type || RScripttype.test (elem.type)) {
// SCR を切り離し、スクリプト配列 (指定されている場合) またはフラグメントに保存します
// 処理されたことを示す true を返します
return scripts ?
scripts.parent Node?elem.parentNode .removeChild ( elem ) : elem ) :
fragment.appendChild( = ret[i]) != null; {
handleembedded scripts
// elem 要素をドキュメントフラグメントに追加し、埋め込みスクリプトを処理します(script タグ要素)
flagment.appendChild( elem );
if ( typeof elem.getElement sByTagName !== "unknown ") {> // Handlescript Dom を変更するため、jquery.merge を使用して enterSureスナップショット反復
jstags = jquery.grep (jQuery.merge ([], Elem.GetelementsBytagnam e ("script")), Handlescript) ;
// スクリプトを祖先の後の ret に接続し、インデックスをそれ以降に進めますそれらは ret.splice.apply (ret, [i 1, 0].concat( jsTags ) );
}
}
return ret;
}
});

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery.buildFragmentの利用方法とideas_jqueryの分析次の記事：jQuery.buildFragmentの利用方法とideas_jqueryの分析

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved