小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环，也是平是接触时间最长、写得最多的。在开发过程中必然会遇到命名的问题，你会词穷、纠结、惆怅吗？本文的出现相信能够解决大部分烦恼，让你轻松写出符合规范、易读、简短的代码。

JS常用命名方法

谨慎使用下划线 _

前端中下划线_一般作为特殊使用的下划线
比如常量中作为语义分隔(MAX_VALUE)，前置作为私有不能使用的变量(__myprovite)。

美元符号的使用

php中把所有的变量都是用美元符，js中则几乎不怎么使用，但是如果使用得当也可以使代码更已读，请看以下的例子：

function getData(id, method) {
  
    action.loadData(id, method);
}
 
function getData($id, $method) {
    action.loadData($id, $method);
}
复制代码

以上的2个函数，使用了美元符的能一眼看出这是参数传进来的变量。

常量

常量就是初始化后不会再改变的变量,此类变量一般用全大写+下划线的方法命名。
比如

var IMAGE_SERVER = 'http://img.alibaba.com';
var MAX_LENGTH = 200;
复制代码

全局变量

在利用模块化变成以后，全局变量用得比较少了，但在VM输出的变量都是全局变量，全局变量的命名方法一般是g+变量名。

var gConfig = {
 a:1,
 b:2
};
复制代码

私有变量

因为JS不支持私有变量，所以私有变量都是模拟出来的，业界通用JS私有变量的命名方法是下划线+变量名比如

var Student = Base.extend({
    _name: '小明'，
    getName: function(){
        return this._name;
    }
});
复制代码

这里的name就是一个私有变量，一般下划线变量就意味着不要直接使用的变量。

方法命名

一般方法的命名一般采用(动词+名词)的方法，并用驼峰划分语义，比如doSomething, loadData, getState, getData, parseData等等。
如果方法属于事件响应，那么建议（on+事件目标+事件名称），采用驼峰划分语义，比如onMybtnClick, onCardboxClick, onMenuDrop等等，形成这样的规范以后，只要合作的伙伴看到相关的函数那么就会知道这是怎样的一个函数。

如果在响应事件的方法里，需要做一个独立的行为，那么这个行为应该剥离作为一个独立的函数，而不是直接放在on函数里
比如

function onMybtnClick() {
    loadData();
    hideMyBtn();
}
复制代码

这样可以大大提交代码的可读性，即使没有注释，别人也能一眼看出来，点击按钮以后做了2个行为，加载数据和隐藏我的按钮

文件夹分类命名

在前端变成中，一般涉及到的文件夹有 component(用于存放组件), util(用于存放工具类), mock(用于存放mock的数据), 如果还用了redux架构，那么就有action, reducer的文件夹，现在的前端工程都比较复杂，已经不再建议把css独立放在一个styles的文件夹，而是放在component里，按细颗粒存放

html中的常用命名方法

属性不区分大小写

html是不区分大小写的，所以最好不要写 dataRole="abc",而应该是data-role。

命名方法为(角色+名字)

html中比较好的命名方式就是角色加上命名

比如

<div data-role="container-chatbox"> </div>
<a data-role="btn-chat"></a>
复制代码

css常用命名方法

以中划线划分语义

比如 .container-component

常用的角色名

wraper : 最外的包裹层
container：容器层
btn：按钮

页面URL的命名

path的命名

在url中，一个path一般对应存储的一个文件夹
比如 myhost.com/my-folder/m…
这里的my-folder一般就是一个文件夹，在日常新建文件夹的时候比较好的做法就是用-划分语义，而不是使用驼峰

html的文件命名

URL中的参数和html中一样，比较好的实践就是不区分大小写，比如
使用my-page.html比使用myPage.html要好，不区分大小写的另外一个原因是window系统存储的时候是不区分大小写的，假如一位伙伴在其mac上新建了2个文件 myPage.html和mypage.html，那么不会有任何问题，但是另外一位用windows的同事把代码checkout下来的时候，就会发生错误。

url参数的命名

url的参数属于一个变量，所以比较好的命名方法是用驼峰，比如pageSize=20, totalPage=100, 这是因为url中的参数在程序中会被解析为一个变量，而一个param.page-size是会报错的，虽然param['page-size']也可以，但是用param.pageSize能使程序更优雅。

感兴趣的可以往下看哈，第二篇我会讲各种场景的命名常用的方法

前端命名规则与各个场景的命名方法，解决你取变量名的痛苦！！！（一）