前端变量命名常用方法

简介: 本文主要介绍常用的前端变量命名规则,主要包括JS, HTML,CSS和页面url的常用命名规则。

本文主要介绍常用的前端变量命名规则,主要包括JS, HTML的常用命名规则。

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一般对应存储的一个文件夹
这里的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能使程序更优雅。

目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
29天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
42 5
|
1月前
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
60 5
|
2月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
3月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
49 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
3月前
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
55 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
3月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
70 1
前端基础(十四)_隐藏元素的方法
|
2月前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
185 0
|
2月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
120 0