前端开发流程规范

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45430248/article/details/101030365

前端开发流程规范

目录构建规范

1. src 源代码开发目录，也是我们编程人员主要的操作目录，我们大部分代码都在里面

2. config 配置目录 webpack/gulp的配置目录

3. script 脚本命令启动目录

   • env.js 项目的环境配置文件：
   • dev.js 开发环境
   • prod.js 生产环境

4. public/static 静态资源开发目录 - 不会经过webpack编译的目录

5. assets 静态资源开发目录 - 会经过webpack编译的目录

   • img
     • <4k 图片可以转换为base64
     • <4K 只会经过webpack压缩、编译一下

6. components 组件

   • 组件是一个 html css js img 等的一个聚合体

7. lib 插件 比如jq

8. pages 页面

   • home首页
   • category 分类
   • list 列表
   • login
   • register

9. routes 路由配置

10. utils 封装模块

11. doc

    • 后端接口文档
    • 产品经理的文案
    • 项目的开发流程规范

12. test

    • 测试目录
    • 测试你的代码质量

前端环境

同一个内容处于不同的空间
比如: 波哥在教室、办公室、金沙湖、家【 杭州 】、老家
我们在不同的地方行为表现可能不一样
我们希望项目无论在什么情况下都是一样的

1. 生产环境 - 代码经过打包、压缩、编译
2. 开发环境 - 代码没有经过打包、压缩
3. 测试环境
4. 预上线环境
5. 上线环境
6. 其他环境

base64

• 前端性能优化的方案
• 好处： 可以减少一次ajax请求
• 针对： 大小是小于4K的图片

OOCSS命名规范

1. 案例： Bootstrap

js命名方式

1. 变量
   • num
   • nickName
   • nick_name
2. 常量
   • NUM
   • GET_DATA
3. 函数名
   • fn
   • checkNum
4. 类
   • Person
   • BannerList