开发规范

为保证团队代码的质量、可维护性、可读性，前端开发人员应严格遵守开发规范来开发。

第一部分 JavaScript

CamelCase

变量命名统一使用小驼峰命名，例如gameInfo。

类命名统一首字母大写的驼峰命名，例如CustomGame。

ESLint

开发过程中需启用ESLint来校验代码，所有项目基于Standard标准。

以下是标准外的自定义内容：

{
    rules: {
        // 箭头函数参数只有一个时，可以不带括号
        arrow-parens: [2, 'as-needed'],
        // 缩进为4个空格
        indent: [2, 4],
        // 函数参数括号前不需要空格
        space-before-function-paren: [2, 'never']
        // 生产环境下禁止使用debugger
        no-debugger: process.env.NODE_ENV === 'production' ? 2 : 0,
    }
}

ES7

除类似于HWSDK的对JS文件大小有要求的项目外，统一使用ES7进行开发，优先使用async/await处理异步IO。

注释

参照JSDoc的注释规范来编写。

针对Vue组件的注释：

• 在export default上面编写注释。
• 主要注明对外接口，例如 props、事件 等等。

第二部分 StyleSheet

Scss

统一使用SCSS预处理器。

BEM

CSS的类定义，统一使用BEM风格。

注意事项

• 避免使用ID来写样式。
• 提取通用变量到一个.scss文件，例如颜色等。

第三部分 构建工具

Webpack

主要基于webpack进行构建，Webpack的相关配置可在脚手架中找到。

Tasks

通用的脚本工具，由前端团队进行维护。

主要内容包括：

• 静态资源上传到CDN。

保存在库：24haowan_front_tools，使用时作为git submodule进行引用。

第四部分 优化

1. 图片

   1. 格式：
      • 照片类型图片，优先使用 .jpg 格式图片，并合理压缩；
      • 对于图形简单、需要支持透明的图片，例如 logo 等，优先使用 .svg 格式；
      • 对于图标、需要支持颜色改变、自定义颜色的效果时，优先使用 iconfont；
      • 对于动画，优先采用 .gif 格式。
   2. 图片尺寸：
      • 为了兼容 retina 屏幕，图片尺寸需要设置为两倍物理像素大小，即，需要在 retina 屏幕上显示 CSS 像素为 100x100 的图片，需要引入 200x200 物理像素的图片；
      • 为了节省流量、提高加载速度的考虑，可以选择利用 CDN 的图片处理服务来选择合适的图片尺寸来加载图片。

2. 域名分散

   1. 图片和 CSS、JS 文件需要放在不同的域名下，原因是浏览器会优先加载 CSS 和图片文件，如果在图片非常多的页面，JS 的加载将会被明显延迟，分散域名后，JS 将会尽早加载，对富 JS 应用来说非常重要；
   2. 尽量不要把图片放在主域名上，例如，不要将图片放在 www.24haowan.com 上，这样大量的图片会阻塞 API 请求（如果 API 地址正是 www.24haowan.com/api）。