美文网首页
前端自我修养-规范书写

前端自我修养-规范书写

作者: 泽赫 | 来源:发表于2016-05-12 11:30 被阅读28次

前言

本篇文章属于长篇大论,没有耐性的同学只看标题就行了。写这篇文章的时候名字我也纠结了好久,诸如”论文件的命名”,”命名的工匠精神”,”如何优雅的命名”等,由此可见命名在任何情况下都不是一件容易的事情。
​这是一篇酝酿许久的文章,来自于群里面对于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,除非你有些约定需要遵守。

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

相关文章

  • 前端自我修养-规范书写

    前言 本篇文章属于长篇大论,没有耐性的同学只看标题就行了。写这篇文章的时候名字我也纠结了好久,诸如”论文件的命名”...

  • 前端书写规范

    ==注重结构、表现、行为分离== 1. html结构 2. css表现 3. JavaScript

  • 前端规范

    前端规范 规范说明 此为前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性。此规范为参考规范,统...

  • css命名整理

    文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范...

  • css命名规范整理

    文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范...

  • 前端书写规范建议

    1.项目、目录及文件命名 1.1 全部采用小写方式, 以下划线分隔。 项目命名: 用项目对应的英文单词命名。例:m...

  • WEB前端规范

    1. 规范说明 此为前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性。此规范为参考规范,不全是...

  • CSS综合

    1、 前端编码规范 HTML书写规范 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母...

  • 移动前端开发规范(一般规范)

    系列目录 移动前端开发规范(一般规范)移动前端开发规范(技术栈规范)移动前端开发规范(HTML规范)移动前端开发规...

  • 学习资料

    机器学习实战一个前端程序猿的Sublime Text3的自我修养

网友评论

      本文标题:前端自我修养-规范书写

      本文链接:https://www.haomeiwen.com/subject/yfxprttx.html