美文网首页
前端开发规范

前端开发规范

作者: 南土酱 | 来源:发表于2023-09-21 09:39 被阅读0次

    项目结构规范:

    my-project-name/
    |- BuildScript    // 流水线部署文件目录
    |- docs           // 项目的细化文档目录(可选)
    |- nginx          // 部署在容器上前端项目 nginx 代理文件目录
    |- node_modules   // 下载的依赖包
    |- public         // 静态页面目录
        |- index.html // 项目入口
    |- src            // 源码目录
        |- api        // http 请求目录
        |- assets     // 静态资源目录,这里的资源会被wabpack构建
            |- icon   // icon 存放目录
            |- img    // 图片存放目录
            |- js     // 公共 js 文件目录
            |- scss   // 公共样式 scss 存放目录
                |- frame.scss   // 入口文件
                |- global.scss  // 公共样式
                |- reset.scss   // 重置样式
        |- components     // 组件
        |- plugins        // 插件
        |- router         // 路由
        |- routes         // 详细的路由拆分目录(可选)
            |- index.js
        |- store          // 全局状态管理
        |- utils          // 工具存放目录
            |- request.js // 公共请求工具
        |- views          // 页面存放目录
        |- App.vue        // 根组件
        |- main.js        // 入口文件
        |- tests          // 测试用例
        |- .browserslistrc// 浏览器兼容配置文件
        |- .editorconfig  // 编辑器配置文件
        |- .eslintignore  // eslint 忽略规则
        |- .eslintrc.js   // eslint 规则
        |- .gitignore     // git 忽略规则
        |- babel.config.js // babel 规则
        |- Dockerfile // Docker 部署文件
        |- jest.config.js
        |- package-lock.json
        |- package.json // 依赖
        |- README.md // 项目 README
        |- vue.config.js // webpack 配置
    

    文件命名规范:
    Vue.js命名风格指南(易记版) - 掘金 (juejin.cn)

    js 接口命名:

    附: 函数方法常用的动词:
    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 搜索,
    check out 签出/check in 签入,
    submit 提交/commit 交付,
    push 推/pull 拉,
    expand 展开/collapse 折叠,
    enter 进入/exit 退出,
    abort 放弃/quit 离开,
    obsolete 废弃/depreciate 废旧,
    collect 收集/aggregate 聚集
    

    git 提交规范

    描述
    feat 新增一个功能
    fix 修复一个 Bug
    docs 文档变更
    style 代码格式(不影响功能,例如空格、分号等格式修正)
    refactor 代码重构
    perf 改善性能
    test 测试
    build 变更项目构建或外部依赖(例如 scopes: webpack、gulp、npm 等)
    ci 更改持续集成软件的配置文件和 package 中的 scripts 命令,例如 scopes:Travis, Circle 等
    chore 变更构建流程或辅助工具
    revert 代码回退

    代码提交错分支还未push的时候:

    # 1. 回滚提交 reset, 将最近一次提交放回暂存区, 并取消此次提交.
    $ git reset HEAD~1
    
    # 2. 将被跟踪的内容stash,即暂时将未提交的变化移除,稍后再移入
    $ git stash
    
    # 3. 创建并切换到新分支
    $ git checkout -b dev-myname
    
    # 4. 将stash的内容pop出来
    $ git stash pop
    
    # 5. 重新commit
    $ git add 多个文件名用空字符隔开
    $ git commit -m "提交信息"
    $ git push origin dev-myname 
    

    js代码写法规范

    在高性能js一书中提到:
      str = ‘a’ + ‘b’+'c' 会出现临时的字符串在内存中
    
    建议用 
    str += 'a'
    str += 'b'
    str += 'c'
    来避免多一个 'abc'的临时字符串
    

    github 访问加速
    上万良心软件都在GitHub,你却还卡在无法访问?(Github加速访问教程) - 知乎 (zhihu.com)

    相关文章

      网友评论

          本文标题:前端开发规范

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