jQueryボーダーなし
フレームワークはツールのセットですが、プログラミングの伝統や慣習ではありませんが、アプリケーションの目標は実行速度と結果の正確さです。 公開された記事は、DOMへのクエリの効率的な使用を示していますが、これだけでなくjQueryアプリケーションの実行が速くなります。
むしろ、「実際には」ではありませんが、正当化されていない場合：
動くものや動くものすべてのプラグインを作成します。 プラグインの設計に今日費やした10分間は、明日の開発速度を向上させます。
人生からの例。 textareaフィールドのテキストの可用性に応じて、送信ボタンを有効/無効にする必要がありました。 最初に生まれたプラグイン：
2番目のプラグインが生まれました：
多くの人々は、jQueryがすべてを実行できると考えています。 そしてある程度は彼らは正しいが、この権利は彼らにネイティブJSを忘れる理由を与えない。
例を挙げます。
どちらの例も優れています。1つ目はエレガントで、2つ目は高速です。 DOMの使用方法には多くの制限がありますが、jQuery（MooTools、Prototype、ExtJSなど）を使用する場合は、常に高速であるネイティブJSを忘れないでください。 結局のところ、フレームワークはフレームワークにあなたを置くのではなく、 ツールを提供するだけです。
それぞれを使用しないでください
むしろ、「実際には」ではありませんが、正当化されていない場合：
このように良い：var a = [1,2,3,4];
$.each(a, function ()
{
console.log( this );
});
// !
通常のアプローチでは、ループを終了するためにコールバック関数と不必要なチェックを呼び出す時間を無駄にしません。 別の例：for ( var i = 0, l = a.length; i < l; i++)
{
console.log(a[i]);
}
このように良い：var b = {c: 1, d: 2, e: 3};
$.each(b, function (k)
{
console.log(k, this );
});
//
for ( var k in b)
{
if ( b.hasOwnProperty(k) )
{
console.log(k, b[k]);
}
}
プラグインを書く
動くものや動くものすべてのプラグインを作成します。 プラグインの設計に今日費やした10分間は、明日の開発速度を向上させます。
人生からの例。 textareaフィールドのテキストの可用性に応じて、送信ボタンを有効/無効にする必要がありました。 最初に生まれたプラグイン：
そしてそれは次のように機能します：$.fn.inputChange = function (callback)
{
return this .bind(
{
mousedown: callback,
keyup: callback,
blur: callback
});
};
ただし、両方のオプションは理想からはほど遠いものです。1は、サブミット内に突然要素がない場合にエラーが発生する可能性があり、2は面倒です。var submit = $( "#submit" );
// 1
$( "#text" ).inputChange( function ()
{
submit[0].disabled = this .value.length === 0;
});
// 2
$( "#text" ).inputChange( function ()
{
if ( this .value.length === 0)
{
submit.attr( "disabled" , "disabled" );
}
else
{
submit.removeAttr( "disabled" );
}
});
2番目のプラグインが生まれました：
このプラグインは、次のように$ .fn.inputChangeと連携して機能します。$.fn.disable = function ( bool )
{
return this .each( function ()
{
this .disabled = bool ;
});
};
ただし、 inputChangeで指定された単一のイベントがクリップボードからの貼り付けを処理できないという問題がありました。 グーグル、私たちは決定に来ました：$( "#text" ).inputChange( function ()
{
submit.disable( this .value.length === 0);
});
そしてinputChangeプラグインは次の形式を取りました。$.fn.paste = function (listener)
{
if ($.browser.msie)
{
return this .bind( "paste" , function ( event )
{
var that = this ;
setTimeout(
function ()
{
listener.apply(that, [ event ]);
},
.001
);
});
}
else
{
return this .bind( "input" , function ( event )
{
listener.apply( this , [ event ]);
});
}
};
そこで、「ブリックバイブリック」機能的な機能を組み合わせて、ライブラリを補完する優れたプラグインを提供します。$.fn.inputChange = function (callback)
{
return this
.paste(callback)
.bind(
{
keyup: callback,
blur: callback
});
};
ネイティブコード
多くの人々は、jQueryがすべてを実行できると考えています。 そしてある程度は彼らは正しいが、この権利は彼らにネイティブJSを忘れる理由を与えない。
例を挙げます。
多くの方法で、コードは指から吸い込まれますが、それはデモンストレーションのみを目的としています。 次に、純粋なJSでコードを書き直してみます。function warning(text)
{
$( "<div id='alert' class='warning'></div>" )
.appendTo( $( document .body) )
.css(
{
"padding" : "10px" ,
"background-color" : "red" ,
"color" : "white"
})
.html(text)
.append(
$( "<button>OK</button>" ).attr( "title" , "Close me!" ).click( function ()
{
$( this ).parent().remove();
})
);
}
jQueryはaddEventListener / attachEventクロスブラウザーコールを適切にカプセル化するため、jQueryを使用してイベントを意図的に追加し、ブラウザー間の境界を消去しました。そのため、jQuery作成者は多くの敬意を払っています。 残りはDOMを操作するための標準的な方法を使用します。function warning(text)
{
var div = document .createElement( "div" );
div.id = "alert" ;
div.className = "warning" ;
div.style.padding = "10px" ;
div.style.backgroundColor = "red" ;
div.style.color = "white" ;
div.innerHTML = text;
var button = document .createElement( "button" );
button.setAttribute( "title" , "Close me!" );
button.innerHTML = "OK" ;
$(button).click( function ()
{
div.parentNode.removeChild(div);
});
div.appendChild(button);
document .body.appendChild(div);
}
どちらの例も優れています。1つ目はエレガントで、2つ目は高速です。 DOMの使用方法には多くの制限がありますが、jQuery（MooTools、Prototype、ExtJSなど）を使用する場合は、常に高速であるネイティブJSを忘れないでください。 結局のところ、フレームワークはフレームワークにあなたを置くのではなく、 ツールを提供するだけです。
All Articles