JavaScriptおよびjQuery学習ノート(2)


最終更新日:2014年11月17日
次に、全体の外層に対する(function(window){})(window);改造を行う.function{}のwindowを見てください.jqueryソースコードにはfunction(global,factory){}と書かれています.globalがwindowオブジェクトであることが印刷されています.factoryはundefinedです.私には2番目のパラメータがありません(私が何を言っているのか分かりません.大丈夫です.続けて見れば分かります.)他のパラメータを追加すると、後で印刷されたのはundefinedです.jqueryの前のバージョンは次のように書かれています.
(function(window,undefined){}(window)).

<html>
<head>
<script>
function test(){
	$("#v").say();	
};

(function (global,factory){
	/*
	         ,            ,       function(window[,noGlobal])  。
	                  。
	*/
	if ( typeof module === "object" && typeof module.exports === "object" ) {
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}
	
})(typeof window!=="undefined"?window:this,function(window, noGlobal){
	//    jquery   ,             ,    
	var test = (function(){

		var t = function(id){
			return new test.n.o(id);
		};

		t.n = t.prototype = {
			o   : function(id){
				return {
					say : function(){
						var change = document.getElementById(id.substring(1,id.length));
						change.innerHTML = "    ";
						change.style.width = "100%";
						change.style.height = "100%";
						change.style.fontSize = "100px";
						change.style.backgroundColor = "yellow";
					}
				};
			}
		
		};

		return t;
	}());

	window.$ = window.jquery = test;
});
</script>
<style type="text/css">
div{
	background-color:red;
	width:20%;
	height:20%;
}
</style>
</head>
<body>
	<div id="v" onclick="test()">         </div>
</body>
</html>

次に例を挙げて、なぜ前の効果と同じなのかを説明します.

<!DOCTYPE html>
<html>
<head>
<script>
(function (x,y){
	console.log(x);//  window  
	console.log(y);//   function(a,b){//TODO}
})(window,function(a,b){
	//TODO
});
</script>
</head>
<body>
</body>
</html>

見えますか?!xはwindowに対応し,yは閉パケットfunction(a,b){}に対応する.私がこの闭包を実行するのはy(a,b)だけでいいのではないでしょうか!!!次に例を示します.

<!DOCTYPE html>
<html>
<head>
<script>
(function (x,y){
	if(y!=undefined){
		y(3,7);
	}else{
		console.log("       ,      ");
	}
})(window,function(a,b){
	console.log(a+b);
});
</script>
</head>
<body>
</body>
</html>

OK!!!これで、これからはfunction(window,noGlobal){...}に重点を置くだけです.中でいいです.自分でjqueryのソースコード万を見てもいいです.行は全部ここに書いてあります.