《规范》前端编码规范

于 2024-06-17 12:32:49 发布
阅读量422 收藏 10
点赞数 5
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2401_84617731/article/details/139740567
版权
test
test

【强制】行内元素里面不可使用块级元素

a 标签是一个行内元素，行内元素里面套了一个 div的标签，这样可能会导致 a 标签无法正常点击 ， 可以使用如下代码进行修复： + … … .

【强制】不使用自定义HTML标签，会与Vue组件系统的自定义组件冲突

【强制】不使用重复属性，重复的属性只会取第一个

【强制】不要在https的链接里写http的图片

只要https的网页请求了一张http的图片，就会导致浏览器地址栏左边的小锁没有了，一般不要写死，写成根据当前域名的协议去加载，用//开头:

【推荐】不要在自闭合（self-closing）元素的尾部添加斜线（ HTML5 规范中说明这是可选的）

【推荐】不使用属性设置样式（img, table等元素

【参考】自定义属性要以data-开头 自己添加的非标准的属性要以data-开头，否则w3c validator会认为是不规范的

【强制】为每个 HTML 页面添加标准模式（standard mode）的声明，确保在每个浏览器中拥有一致的展现

…

【强制】强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

【强制】通过声明一个明确的字符编码，让浏览器轻松、快速的确定网页内容渲染方式，通常指定为’UTF-8’

…

【强制】根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值

【推荐】编写 HTML 代码时，尽量避免多余的层级

【参考】属性应该按照特定的顺序出现以保证易读性

1.class

2.id

3.name

4.data-*

5.src, for, type, href, value , max-length, max, min, pattern

6.placeholder, title, alt

7.aria-*, role

8.required, readonly, disabled

【参考】尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价；任何时候都要尽量使用最少的标签并保持最小的复杂度。

CSS / Less 编码规范

命名

【强制】类名使用小写字母，以中划线分隔

【强制】id 采用驼峰式命名

【强制】less 中的变量、函数、混合等采用驼峰式命名

@mainFontColor: #444;

#companyName,

.company-name {

color: @mainFontColor;

}

语法

【强制】所有声明语句都应当以分号结尾 最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错

/* error */

.selector {

font-size: 15px

color: red

}

/* not good */

.selector {

font-size: 15px;

color: red

}

/* good */

.selector {

font-size: 15px;

color: red;

}

【强制】避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;

【强制】为选择器中的属性添加双引号，例如，input[type=“text”]； 某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号

/* not good */

.selector[type=text] {

/* … */

}

/* good */

.selector[type=“text”] {

/* … */

}

【推荐】十六进制值应该全部小写，例如，#f3f6fa

【强制】不出现空的规则（声明块中没有声明语句）

【推荐】不要设置太大的 z-index（一个正常的系统的层级关系在 10 以内就能完成）

【强制】多写注释，且多使用句子进行描述而不是词语

/* 为了去除输入框和表单点击时的灰色背景 */

input,

form {

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

}

【推荐】不要使用*选择器

【推荐】适当使用:before 和:after 来画页面的一些视觉上的辅助性元素，如三角形、短的分隔线、短竖线等，可以减少页面上没有用的标签

【推荐】选择器不要超过 4 层（在 Less 中避免嵌套超过 4 层）

【推荐】用 border: 0; 代替 border: none;

【推荐】使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff

【推荐】对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）

代码风格

此处大部分工作将由代码格式化工具完成（参见环境要求），一般无需考虑

【强制】缩进使用两个空格代替 Tab

【强制】为选择器分组时，将单独的选择器单独放在一行 +

/* not good */

.selector, .selector-secondary, .selector[type=text] {

/* … */

}

/* good */

.selector,

.selector-secondary,

.selector[type=“text”] {

/* … */

}

【强制】声明块的左花括号前添加一个空格

【强制】声明块的右花括号应当单独成行

【强制】每条声明语句的 : 后应该插入一个空格

【强制】每条样式声明应该独占一行

/* not good */

.selector {

font-size: 15px; color: red;

}

/* good */

.selector {

font-size: 15px;

color: red;

}

【强制】对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow，transition）

/* not good */

.selector {

transition: border .2s,color .3s,padding .4s;

}

/* good */

.selector {

transition: border .2s, color .3s, padding .4s;

}

【强制】!important 前插入一个空格

【强制】注释：//后插入一个空格，/后插入一个空格，/前插入一个空格

【强制】Less 的操作符，在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格

【推荐】注释统一用/* */（ Less 中也不要用//）

样式兼容性

【强制】当使用一些较新的 CSS3 语法时，应注意添加浏览器前缀（ FAIS 2 打包工具包含 CSS 预处理，固无需考虑此条）

【推荐】不要使用 input 的 line-height 来做垂直居中 设置 line-height 为一个很高的值会导致 Safari 浏览器的输入光标变得巨大 (与 line-height 等高)

/* not good */

input {

height: 40px;

line-height: 40px;

}

/* good */

input {

height: 20px;

line-height: 20px;

padding: 10px 0;

}

选择器权重（样式覆盖）

权重的基本规则：

  • 相同的权重：以后面出现的选择器为最后规则

  • 不同的权重，权重值高则生效

详细了解权重计算方法

【强制】非通用样式使用嵌套方式进行编写，避免影响其他自己不了解样式，造成样式覆盖

【推荐】Vue 中样式谨慎使用 scoped，会影响样式选择器性能，请使用第一点进行特有样式编写

【推荐】样式需要修改时，尽量找到原样式声明进行修改

【强制】无法修改原样式声明时，应通过权重关系，编写权重更高的样式进行覆盖

【推荐】不使用!important，除非原样式使用内联样式或!important 且无法直接修改

声明简写

【推荐】当你不确定自己写的属性会否影响到其他属性时，应避免使用简写

/* error */

.element {

margin: 0 0 10px;

background: red;

background: url(“image.jpg”);

border-radius: 3px 3px 0 0;

}

/* good */

.element {

margin-bottom: 10px;

background-color: red;

background-image: url(“image.jpg”);

border-top-left-radius: 3px;

border-top-right-radius: 3px;

}

【推荐】当你确定自己的声明不会影响到其他属性时，请使用简写提升代码简洁性

/* not good */

.element {

padding-top: 10px;

padding-right: 20px;

padding-bottom: 15px;

padding-left: 20px;

}

/* good */

.element {

padding: 10px 20px 15px;

}

CSS 动画

【推荐】不要使用 all 属性做动画

  • 使用 transition 做动画的时候不要使用 all 所有属性，在有一些浏览器上面可能会有一些问题，如下： +

transition: all 2s linear;

在 Safari 上面可能会有一些奇怪的抖动，正确的做法是要用哪个属性做动画就写哪个，如果有多个就用隔开，如下代码所示：

transition: transform 2s linear, opacity 2s linear;

【推荐】位移动画使用 transform 替代 position （提升动画性能）

【推荐】使用 CSS 动画替代 JS 动画

声明顺序

【参考】相关的属性声明按以下顺序做分组处理，组之间需要有一个空行

  1. Positioning（影响其他元素和自身位置相关声明）

  2. Box model（自身盒模型相关声明）

  3. Typographic（文本相关声明）

  4. Visual（自身样式）

  5. Misc（其他声明）

.declaration-order {

/* Positioning */

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 100;

/* Box-model */

display: block;

float: right;

width: 100px;

height: 100px;

/* Typography */

font: normal 13px “Helvetica Neue”, sans-serif;

line-height: 1.5;

color: #333;

text-align: center;

/* Visual */

background-color: #f5f5f5;

border: 1px solid #e5e5e5;

border-radius: 3px;

/* Misc */

opacity: 1;

}

JavaScript 编码规范

命名

【强制】标准变量采用驼峰式命名（考虑与后台交换数据的情况，对象属性可灵活命名）

【强制】常量全大写，用下划线连接

【强制】变量名不应过短，要能准确完整地描述该变量所表述的事物

//不好的变量名

inp

day1, day2, param1

id

obj

tId

handler

//好的变量名

input, priceInput

today, tomorrow

userId, orderId

orderData, houseInfos

removeMsgTimerId

submitHandler, searchHandler

【强制】变量名不要使用计算机术语，如 texareaData，应该取和业务相关的名字，如 leaveMsg

【强制】变量名的对仗要明确，如 up/down、begin/end、opened/closed、visible/invisible、scource/target

【强制】变量名使用正确的语法

不要使用中文拼音，如 shijianchuo 应改成 timestamp ； 如果是复数的话加 s，或者加上 List，如 orderList、menuItems； 而过去式的加上 ed，如 updated/found 等； 如果正在进行的加上 ing，如 calling；

_

【推荐】使用临时变量时请结合实际需要进行变量命名

有些喜欢取 temp 和 obj 之类的变量，如果这种临时变量在两行代码内就用完了，接下来的代码就不会再用了，还是可以接受的，如交换数组的两个元素。但是有些人取了个 temp，接下来十几行代码都用到了这个 temp，这个就让人很困惑了。所以应该尽量少用 temp 类的变量

// not good

let temp = 10;

let leftPosition = currentPosition + temp，

topPosition = currentPosition - temp;

// good

let adjustSpace = 10;

let leftPosition = currentPosition + adjustSpace，

topPosition = currentPosition - adjustSpace;

【推荐】波尔变量可以结合实际语境使用 done/found/successs/ok/available/complete 等修饰词

// good

let ajaxDone = true,

fileFound = false,

resourceUpdated = true;

【推荐】波尔变量名应使用肯定的布尔变量名，不要使用否定的名词，如 notOk、notReady，因为否定的词取反的时候就会比较奇怪，如 if (!notOk)

语法

【强制】变量不要先使用后声明

【强制】不要声明了变量却不使用

【强制】不要在同个作用域下声明同名变量

【强制】一个函数作用域中所有的变量声明尽量提到函数首部，可根据代码进行分组，但不允许出现两个连续的变量声明

// not good

let registerForm = null;

let question = “”;

let calculateResult = 0;

// good

let registerForm = null,

question = “”,

calculateResult = 0;

【强制】为了快速知晓变量类型，声明变量时要赋值

// not good

let registerForm,

question,

calculateResult;

// good

let registerForm = null,

question = “”,

calculateResult = 0;

. 【强制】单一函数的返回值类型要确定（如下无法确定该函数的最终返回类型）

// not good

function calculatePrice(seatCount){

if (seatCount <= 0) {

return “”;

} else {

return seatCount * 79;

}

}

【强制】debugger 不要出现在提交的代码里

【推荐】使用=代替，!==代替!=（==会自动进行类型转换，可能会出现奇怪的结果）

null == undefined //true

‘’ == ‘0’ //false

0 == ‘’ //true

0 == ‘0’ //true

’ \t\r\n ’ == 0 //true

new String(“abc”) == “abc” //true

new Boolean(true) == true //true

true == 1 //true

【推荐】使用三目运算代替简单的 if-else

// not good

let seatDiscount = 100;

if (seat < 5) {

seatDiscount = 90;

} else if(seat < 10) {

seatDiscount = 80;

} else {

seatDiscount = 70;

}

// good

let seatDiscount = seat < 5 ? 90 : seat < 10 ? 80 : 70;

【推荐】使用 let 定义变量，const 定义常量

【推荐】使用箭头函数取代简单的函数

// not good

let _this = this;

setTimeout(function() {

_this.foo = “bar”;

}, 2000);

// good

setTimeout(() => this.foo = “bar”, 2000);

【推荐】在必要的地方添加非空判断以提高代码的稳健性

【推荐】将复杂的函数分解成多个子函数，方便维护和复用

代码风格

此处大部分工作将由代码格式化工具完成（参见环境要求），一般无需考虑

【强制】缩进使用两个空格代替 Tab

【强制】统一使用双引号""（与 Prettier 默认格式化配置持一致）

【强制】以下几种情况后需加分号;

  • 变量声明

  • 表达式

  • return

  • throw

  • break

  • continue

  • do-while

【强制】以下几种情况不需要空格：

  • 对象的属性名后

  • 前缀一元运算符后

  • 后缀一元运算符前

  • 函数调用括号前

  • 无论是函数声明还是函数表达式，’('前不要空格

  • 数组的’[‘后和’]'前

  • 对象的’{‘后和’}'前

  • 运算符’(‘后和’)'前

【强制】以下几种情况需要空格：

  • 二元运算符前后

  • 三元运算符’?:'前后

  • 代码块’{'前

  • 下列关键字前：else, while, catch, finally

  • 下列关键字后：if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof

  • 单行注释’//‘后（若单行注释和代码同行，则’//‘前也需要），多行注释’*'后

  • 对象的属性值前

  • for 循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格

  • 无论是函数声明还是函数表达式，’{'前一定要有空格

  • 函数的参数之间

数组、对象

【强制】对象属性名不需要加引号

【强制】对象以缩进的形式书写，不要写在一行

【强制】数组中不要存在空元素

【强制】不要用 for in 循环数组

【推荐】数组、对象最后不要有逗号

// not good

let a = {

‘b’: 1

};

let a = { b: 1 };

let a = {

b: 1,

c: 2,

};

// good

let a = {

b: 1,

c: 2

};

使用 null

【强制】正确使用 null

适用场景：

  1. 初始化一个将来可能被赋值为对象的变量

  2. 与已经初始化的变量做比较

  3. 作为一个参数为对象的函数的调用传参

  4. 作为一个返回对象的函数的返回值

  5. 不要用 null 来判断函数调用时有无传参

  6. 不要与未初始化的变量做比较

// not good

function test(a, b) {

if (b === null) {

// not mean b is not supply

// …

}

}

let a;

if (a === null) {

// …

}

// good

let a = null;

if (a === null) {

// …

}

使用 undefined

【强制】正确使用 undefined

  • 不要给变量赋值 undefined（undefined 本身就表示一个变量未定义）

  • 不要直接使用 undefined 进行变量判断

  • 使用 typeof 和字符串 ‘undefined’ 对变量进行判断

// not good

if (person === undefined) {

// …

}

// good

if (typeof person === ‘undefined’) {

// …

}

文档注释

【参考】各类标签 @param, @method 等请参考 usejsdoc 和 JSDoc Guide；

建议在以下情况下使用：所有常量、所有函数、所有类

/**

  • @func

  • @desc 一个带参数的函数

  • @param {string} a - 参数a

  • @param {number} b=1 - 参数b默认值为1

  • @param {string} c=1 - 参数c有两种支持的取值1—表示x2—表示xx

  • @param {object} d - 参数d为一个对象

  • @param {string} d.e - 参数d的e属性

  • @param {string} d.f - 参数d的f属性

  • @param {object[]} g - 参数g为一个对象数组

  • @param {string} g.h - 参数g数组中一项的h属性

  • @param {string} g.i - 参数g数组中一项的i属性

  • @param {string} [j] - 参数j是一个可选参数

*/

function foo(a, b, c, d, g, j) {

// …

}

Vue 组件编码规范

命名

【强制】组件名应该始终是多个单词的，根组件 App 除外

// not good

Vue.component(‘todo’, {

// …

})

export default {

name: ‘Todo’,

// …

}

// good

Vue.component(‘todo-item’, {

// …

})

export default {

name: ‘TodoItem’,

// …

}

【强制】单文件组件的文件名应该要么始终是单词大写开头（ PascalCase ），要么始终是横线连接（ kebab-case ）

// not good

components/

|- mycomponent.vue

components/

|- myComponent.vue

// good

components/

|- MyComponent.vue

components/

|- my-component.vue

【推荐】应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V

// not good

components/

|- MyButton.vue

|- VueTable.vue

|- Icon.vue

// good

components/

|- BaseButton.vue

|- BaseTable.vue

|- BaseIcon.vue

components/

|- AppButton.vue

|- AppTable.vue

|- AppIcon.vue

components/

|- VButton.vue

|- VTable.vue

|- VIcon.vue

【推荐】只应该拥有单个活跃实例的单例组件应该以 The 前缀命名，以示其唯一性

单例组件不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次

// not good

components/

|- Heading.vue

|- MySidebar.vue

// good

components/

|- TheHeading.vue

|- TheSidebar.vue

【强制】和父组件紧密耦合的子组件应该以父组件名作为前缀命名

如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起

// not good

components/

|- TodoList.vue

|- TodoItem.vue

|- TodoButton.vue

components/

|- SearchSidebar.vue

|- NavigationForSearchSidebar.vue

//good

components/

|- TodoList.vue

|- TodoListItem.vue

|- TodoListItemButton.vue

components/

|- SearchSidebar.vue

|- SearchSidebarNavigation.vue

【强制】组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾

// not good

components/

|- ClearSearchButton.vue

|- ExcludeFromSearchInput.vue

|- LaunchOnStartupCheckbox.vue

|- RunSearchButton.vue

|- SearchInput.vue

|- TermsCheckbox.vue

// good

components/

|- SearchClearButton.vue

|- SearchRunButton.vue

|- SearchQueryInput.vue

|- SearchExcludeGlobInput.vue

|- SettingsTermsCheckbox.vue

|- SettingsLaunchOnStartupCheckbox.vue

【推荐】组件名应该倾向于完整单词而不是缩写

// not good

components/

|- SdSettings.vue

|- UProfOpts.vue

// good

components/

|- StudentDashboardSettings.vue

|- UserProfileOptions.vue

语法

【强制】组件的 data 必须是一个函数（除了 new Vue 外的任何地方）

// not good

export default {

data: {

foo: ‘bar’

}

}

// good

export default {

data () {

return {

foo: ‘bar’

}

}

}

【强制】prop 的定义应该尽量详细，至少需要指定其类型

// not good

// 这样做只有开发原型系统时可以接受

props: [‘status’]

// good

props: {

status: String

}

// better

props: {

status: {

type: String,

required: true,

validator: function (value) {

return [

‘syncing’,

‘synced’,

‘version-conflict’,

‘error’

].indexOf(value) !== -1

}

}

}

【强制】为 v-for 设置键值；

在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态

【强制】不要把 v-if 和 v-for 同时用在同一个元素上（大部分时候你可以使用计算属性实现）

    v-for=“user in users”

    v-if=“user.isActive”

    :key=“user.id”

    {{ user.name }}

      v-for=“user in activeUsers”

      :key=“user.id”

      {{ user.name }}

      【强制】自闭合组件在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的；但在 DOM 模板里不要这样做

      【强制】模版中的组件名大小写在单文件组件和字符串模板中组件名应该总是 PascalCase 的；但是在 DOM 模板中总是 kebab-case 的

      亦或者

      【强制】JS/JSX 中的组件名应该始终是 PascalCase 的

      // not good

      Vue.component(‘myComponent’, {

      // …

      })

      import myComponent from ‘./MyComponent.vue’

      export default {

      name: ‘myComponent’,

      // …

      }

      export default {

      name: ‘my-component’,

      // …

      }

      // good

      Vue.component(‘MyComponent’, {

      // …

      })

      import MyComponent from ‘./MyComponent.vue’

      export default {

      name: ‘MyComponent’,

      // …

      }

      【推荐】Prop 名大小写，在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case

      // not good

      props: {

      ‘greeting-text’: String

      }

      // good

      props: {

      greetingText: String

      }

      【推荐】多个特性的元素应该分多行撰写，每个特性一行（此项 Vetur 插件会自动根据行宽阈值进行自动折行处理，一般无需考虑）

      Vue Logo

      <img

      src=“https://i-blog.csdnimg.cn/blog_migrate/c33e84470a45f6676ff4efe15735480e.png”

      alt=“Vue Logo”

      <MyComponent

      foo=“a”

      bar=“b”

      baz=“c”

      />

      【强制】组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法

      // not good

      {{

      fullName.split(’ ').map(function (word) {

      return word[0].toUpperCase() + word.slice(1)

      }).join(’ ')

      }}

      // good

      // 在模板中

      {{ normalizedFullName }}

      // 复杂表达式已经移入一个计算属性

      computed: {

      normalizedFullName: function () {

      return this.fullName.split(’ ').map(function (word) {

      return word[0].toUpperCase() + word.slice(1)

      }).join(’ ')

      }

      }

      【推荐】应该把复杂计算属性分割为尽可能多的更简单的属性

      // not good

      computed: {

      finalPrice: function () {

      var basePrice = this.manufactureCost / (1 - this.profitMargin)

      return (

      basePrice -

      basePrice * (this.discountPercent || 0)

      )

      }

      }

      // good

      性能优化

      1.webpack打包文件体积过大？（最终打包为一个js文件）

      2.如何优化webpack构建的性能

      3.移动端的性能优化

      4.Vue的SPA 如何优化加载速度

      5.移动端300ms延迟

      6.页面的重构

      所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

      2401_84617731
      关注
      评论
      添加红包

      请填写红包祝福语或标题

      个

      红包个数最小为10个

      元

      红包金额最低5元

      当前余额3.43元 前往充值 >
      需支付：10.00元
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付元
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明：

      1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

      余额充值