发 送

HTML、JavaScript和GLSL编码规范

techbrood 发表于 2019-09-23 17:52:23

标签: html5, code standards

- +

HTML编码规范

  • 始终将文档类型声明为文档中的第一行: <!doctype html>

  • 使用小写元素名称: <p>, <div>

  • 关闭所有的元素: <p> ... </p>

  • 关闭空元素: <br />

  • 使用小写属性名: <div class="...">

  • 用引号引用所有的属性值: <div class="...">

  • 不要在等号旁使用空格: <div class="...">

  • 尽量一行不要超过80个字符

  • 为了可读性，添加空行来分隔大型或逻辑代码块

  • 为了可读性，使用2个空格的缩进。不要使用制表符（tab）

  • 总是包含一个<html>, <head> 和 <body> 标签

  • 总是包含语言、编码和 <title>:

    <!doctype html> 
<html lang="en-US"> 
<head>   
  <meta charset="UTF-8">   
  <title>HTML5 Syntax and Coding Style</title> 
</head>

  • 为复杂逻辑部分添加注释: <!-- This is a comment -->

  • 使用简单语法链接样式表: <link rel="stylesheet" href="styles.css">

  • 使用简单语法加载外部脚本: <script src="myscript.js">

  • 在html中使用与javascript相同的命名约定

  • 始终使用小写文件名

  • 使用一致的文件扩展名: .html, .css, .js, .frag, .vert, .fbx, .glb

Javascript编码规范

  • 总是包含 "use strict"; 语句，来强制变量声明

  • 尽可能避免全局变量，如需要定义全局变量，建议使用小写字母 g 开头的变量名

  • 使用JSLint来检查语法错误

  • 为了可读性，添加空行来分隔大型或逻辑代码块

  • 为了可读性，使用2个空格的缩进。不要使用制表符（tab）

  • 在适当的情况下对条件语句使用速记: var results = (test === 5) ? alert(1) : alert(2);

  • 右大括号与原始语句位于同一缩进处:

function func() {
  return {
    "name": "Batman"
  };
}

命名规范

  • 构造器以大写字母开头。

  • 方法/函数以小写字母开头。

  • 方法/函数应使用camel case。thisIsAnExample

  • 变量应始终在单词之间使用下划线。this_is_an_example

  • 适当时，在名称中包含变量类型。value_list

  • 元素id和类名应始终在单词之间使用下划线。

  • 私有方法应使用前导下划线将它们与公共方法分开。

  • 名称中不应使用缩写。

  • 分配名称时不应使用复数。

  • 评论应该合理使用。

  • 使用YUIDoc的规则来给函数添加注释。

/**
 * Reverse a string
 *
 * @param  {String} input_string String to reverse
 * @return {String} The reversed string
 */
function reverseString(input_string) {
  // ...
  return output_string;
};

GLSL编码规范

  • 避免使用All-in-one着色器代码，根据需要编写单独的着色器代码

  • 将webgl版本号放在每个着色器的顶部 #version 103

possitive(12) views3682 comments0

发送私信

发送

最新评论

请先 登录 再评论.
相关文章