前端开发规范,web前端开发项目实例

本文详细介绍了前端开发的命名规范,包括方法名、常量命名的规则,并强调了代码格式的重要性,如使用2个空格缩进、插入空行以提高可读性。同时,针对Vue项目,提出了组件命名、文件格式、数据管理等方面的规范,如组件文件名使用PascalCase,组件数据必须为函数,prop定义应详细,以及Vue Router的使用建议,如使用路由参数传递数据和懒加载机制。此外,还讨论了Vue项目的目录结构和组件、模板、指令的编写原则,以提升代码质量和维护性。
摘要由CSDN通过智能技术生成

反例: 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 保存,

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 折叠,

enter 进入/exit 退出,

abort 放弃/quit 离开,

obsolete 废弃/depreciate 废旧,

collect 收集/aggregate 聚集

3) 常量命名全部大写,单词间用下划线隔开,力求语义表达完整清楚, 不要嫌名字长

正例: MAX_STOCK_COUNT

反例: MAX_COUNT

1.5.2 代码格式
1) 使用 2 个空格进行缩进

正例:

if (x < y) {

x += 10;

} else {

x += 1;

}

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

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

1.5.3 字符串

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

正例:

let str = ‘foo’;

let testDiv = ‘

’;

**反例: **

let str = ‘foo’;

let testDiv = “

”;

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+

必须优先使用 ES6+ 中新增的语法糖和函数。这将简化你的程序,并让你的代码更加灵活和可复 用。比如箭头函数、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’对变量进行判断。

正例:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值