Web前端最全2024最新前端规范_前端开发技术规范最新版(1)，2024年最新初级web前端开发面试题目及答案

本文链接：https://blog.csdn.net/2401_84419493/article/details/138968514

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

css源码pdf

JavaScript知识点

const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;

六、变量

使用 const 或者 let 声明每一个变量，并把 const 声明的放在一起，把 let 声明的放在一起。

为什么？
1）这样更容易添加新的变量声明，而且你不必担心是使用 ; 还是使用 , 或引入标点符号的差别。你可以通过 debugger 逐步查看每个声明，而不是立即跳过所有声明。
2）这在后边如果需要根据前边的赋值变量指定一个变量时很有用。

// bad
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

不要链式变量赋值。

为什么? 链式变量赋值会创建隐式全局变量。

// bad
(function example() {
  // JavaScript 把它解释为
  // let a = ( b = ( c = 1 ) );
  // let 关键词只适用于变量 a ；变量 b 和变量 c 则变成了全局变量。
  let a = b = c = 1;
}());

console.log(a); // throws ReferenceError
console.log(b); // 1
console.log(c); // 1

// good
(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());

console.log(a); // throws ReferenceError
console.log(b); // throws ReferenceError
console.log(c); // throws ReferenceError

// 对于 `const` 也一样

七、比较运算符和等号

使用 === 和 !== 而不是 == 和 !=
对于布尔值使用简写，但是对于字符串和数字进行显式比较。

// bad
if (isValid === true) {
  // ...
}

// good
if (isValid) {
  // ...
}

// bad
if (name) {
  // ...
}

// good
if (name !== '') {
  // ...
}

// bad
if (collection.length) {
  // ...
}

// good
if (collection.length > 0) {
  // ...
}

在 case 和 default 的子句中，如果存在声明 (例如. let, const, function, 和 class)，使用大括号来创建块。

为什么? 语法声明在整个 switch 块中都是可见的，但是只有在赋值的时候才会被初始化，这种情况只有在 case 条件达到才会发生。当多个 case 语句定义相同的东西是，这会导致问题问题。

// bad
switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {
      // ...
    }
    break;
  default:
    class C {}
}

// good
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}

三目表达式不应该嵌套，通常是单行表达式。太多了应该采用分离的办法。
【备注：js代码】

// bad
const foo = maybe1 > maybe2
  ? "bar"
  : value1 > value2 ? "baz" : null;

// 分离为两个三目表达式
const maybeNull = value1 > value2 ? 'baz' : null;

// better
const foo = maybe1 > maybe2
  ? 'bar'
  : maybeNull;

// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

使用该混合运算符时，使用括号括起来。唯一例外的是标准算数运算符 (+, -, *, & /) 因为他们的优先级被广泛理解。

为什么? 这能提高可读性并且表明开发人员的意图。

八、注释

在编写代码注释时，使用 /** … */ 来进行多行注释，而不是 // 。
使用 // 进行单行注释。将单行注释放在需要注释的行的上方新行。在注释之前放一个空行，除非它在块的第一行。用一个空格开始所有的注释，使它更容易阅读。

// bad
const active = true;  //is current tab

// good
// is current tab
const active = true;

// bad
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

// good
function getType() {
  console.log('fetching type...');

  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

// also good
function getType() {
  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

九、类型转换和强制类型转换

转换为字符串，首推String()

为什么？其他方法都有它的问题，或者会出现执行出错的可能；

let reviewScore = 9;

// bad
const totalScore = new String(reviewScore); // typeof totalScore is "object" not "string"

// bad
const totalScore = reviewScore + ''; // Symbol('123') + ‘’报错

// bad
const totalScore = reviewScore.toString(); // 值为null 或者undefined就会报错

// good
const totalScore = String(reviewScore);

转为数字类型，首推Number或者parseInt指定10为基数。

const inputValue = '4';

// bad
const val = new Number(inputValue);

// bad
const val = +inputValue;

// bad
const val = inputValue >> 0;

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);

如果你要用位运算且这样最好的情况下，请写下注释，说明为什么这样做和你做了什么。
转换为布尔类型

const age = 0;

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// best
const hasAge = !!age;

十、命名规范

在命名对象、函数和实例时使用驼峰命名法（camelCase）.且避免单字母或者拼音命名。用你命名来描述功能。

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

文件名应该和默认导出的名称完全匹配。也就是export/import/filename 的命名规范要相同，是PascalCase 就都是PascalCase ，是camelCase 都是camelCase 。
关于缩略词和缩写，必须全部是大写或者全部是小写。

为什么? 名字是为了可读性，不是为了满足计算机算法。

// bad
import SmsContainer from './containers/SmsContainer';

// bad
const HttpRequests = [
  // ...
];

// good
import SMSContainer from './containers/SMSContainer';

// good
const HTTPRequests = [
  // ...
];

// also good
const httpRequests = [
  // ...
];

十一、VUE相关规范

1）组件

组件应该命名为多个单词的，且格式为单词大写开头（PascalCase）如’TodoItem’。
基础组件（也就是展示类的、无逻辑的或无状态的组件）命名应该全部以一个特定的前缀开头，比如 Base、App 或 V。

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

单列组件（每个页面只用一次）命名应该以The前缀命名，以示其唯一性。

components/
|- TheHeading.vue
|- TheSidebar.vue

紧密耦合的组件（父组件和子组件），其中子组件应该以父组件名作为前缀命名，
组件名的单词顺序，应该以表属性名词开头，由描述性的修饰词结尾。
组件名使用完整的单词而不是缩写（编辑器会自动补全单词而不用每次都手敲，完整单词带来的好处是方便后期维护）

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

2）.js / .ts文件命名规范

属于类的.js文件，除index.js外，使用PascalBase风格；
其他类型的.js文件，使用camelCase风格；
属于Api的，统一加上Api后缀；

3）view目录下的文件

除index.vue之外，其他.vue文件统一用PascalBase风格；

4）.less文件命名规范

统一使用kebab-case命名风格；

5）其他细则

在DOM模板中不能有自闭和标签的组件。但是在单文件组件（*.vue）/字符串模板种，没有内容的标签需要自动闭合；

为什么呢？HTML 并不支持自闭合的自定义元素；
而没有内容的单文件组件/字符串模板加上末尾闭合标签显得更已读，也使代码变得简洁；

<!-- 在单文件组件/字符串模板 -->
<MyComponent/>
<!-- 在 DOM 模板种 -->
<my-component/>

DOM模板（html文件）中的组件名，应该以kebab-case格式；
在单文件（*.vue）模板/字符串模板中用PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以，但不建议用驼峰，非常不醒目

为什么呢？HTML是大小写不敏感的，在DOM模板中必须仍使用kebab-case。

<!-- 在 DOM 模板中 -->
<my-component></my-component>

<!-- 在 单文件.vue 模板/字符串模板中，我们推荐首字母大写，更醒目和方便(自动补全名字) -->
<MyComponent></MyComponent>

Prop 的定义要详细。提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型。

反例
// 这样做只有开发原型系统时可以接受
props: ['status']

为你写的一般页面和组件样式设置作用域（scoped），或者项目名+组件名包裹；

为什么？组件和布局组件中的样式可以是全局的

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` attribute -->
<style scoped>
.button-close {
  background-color: red;
}
</style>

如果在函数内部中需要用到函数外部变量的值，需要把该变量以参数的方式传入函数，让外部参数以函数内部参数的身份去使用。

为什么？会使得数据逻辑脉络更清楚，更易追踪。

<button @click="onSendOut(params, info.orderId)">发 货</button>

methods中的方法名:
1）驼峰的写法；
2）方法名为英语单词禁用拼音；
3）如果是事件需要在前面加上on；
4)获取数据需为 getXXXData 格式；
5）处理数据需要为 handleXXXData格式

如：
onSubmitForm() / getListData() / handleListData()

【二】推荐

一、解构

在访问和使用对象的多个属性的时候使用对象的解构。

为什么? 解构可以避免为这些属性创建临时引用。

// 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}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

使用数组解构

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

对于多个返回值使用对象解构，而不是数组解构。

为什么? 你可以随时添加新的属性或者改变属性的顺序，而不用修改调用方。

// bad
function processInput(input) {
  // 处理代码...
  return [left, right, top, bottom];
}

// 调用者需要考虑返回数据的顺序。
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // 处理代码...
  return { left, right, top, bottom };
}

// 调用者只选择他们需要的数据。
const { left, top } = processInput(input);

二、循环（迭代器）

你应该使用 JavaScript 的高阶函数代替 for-in 或者 for-of。

使用 map() / every() / filter() / find() / findIndex() / reduce() / some() / … 遍历数组，和使用 Object.keys() / Object.values() / Object.entries() 迭代你的对象生成数组。
为什么? 因为它们返回纯函数。

const numbers = [1, 2, 3, 4, 5];

// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}
sum === 15;

// good
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
sum === 15;

// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;

// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
  increasedByOne.push(numbers[i] + 1);
}

// good
const increasedByOne = [];
numbers.forEach((num) => {
  increasedByOne.push(num + 1);
});

// best (keeping it functional)
const increasedByOne = numbers.map(num => num + 1);

三、控制语句

如果你的控制语句 (if, while 等) 太长或者超过了一行最大长度的限制，则可以将每个条件（或组）放入一个新的行。逻辑运算符应该在行的开始。

为什么? 要求操作符在行的开始保持对齐并遵循类似方法衔接的模式。这提高了可读性，并且使更复杂的逻辑更容易直观的被理解。

// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
  thing1();
}

// bad
if (foo === 123 &&
  bar === 'abc') {
  thing1();
}

// bad
if (foo === 123
  && bar === 'abc') {
  thing1();
}

// bad
if (
  foo === 123 &&
  bar === 'abc'
) {
  thing1();
}

// good
if (
  foo === 123
  && bar === 'abc'
) {
  thing1();
}

// good
if (
  (foo === 123 || bar === 'abc')
  && doesItLookGoodWhenItBecomesThatLong()
  && isThisReallyHappening()
) {
  thing1();
}

避免嵌套

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ReallyHappening()) {
thing1();
}

// bad
if (foo === 123 &&
bar === ‘abc’) {
thing1();
}

// bad
if (foo === 123
&& bar === ‘abc’) {
thing1();
}

// bad
if (
foo === 123 &&
bar === ‘abc’
) {
thing1();
}

// good
if (
foo === 123
&& bar === ‘abc’
) {
thing1();
}

// good
if (
(foo === 123 || bar === ‘abc’)
&& doesItLookGoodWhenItBecomesThatLong()
&& isThisReallyHappening()
) {
thing1();
}


2. 避免嵌套




### 最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/54a6b04f29167333b139d2753f60db9f.png)