要资料 文章 文库 视频 Code iProcess 课程 角色 咨询 工具 火云堂 讲座吧   成长之路  
会员   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
 
 
我的 HTML5/JavaScript 编程规范
 

作者:cheungmine,发布于2012-5-10

 
 
[plain] view plaincopyprint?

    HTML5/JavaScript 编程规范  
      
    一、文本编辑规则  
      
    缩进为2个空格,不使用tab  
    标签全部采用小写字母,如<input type="checkbox" checked>  
    函数和变量名称小写开头,中间采用骆驼命名法,如:getElementById(...)  
    类似宏的函数名称全部小写或大写,以下划线分割单词,如:extend_class__  
    类名称大写字母开头,如 function MyObject(...)  
    类中方法、变量按作用域不同,采用不同的命名规则。  
    发布的版本一定要注释掉console.log(...)  
    单行注释总是: /*...*/。多行注释总是:/**...*/。短注释用://  
    以//?开头的注释总是属于未完成的临时代码  
    给属性添加的注释://@attributeName  
      
    二、类中方法、变量命名规则  
      
    对外暴露的类名称以大写字母开头,如MapPoint  
    内部使用的类名称以双下划线__开头加大写字母,如__ViewPort  
    类的公有方法或属性、变量与函数和变量的命名规则相同,如:mapPoint.getDistance  
    类的私有方法或属性、变量,并且允许被其他内部类访问,以单下划线_加小写字母开头  
    类的外部不能直接访问的私有方法、变量,以双下划线__加小写字母开头,如:__salaryAmount  
    类的静态变量以大写字母开头,如:MapPoint.MaxRadius  
      
    三、一个JavaScript类模板  
      
    /*******************************************************************************  
     * h5.hs  
     *   cheungmine  
     ******************************************************************************/  
    // 包含其他js文件  
    usingScript("utils.js");  
      
    /*******************************************************************************  
     * $MyClassBase  
     *   Place comments here  
     ******************************************************************************/  
    function MyClassBase() {  
      //?TODO:  
    }  
      
    /*******************************************************************************  
     * $MyClass  
     *   Place comments here  
     * 闭包:  
     *   这种公共、私有和特权成员的模式是可行的原因是由于JavaScript有closure闭包。  
     *   这意味着类中一个内部的函数总是可以访问这个函数外部的变量和参数,  
     *   甚至在外部的函数返回之后。这是这个语言的一个极其强大的特性。  
     *   私有和特权成员只能在对象构造的时候生成。  
     *   公共成员可以在任意时刻添加。  
     ******************************************************************************/  
    // extend_class__ 声明 MyClass 继承自 MyClassBase  
    extend_class__(MyClass, MyClassBase);  
    function MyClass(/* 可以在此放置构造参数列表 */) {  
      // 另一种继承类的方法,可以提供不同的构造参数  
      // 不要与extend_class__同时使用  
      // MyClassBase.call(this);  
      
      /*************  
       * 私有成员:*  
       ************/  
      // 可变参数示例,__args是严格私有变量  
      var __args=Array.prototype.slice.call(arguments);  
      
      var __salary = 0;  
      
      // 下面是一个私有方法示例,外部不能访问  
      function __parseArgs() {  
        self.__salary = 0;  
        if (__args.length>=2) {  
          this._family = __args[0];  
          this.name = __args[1];  
          if (__args.length==3)  
            self.__salary = __args[2];  
          return true;  
        }  
        return false;  
      }  
      
      /*************  
       * 特权成员:*  
       ************/  
      // toString 提供类名称  
      this.toString = function () {  
        return "MyClassClass";  
      }  
      
      this.initialize = function (salary) {  
        if (salary!=null)  
          this.salaryAmount = salary;  
        return __parseArgs();  
      }  
      
      // 这是一个外部访问的公有方法,输出构造参数内容  
      this.printArgs = function () {  
        var i = 0;  
        for (i=0; i<__args.length; i++)  
          console.log(__args[i]);  
      }  
      
      /**  
       * 公共成员,但是因为加了下划线,说明我们本意不想被外部直接访问  
       * 但允许内部类访问  
       */  
      this._family = null;  
        
      /**  
       * 公共成员,外部直接访问  
       */  
      this.name = null;  
      
      /*************  
       * 特权属性: *  
       ************/  
      //@valid  
      this.__defineGetter__("valid",  
        function () {  
          return (this._family!=null && this.name!=null);  
        }  
      );  
      
      //@salaryAmount  
      this.__defineSetter__("salaryAmount",  
        function (v) {  
          __salary=v*100;  
        }  
      );  
      
      /**  
       * 放在最后一行,self被内部方法使用  
       */  
      var self = this;  
    }  
    // 下面是类静态变量的例子:  
    MyClass.prototype.DaysOfYear = 365;  

 

 
[plain] view plaincopyprint?

    /**  
     * utils.js  
     *   cheungmine  
     */  
    if(!getElem){  
    var getElem=(function(){  
    return function(id){  
    return document.getElementById(id);  
    };  
    })();  
    }  
      
    if(!includeScript){  
    var includeScript=(function(){  
    return function(js){  
    document.write('<script type="text/javascript" src="'+js+'"></script>');  
    };  
    })();  
    }  
      
    if(!importScripts){  
    var importScripts=(function(globalEval){  
    var xhr=new XMLHttpRequest;  
    return function importScripts(){  
    var  
    args=Array.prototype.slice.call(arguments)  
    ,len=args.length  
    ,i=0  
    ,meta  
    ,data  
    ,content  
    ;  
    for(;i<len;i++){  
    if(args[i].substr(0,5).toLowerCase()==="data:"){  
    data=args[i];  
    content=data.indexOf(",");  
    meta=data.substr(5,content).toLowerCase();  
    data=decodeURIComponent(data.substr(content+1));  
    if(/;\s*base64\s*[;,]/.test(meta)){  
    data=atob(data);  
    }  
    if(/;\s*charset=[uU][tT][fF]-?8\s*[;,]/.test(meta)){  
    data=decodeURIComponent(escape(data));  
    }}else{  
    xhr.open("GET",args[i],false);  
    xhr.send(null);  
    data=xhr.responseText;  
    }  
    globalEval(data);  
    }  
    };  
    }(eval));  
    }  
      
    if(!usingScript){  
    var usingScript=(function(){  
    return function(js){  
    try{  
      includeScript(js);  
    }  
    catch(e){  
      importScripts(js);  
    }  
    };  
    })();  
    }  
      
    if(!getBrowserAgent){  
    var getBrowserAgent=(function(){  
    return function(){  
    if ((navigator.userAgent.indexOf('MSIE')>=0)&&(navigator.userAgent.indexOf('Opera')<0))  
    return "$IE";  
    else if (navigator.userAgent.indexOf('Firefox')>=0)  
    return "$FIREFOX";  
    else if (navigator.userAgent.indexOf('Opera')>=0)  
    return "$OPERA";  
    else if (navigator.userAgent.indexOf('Chrome')>=0)  
    return "$CHROME";  
    else  
    return navigator.userAgent;  
    };  
    })();  
    }  
      
    if(!extend_class__){  
    var extend_class__=(function(){  
    return function(deriveClass, baseClass) {  
    var base=new baseClass();  
    for (var m in base) {  
    deriveClass.prototype[m]=base[m];  
    }};  
    })();  
    }  
      
    if(!addEvent){  
    var addEvent=(function(){  
    if (document.addEventListener){  
    return function (el,type,fn){  
    if (el&&el.nodeName||el===window){  
    el.addEventListener(type,fn,false);  
    }else if(el&&el.length){  
    for(var i=0;i<el.length;i++){  
    addEvent(el[i],type,fn);  
    }}};  
    }else{  
    return function(el,type,fn){  
    if (el&&el.nodeName||el===window){  
    el.attachEvent('on'+type,function(){return fn.call(el,window.event);});  
    }else if(el&&el.length){  
    for(var i=0;i<el.length;i++){  
    addEvent(el[i],type,fn);  
    }}};  
    }})();  
    }                          

HTML5模板:

 
[html] view plaincopyprint?

    <!doctype html>  
    <html lang="en">  
    <head>  
      <meta charset="utf-8">  
      <meta name="author" content="cheungmine">  
      <title>The HTML5 Test Page</title>  
      <!-- 
      <link rel="stylesheet" href="css/styles.css?v=1.0"> 
      -->  
      <script src="utils.js">  
      <!--[if lt IE 9]>  
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">  
      <![endif]-->  
      <script type="text/javascript">  
        console.log("run script in head");  
        var browser = getBrowserAgent();  
        addEvent(window, 'load',  
          function () {  
            if (browser=="$IE"||browser=="{1}quot;) {  
              if (window.confirm("IE does not support HTML5 currently.\n"+  
                  "please use lastest FireFox, Chrome or Opera!\n"+  
                  "if you havenot any of them installed,\n"+  
                  "please click OK to enter download page.")) {  
                window.location.replace("selbrowser.html");  
              }  
              else {  
                window.close();  
              }  
            }  
      
            init();  
          }  
        );  
          
        function init () {  
          console.log("init after page load");  
        }  
      </script>  
    </head>  
    <body>  
      <header>  
        <nav>HTML5/JavaScript 编程规范</nav>  
        <p>(open me in Chrome and press F12 to switch debugging)</p>  
      </header>  
      <div id="main">  
      </div>  
      
      <!-- import js at bottom of body -->  
      <script src="h5.js">  
      <script type="text/javascript">  
        console.log("run script in body");  
        var myCls = new MyClass("cheung", "mine");  
        myCls.printArgs();  
        myCls.initialize(250);  
        console.log(myCls.DaysOfYear);  
      </script>  
    </body>  
    </html>                          

名称空间:

 
[javascript] view plaincopyprint?

    (function() {  
      function cls(id) {  
        this.name = id;  
      }  
      
      // public interfaces:  
      window['MyNamespace']={}  
      window['MyNamespace']['MyClass']=cls;  
    })();                          

使用:

var myobj = new MyNamespace.MyClass("test");

alert(myobj.name);

 


相关文章 相关文档 相关课程



深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程


WEB应用程序UI模版代码编写
C# 编码规范和编程好习惯
什么是防御性编程
善于防守-健壮代码的防御性
Visual C++编程命名规则
JavaScript程序编码规范
更多...   


设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码
单元测试、重构及持续集成
软件开发过程指南


某全球知名通信公司 代码整洁
横河电机 如何编写高质量代码
某知名金融软件服务商 代码评审
东软集团 代码重构
某金融软件服务商 技术文档
中达电通 设计模式原理与实践
法国电信 技术文档编写与管理
更多...   
 
 
 
 
 
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号