前端编程规范

一、js 编程规范

1、js命名规则

• 1）变量以及方法的命名要尽量语意化，禁止使用单个字母、未形成惯例的缩写来命名
• 2）必须用英文单词命名，禁止出现拼音的命名方式
• 3）小于 15 个字母的一般不用缩写；超过 15 个字母的，可采用以去掉元音字母的方法或者行业内约定俗成的缩写（取前 4 个字母），且缩写保持驼峰格式
• 4）采用小驼峰的命名方式
• 5）不想对外的私有属性和方法，前缀为下划线(_)后面跟公共属性和方法一样的命名方式 ★★★
• 6）常量 全部大写
• 7）函数(方法命名)
  • 小驼峰方式 ( 构造函数使用大驼峰命名法 ) 命名规则
  • 命名规则 : 前缀为简单使能型动词
  • 方法体不宜太长，若无法再 50 行之内解决逻辑问题，最好将问题细化，一个方法解决一个问题

• 8）不要用保留字作用键值或者变量名；如果确实需要，请用保留字的同义词 [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Reserved_words]

2、代码开发细则

• 使用 ES6 标准的模块(import/export)方式

• 尽量使用 let 和 const 来声明变量

• 访问外部对象时，需先判断该对象是否为空

• 使用严格等 ===，精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰

• 不要使用 eval()函数，禁止使用 with() {}

• 方法设计应遵循单一职责原则，一个方法仅完成一个功能

• 方法的参数个数不宜过多(最好不要超过 5 个)

• 简单的情况下，推荐 三元条件判断 代替 if

• 每句代码后必须加分号

• 不要写复杂的表达式，增加软件维护的成本和出错的几率

• 在 switch 语句的每一个 case、和 default 中都放置一条 break 语句

• 对于 if-else if（后续可能有多个 else if）类型的条件判断，最后必须包含一个 else 分支

• 代码功能测试完成后，测试完成之后请将打印信息删除； 提交代码中不要有 console.log 输出

• 推荐尽可能使用箭头函数 =>, 箭头函数中的 this 对象指向是不变的，this 绑定到定义时所在的对象

• 在需要的地方给变量赋值，把变量的赋值和调用代码放在一起会使逻辑更加清晰、可读性更好

• 数组

  • 尽量使用扩展运算符 ... 来复制数组
  • 尽量使用数组API操作数组数据
    • push：向数组的末尾添加一项或者多项
    • unshift：向数组开头添加一项或者多项
    • pop：删除数组中最后一项
    • shift：删除数组中的第一项
    • splice：删除、添加 直接修改原数组
      • 返回值：删除的内容组成的新数组
      • arr.splice(0) 清空数组
    • indexOf & lastIndexOf 查找数组索引
      • indexOf 查找某项 在数组中首次出现的索引位置； 返回值：查找到的索引值， 如果返回-1，数组中不存在这一项
      • lastIndexOf：查找某项，在数组中最后一次出现的索引位置；返回值：查找到的索引值， 如果返回-1，数组中不存在这一项
    • slice：截取， 截取数组中的内容组成新数组，不会修改原数组
    • sort：数组的排序
    • resverse ： 倒序
    • concat：数组的拼接； 返回值：拼接好的新数组，不会影响原数组
    • join & toString：数组类型转换：将数组转换成字符串

• 循环遍历，推荐使用以下方式

  • forEach() —— 不需要返回值的遍历
  • map() —— 需要返回值的遍历
    • map 返回一个新的数组，这样处理数组后也不会影响到原有数组
  • every()，用于判断数组中的每一项元素是否都满足条件，返回一个布尔值 —— 判断每项是否都满足条件
  • some()，用于判断数组中是否存在满足条件的元素，返回一个布尔值 —— 判断某值是否存在时
  • filter()，用于筛选数组中满足条件的元素，返回一个筛选后的新数组
  • 总结： forEach()无返回值，map()和filter()返回新数组，every()和some()返回布尔值

• 模糊匹配

  • 推荐使用正则表达式的test()方法

3、注释

规则：

• 单行注释 ( // ) 单独一行：//(双斜线)与注释文字之间保留一个空格 在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格 注释代码：//(双斜线)与代码之间保留一个空格
• 多行注释 ( / 注释说明 / ) 若开始(/和结束(/)都在一行，推荐采用单行注释 若至少三行注释时，第一行为/，最后行为/，其他行以开始，并且注释文字与保留一个空格
• 注释应解释代码的意图，而不是描述代码怎么做的

二、代码排版规则

使用 eslint 统一监管代码的排版规则

三、css 编程规范

• 禁止类名嵌套超过5层
• 属性书写顺序建议： 布局定位 —— 自身尺寸数据 —— 文字属性 —— 背景属性 —— css3 属性
• 所有涉及颜色、尺寸、方位等使用统一抽取的less 变量
• 组件相关的颜色，抽取变量统一对外开放，便于精细换肤
• 组件内部不常修改的尺寸，抽取变量放到组件样式文件顶部
• 继承性统一样式尽量写在根组件样式中
• 样式渲染尊重盒模型，优先框架布局，再逐步细化内容布局；
• 样式选用尊重布局继承关系，父子间距用padding，兄弟用margin

四、git 提交规范

提交 commit 的类型，包括以下几种

// 常用

• feat: ✨ :sparkles: 新功能

• fix:

  标签：返回,布尔值,代码,编程,规范,注释,数组,返回值,前端
  From： https://www.cnblogs.com/hua-hua-good-good-study-day-day-up/p/17105267.html