美文网首页
前端开发规范--自用

前端开发规范--自用

作者: 想成为咸鱼的张三 | 来源:发表于2020-10-28 11:07 被阅读0次

    1.项目命名

    全部采用小写方式, 以中划线分隔。
    mall-management-system

    2.目录命名

    • 全部采用小写方式, 以中划线分隔,有复数结构时,要采用复数命名法, 缩写不用复数
      scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

    • 【特殊】VUE 的项目中的 components 中的组件目录,使用 kebab-case 命名
      head-search / page-loading / authorized / notice-icon

    • 【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名
      page-one / shopping-car / user-management

    3.JS、CSS、SCSS、HTML、PNG 文件命名

    全部采用小写方式, 以中划线分隔
    render-dom.js / signup.css / index.html / company-logo.png

    4.HTML缩进

    • 缩进使用 2 个空格(一个 tab)
    • 嵌套的节点应该缩进。

    5.CSS命名规范

    • 类名使用小写字母,以中划线分隔
    • id 采用驼峰式命名
    • scss 中的变量、函数、混合、placeholder 采用驼峰式命名

    6.Javascript命名

    • 采用小写驼峰命名 lowerCamelCase,代码中的命名均不能以下划线,也不能以下划线或美元符号结束
    • 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格,必须遵从驼峰形式。
      localValue / getHttpMessage() / inputUserId
      其中 method 方法命名必须是 动词 或者 动词+名词 形式

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

    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 聚集

    7.对象声明

    7.1使用字面值创建对象

    正例:let user = {};
    反例:let user = new Object();

    7.2使用字面量来代替对象构造器
    //正例:
    var user = {
      age: 0,
      name: 1,
      city: 3
    };
    
    //反例:
    var user = new Object();
    user.age = 0;
    user.name = 0;
    user.city = 0;
    
    

    相关文章

      网友评论

          本文标题:前端开发规范--自用

          本文链接:https://www.haomeiwen.com/subject/plsqvktx.html