zoukankan      html  css  js  c++  java
  • 网易前端JavaScript编码规范

    前言,最近写了一些js代码,有许多的命名规范需要遵守,例如,我们的url传值的参数,一般用小写字母比较合适,在后台接收时一看就知道是前台传的参数;而有一些js全局变量和局部变量,函数名等注意一些规范也还是有好处的。

    在网上查看了一些资料,理解了一下js的规范,javascript本身是一门弱类型语言,但是由它发展的js插件,如jQuery却对大小写是区分的,所以我以为javascript命名跟编程语言差不多,不过许多插件有一些自己的规范。

    我查看了一下,网上传的网易的这套编码规范,挺不错的,可以拿来学习一下。

     

    ============

    众所周知,javascript是一种语法极其灵活的语言。javascript在设计之初就只是用来为HTML添加动态效果的。由于他动态,弱类型等特 性,以及不同浏览器的兼容性问题,造成了开发成本要比java等语言要高很多。正因为它太灵活,我们制定了适用于网易邮箱的javascript编码规 范,尽可能多的降低由于语法灵活造成的问题。以下将具体介绍:

    1. 变量命名规范

    变量名包括全局变量,局部变量,类变量,函数参数等等,他们都属于这一类。

    基本规范

    变量命名都以类型前缀+有意义的单词组成,单词首字母都需要大写。例如:sUserName,nCount。

    前缀规范

    每个局部变量都需要有一个类型前缀,按照类型可以分为:

    s:表示字符串。例如:sName,sHtml;

    n:表示数字。例如:nPage,nTotal;

    b:表示逻辑。例如:bChecked,bHasLogin;

    a:表示数组。例如:aList,aGroup;

    r:表示正则表达式。例如:rDomain,rEmail;

    f:表示函数。例如:fGetHtml,fInit;

    o:表示以上未涉及到的其他对象,例如:oButton,oDate;

    例外情况:

    1:作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。

    2:循环变量可以简写,比如:i,j,k等。

    为什么需要这样强制定义变量前缀?正是因为javascript是弱语言造成的。在定义大量变量的时候,我们需要很明确的知道当前变量是什么属性,如果只通过普通单词,是很难区分的。



    例如:

    var group = []; 
    group.name = 'myGroup'; 
    /**** 
    some code 
    ***/
    //这时候你还能一眼就看出来group是什么吗?



    又例如:

    var checked = false; 
    var check = function(){ 
    return true; 

    /** 
    some code 
    **/
    if(check){//可能将checked写成check,由于不能很快速的发现check是函数,造成逻辑错误 
    //do some thing 
    }



    如果我们写成:

    var bChecked = false; 
    var fCheck = function(){ 
    return true; 

    /** 
    some code 
    **/
    if(bChecked){ 
    // do some thing 

    if(fCheck()){ 
    // do other thing 
    }



    就清楚很多了。

    全局变量以及常量规范

    网易邮箱前端是基于“类”的概念来来开发javascript的(稍后会专门介绍),每个类定义都是在一个闭包函数中,除了在window下有类的定义而外,只允许有两种变量定义在全局,那就是全局变量和常量。

    全局变量使用g作为前缀,定义在window下。例如gUserName,gLoginTime。

    某些作为不允许修改值的变量认为是常量,全部字母都大写。例如:COPYRIGHT,PI。常量可以存在于函数中,也可以存在于全局。

    看个例子就 很容易明白为什么要这样定义了:

    var userName = "dongua"; 
    function checkName(userName){ 
    //存在函数参数userName以及全局变量userName,如果要比较两个值是否相等,必需写为 
    return window.userName == userName 
    }



    如果使用了全局变量的前缀,就十分清晰了。

    2. 函数命名规范

    统一使用动词或者动词[+名词]形式,例如:fGetVersion(),fSubmitForm(),fInit();涉及返回逻辑值的函数可以使用is,has等表示逻辑的词语代替动词。

    如果有内部函数,使用__f+动词[+名词]形式,内部函数必需在函数最后定义。例如:

    function fGetNumber(nTotal){ 
    if(nTotal<100){ 
    nTotal = 100; 

    return __fAdd(nTotal); 

    function __fAdd(nNumber){ 
    nNumber++; 
    return nNumber; 


    alert(fGetNumber(30));//alert 101



    对象方法实现

    对象方法命名使用 f+对象类名+动词[+名词]形式;例如 fAddressGetEmail

    事件响应函数

    某事件响应函数命名方式为触发事件对象名+事件名或者模块名+触发事件对象名+事件名,例如:fDivClick(),fAddressSubmitButtonClick()

    3.其他注意事项

    1:所有命名最好使用英语表示。

    2:所有变量名应该明确而必要,尽量避免不必要的容易混淆的缩写。

    3:netease.events.mouse.Handler而不是netease.events.mouse.MouseEventHandler。

    4:对应的方法应该使用对应的动词,例如:get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。

    5:应该避免双重否定意义的变量,例如:bIsNotError, bIsNotFound,不可取。

    6:变量应该在最小的范围内定义,并尽可能的保持最少的活动时间。

    7:循环变量最好在循环中定义。例如for(var i=0,m=10;i

    8:尽量避免复杂的条件语句,可以使用临时的boolean变量代替。

    9:一定要避免在条件中执行语句,例如:if((i=3)>2){},不可取。

    10:不要在代码中重复使用相同意义的数字,用一个变量代替,比如 nTotal=100; num= total。



    网易邮箱页面在window只允许定义三种变量——1:全局变量;2:常量;3:类。任何业务逻辑都需要通过类方法或者示例方法实现。前两种变量在之前文章中已经介绍,在此不再累述,接下来详细介绍类定义和使用的规范。

    定义类是通过一个闭包完成的:

    (function(){ 
    //第一步:引入存在的类。引入support类 
    var Support = window.Support; 

    //$是网易邮箱基础库“base”的引用稍后会介绍 
    //第二步:定义类。可以认为返回了一个类定义 function(){},并在window下定义一个Image类 
    var Image = $.createClass("Image"); 

    //可以认为是jQuery的extend方法 

    //第三步:定义类属性/方法定义 
    $.Object.extend(Image,{ 
    _language : null, //内部属性 
    getSize : fImageGetSize 
    }); 
    //第四步:定义实例属性/方法定义 
    $.Object.extend(Image.prototype,{ 
    name : null, 
    url : null, 
    ext : null, 
    width : 0, 
    height : 0, 
    setName : fImageSetName, 
    getName : fImageGetName, 
    init : fImageInit 
    }); 
    //第五步:方法实现 

    function fImageGetSize(nWidth,nHeight){ 
    return nWidth*nHeight; 


    function fImageSetName(sName){ 
    var oImage = this; 
    oImage.name = sName; 


    function fImageGetName(){ 
    var oImage = this; 
    return oImage.name; 


    function fImageInit(sUrl){ 
    var oImage = this; 
    oImage.url = sUrl; 
    oImage.ext = Support.getExt(sUrl); 
    oImage.width = Support.getWidth(sUrl); 
    oImage.height = Support.getHeight(sUrl); 


    })();



    我们可以看到,这个闭包完成了以下几件事情:

    1.引入这个类需要用到的其他类。

    2.定义这个类。

    3.定义类的属性和方法。

    4.定义类的实例属性和方法。

    5.类和实例方法的实现。

    在命名上,我们遵循了一下规则:

    1.类名首个字母必需大写,例如Image,Support等。

    2.属性名需要是有意义的名词,首字母小写,例如oImage.width。

    3.方法名需要是有意义的动词[+名词],首字母小写,例如Support.getWidth

    4.如果不希望被其他方法调用,需要在属性或者方法名前面加“_”,例如oImage._language

    5.如果不希望被子类调用,需要在属性或者方法名前加“_”,例如oImage.__fire()

    这里需要特别说明以下几点:

    1.方法的定义不是通过匿名函数来定义,而是集中在类定义的下面来实现。这样的好处是能在最开始将类的属性方法定义都罗列出来,便于通过源码查看到对应属性和方法。

    2.在类/实例方法中,使用局部变量代替this。this不是一个好的玩意儿,一不小心就会被this搞晕。使用局部变量能够尽量避免这样的问题,也能够在压缩混淆的时候效果更好。

    3.在实际开发过程中,每个类定义都单独一个js实现。

    除了类的定义,闭包不实现 任何其他逻辑。使用闭包能够将很多变量约束在闭包作用域中,并且能够在压缩混淆中效果更好.

  • 相关阅读:
    mysql 函数 存储过程 事件(event) job 模板
    protobuf 无proto 解码 decode 语言 java python
    mitmproxy fiddler 抓包 填坑
    android adb 常用命令
    android机器人 模拟 踩坑过程
    RabbitMQ添加新用户并支持远程访问
    Windows下RabbitMQ安装及配置
    Java mybatis mysql 常用数据类型对应关系
    easyExcel 踩坑
    linux防火墙查看状态firewall、iptable
  • 原文地址:https://www.cnblogs.com/renzaijianghu/p/3539994.html
Copyright © 2011-2022 走看看