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


最新评论
- 相关文章
WebGL场景中多相机拍摄的原理和意义
一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
3D相机渲染的基本原理是依靠颜色...CSS3原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
Web界面编程状态变化和JS开发框架(React/Angular/Ember)
UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...
深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
HTTP1.1协议现状、问题和解决方案
HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...
深入理解Three.js(WebGL)贴图(纹理映射)和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...
WebGL入门教程6 - 光照效果和Phong光照模型
正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...
如何实现SVG clipPath自适应被裁剪对象
CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
更多...