JQueryなどJSプラグインのソースコードを読むことを学ぶ
7119 ワード
http://my249645546.iteye.com/blog/1716629上のこの文章を見てとてもいい感じになりました.だから転々としました.ありがとうございます.
多くの人はjquery、extなどいくつかのオープンソースjsソースコードは非常に難しく、読めないです.実は私の個人的な感覚は主にいくつかの原因があります.
1、一部のjsの常用しない文法、操作符については不案内です.
2、あるfunctionにはまたいくつかの内部のfunctionが組み込まれています.コード全体の階層構造はjavaコードほどはっきりしていません.
3、jsで変数を先に使用して定義すると、コードを見ている時に突然変数が出てきます.functionはどこで定義されているのか分かりません.
今日は私の経験を共有して、あなたの障害を一掃します.
一、一部の難解な操作符:
1、(function(){}();
ほとんどのオープンソースjsコードの冒頭はこうです.
以下はJqueryの一部のソースコードです.
(function( window, undefined ) {
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
},
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
……
indexOf = Array.prototype.indexOf;
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
})(window);(function(){}の中の定義は一つのfunctionで、すぐにこのfunctionを実行することを表します.
私たちはJqueryのソースコードを見ました.最初の()は匿名のfunctionを定義しました.続いて末尾に「window」があります.これを実行することを表します.そしてパラメーターwindowに入ります.
匿名function(window,undefined){}でローカル変数jQueryが定義されています.そして最後に私達はJqueryの最後にwindow.jQuery=window.$=jQueryがあります.このコードは、これまで定義されていたjQueryをwindowオブジェクトにエクスポートするという意味です.これもなぜですか?コードのどこでも直接$jQueryオブジェクトを使うことができます.ここではすでに$jQueryオブジェクトをwindowにアップロードしました.window.$とwindow.jQueryは直接使う$とjQueryは区別がありません.
(注意してください.このwindowオブジェクトはブラウザwindowの対象ではなく、導入されたパラメータwindowです.一つの形参、一つの実参です.私たちはFunctionを定義する時に、パラメータwindowを他の文字と名づけることができます.だから、jquery.min.jsの中でこの匿名のfunctionが(function(E,B)｛)window)になりました.
一般に、いくつかのプライベートメンバまたはパブリックメンバの導出をカプセル化するために使用される.
2、迷ってしまう「、」
「はい」は通常、複数の変数を一度に定義したり、複数のパラメータを定義したりするために使われます.上のようなjQueryのソースコードの中でvar jQueryの後で、“を使って、”一回で多くの変数を定義しました.
しかし、次のコードのように、皆さんは必ずしも分かりません.
//html：<input type="hidden" value="king" id="nameHide"/>
jQuery(document).ready(function() {
var showName=function(){
var value,nameInput=$("#nameHide");
return nameInput.show(),value=nameInput.val();
};
alert(showName());
});
// ： king「,」はソースコードの中でよく使われていますが、「()」演算子と一緒に使用します.
3、「()」広義的なコード包装
複雑な論理表現に出会うと、一緒に演算したい表現を「()」で包むのが普通です.
「()」演算子は一つの表現を一つの全体としてまとめて演算し、その全体の値を返します.
上の(function(){}()の左側でfunctionを定義するのもこの役割です.このfunctionを包んで、このfunctionに戻ります.私たちの呼び出し方法は普通a()です.では、このfunctionオブジェクトに戻り、右側の()がこのfunctionを呼び出します.
他の使い方を見に来ました.
//html：<input value="kings" id="name"/><div id="nameErrorTip"> ！</div>
jQuery(document).ready(function() {
var nameValidate=function(){
var value,nameInput=$("#name"),nameErrorTip=$("#nameErrorTip");
return (value=nameInput.val(),value=="king")?(nameErrorTip.hide()," ， king！"):(nameErrorTip.show()," king!");
};
alert(nameValidate());
});
// nameErrorTip ， " king!"
//html：<input value="king" id="name"/><div id="nameErrorTip"> ！</div>
// nameErrorTip ， " ， king！"だから(value=name Input.val()、value==king)実行時に、valueの値を先に計算して、kingかどうかを判断します.kingなら、「そうだ、kingに入力します!」と実行します.この表式は、まずname ErrrorTipを隠し、もう一つの「そうだ、kingに入力します!」文字列をreturn全体の値として返します.
4、𞓜𞓜、&&12539;if()ロジックが頭をくらくらさせます.
𞓜𞓜、&両側が演算に参加するのは論理式で、if()にもあります.しかし、多くのオープンソースコードで見られている1240、&演算に参加する表現は論理表現ではなさそうです.
次の段階でjQuery.toolのソースコードを選択します.
e.circular || (f.onBeforeSeek(function(a, b) {
setTimeout(function() {
a.isDefaultPrevented()
|| (n.toggleClass(e.disabledClass,
b <= 0), o.toggleClass(
e.disabledClass, b >= f
.getSize()
- 1))
}, 1)
}), e.initialIndex || n.addClass(e.disabledClass)), f.getSize() < 2
&& n.add(o).addClass(e.disabledClass), e.mousewheel
&& a.fn.mousewheel && b.mousewheel(function(a, b) {
if (e.mousewheel) {
f.move(b < 0 ? 1 : -1, e.wheelSpeed || 50);
return !1
}
});実は、jsの論理表現は真の値と偽の値によって分けられます.trueは本物です1は本物です一つの対象も本物です.falseは偽の値です「」、0は偽の値です
jsの中で&&12539;124;は必ずしも表現の論理値をtrue、falseと判断するために用いられているわけではありません.もっと多いのは、真の値または偽の値に基づいて対応する動作を実行するために使われています.
私達は知っていて、𞓜𞓜演算の時、先に左側の表現の値を演算して、もし本当の値ならば、本当に表現は本当の値で、同時に右側の表現は本当の値で、にせの値はすべて重要ではありませんて、右側の表現がすべてもう演算に参加しないためです.また、左側が偽の値であれば、右側の表式を演算し続けます.
を選択します.
ここで鍵となるのはこの真の値または偽の値を演算する過程で、上記で紹介した「,」,()を使って一連の表現を実行することができます.つまり、この表式は長いかもしれません.中にFnctionを定義することもできます.これらの表現は実行中に何らかの追加的な操作が可能です.例えば、この表式が本当の値の時に何をしたいですか?偽の値の時に何をしますか?これらの操作を「()」「,」で連結して一つの全体演算とします.
そこで上の複雑なコードがあります.
実例を見てみましょう.上の例のアップグレード版です.name Inputが存在するかどうかの判断を入れます.
jQuery(document).ready(function() {
var nameValidate=function(){
var value,nameInput=$("#name"),nameErrorTip=$("#nameErrorTip"),msg;
msg=(value=nameInput.val(),value=="king")?(nameErrorTip.hide()," ， king！"):(nameErrorTip.show()," king!");
return (nameInput.length&&nameInput.val()&&nameErrorTip.length&&msg)||" name ！";
};
alert(nameValidate());
});//html:<input value="king" id="myName"/>
// ： “ name ！”
//<input value="king" id="name"/><div id="nameErrorTip"> ！</div>
// ： “ ， king！”，nameErrorTip 「name入力ボックスが見つかりませんでした.または入力ボックスに値がありません.」
表式の間は𞓜124;演算であるため、前の表式のうちの一つが偽の値であれば𞓜|右側の表現の値を返します.つまり、「name入力ボックスが見つからないか、入力ボックスが値なし!」文字列です.
これらの理解しにくい演算子を話した後、皆さんはこのjavascriptがなぜこんな難しい演算子をするのかと感じるかもしれません.
私の理解は、Javascriptは通常クライアントで動作していますので、サーバー側からjsコードをクライアントに送信するには時間がかかります.上のこれらの演算子は符号量を減らすためです.さらに、圧縮ツールを使ってスペースを抜き、変数名を置き換えると、圧縮率を使って最適になります.