1、使用“(function(){})()”这样的写法去控制变量在作用域,避免冲突。
例如:
View Code
1 <script type="text/JavaScript"> 2 (function(){ 3 var a=1,b=2; 4 //..... 5 })(); 6 </script> 7 8 <script type="text/JavaScript"> 9 (function(){ 10 var a=1,c=2; 11 //..... 12 })(); 13 </script>
2、添加必要的注释,提高代码的可维护性,同时对于多方法相互调用时,可定义全局变量命名空间的方法进行有效的全局变量管理。
例如:
View Code
1 <script type="text/JavaScript"> 2 var GLOBAL={}; 3 GLOBAL.namespace=function(str){ 4 var.arr=str.split("."),o=GLOBAL; 5 for(i=arr[0]="GLOBAL"?1:0;i<arr.length;i++){ 6 o[arr[i]]=o[arr[i]]||{}; 7 o=o[arr[i]]; 8 } 9 } 10 </script> 11 12 //A Code; 13 <script type="text/JavaScript"> 14 (function(){ 15 var a=1,b=2; 16 GLOBAL.namespace("A.CAT"); 17 GLOBAL.namespace("A.DOG"); 18 GLOBAL.CAT.Name="Hello"; 19 GLOBAL.CAT.Name="Word"; 20 21 //..... 22 })(); 23 </script> 24 25 //B Code 26 <script type="text/JavaScript"> 27 (function(){ 28 var a=1,b=2; 29 GLOBAL.namespace("A.CAT"); 30 GLOBAL.namespace("A.DOG"); 31 GLOBAL.CAT.Name="Hello"; 32 GLOBAL.CAT.Name="Word"; 33 34 //..... 35 })(); 36 </script> 37 38 //C Code 39 <script type="text/JavaScript"> 40 (function(){ 41 var a=1,b=2; 42 GLOBAL.namespace("A.CAT"); 43 GLOBAL.namespace("A.DOG"); 44 GLOBAL.CAT.Name="Hello"; 45 GLOBAL.CAT.Name="Word"; 46 47 //..... 48 })(); 49 </script>
3、CSS放在页面的页头部分,JavaScript放在页面的尾部。这样放置对于页面加载的时候,HTML信息无样式显示效果不好,同时JavaScript放在尾部,避免因为JavaScript阻塞网页的呈现,减少页面空白的时间。
4、对于JavaScript的代码,可采用分层的概念,一般可采用base层(接口代码),common层(相应的组件代码),page层(具体功能需求的代码)三层的结构。例如:常用的JavaScript库:jQuery库,YUI库、Ext JS等。
5、用hash对象传参,方便的进行参数的传输,不受参数的位置和顺序影响。例如:
View Code
// 普通方式传参 function test (a,b,c){ var objA=a||1,objB=b||1,objC=c||1; } //具体调用传参 test(4,5,6); test(null,5,6); test(null,null,6); // hash方式传参 function test (config){ var objA=config.a||1,objB=config.b||1,objC=config.c||1; } //具体调用传参 test({a:4,b:5,c:6}); test({b:5,c:6}); test({b:5});
良好维护性要求:
1、将代码做到松耦合,高度模块化。
2、良好的注释。
3、代码弹性。
4、编写按照规范。
命名规则:
1、共用组件,命名从简,不加前缀。
2、相应模块,采用前缀。可选择加上工程师姓名缩写。
3、模块化组件,驼峰命名法及下划线相结合。
4、命名清晰,有意义,可以轻松明白意思。