HTML、JavaScript和GLSL编码规范
HTML编码规范
始终将文档类型声明为文档中的第一行:
<!doctype html>
使用小写元素名称:
<p>, <div>
关闭所有的元素:
<p> ... </p>
关闭空元素:
<br />
使用小写属性名:
<div class="...">
用引号引用所有的属性值:
<div class="...">
不要在等号旁使用空格:
<div class="...">
尽量一行不要超过80个字符
为了可读性,添加空行来分隔大型或逻辑代码块
为了可读性,使用2个空格的缩进。不要使用制表符(tab)
总是包含一个<html>, <head> 和 <body> 标签
总是包含语言、编码和 <title>:
为复杂逻辑部分添加注释:
<!-- 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);
右大括号与原始语句位于同一缩进处:
命名规范
构造器以大写字母开头。
方法/函数以小写字母开头。
方法/函数应使用camel case。thisIsAnExample
变量应始终在单词之间使用下划线。this_is_an_example
适当时,在名称中包含变量类型。value_list
元素id和类名应始终在单词之间使用下划线。
私有方法应使用前导下划线将它们与公共方法分开。
名称中不应使用缩写。
分配名称时不应使用复数。
评论应该合理使用。
使用YUIDoc的规则来给函数添加注释。
GLSL编码规范
避免使用All-in-one着色器代码,根据需要编写单独的着色器代码
将webgl版本号放在每个着色器的顶部 #version 103
最新评论
- 相关文章
CentOS6 Apache2.2用域名配置多虚拟机
在CentOS下使用域名配置多虚拟机的步骤如下:
1. 使用A-Frame WebVR(网页虚拟现实)快速开发入门教程
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
WebGL、Asm.js和WebAssembly概念简介
随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...
Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
深度贴图(depth map)概念简介和生成流程
Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...
Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...
Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...