命名规则

• 概述
• 说明
• HTML
  • class属性
  • id属性
  • data属性（自定义属性）
• Javascript
  • 常量
  • 类
  • 普通变量&函数
  • Jquery对象

概述

本篇文档用于统一命名规则，以便于协同合作和提升工作效率。

说明

HTML

class属性

• 使用 -（短横杠） 作为单词分割

• class="<word1>[-word2][-word3]..."

<!-- class属性命名示例 -->
<div class="one"></div>
<div class="two-words"></div>
<div class="class-name-with-multiple-words"></div>

id属性

• 使用 -（短横杠） 作为单词分割

• id="<word1>[-word2][-word3]..."

<!-- id属性命名示例 -->
<span id="id"></span>
<span id="two-words"></span>
<span id="id-name-with-multiple-words"></span>

data属性（自定义属性）

• 使用 -（短横杠） 作为单词分割

• data<-word1>[-word2][-word3]...

<!-- data属性命名示例 -->
<div
  id="example"
  data-role="page"
  data-last-value="11"
  data-hidden="true"
  data-options='{"key": "value"}'>
</div>

提示：data属性可以通过Jquery，Javascript或者CSS访问

Jquery示例 (.data() | jQuery API Documentation)

You can't use 'macro parameter character #' in math mode

$('#example').data('role') === 'page'  // true
$

('#example').data('lastValue') === 11 // true

You can't use 'macro parameter character #' in math mode

$('#example').data("hidden") === true  // true
$

('#example').data('options').key === 'value' // true

>Javascript示例([Using data attributes - Web developer guide | MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes))

>```javascript
var example= document.querySelector('#example');

>example.dataset.role  // 'page'
example.dataset.lastValue // '11'
example.dataset.hidden  // 'true'
example.dataset.options  // '{"key":"value"}'

*注意：使用dataset得到的所有值均为字符串

CSS示例(Using data attributes - Web developer guide | MDN)

#example::before { content: attr(data-parent); } div[data-role='page'] { width: 400px; } div[data-hidden='true'] { display: none; }

# Javascript

>说明1：由于Javascript是基于原型的语言，所以下述分类并不代表真实类型，仅为约定俗成

>说明2：以下划线(_)开头的命名方式被保留，用作后续需求

### 常量

* 使用 __全大写字母__

* 使用 __下划线(_)__ 作为单词分割

* `var <WORD1>[_WORD2][_WORD3]...`

```javascript
// 常量命名示例
var IMMUTABLE = 'my heart';
var THE_ONE_TO_BE_WITH = 0;
var COMMON_CONST = JW_COMMON_CONST || {
  FOO: 'belongs to you',
  BAR: 1,
  ...
};

类

• 使用 驼峰式 命名规则(CamelCase - Wikipedia, the free encyclopedia)

• 第一个单词需使用 大写字母 开头

• var <Word1>[Word2][Word3]...

// 类命名示例
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}
Person.prototype.meet = function(anotherPerson, place) {
  var ret = '';
  if(this.gender === anotherPerson.gender) {
    ret = 'On My God!';
  } else {
    ret = this.name + ' meet ' + anotherPerson.name + ' at ' + place;
  }
  return ret;
}

var adam = new Person('Adam', 'male');
var eve = new Person('Eve', 'female');
var god = new Person('God', 'male');

alert(adam.meet(eve));
alert(adam.meet(god));

普通变量&函数

• 使用 驼峰式 命名规则

• 第一个单词需使用 小写字母 开头

• var <word1>[Word2][Word3]...

  function <word1>[Word2][Word3]...

// 普通变量&函数命名示例
var num = 11;
var myText = 'Hello World.';
var strThatYouMustUseManyWordsToExplain = 'too short';
var anObject = {};
var anArray = [];

function rock() {}
function rockMyLife(data, localVariable) {}

var resultFromFunction = rock();
var resultFromJQueryHelper = $.trim('       Do you love me?        ');

Jquery对象

说明：对Jquery对象进行单独规定目的在于便于区分，即提醒阅读者此变量来自 $() 函数返回

• 使用 驼峰式 命名规则

• 以 $符号 作为开头

• var $<word1>[Word2][Word3]...

// Jquery对象命名示例
var $node = $('#node');
var $allLinks = $('.links');
var $returnOfMostJqueryObjectFunctionIsAlsoJqueryObject = $('#if-you-dont-love-me').fadeOut('fast');