`
QuarterLifeForJava
  • 浏览: 176306 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

JavaScript及jQuery学习笔记(2)

javascriptjqueryhtml
阅读更多
最后更新日：2014年11月17日
下面对整体外层的(function(window){})(window);进行改造。看下function(window){}中的window。jquery源码中写为：function(global,factory){}，我们打印出来可以看到global就是window对象,factory为undefined，因为我没有第二个参数（不明白我说的是什么意思？没关系，继续看下去就明白了。），如果你再给他加其它参数，往后打印出来的都是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的源码万把行都是写在这里面的。
分享到：
| 简单注水算法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics