JavaScript中處理全局變量

js如何避免變量衝突

/* 
		1.解決js衝突方法一 
		用匿名函數將腳本包起來，改變變量的作用域 讓變量的作用域控制在匿名函數之內
	 */
		(function(){
			var str = "hello world!";
			alert(str);
		})();
	/* 
		1.解決兩個匿名函數之間通信
		使用全局變量 在window作用域下定義全局變量但是也應該要控制全局變量的個數
		使用普通變量作爲全局變量，擴展性就會很差，可以使用一個對象類型的變量作爲全局變量
		如果需要很多全局變量作通信，則可以將這些變量都作爲全局變量的屬性
 	*/
		var GLOBAL = {};
		(function(){
			GLOBAL.str = "hello world2!";
			alert(GLOBAL.str);
		})();
	/*
		2.解決變量命名衝突
	 	全局變量屬性如果命名簡單極有可能被無意中覆蓋
	 	可以使用命名空間解決這個問題 只不過爲了避免被覆蓋多嵌套了一次對象比如
	 */

	 (function(){
	 	GLOBAL.A = {};
	 	GLOBAL.A.name = "alice";
	 	alert(GLOBAL.A.name);
	 })();

	 /*
		3.還可以多級使用
	 */
	  (function(){
	 	GLOBAL.B = {};
	 	GLOBAL.B.DATE = {};
	 	GLOBAL.B.DATE.year = 2016;
	 	GLOBAL.B.DATE.month = 4;
	 	alert(GLOBAL.B.DATE.month);
	 })();
	</script>
 	<script>
	/*
		4.定義命名空間函數
		這樣可以在命名空間中的匿名函數調用，多級非常方便
	 */
	 var GLOBAL = {};
	 GLOBAL.namespace = function(str){
	 	var arr = str.split("."),o = GLOBAL;
	 	for(i = (arr[0] == "GLOBAL") ? 1 : 0;i < arr.length; i++){
	 		o[arr[i]] = o[arr[i]] || {};
	 		o = o[arr[i]];
	 	}
	 }
	 GLOBAL.namespace("CLASS.PER");
	 GLOBAL.CLASS.PER.name = "lefeier";
	 console.log('GLOBAL : ' + GLOBAL);
	 alert(GLOBAL.CLASS.PER.name);
	</script>
	
	<script>
		/* 5.程序統一入口 
		window.onload 所有資源全部下載完畢之後才執行
		DOMReady 只要頁面所有的節點全部加載完成即可 它並不是原生js事件 但是很多的js框架提供這種事件 */


		/* 6.JavaScript分層概念
		   1. base層  
		   封裝不同瀏覽器下js的差異，提供統一接口 
		   撫平DOM EVENT 事件冒泡 onXXX、attachEvent addEventListener 自定義函數
		   2. common層
		   提供可以複用的組件
		   3. page層
		   完成頁面內的功能需求
		 */

		 // 部分base層的方法

		 /* 封裝阻止事件冒泡 */
		 function stopPropagation(e){
		 	e = window.event || e;
		 	if(document.all){/* IE */
		 		e.cancelable = true;
		 	}else{
		 		e.stopPropagation();
		 	}
		 }
		 /* 封裝事件綁定 */
		 function on(node, eventType, handler){
		 	node = typeof node == "string" ? document.getElementById(node) : node;
		 	if(document.all){
		 		node.attachEvent("on"+eventType, handler); //現在的IE版本已經抹平了不同
		 	}else{
		 		node.addEventListener(eventType, handler, false);
		 	}
		 }
		 var btn = document.getElementById("btn");
		 on(btn,"click",function(){
		 	alert("button clicked!");
		 });

		 /* 獲取含有指定class名的指定頁面元素 */
		function getClass(tagname, className) { //tagname指元素，className指class的值
         //getElementsByClassName用下面的方法
         var tagname = document.getElementsByTagName(tagname);  //獲取指定元素
         var tagnameAll = [];     //這個數組用於存儲所有符合條件的元素
         for (var i = 0; i < tagname.length; i++) {     //遍歷獲得的元素
            if (tagname[i].className.split(" ")[0] == className) {
            //如果獲得的元素中的class的值是於指定的類名，就賦值給tagnameAll
                tagnameAll[tagnameAll.length] = tagname[i];
                }
            }
           return tagnameAll;   
    	}

 /* getElementsByClassName 兼容處理 */
        function getElementsByClassName(ele, className){
        	if(ele.getElementsByClassName){
        		return ele.getElementsByClassName(className);
        	}else{ //IE 7 8 
        		var elements = ele.getElementsByTagName('*');
        		var result = [], element;
        		for(var i = 0, element = elements[i]; i <  elements.length;i++){
        			if(hasClass(elements[i], className)){
        				result.push(elements[i]);
        			}
        		}
        		return result;
        	}
        }
        function hasClass(ele, className){
			var classNameStr = ele.className;
			classNameStr = classNameStr.trim();
			className = className.trim();
			var classItms = classNameStr.split(' ');
			for(var i = 0; i < classItms.length; i++){
				if(className === classItms[i])return true;
			}
			return false;
        }