悠悠楠杉
网站页面
阿里巴巴前端开发规范指南
07/05
1. 代码规范与命名约定
- 命名约定：采用驼峰式命名法（CamelCase），类名首字母大写，变量和方法名首字母小写。对于组件名，采用全小写字母加连字符的方式（如
my-component）。 - 注释与文档：使用JSDoc或TypeScript注释来描述函数、类和方法的功能、参数和返回值。对复杂逻辑或算法提供简短说明。
- 代码格式：使用Prettier等工具统一代码风格，包括缩进（2个空格）、换行和空格使用等。
2. 性能优化
- 资源加载：利用现代前端框架的懒加载和预加载功能，优化首屏加载时间。对第三方库和资源进行按需加载。
- 代码分割：采用Webpack等工具的代码分割功能，将代码拆分为多个块，按需加载，减少初始加载时间。
- 图片与媒体：使用WebP、JPEG XR等高效格式压缩图片，利用SVG进行图标和矢量图形的绘制。
- CSS优化：利用CSS的批处理和压缩功能，移除无用CSS规则，合并文件以减少请求次数。
3. 组件化开发
- 组件设计：遵循高内聚低耦合原则，设计可复用、易维护的组件。使用React、Vue等框架的组件化开发能力，实现UI的模块化。
- 状态管理：采用Redux、Vuex等状态管理库管理全局状态，确保状态的一致性和可预测性。
- Props与State：清晰区分props（父传子）和state（子组件内部状态），避免不必要的状态提升和重复渲染。
4. 响应式设计
- 布局与媒体查询：使用Flexbox或Grid布局系统，结合媒体查询实现不同屏幕尺寸下的自适应布局。
- 等比缩放：在可能的情况下使用视口单位（如vw、vh）进行尺寸设置，确保元素在不同设备上保持适当的比例。
- 断点管理：定义清晰的断点策略，使用 Sass 或 PostCSS 的自定义属性来管理断点值。
5. 工具链与自动化
- CI/CD：利用Jenkins、GitLab CI等工具实现持续集成和持续部署，自动化测试和构建过程。
- Linting与静态分析：集成ESLint、Stylelint等工具进行代码质量检查，确保代码风格和潜在错误的及时发现。
- 自动化测试：编写单元测试、集成测试和端到端测试，使用Jest、Mocha等框架执行测试并生成报告。
6. 团队协作与文档
- 代码审查：通过GitHub Pull Requests等方式实施代码审查，促进代码质量和团队协作。
- 知识共享：定期组织技术分享会，鼓励团队成员分享知识、经验和最佳实践。
通过以上规范的实施，阿里巴巴前端团队致力于构建高性能、可维护且易于扩展的前端应用，推动公司产品的持续创新与迭代。
