JavaScript基础原则（转）

原文地址：http://www.lihuai.net/qianduan/js/316.html/

1.JavaScript文件应该放在网页的什么位置

<style type="text/css">
	/* 这里是CSS样式表 */
	...
	..
	.
</style>
<div id="demo">
	<h1>Hello,Welcome to ITLee博客</h1>
	<!-- 这里是一大段html代码 -->
	......
	...
	.
</div>
<script type="text/javascript">
	window.onload = function(){
		//非常多的一段JS代码
		......
		...
		.
	}
</script>

CSS文件放在页头，JavaScript文件放在页尾。基本原则。

2.避免JavaScript代码冲突

<div>
      xxxxxxxx这是一段html代码xxxxxxxxxxx
</div>
<script type="text/JavaScript>
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]];
    }
}
</script>
<!-- JS代码功能：G  -->
<script type="text/JavaScript>
(function(){
    var a=123, str = b=456;
    GLOBAL.namespace("A.CAT");
    GLOBAL.namespace("A.DOG");
    GLOBAL.A.CAT.name = "mao";
    GLOBAL.B.DOG.name = "gou";
    GLOBAL.A.CAT.move = function(){
     ......
    }
    ......
    GLOBAL.A.demo = a;
    GLOBAL.A.test = b;
    ......
})();
</script>
<div>
      xxxxxxxx这是一段html代码xxxxxxxxxxx
</div>
<!-- JS代码功能：O  -->
<script type="text/JavaScript>
(function(){
    var a, d="hello word";
    var i = GLOBAL.A.demo;
    ......
})();
</script>
<div>
      xxxxxxxx这是一段html代码xxxxxxxxxxx
</div>
<!-- JS代码功能：P  -->
<script type="text/JavaScript>
(function(){
    var f, g="hello word";
    var o = GLOBAL.A.str;
    ......
})();
</script>
<div>
      xxxxxxxx这是一段html代码xxxxxxxxxxx
</div>

使用命名空间来解决这个问题。因为命名空间是一个非常有用的功能，我们可以将其定义成一个函数，方便调用。

在代码O和P中分别使用了代码G中用命名空间进行命名的变量，有效的解决了不同代码段之间全局变量覆盖的问题。

3.给JavaScript程序一个统一的入口

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<div>
	<!-- 这是一段html代码 -->
	xxxxxxxxxxxxxxxx
</div>
<script type="text/javascript">
	//定义命名空间方法
	var GLOBAL={};
	GLOBAL.namespace = function(str){
		for(i=(arr[0]=="GLOBAL") ? 1 : 0; i<arr.length; i++){
			o[arr[i]] = o[arr[i]] || {};
			o = o[arr[i]];
		}
	}	
</script>
<script type="text/javascript">
	function init(){
		//功能：A
		(function(){
			var a = 111; b="hello";
			GLOBAL.namespace("A.CAT");
			GLOBAL.namespace("A.DOG");
			GLOBAL.A.CAT.name = "xiaomao";
			GLOBAL.A.DOG.name = "wangcai";
			GLOBAL.A.CAT.eat = function(){
				
			}
			GLOBAL.A.DOG.eat = function(){

			}
			GLOBAL.A.str2 = a;
			GLOBAL.A.str = b;
		})();
		//功能：B
		(function(){
			var a, c="efg";
			GLOBAL.namespace("B");
			GLOBAL.B.str = c;
		})();
		//功能：C
		(function(){
			var a=GLOBAL.A.str2, b=GLOBAL.A.str;
			var d="this is a demo";
			......
		})();
		//功能：D
		(function(){
			var test=GLOBAL.B.str;
			alert(test);
		})
	}
</script>
<div>
	<!-- 这是一段html代码 -->
	xxxxxxxxxxxxxxxx
</div>
<div>
	<!-- 这是一段html代码 -->
	xxxxxxxxxxxxxxxx
</div>
......
<script>
      $(document).ready(init);
</script>

所有全局作用域的函数都放在了GLOBAL命名空间下，有效控制了window作用域下函数的数量，减小了JS冲突的隐患。然后提供了一个应用部分JS的统一入口函数init，最后在DOMReady的时候调用它。

原文地址：http://www.lihuai.net/qianduan/js/316.html/