标签:rem 导致 height val windows 数字 eve The NPU
为了统一代码风格,提高代码的可读性和可维护性,特制定此编码规范。
正确:
<div>这里是一个 DIV 标签。</div>
错误:
<DIV>这里是一个 DIV 标签。</Div>
正确:
<div id="div-1">这个 DIV 的 id 是 div-1 </div>
错误:
<div ID=div-1>这个 DIV 的 id 是 div-1 </div>
在一个页面中,要保证元素 ID 唯一。
正确:
<div id="div-1" data-non-standard-attribute="my-value">这个 DIV 具有一个非标准的属性。 </div>
错误:
<div id="div-1" nonstandardattribute="my-value">这个 DIV 具有一个非标准的属性。</div>
正在筹划中的云班课 Web 2.0 版本中,我们强制用户使用新版本支持 HTML5 的浏览器。强制支持 HTML5 的页面要正确的使用 DOCTYPE。
HTML 源代码的第一行应该为:
<!DOCTYPE html>
元素的大小和位置实际上属于展示层面,在 HTML5 规范中,HTML 负责数据,CSS 负责展示。所以除了几个特殊的元素(<canvas>),其他元素的大小和位置一律使用 CSS 样式来完成,禁止只用元素的 width, height 等属性来指定。
正确:
<div style="width: 100px; height: 100px;">我是一个 100px x 100px 的正方形</div>
错误:
<div width="100" height="100">我是一个 100px x 100px 的正方形</div>
对于需要闭合的 HTML 标签,必须进行闭合标记,哪怕标签中是没有任何内容。
正确:
<div></div>
错误:
<div/>
正确:
<input type="text" name="your_name">
错误:
<input type="text" name="your_name"/>
延迟加载的图片也要增加默认的 src
正确:
<img src="http://www.mosoteach.cn/web/common/images/dummy.png" class="lazy-load" alt="班课封面">
错误:
<img src="" class="lazy-load" alt="班课封面">
变量必须使用 var 声明:
正确:
var defaultScore = 1; var users = [];
错误:
defaultScore = 1;
users = [];
虽然 JavaScript 允许在不影响代码含义的前提下省略行尾分号(;),但是要求必须使用分号。
正确:
var domObject = document.getElementById("div-1"); domObject.onClick = function(evt) { // Your code goes here };
错误:
var domObject = document.getElementById("div-1"); domObject.onClick = function(evt) { // Your code goes here } // 上面的代码是一个赋值表达式,所以不能省略末尾的分号
左花括号跟随上一行代码,右花括号独占一行。如果是内嵌匿名函数,可以把花括号和圆括号写在一行。
例子 1:
for (var i = 0, n = 10; i < n; i++) { // your code goes here }
例子 2:
$(domObject).bind("click", function(evt) { // your code goes here });
每个类的定义都要附带一份注释,描述类的功能和用法。也需要说明构造器参数。如果该类继承自其它类,应该使用 @extends 标记。如果该类是对接口的实现,应该使用 @implements 标记。
/** * Class making something fun and easy. * @param {string} arg1 An argument that makes this more interesting. * @param {Array.<number>} arg2 List of numbers to be processed. * @constructor * @extends {goog.Disposable} */ project.MyClass = function(arg1, arg2) { // ... }; goog.inherits(project.MyClass, goog.Disposable);
提供参数的说明。使用完整的句子,并用第三人称来书写方法说明。
/** * Converts text to some completely different text. * @param {string} arg1 An argument that makes this more interesting. * @return {string} Some return value. */ project.MyClass.prototype.someMethod = function(arg1) { // ... }; /** * Operates on an instance of MyClass and returns something. * @param {project.MyClass} obj Instance of MyClass which leads to a long * comment that needs to be wrapped to two lines. * @return {boolean} Whether something occured. */ function someMethod(obj) { // ... }
@param
@param {Type} 变量名 描述 <br>
/** * Queries a Baz for items. * @param {number} groupNum Subgroup id to query. * @param {string|number|null} term An itemName, * or itemId, or null to search everything. */ goog.Baz.prototype.query = function(groupNum, term) { // ... };
@return
@return {Type} 描述
/** * @return {string} The hex ID of the last item. */ goog.Baz.prototype.getLastId = function() { // ... return id; };
@author
@author youname@yourdomain.com
@type
@type Type
@type {Type}
/** * The message hex ID. * @type {string} */ var hexId = hexId;
CSS 中的类、ID 等选择器的名字一律小写字母,多个单词之间使用短横线(-)分隔,例如:
正确:
.user-not-login { width: 10px; background-color: gray; }
错误:
.usernotlogin { width: 10px; background-color: gray; } .userNotRegister { width: 10px; background-color: gray; }
样式内容较少的,可以将选择器、花括号以及样式写在一行。样式内容较多的,建议写在多行,并且左大花括号和选择器位于一行。
选择器名称和左大花括弧之间保留一个空格:
正确:
.thin-line { border: 1px solid gray; } .hint-box { background-color: yellow; color: #646464; font-size: 12px; line-height: 150%; }
标签:rem 导致 height val windows 数字 eve The NPU
原文地址:https://www.cnblogs.com/daisyyuan/p/9957152.html