前端自我修养-规范书写

前言

本篇文章属于长篇大论,没有耐性的同学只看标题就行了。写这篇文章的时候名字我也纠结了好久,诸如”论文件的命名”,”命名的工匠精神”,”如何优雅的命名”等,由此可见命名在任何情况下都不是一件容易的事情。
​这是一篇酝酿许久的文章,来自于群里面对于JS文件命名的讨论,于是结合自己在日常中的编码习惯,分享下自己的命名经验,希望能对大家有所帮助。

规则

1.描述性

给任何事物命名的时候都是为了更好的描述这个事物是做什么用的,比如如果一个变量是个标示人的Id,那我们可以命名为personId,如果你起了一status,那status肯定不具有描述性或者描述性相悖。

2.长度

名字的长度很重要,书写全部单词会让名字变的很长,但是缩写又会让名字难以理解,所以重点就在于能清晰描述你所要表达的意思。
比如gulp中的插件编写,其中enc的变量就让人难以理解,enc其实是encoding的缩写,这点也是我翻文档才看出来的。through.obj(function(file, enc, cb){});
再举个不恰当的例子,比如在大家都习惯的循环中,如果你非要定义一个非常具有语义化的名字又显得太臃肿了,因为i,j,k这些大家都已经很习惯了,所以相对而言大家都很清晰for(var projectNum = 0 ; projectNum < 100; projectNum ++){}

3.主要看气质

名字的气质也很重要,这会影响到别人的第一印象,举个最不恰当的例子,就是之前我写的MVC框架的名字,命名为mvc,并非是因为不会命名实在是因为懒的取名字,这样才影响了后续的推广,简而言之,无聊的名字会让使用者怀疑开发者的能力。

4.保持一致性

对于同一功能的命名需要保持一致性,举个最简单的例子,this变量,有的人习惯命名为self,有的人习惯命名为that,还有的习惯命名为me,无论命名为什么都需要在你自己的代码中保持一致,如果你在自己写的文件里面一会是self,一会是me,我想我真的没有对你的代码有足够的信心。还有如果你一会是驼峰命名一会是下划线的命名方式(静态变量除外),我想估计别人看了也会很别扭。

5.考虑上下文

同一个名字在不同的上下文的下面可能具有不同的意义,所以我们也可以根据上下文来简化命名,比如一个文件名为quotation.js,其中定义了一个获取查看报价的方法,如果我们定义为下面的方法,就会显得臃肿了,因为我们已经知道这个文件是用来书写针对quotation的功能的,那其中的Quotation就可以省略掉。function viewQuotation(){}

6.你的习惯

遵循语言的习惯非常重要,比如我们习惯了$来代表jQuery,fs来代替require("fs"), i18n代表语言文件等。如果你非要定义下面的命名,这种打破既有的规则可能会让人觉得很别扭,除非 $ 无法被声明,例如在veloctiy中,$会被识别成变量,通常用其他方式来代替,比如J。var $ = function(id){} var file_system = require('fs')

7.种类

我们一般需要对什么来进行命名呢?(对于JavaScript而言)。变量,函数, 类, 事件通信名称,有限状态机中的状态,文件。

8.变量

很明显我们团队目前使用的是驼峰命名法,所以大家都应该遵守这个规范。在这个规范下,因为JS是弱类型的语言,对于变量而言我们应该能让别人看到这个变量的可以感知到这个变量的类型,比如你如果看到isVisible那应该知道这是个布尔型,你如果看到selectedIndex应该知道这是一个整型,但是当我看到viewMode的时候我以为是一个字符串,但从源码看却是整型,我想这一定也会让使用的人很困惑。

9.函数

函数一般分两种,获取值和做某种事情,所以对于函数而言,名字应该是个动词。如果是个名词会让人觉得无所适从。views: function(){}
我看不出views这个方法是干啥的,当然这个也来源于我们真实的代码。
还有一种函数的命名是我在YUI中的代码中看到的,就是下面的方式
doMove
这个do真的有必要去掉,实在是没有任何的意义。对于私有函数应该是以

开头,这个也是大家都比较了解的了,但是我在polymer的代码中也看到了下面 的代码,无论如何保持一致就好了。
check_: function(){},dirty_: function(){}

10.类

对于单一职责的类来说,一般来说也是一个名词,与变量不同的是一般首字母是大写的。如果一个类你实在不知道怎么命名或者说这个类具有多重职责让你无从选择的话,那么有可能是你的设计出现了问题。
事件通信的名称
如果你是基于全局的事件通信,那么通常应该加上命名空间,如果你是基于某个对象的事件通信,那么则可以忽略命名空间.通常事件名应该是个名词。
events.on('change:list', function(){});list.on('change', function(){});

11.状态

有限状态机中状态从理论上来说应该是一个形容词,并且这个状态应该遵循变量的定义规则,因为通常在Javascript中,状态需要定义变量,另外一定要用描述状态的词,比如”fold”,”highlight”等,而非其他。

12.文件

在我们的团队规范中,文件命名通常以中划线连接,千万不要使用驼峰命名,因为某些操作系统并不区分大小写。另外在同一个项目的不同的目录中,尽量不要有相同的文件名,例如index.js,除非你有些约定需要遵守。

*** 结语:如果你能看到这里,那么谢谢你的耐心。以上纯属个人经验,仅供参考,如果有错误,欢迎指正。***

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容