【开发规范系列】(四)前端开发规范(二)

简介: 【开发规范系列】(四)前端开发规范(二)

(四) LESS 规范

1.4.1 代码组织

1)将公共 less 文件放置在 style/less/common 文件夹。

例:// color.less,common.less

2)按以下顺序组织:

1、@import;

2、变量声明;

3、样式声明;

@import "mixins/size.less";
@default-text-color: #333;
.page {
  width: 960px;
  margin: 0 auto;
}
1.4.2 避免嵌套层级过多

将嵌套深度限制在 3 级。对于超过 4 级的嵌套,给予重新评估。这可以避免出现过于详实的 CSS 选择器。避免大量的嵌套规则。当可读性受到影响时,将之打断。推荐避免出现多于 20 行的嵌套规则出现。

不推荐:

.main{
  .title{
    .name{
       color:#fff
    }
  }
}

推荐:

.main-title{
   .name{
      color:#fff
   }
}

(五) JavaScript 规范

1.5.1 命名

1)采用小写驼峰命名 lowerCamelCase,代码中的命名均不能以下划线,也不能以下划线或美元符号结束。

反例: _name / name_ / name$

2)方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格,必须遵从驼峰形式。

正例: localValue / getHttpMessage() / inputUserId

其中 method 方法命名必须是动词或者动词+名词形式。

正例:saveShopCarData / openShopCarInfoDialog

反例:save / open / show / go

特此说明,增删查改,详情统一使用如下 5 个单词,不得使用其他(目的是为了统一各个端)。

add / update / delete / detail / get

附:函数方法常用的动词:

get 获取/set 设置, add 增加/remove 删除 create 创建/destory 移除 start 启动/stop 停止 open 打开/close 关闭, read 读取/write 写入 load 载入/save 保存, create 创建/destroy 销毁 begin 开始/end 结束, backup 备份/restore 恢复 import 导入/export 导出, split 分割/merge 合并 inject 注入/extract 提取, attach 附着/detach 脱离 bind 绑定/separate 分离, view 查看/browse 浏览 edit 编辑/modify 修改, select 选取/mark 标记 copy 复制/paste 粘贴, undo 撤销/redo 重做 insert 插入/delete 移除, add 加入/append 添加 clean 清理/clear 清除, index 索引/sort 排序 find 查找/search 搜索, increase 增加/decrease 减少 play 播放/pause 暂停, launch 启动/run 运行 compile 编译/execute 执行, debug 调试/trace 跟踪 observe 观察/listen 监听, build 构建/publish 发布 input 输入/output 输出, encode 编码/decode 解码 encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩 pack 打包/unpack 解包, parse 解析/emit 生成 connect 连接/disconnect 断开, send 发送/receive 接收 download 下载/upload 上传, refresh 刷新/synchronize 同步 update 更新/revert 复原, lock 锁定/unlock 解锁 check out 签出/check in 签入, submit 提交/commit 交付 push 推/pull 拉, expand 展开/collapse 折叠 begin 起始/end 结束, start 开始/finish 完成 enter 进入/exit 退出, abort 放弃/quit 离开 obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集

1.5.2 代码格式

1)使用 2 个空格进行缩进。

正例:

if (x < y) {
  x += 10;
} else {
  x += 1;
}

2)不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。

!! 说明:任何情形,没有必要插入多个空行进行隔开。

1.5.3 字符串

统一使用单引号('),不使用双引号(")。这在创建 HTML 字符串非常有好处。

正例:

let str = 'foo';
let testDiv = '<div id="test"></div>';
1.5.4 对象声明

1)使用字面值创建对象。

正例: let user = {};

反例: let user = new Object();

2)使用字面量来代替对象构造器。

正例:

var user = {
  age: 0,
  name: 1,
  city: 3
};

反例:

var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;
1.5.5 使用 ES6,7

必须优先使用 ES6,7 中新增的语法糖和函数。这将简化你的程序,并让你的代码更加灵活和可复用。

!! 必须强制使用 ES6, ES7 的新语法,比如箭头函数、await/async , 解构, let , for...of 等等

1.5.6 括号

下列关键字后必须有大括号(即使代码块的内容只有一行):if, else, for, while, do, switch, try, catch, finally, with。

正例:

if (condition) {
  doSomething();
}

反例:

if (condition) doSomething();
1.5.7 undefined 判断

永远不要直接使用 undefined 进行变量判断;使用 typeof 和字符串 'undefined' 对变量进行判断。

正例:

if (typeof person === 'undefined') {
    ...
}

反例:

if (person === undefined) {
    ...
}
1.5.8 条件判断和循环最多三层

条件判断能使用三目运算符和逻辑运算符解决的,就不要使用条件判断,但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数,并写清楚注释。

1.5.9 this 的转换命名

对上下文 this 的引用只能使用 'self' 来命名。

1.5.10 慎用 console.log

因 console.log 大量使用会有性能问题,所以在非 webpack 项目中谨慎使用 log 功能。


相关文章
|
2月前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
121 4
|
2月前
|
前端开发 JavaScript API
前端代码书写规范
前端代码规范提升项目可维护性和团队协作效率。关注项目命名清晰简洁、一致性,组件命名使用驼峰式且具描述性。JS遵循4空格缩进,分号结束语句,CSS按逻辑排序,HTML注重语义化。注释要功能性、文档化且简洁。遵循规范能减少错误,增强团队沟通。
141 3
|
2月前
|
缓存 JavaScript 前端开发
前端 JS 经典:CommonJs 规范
前端 JS 经典:CommonJs 规范
40 0
|
2月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
2月前
|
前端开发 JavaScript 算法
比较流行的前端代码书写规范都有哪些
【4月更文挑战第13天】前端代码规范增进代码可读性和团队协作,包括缩进(用2空格)、命名(变量 camelCase,常量 MY_CONSTANT,类 PascalCase)、注释、语句与表达式、错误处理、代码复用。文件命名规范涉及扩展名、目录结构、简洁文件名、入口文件和配置文件命名。遵循这些规范能提高代码一致性,但需按项目需求调整。不断学习新规范以适应前端技术发展。
45 1
|
2月前
|
前端开发 数据安全/隐私保护
开发指南016-前端图标规范
平台为了保证统一性,做了很多约定,例如按钮图标等
|
2月前
|
人工智能 自然语言处理 前端开发
前端训练不规范导致AIGC模型“上梁不正”
【1月更文挑战第23天】前端训练不规范导致AIGC模型“上梁不正”
60 1
前端训练不规范导致AIGC模型“上梁不正”
|
2月前
|
前端开发
前端模块化开发规范
前端模块化开发规范
|
2月前
|
前端开发 JavaScript 持续交付
前端代码审查规范
前端代码审查规范
132 0
|
8月前
|
前端开发 JavaScript 编译器
前端开发规范:命名规范、html规范、css规范、js规范(四)
前端开发规范:命名规范、html规范、css规范、js规范
179 0