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(1) views1954 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • 计算WebGL中的uniforms变量使用数

    在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • WebVR简介和常用资源链接

    什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...

  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...

  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...

  • 如何使用CSS3实现一个3D商品标签

    使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • 更多...