(function($) {…})(jQuery);

時間 2021-08-14

標籤 javascript html java jquery app ide 函數測試 spa 插件欄目 JQuery 简体版

原文原文鏈接

1.javascript

function(arg){...}html

這就定義了一個匿名函數，參數爲arg ;java

而調用函數時，是在函數後面寫上括號和實參的!!jquery

因爲操做符的優先級，函數自己也須要用括號，即：app

(function(arg){...})(param)ide

這就至關於定義了一個參數爲arg的匿名函數，函數

而且將param做爲參數來調用這個匿名函數。測試

而(function($){...})(jQuery)則是同樣的，spa

之因此只在形參使用$，是爲了避免與其餘庫衝突，插件

因此實參用jQuery 。

《=等價於=》

var fn = function($){...}

fn(jQuery);

jQuery(function(){

。。。

});

全寫爲

jQuery(document).ready(function(){

。。。

});

$(function(){

...

})；

全寫爲：

$(cocument).ready(function(){

...

});

jQuery(function(){

...

});

用於存放操做DOM對象的代碼，

執行其中代碼時DOM對象已存在。

不可用於存放開發插件的代碼，

由於jQuery對象沒有獲得傳遞，

外部經過jQuery.method也調用不了其中的方法（函數）。

(function(){

...

})(jQuery)；

用於存放開發插件的代碼，

執行其中代碼時DOM不必定存在，

因此直接自動執行DOM操做的代碼請當心使用。

[這樣作能夠建立一個做用域以保證內部變量與外部變量不發生衝突，好比$ jQuery 等jquery內部定義的變量。]

[(function($){})(jQuery) 這個寫法主要的做用仍是保證jquery不與其餘類庫或變量有衝突首先是要保證jQuery這個變量名與外部沒有衝突（jquery內部$與jQuery是同一個東西有兩個名字的緣由就是怕$與其餘變量名有衝突二jQuery與其餘變量衝突的概率很是小）並傳入匿名對象，匿名對象給參數起名叫作$(其實和jquery內部是同樣的) 而後你就能夠自由的在(function($){})(jQuery)裏寫你的插件而不須要考慮與外界變量是否存在衝突]

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
	<script type="text/javascript">
		(function($){
			console.log("---- begin------");
		
			/**
				測試方法1
			*/
			$.methodOne = function(p){
				if(p == 1) {
					console.log("OK");
				} else {
					console.log("NO");
				}
				
				var result = addP(p);
				console.log(result);
				
				//還能夠寫方法
				function addP(p) {
					return p + "--- result ---";
				}
			}
			
			
			/**
				測試方法2
			*/
			$.tempMethod = {
				//加
				add:function(a,b){
					return a + b;
				},
				//減
				reduce:function(a,b) {
					return a - b;
				},
				//乘
				multiply:function(a,b) {
					return a * b;
				},
				
				//再一層
				three:{
					//加
					add:function(a,b,c){
						return a + b + c;
					},
					//減
					reduce:function(a,b,c) {
						return a - b - c;
					},
					//乘
					multiply:function(a,b,c) {
						return a * b * c;
					}
				}	
			};

		
		})(jQuery);
		
		$(document).ready(function(){
			
			//調用測試方法1
			$.methodOne(1);
			//$.methodOne(3);
			
			
			//調用測試方法2
			var a = 8;
			var b = 4;
			var c = 2;
			
			var result1 = $.tempMethod.add(a,b);
			var result2 = $.tempMethod.reduce(a,b);
			var result3 = $.tempMethod.multiply(a,b);
			
			var result4 = $.tempMethod.three.add(a,b,c);
			var result5 = $.tempMethod.three.reduce(a,b,c);
			var result6 = $.tempMethod.three.multiply(a,b,c);
			
			
			console.log("result1 : " + result1);
			console.log("result2 : " + result2);
			console.log("result3 : " + result3);			
			
			console.log("result4 : " + result4);
			console.log("result5 : " + result5);
			console.log("result6 : " + result6);

		});
	</script>
</head>
<body>
	
</body>
</html>

相關標籤/搜索

function

javascript...function

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。