前端开发最佳实践
前端开发规范
1 项目结构规范应用根据技术选型，统一关键目录，例如 compile 目录。
Vue SPA 应用| --- compile| --- deploy.sh（发布平台发布脚本） | --- build.sh（发布平台构建脚本） | --- src | --- build | --- config | --- test | --- package.json | --- README.md 123456789 Vue SSR 应用
| --- compile 1
| — deploy.sh（发布平台发布脚本）
| — build.sh（发布平台构建脚本）
| — src
| — build
| — config
| — test
| — package.json
| — README.md
| --- compile 1
| — deploy.sh（发布平台发布脚本）
| — build.sh（发布平台构建脚本）
| — src
| — test
| — package.json
| — README.md
| --- compile | --- deploy.sh（发布平台发布脚本） | --- build.sh（发布平台构建脚本） | --- client 1234
| — src
| — test
| — package.json
| — README.md
| — server
| — src
| — test
| — package.json
| — README.md
| — package.json
| — README.md
页面路由规范定义页面URL的命名规则，如下：
✧ 路由全部使用小写
✧ 如果路由层级过深，可以使用“-”链接单词
✧ 带上业务路径，例如我的 /my/xxx，问诊 /consult/xxx
✧ 尽量避免使用动态路由，特殊场景下可以考虑（如SEO需求）
✧ 尽量避免使用中文拼音路由
✧ 尽量避免过多的参数
✧ 代码风格
缩进与换行
● 使用 2 个空格做为一个缩进层级，不允许使用 4 个空格 或 tab 字符。
属性
● class 必须单词全字母小写，单词间以 - 分隔。
● class 命名使用 BEM 命名规范。
● class 属性值用双引号。
<!-- Not recommended --> <a class='maia-button maia-button-secondary'>Sign in</a> <!-- Recommended --> <a class="maia-button maia-button-secondary">Sign in</a>
handlebars
12345标签
● 根据使用场景（语义）选择正确的 HTML 元素。
● 不要在自动闭合标签结尾处使用斜线。
● 标签使用必须符合标签嵌套规则，详细的标签嵌套规则参见HTML DTD中的 Elements 定义部分。
✧ 通用
文档类型 doctype
使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。
<!DOCTYPE html> <html>... </html>
handlebars
1234编码
页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
<html> <head> <meta charset="UTF-8"> ...... </head> <body> ...... </body> </html>
handlebars
123456789任务项：TODO
用 TODO 来标记待办事项。
<!-- TODO: remove static content --> <ul> <li>Apples</li> <li>Oranges</li> </ul>
handlebars
12345CSS 和 JavaScript 引入
在引用样式表和脚本时，不要指定 type 属性，除非不是 CSS 或 JavaScript。 因为 HTML5 中已经默认指定样式的 type 是 text/css，脚本的type 是 text/javascript。
<!-- Not recommended --> <link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"> <!-- Recommended --> <link rel="stylesheet" href="//www.google.com/css/maia.css">
handlebars
123456✧ 多媒体
图片
● 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。
● 为重要图片添加 alt 属性。
● 添加 width 和 height 属性，以避免页面抖动。
● 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。
多媒体
● 当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时，应当注意格式。
音频应尽可能覆盖到如下格式：
○ MP3
○ WAV
○ Ogg
视频应尽可能覆盖到如下格式：
○ MP4
○ WebM
○ Ogg
● 在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。
<audio controls> <source src="a udio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <object width="100" height="50" data="audio.mp3"> <embed width="100" height="50" src="audio.swf"> </object> </audio> <video width="100" height="50" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <object width="100" height="50" data="video.mp4"> <embed width="100" height="50" src="video.swf"> </object> </video>
handlebars
12345678910111213141516 2.4 CSS 规范选择器、属性和值都使用小写
在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。
类命名
命名语义化，简写类名的前提要语义化，易理解。
<!--bad--> .atr{ width: 45px; } <!--good--> .author { width: 45px; }
handlebars
123456789类名格式
class使用多个单词，统一使用"-"连字符
<!--bad--> .userPhoto { width: 48px; } <!--good--> .user-photo { width: 48px; }
handlebars
123456789将左花括号与选择器放在同一行,用空格间隔
<!--bad--> li { display: inline-block; margin: 0 10px; } <!--good--> li { display: inline-block; margin: 0 10px; }
handlebars
123456789101112右花括号放在新的一行
<!--bad--> p { font-weight: blod;} <!--good--> p { font-weight: blod; }
handlebars
12345678缩进
属性，子元素等通常使用2个空格的缩进
<!--bad--> p { font-weight: blod; } <!--good--> p { font-weight: blod; }
handlebars
12345678省略值为 0 时的单位
<!--bad--> p { margin: 0px; } <!--good--> p { margin: 0; }
handlebars
123456789属性缩写
可缩写的属性中，应该合并写在一起，比较精简。这样就可以使其编译的时间最优化
<!--bad--> p { padding-top: 6px; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; } <!--good--> p { padding: 6px 10px; }
handlebars
12345678910111216进制颜色代码缩写
<!--bad--> p { color: #ffffff; } <!--good--> p { color: #fff; }
handlebars
123456789引号的使用
url() 、属性选择符、属性值使用双引号
background-image: url("https://kano.guahao.cn/iXq119750309") font-family: "Hiragino Sans GB", "Microsoft YaHei", '微软雅黑', '宋体', Arial, Verdana, sans-serif; .selector[type="text"] {}
handlebars
123 2.5 JavaScript 规范● 语言规范
类型
✧ 基本类型
○ 字符串
○ 数值
○ 布尔类型
○ null
○ undefined
const foo = 1 let bar = foo bar = 9 console.log(foo, bar) // 1, 9
handlebars
12345✧ 复杂类型
○ object
○ array
○ function
const foo = [1, 2, 3] const bar = foo bar[0] = 9 console.log(foo[0], bar[0]) // 9, 9
handlebars
1234引用
const 和 let 都是块级作用域，var 是函数级作用域
对所有引用都使用 const，不要使用 var
// bad var a = 1 var b = 2 // good const a = 1 const b = 2
handlebars
123456如果引用是可变动的，用 let
// bad var count = 1 if (count < 10) { count += 1 } // good let count = 1 if (count < 10) { count += 1 }
handlebars
12345678910对象
请使用字面量值创建对象
// bad const a = new Object{} // good const a = {}
handlebars
1234别使用保留字作为对象的键值，这样在 IE8 下不会运行
// bad const a = { default: {}, // default 是保留字 common: {} } // good const a = { defaults: {}, common: {} }
handlebars
123456789请使用对象方法的简写方式
// bad const item = { value: 1, addValue: function (val) { return item.value + val } } // good const item = { value: 1, addValue(val) { return item.value + val } }
handlebars
123456789101112请使用对象属性值的简写方式
const job = 'FrontEnd' // bad const item = { job: job } // good const item = { job }
handlebars
123456789对象属性值的简写方式要和声明式的方式分组
const job = 'FrontEnd' const department = 'FED' // bad const item = { sex: 'male', job, age: 25, department } // good const item = { job, department, sex: 'male', age: 25 }
handlebars
12345678910111213141516数组
请使用字面量值创建数组 // bad const items = new Array() // good const items = []
handlebars
12345向数组中添加元素时，请使用 push 方法
const items = [] // bad items[items.length] = 'test' // good items.push('test')
handlebars
12345使用拓展运算符 … 复制数组
// bad const items = [] const itemsCopy = [] const len = items.lengthlet i // bad for (i = 0; i < len; i++) { itemsCopy[i] = items[i] } // good itemsCopy = [...items]
handlebars
12345678910使用数组的 map 等方法时，请使用 return 声明，如果是单一声明语句的情况，可省略 return
// good [1, 2, 3].map(x => { const y = x + 1 return x * y }) // good [1, 2, 3].map(x => x + 1) // bad const flat = {} [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => { const flatten = memo.concat(item) flat[index] = flatten }) // good const flat = {} [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => { const flatten = memo.concat(item) flat[index] = flatten return flatten }) // bad inbox.filter((msg) => { const { subject, author } = msg if (subject === 'Mockingbird') { return author === 'Harper Lee' } else { return false } }) // good inbox.filter((msg) => { const { subject, author } = msg if (subject === 'Mockingbird') { return author === 'Harper Lee' } return false })
handlebars
123456789101112131415161718192021222324252627282930313233解构赋值
当需要使用对象的多个属性时，请使用解构赋值
// bad function getFullName (user) { const firstName = user.firstName const lastName = user.lastName return `${firstName} ${lastName}` } // good function getFullName (user) { const { firstName, lastName } = user return `${firstName} ${lastName}` } // better function getFullName ({ firstName, lastName }) { return `${firstName} ${lastName}` }
handlebars
12345678910111213当需要使用数组的多个值时，请同样使用解构赋值
const arr = [1, 2, 3, 4] // bad const first = arr[0] const second = arr[1] // good const [first, second] = arr
handlebars
1234567函数需要回传多个值时，请使用对象的解构，而不是数组的解构
// bad function doSomething () { return [top, right, bottom, left] } // 如果是数组解构，那么在调用时就需要考虑数据的顺序 const [top, xx, xxx, left] = doSomething() // good function doSomething () { return { top, right, bottom, left } } // 此时不需要考虑数据的顺序const { top, left } = doSomething()
handlebars
1234567891011字符串
字符串统一使用单引号的形式 ‘’
// bad const department = "FED" // good const department = 'FED'
handlebars
12345字符串太长的时候，请不要使用字符串连接符换行 ，而是使用 +
const str = '微医' + '前端' + '开发手册'
handlebars
1程序化生成字符串时，请使用模板字符串
const test = 'test' // bad const str = ['a', 'b', test].join() // bad const str = 'a' + 'b' + test // good const str = `ab${test}`
handlebars
1234567函数
请使用函数声明，而不是函数表达式
// bad const foo = function () { // do something } // good function foo () { // do something }
handlebars
12345678不要在非函数代码块中声明函数
// bad if (isUse) { function test () { // do something } } // good let test if (isUse) { test = () => { // do something } }
handlebars
12345678910111213不要使用 arguments，可以选择使用 …
arguments 只是一个类数组，而…是一个真正的数组
// bad function test () { const args = Array.prototype.slice.call(arguments) return args.join('') } // good function test (...args) { return args.join('') }
handlebars
123456789四维尔听语音太热1
原型
使用 class，避免直接操作 prototype
模块
使用标准的 ES6 模块语法 import 和 export
不要使用 import 的通配符 *，这样可以确保你只有一个默认的 export
迭代器
不要使用 iterators
对象属性
使用 . 来访问对象属性
变量声明
声明变量时，请使用 const、let 关键字，如果没有写关键字，变量就会暴露在全局上下文中，这样很可能会和现有变量冲突，另外，也很难明确该变量的作用域是什么。这里推荐使用 const 来声明变量，我们需要避免全局命名空间的污染。
将所有的 const 和 let 分组
Hoisting
var 存在变量提升的情况，即 var 声明会被提升至该作用域的顶部，但是他们的赋值并不会。而 const 和 let 并不存在这种情况，他们被赋予了 Temporal Dead Zones, TDZ
匿名函数的变量名会提升，但函数内容不会
命名的函数表达式的变量名会被提升，但函数名和函数函数内容并不会
分号
我们遵循 Standard 的规范，不使用分号。
关于应不应该使用分号的讨论有很多，本规范认为非必要的时候，应该不使用分号，好的 JS 程序员应该清楚场景下是一定要加分号的，相信你也是名好的开发者。
标准特性
为了代码的可移植性和兼容性，我们应该最大化的使用标准方法，例如优先使用string.charAt(3) 而不是 string[3]
eval()
由于 eval 方法比较 evil，所以我们约定禁止使用该方法
with() {}
由于 with 方法会产生神奇的作用域，所以我们也是禁止使用该方法的
for-in 循环
推荐使用 for in 语法，但是在对对象进行操作时，容易忘了检测 hasOwnProperty(key)，所以我们启用了 ESLint 的 guard-for-in 选项
对数组进行 for in 的时候，顺序是不固定的
修改内置对象的原型
不要修改内置对象，如 Object 和 Array
● 代码规范
单行代码块
在单行代码块中使用空格
大括号风格
变量命名
逗号空格
逗号前后的空格可以提高代码的可读性，团队约定在逗号后面使用空格，逗号前面不加空格。
逗号风格
逗号分隔列表时，在 JavaScript 中主要有两种逗号风格：
● 标准风格，逗号放置在当前行的末尾
● 逗号前置风格，逗号放置在下一行的开始位置
团队约定使用标准风格
计算属性的空格
拖尾换行
在非空文件中，存在拖尾换行是一个常见的 UNIX 风格，它的好处是可以方便在串联和追加文件时不会打断 Shell 的提示。在日常的项目中，保留拖尾换行的好处是，可以减少版本控制时的代码冲突。
可以通过 .editorconfig 添加 EOL
函数调用
为了避免语法错误，团队约定在函数调用时，禁止使用空格
缩进
统一采用 2 个空格缩进，每个项目均预设了 .editorconfig，需各个编辑器安装 editorconfig 插件支持。
对象字面量的键值缩进
团队约定对象字面量的键和值之间不能存在空格，且要求对象字面量的冒号和值之间存在一个空格
构造函数首字母大写
在 JavaScript 中 new 操作符用来创建某个特定类型的对象的一个实例，该类型的对象是由一个构造函数表示的。由于构造函数只是常规函数，唯一区别是使用 new 来调用。所以我们团队约定构造函数的首字母要大小，以此来区分构造函数和普通函数。
构造函数的参数
在 JavaScript 中，通过 new 调用构造函数时，如果不带参数，可以省略后面的圆括号。但这样会造成与整体的代码风格不一致，所以团队约定使用圆括号
操作符的空格
● 命名规范
命名的风格能让我们在不需要去查找类型声明的条件下快速地了解某个名字代表的含义: 类型, 变量, 函数, 常量, 宏, 等等, 甚至. 我们大脑中的模式匹配引擎非常依赖这些命名规则。
命名规则具有一定随意性, 但相比按个人喜好命名, 一致性更重要, 所以无论你认为它们是否重要, 规则总归是规则。
变量使用 Camel 命名法
示例：
常量使用全部字母大写，单词间下划线分隔的命名方式
示例：
函数使用 Camel 命名法
示例：
函数的参数 使用 Camel命名法
示例：
类使用 Pascal命名法
示例：
类的方法 / 属性 使用 Camel命名法
示例：
命名空间 使用 Camel命名法
示例：
类名 使用 名词
示例：
函数名 使用 动宾短语。
示例：
boolean 类型的变量使用 is 或 has 开头
示例：
私有属性 使用下划线 _ 开头
示例：
2.6 Vue 开发规范
2.6.1 组件数据
组件的 data 必须是一个函数。
2.6.2 单文件组件文件名称
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
2.6.3 紧密耦合的组件名
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
2.6.4 自闭合组件
在单文件组件中没有内容的组件应该是自闭合的。
2.6.5 Prop 名大小写
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case。
2.6.6 Props 换行
多个 Props 的元素应该分多行撰写，每个 Props 一行，闭合标签单起一行。
2.6.7 指令缩写
指令缩写，用 : 表示 v-bind: ，用 @ 表示 v-on:
2.6.8 Props 顺序
标签的 Props 应该有统一的顺序，依次为指令、属性和事件。
2.6.9 组件选项的顺序
组件选项应该有统一的顺序。
2.6.10 单文件组件顶级标签的顺序
单文件组件应该总是让顶级标签的顺序保持一致，且标签之间留有空行。
2.6.11 v-for 设置键值
循环时应该使用键值，且不应该使用index
2.6.12 v-if和v-for不要一起使用
相关知识
前端开发是什么
app前端开发教程入门知识
web前端开发学习攻略：怎样才能快速的入门前端开发
什么是前端开发
Vue.js实现动态图标渲染：前端开发中的创意实践
前端开发
前端开发和后端开发，哪个薪酬更高？
网站前端开发
前端开发思路
前端开发和后端开发
网址: 前端开发最佳实践 https://m.huajiangbk.com/newsview2537195.html
| 上一篇: 如何提高你的剑网三昆仑冰蓝花客获 |
下一篇: 亚马逊云主机费用自行计算：节约成 |
