前端规范文档

shimengno1
631 阅读5分钟

前端知识点总结

特别提醒：因团队扩充，怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢，这就需要规范你的代码了。所以创建了这篇代码规范，仅限公司内部使用，其他读者可以间接，以及提出更好更全面的指教。

命名规范

驼峰式命名法介绍

  1. Pascal Case 大驼峰式命名法：首字母大写。
例如：StudentInfo、UserInfo、ProductInfo
  1. Camel Case 小驼峰式命名法：首字母小写。
例如：studentInfo、userInfo、productInfo

文件资源命名

  1. 文件名不得含有空格
  2. 文件名建议只使用小写字母，不使用大写字母。 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。
  3. 文件名包含多个单词时，单词之间建议使用半角的连词线(-) 分隔。
  4. 引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>         不推荐

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>               推荐

变量命名

  1. 命名方式 : 小驼峰式命名方法
  2. 命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词
  3. 因es6因素：使用let定义变量。如：
let a="hello";
let num=0

禁止规范 : 禁止使用拼音，数字。 如：let shuzi=0；let num1；let num2=0；

类型 小写字母
array arr或者list
boolean bool
function fn 
var tableTitle = "LoginTable"               推荐
var getTitle = "LoginTable"                 不推荐

函数命名

  1. 命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 )
  2. 命名规则 : 前缀为动词
动词 含义 返回值
can 判断是否可执行某个动作 ( 权限 ) 函数返回一个布尔值。true：可执行；false：不可执行
has 判断是否含有某个值 函数返回一个布尔值。true：含有此值；false：不含有此值
is 判断是否为某个值 函数返回一个布尔值。true：为某个值；false：不为某个值
get 获取某个值 函数返回一个非布尔值
set 设置某个值 无返回值、返回是否设置成功或者返回链式对象 
//是否可阅读
function canRead(){
    return true;
}

//是否存在用户id
function hasUserId(){
    return true;
}

//是否为0
function isZero(){
    retuen false;
}

//获取姓名
function getName(){
    return this.name
}

//设置姓名
function setName(){
    return ''||true
}

常量

  1. 命名方法 : 全部大写
  2. 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。
  3. 因es6因素 ：使用const定义常量。如：
const TOTAL=0;
const REQUESTURL = 'http://www.baidu.com';

类的成员

  1. 公共属性和方法 : 同变量命名方式
  2. 私有属性和方法 : 前缀为下划线(_)后面跟公共属性和方法一样的命名方式
function User(name) {
    let _name = name; // 私有成员
    
    // 公共方法
    this.getName = function () {
        return _name;
    }

    // 公共方式
    this.setName = function (value) {
        _name = value;
    }
}
let user = new User('simon');
user.setName('石濛');
user.getName(); // => 石濛 输出_name私有变量的值

注释规范

单行注释 ( // )

  1. 单独一行：//(双斜线)与注释文字之间保留一个空格
  2. 在代码后面添加注释：//(双斜线)前后各保留一个空格
  3. 注释代码：//(双斜线)与代码之间保留一个空格。
// 调用了一个函数；1)单独在一行
setTitle();

var maxCount = 10; // 设置最大量；2)在代码后面注释

// setName(); // 3)注释代码

多行注释 ( / 注释说明 / )

  1. 若开始/*和结束*/都在一行，推荐采用单行注释
  2. 若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。 推荐 :
/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
setTitle();

函数 ( 方法 ) 注释

函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参照javadoc(百度百科) 语法：

/** 
* 函数说明 
* @关键字 
*/
标签 说明 JDK 1.1 doclet 标准doclet 标签类型
@author 作者 作者标识 √ √ 包、 类、接口
@version 版本号 版本号 √ √ 包、 类、接口
@param 参数名描述 方法的入参名及描述信息，如入参有特别要求，可在此注释。 √ √ 构造函数、 方法
@return 描述 对函数返回值的注释 √ √ 方法
@deprecated 过期文本 标识随着程序版本的提升，当前API已经过期，仅为了保证兼容性依然存在，以此告之开发者不应再用这个API。 √ √ 包、类、接口、值域、构造函数、 方法
@throws异常类名 构造函数或方法所会抛出的异常。 √ 构造函数、 方法
@exception 异常类名 同@throws。 √ √ 构造函数、 方法
@see 引用 查看相关内容，如类、方法、变量等。 √ √ 包、类、接口、值域、构造函数、 方法
@since 描述文本 API在什么程序的什么版本后开发支持。 √ √ 包、类、接口、值域、构造函数、 方法
{@link包.类#成员 标签} 链接到某个特定的成员对应的文档中。 √ 包、类、接口、值域、构造函数、 方法
{@value} 当对常量进行注释时，如果想将其值包含在文档中，则通过该标签来引用常量的值。 √(JDK1.4) 静态值域

常用的有@param，@return,@author,@version,@example

实例代码：

/**
 - 合并Grid的行
 - @param grid {Ext.Grid.Panel} 需要合并的Grid
 - @param cols {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。
 - @param isAllSome {Boolean} ：是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样
 - @return void
 - @author polk6 2015/07/21 
 - @example
 - _________________                             _________________
 - |  年龄 |  姓名 |                             |  年龄 |  姓名 |
 - -----------------      mergeCells(grid,[0])   -----------------
 - |  18   |  张三 |              =>             |       |  张三 |
 - -----------------                             -  18   ---------
 - |  18   |  王五 |                             |       |  王五 |
 - -----------------                             -----------------
*/
function mergeCells(grid, cols, isAllSome) {
    // Do Something
}
avatar
文章
阅读
粉丝