前端开发规范

发表于 | 分类于 | 阅读次数:

记录一下自己看到的一些关于前端命名规范、html规范、css规范，以后方便自己查看.

命名规范

  • 变量：使用Camel命名法；如

    1
    var firstName = ''

  • 常量：全部字母大写，单词间下划线分割；如

    1
    const VERSION = '1.0.0-beta'

  • 函数：函数参数使用Camel命名法, 列表为一些函数命名习惯

    • can：判断是否可执行某个动作（返回一个布尔值。true：可执行，false：不可执行）
    • is：判断是否为某个值（返回一个布尔值。true：是某个值，false：不是某个值）
    • has：判断是否含有某个值（返回一个布尔值。true：含有此值，false：不含有此值）
    • get：获取某个值（返回所需要的某个值，非布尔值）
    • set：设置某个值（无返回值、返回是否设置成功或者返回链式对象）

  • 类：使用Pascal命名法：如

    1
    2
    function TextNode(options) {
    }

  • 文件命名

    • 文件名不得含有空格
    • 文件名建议只使用小写字母，不使用大写字母。( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 )
    • 文件名包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
    • 引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。

html规范

  • 语义化
    语义化编程，在代码中使用正确的元素。

    语义化是指：根据元素其被创造出来时的初始意义来使用它。
    意思就是用正确的标签干正确的事，而不是只有div和span。

  • 脚本加载
    说到js和css的位置，大家应该都知道js放在下面，css放在上面。
    但是，如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性async，将脚本文件放在内

  • img标签的alt属性不为空

  • 结构、表现、行为三者分离

    尽量在文档和模板中只包含结构性的HTML；而将所有表现代码，移入css样式表中；将所有动作行为，移入js脚本之中。

css规范

  • id和class的命名

    根据元素目的和作用来命名，或其他通用的名称，代替表象和晦涩难懂的名称
    如颜色不建议使用表象如.red，可以使用颜色描述的动作等，如.color-success

  • 属性格式

    作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

    • 结构性属性：
      display
      position, left, top, right etc.
      overflow, float, clear etc.
      margin, padding
    • 表现性属性：
      background, border etc.
      font, text