前端基础开发文档

1. 驼峰式命名法

-Pascal Case ⼤驼峰式命名法:⾸字⺟⼤写。eg:StudentInfo、UserInfo、ProductInfo -Camel Case 

⼩驼峰式命名法:⾸字⺟⼩写。eg:studentInfo、userInfo、productInfo

2. ⽂件命名规范

⽂件名不能含有空格 ⽂件名建议只使⽤⼩写字⺟,不使⽤⼤写字⺟。(但⽐如说像github的说明类⽂件, README,则应该全部使⽤⼤写)

1. 驼峰式命名法

2. ⽂件命名规范

3. ⽂件名包含多个单词时,单词之间建议使⽤半⻆的连词线 ( - ) 分隔。

3. vue的开发规范

3.1 vue的⽣命钩⼦函数

3.2 vue⽂件基本结构

3.4 v-for

在执⾏ v-for 遍历的时候,总是应该带上 key 值使更新 DOM 时渲染效率更⾼

3.5 v-if / v-else-if / v-else

3.5 method ⽅法命名命名规范

驼峰式命名,统⼀使⽤动词或者动词+名词形式

请求数据⽅法,以 data 结尾

3.6 views/components 下的⽂件命名

只有⼀个⽂件的情况下不会出现⽂件夹,⽽是直接放在 views/components ⽬录下⾯,如 index.vue

尽量是名词,且使⽤驼峰命名法

开头的单词就是所属模块名字(workbenchIndex、workbenchList、workbenchEdit)

名字⾄少两个单词(good: workbenchIndex)(bad:workbench) 

3.7 元素特性的顺序

原⽣属性放前⾯,指令放后⾯

3.8 ⽬录⽂件夹及⼦⽂件规范

可以根据⾃⼰的习惯来使⽤components和views⽂件夹

3.9 注释规范

代码注释在⼀个项⽬的后期维护中显的尤为重要,所以我们要为每⼀个被复⽤的组件编写组件使⽤说明,

为组件中每⼀个⽅法编写⽅法说明

3.9.1 务必添加注释列表

公共组件使⽤说明

各组件中重要函数或者类说明

复杂的业务逻辑处理说明

特殊情况的代码处理说明,对于代码中特殊⽤途的变量、存在临界值、函数中使⽤的 hack、使⽤了某种算

法或思路等需要进⾏注释描述

多重 if 判断语句

注释块必须以/**(⾄少两个星号)开头**/

单⾏注释使⽤//

3.9.2 单⾏注释

3.9.3 多⾏注释

4. 语法

4.1 变量申明

4.1.1 尽量使⽤ const

应当使⽤ const 来定义所有引⽤变量;避免使⽤ var 。 这能够确保你的引⽤值不会被重新赋值,减少项⽬中的 bug,并提⾼代码的可读性。

4.1.2 不要使⽤ var

如果必须要使⽤⼀个可以被重新赋值的引⽤,必须⽤ let 来代替 var 。

原因是,let 创建块级作⽤域的变量,⽽ var 创建的函数级作⽤域变量会造成变量提升。

4.1.3 最⼩作⽤域

变量应当在最接近它们被使⽤的地⽅被定义,⽽不是定义在块级作⽤域的开头。这样能确 保它们影响最⼩的作⽤域范围。

需要注意的是,let 和 const 都是块级作⽤域的

4.2 对象

4.2.1 使⽤字⾯量创建新对象

创建对象时,应当使⽤字⾯量创建对象。

由于⼆者在性能上没有区别,⽽使⽤字⾯量能减少代码⽂件的⼤⼩,且让团队⻛格统⼀。因 此字⾯量创建对象是⼀个更好的⽅法。


4.2.2 动态属性名

对象的动态属性名应当使⽤计算属性名的⽅式定义

这能够让对象的所有属性在同⼀个地⽅被定义,减少维护⼯作量


4.2.3 使⽤对象⽅法简写

这是 ES6 提供的语法糖,这个语法可以更简洁地定义复杂对象字⾯量。


4.2.4 仅在必要时给属性名加上引号

不应当给常规的对象属性名加引号。

在性能上,⼤多数 JS 引擎对⽆引号的属性名读取有更⾼的性能。⽽且代码编辑器会对此有 语法⾼亮。 

4.3 类

4.3.1 class 关键词

应该使⽤ Class 来创建⼀个类,⽽不是使⽤原型⽅式。

4.3.2 extend 关键词

应该 使⽤ extends 来继承⼀个类,⽽不是使⽤原型链或者 apply ⽅法

使⽤语法糖,提⾼代码可读性

4.4 函数

4.4.1 函数声明

不应当使⽤函数声明⽅式来创建函数。直接声明函数会使函数声明提前,导致它在函数定义之 前就可以被引⽤。这会影响可读性和可维护性。

如果⼀个函数⽅法太⼤,或者太复杂,使得它影响了⽂件其余部分代码的理解,应当将其独⽴ 出来作为⼀个模块

4.4.2 不在⾮函数块中定义函数

不允许在⾮函数块作⽤域中(例如 if, while 等)定义⼀个函数。应当先把函数分配给⼀个变量。

4.4.3 箭头函数

当必须使⽤⼀个函数表达式时,例如作为回调函数传递给⽅法,应当使⽤箭头函数。 箭头的两侧必须有⼀个空格。

箭头函数能避免 this 上下⽂的困扰,并且很简洁。 如果有必须使⽤独⽴ this 上下⽂的情况,应当⾃⾏定义函数后再进⾏传递 

4.5 模块

4.5.1 import/export

应当使⽤ import/export 来导⼊模块。 禁⽌导出⼀个导⼊语句。


4.5.2 通配符

禁⽌使⽤通配符导⼊模块。 因为这要求对应模块必须有⼀个默认导出项。

4.5.3 多次导⼊

禁⽌从⼀个⽂件中多次导⼊属性。

4.5.3 默认导出

当只有⼀个导出项时,应当使⽤默认导出。

4.6 ⽐较

4.6.1 ===/==

必须使⽤ === 和 !== 来进⾏⽐较。如⾮必要,不应当使⽤ == 和 != 。

4.6.2 三元表达式

如⾮必要,禁⽌嵌套三元表达式。如⾮必要不应当折⾏。

实际在编写代码的时候为使结构清晰是不建议使⽤这种三元表达式嵌套的,并且代码的执⾏ 效率也会降低,因此还是使⽤常规的分⽀结构


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

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,072评论 0 3
  • Android编码规范 源文件基础 文件名 源文件以其最顶层的类名来命名,大小写敏感,文件扩展名为.java。 文...
    呼呼哥阅读 930评论 0 0
  • 洞中玉像倒不见得真的另有其人。无崖子也不见得移情别恋。 这样才比较有现实意义。 你被某个人吸引、以为是爱情。 于是...
    宝宝打怪兽阅读 149评论 0 0
  • 由于教材改版,开学初就对新课文《梦回繁华》的作者毛宁很感兴趣。不仅是我,大家都在讨论,这个毛宁是哪个毛宁呢?由于课...
    焦点周青阅读 888评论 0 1
  • 如果不主动,以后一切的一切都只与别人有关如果主动,某个人的一切很多事情也许就是跟自己有关了!勇敢的踏出第一步,真的...
    yoliChan阅读 181评论 0 0