YMPlayer4: Specification

Specification (Chinese simplified)

项目目录结构

| root | | -- cfg (用于存放 Webpack 配置文件) | ---- base.js | ---- default.js | ---- dev.js | ---- dist.js | ---- test.js | | -- demo (存放 Demo 以用于 GitHUb Pages) | | -- dist (存放 Webpack 生成的项目文件) | ---- assets | ------ ymplayer.js (已编译的 YMPlayer JS 文件) | ------ ymplayer.js.map | ---- index.html | | -- src (存放项目源码的目录) | ---- components | ------ ymplayer.js (项目 JS 源代码) | ---- styles | ------ ymplayer.scss (项目 SCSS 源代码) | ---- index.html | ---- index.js

项目 Javascript 代码规则

以下规则为我在完成项目中贯穿的原则，不是硬性要求遵守的，仅供参考。

• 使用驼峰命名法，即类名遵守大驼峰（各单词首字母大写），方法、变量名遵守小驼峰（除第一个单词外的各单词首字母大写）的命名原则。
• 变量名命名语义化，以描述变量的用途为命名目的。
• 留有适当的空间，使用空格分隔操作符，用空行分隔不同作用的代码块。
• 在文件的结尾留一个空行。代码当中每行的末尾不留任何空格，以避免 Webpack 的 warning 提示。
• 对类中的方法写上漂亮的块注释。推荐使用编辑器的 Docblockr 插件。
• 在适当的地方运用技巧使代码更简练，如适当使用三元运算符、在合适的环境使用 ES6 的箭头函数等。
• ……

项目 CSS 代码规则

同样是以自愿遵循为原则。

• 为了避免冲突，CSS 样式名字以 .yp- 为前缀。其后为组件的名称及其描述。组件的名称使用小驼峰命名，描述与组件名称间使用两个下划线 __ 分隔，例如：.yp-progressBar__inner。（不要吐槽这种奇怪的命名格式……）
• 使用 SCSS，所以应当尽量通过嵌套体现出样式之间的层叠关系，避免冲突。
• 尽量通过 SCSS 提供的 variable 和 mixin 来使代码更简练、解决重复的部分。
• 应当注意样式的复用性。
• ……