前端高雅命名规范

Chase620 等级 356 0 0

俗话说得好,万事开头难。而对于前端 coder 来说,每次新项目、新需求来的时候,我想大家最苦恼的往往就是如何去命名,无论是项目名称、页面的文件名称亦或是代码中的方法名称,对于我来说,但凡名字想好了以后,我觉得需求就已经写完一半了。

如何才能更好,更优雅的去解决这些命名问题呢?在这之前,先随我看一些不合适的命名示例吧。

不合适的命名

我们先来看一些例子:

无意义的,抽象的,任何地方可以使用,谁都不知道你这里用的命名来源是谁

// bad

const data;

const info;

const tool;

简称,单词的简称或者缩写很容易让人无法确定具体指代什么

// bad

const comp;

const crt_date;

// good

const components;

const company;

const current_date;

数字或者字母结尾的命名,让其他人无法获取这些之间的区别

// bad

const button1;

const button2;

const info1;

// good

const importButton;

const userInfo;

全局的地方不要用前置或后置下划线,前置下划线通常代表了私有变量

// bad

const _firstName_ = 'Zcy';

const firstName_ = 'Zcy';

const _firstName = 'Zcy';

// good

const firstName = 'Zcy'

命名规则

如何让命名更简单呢,只要遵循一些规则规范,总能将复杂的事情拆分开来,变成一件简单的事情。

直白、有意义

想要让你的命名简单易懂,最简单的方式就是直白并且有意义,直接了当的在命名中体现出你这个命名的功能,或者描述,举个例子:

// bad

function getInfo(){};

function formatList(){};

const data = [];

// good

function getUserInfo(){};

function formatNewsList(){};

const articleData = [];

如果在页面中定义了上面这样的变量,哪种写法可以让你在没有注释的情况下,就能快速了解原作者的书写意图呢?(当然,代码中还是需要一些必要注释的) 。

所以在命名的时候,需要的就是直白、完备、有意义,让别人通过命名就能了解到这个名称(无论是变量、方法或者是样式名)背后的的含义,这样的命名就是高效的、易懂的。

遵从惯例、标准

习惯使用业界习惯的命名标识,或者是约定俗成的书写习惯。

用 id 当做数据标识命名,而不是 identifier

例如布尔值命名类型,通常只有两个值类型:真,假,根据不同的使用场景,也可以有一些常用的命名方式

// 可见、状态等,可用 is+动词/形容词的方式

const isVisible;

const isLoading;

// 配置,选项等类型,可以用 withXxx、hasXxx 来标识是否有某个属性等,enableXxx 来表示是否开启配置

const withTab;

const hasPlan;

const enableFilter;

例如方法命名,也可以使用动词 + 名次类的组合命名方式,操作类方法 fetchXxx,getXxx,当需要根据某些属性获取数据时可用 ,getXxxByYxx 这类的命名,删除类方法 deleteXxx,格式化数据 formatXxx

// 数据获取方法

function getUserInfo(){};

function fetchSearchList(){};

// 需要根据一些属性去获取数据

function getGoodsById(){};

function queryUserByName(){};

// 删除数据

function deleteUser(){};

function removeGoodsItem(){};

// 格式化数据

function formatDate(){};

function sortByDesc(){}

规范约束

团队如果用统一的命名规范,那就一定要遵守,例如文件名的命名是大写字母开头的驼峰写法,那你的命名就不能再修改为其他方式,在规范创建之初或者修订时可以提出修改意见并进行讨论,但如果已经确立的,就不要再。去自由的破坏规范。

当然也可以使用一些辅助手段帮助约束代码中的命名校验,**例如在 Eslint 配置中加入 id-match 或者 camelcase,前者可以直接通过正则配置自己需要的命名规范,后者则是直接采用了驼峰命名的规范约束 **。

本文转自 https://www.jianshu.com/p/36fc86691948,如有侵权,请联系删除。

收藏
评论区

相关推荐

一、手写源码之 Promise
版本一,构造函数 javascript function MyPromise(fn () {}) { // const this {} this.state 'pending' this.value undefined const resolve (value) { if (this.state
ES6之set
const snew Set(); 2,3,4,2,3,4,5,6,2,3,3.forEach(xs.add(x)) console.log(s); for(let i of s){ console.log(i) } console.log(s.add(9)); //add(value),添加某个值,返回Set结构本身 console.log(s.d
[Dart]Dart语言之旅<二>:变量
变量 以下是创建变量并为其分配值的示例: var name 'Bob'; 变量是引用。名为name的变量包含对值为“Bob”的String类型的对象的引用。 默认值 未初始化的变量的初始值为null。即使是数字类型的变量,初始值也为null,因为数字也是对象。 int lineCount; assert(lineCount null)
面试问题总结(持续更新中。。。)
1.let const var 的区别 在JavaScript中,有三个关键字可用于声明一个变量,并且每个关键字都有其不同之处。分别var,let和const。一个简单粗暴的解释:使用const关键字声明的变量不能被重新赋值,let而且var可以。也可以这么说:const只可以声明一个常量(js中一旦被定义就无法再被修改的变量,称之为常量)。 eg:
实际开发过程中遇到的js方法
1.递归方法实现树形结构 formatCompanyTree(data, id) { const newData data.filter( item item.pid id ).map(item ({ ...item, disabled: item.nodetype
TS 的脚步已经拦不住,代码撸起来
前言 vue3已经发布了,ts的脚步已经阻拦不住了,还只会es6?别想了,人家都已经在行动了,以下是ts的基本系列教程,ts的基本语法,高级语法等,以及在vue项目中如何应用ts,跟着我赶紧撸起来吧。 基本数据类型 数字 const a: number  3; 字符串 const b: string  "1
前端高雅命名规范
俗话说得好,万事开头难。而对于前端 coder 来说,每次新项目、新需求来的时候,我想大家最苦恼的往往就是如何去命名,无论是项目名称、页面的文件名称亦或是代码中的方法名称,对于我来说,但凡名字想好了以后,我觉得需求就已经写完一半了。 如何才能更好,更优雅的去解决这些命名问题呢?在这之前,先随我看一些不合适的命名示例吧。不合适的命名我们先来看一些例子: 无
nodejs获取串口中的信息
获取扫描仪中的信息并传到指定服务器app.js代码 const http require('http');const SerialPort require("serialport");const port new SerialPort('com3');const fs require('fs');var querystring re
「Vue — 插件」国际化vue-i18n
1:npm install vuei18n2:在main.js中 jsimport VueI18n from 'vuei18n' //引入Vue.use(VueI18n) //通过插件方式挂载/使用语言包/const i18n new VueI18n({ locale: 'zhCN', //
js堆和栈
浅析js中堆内存和栈内存我们常遇见的 var let const区别cont定义的基本类型不能改变,但是定义的对象是可以通过修改对象属性等方法来改变的 const a 1;console.log(a) //a;cosnole.log(a 2) //报错const b ;b.name 1;console.log(b) //name : 1con
这些JS工具函数够你用到2020年底了
前言活不多说,自己平时搜集的干货函数奉上。干货函数 找出数字在数组中下一个相邻的元素let i  ""; let rr  []; const name  (n, arr1)     let num  Number(n);     for (let i  0; i < arr1.length; i++)          const elemen
Nodejs实现图片的上传、压缩预览、定时删除
前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番。 第一步,node基本配置这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力、更健壮的web框架。 1、引入基本配置 const Koa require('koa');// koa框架const Router require('koaroute
你可能会用到的JS工具函数(第二期)
Vue3在script标签中引入 const oDiv document.createElement('div'); const oScript document.createElement('script'); oDiv.setAttribute('id', 'app'); oScript.type 'text/java
JavaScript - 关于 var、let、const 的区别使用
一、var在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量注意:顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象var a  10; console.log(window.a) // 10 使用var声明的变量存在变量提升的情况console.log(a) // undefine
Qt文件和json
qt中创建普通c++类头文件cppifndef OPERATIONHdefine OPERATIONHinclude <QFile// 默认配置文件路径const QString FilePath "./config.json";typedef struct FileConfig QString ip; QString port; QS