• 编写高质量代码(JavaScript篇)


    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、命名清晰,有意义,可以轻松明白意思。

  • 相关阅读:
    [Codeforces809D] Hitchhiking in the Baltic States
    [Codeforces1148H] Holy Diver
    [PKUWC2018]猎人杀
    [Codeforces566C] Logistical Questions
    越野赛车问题
    Suffix Array
    第05组(65) 需求分析报告
    第05组(65) 团队展示
    第三次作业
    结对编程作业
  • 原文地址:https://www.cnblogs.com/diaosizhang/p/3070096.html
Copyright © 2020-2023  润新知