web开发初级工程师学习笔记ing（持续更新）！！！

Run_Snails

已于 2023-11-02 23:52:29 修改

阅读量321

点赞数 1

文章标签：前端学习笔记

于 2023-10-22 20:05:38 首次发布

本文链接：https://blog.csdn.net/weixin_46274254/article/details/133970503

版权

web开发初级工程师学习笔记

前端开发工具
- 实验1 VS Code 初体验
代码书写习惯和质量

前端开发工具

实验1 VS Code 初体验

•介绍

VS Code 环境提供的是一个可以在浏览器中使用原生 VS Code 编辑代码的程序。在该环境中，你可以使用到与本地安装近乎一致的 VS Code 程序来编辑代码文件，打开 Terminal 终端执行 Linux 命令，还可以在 Terminal 中运行 Web 服务获得临时域名并在浏览器进行预览调试。本次实验将介绍蓝桥云课使用的 VS Code 环境的一些功能和特点。

知识点

• VS Code 环境优势
• VS Code 环境使用

• 为什么要使用 VS Code

• Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统的免费代码编辑器，它内置了 Git 版本控制组件，同时也具有构建各种开发环境的功能，例如代码补全、代码片段和代码重构等。同时编辑器中内置了扩展程序安装和管理的功能，可以通过安装各种不同功能的插件实现一些大型 IDE 才有的功能。在 2019 年 Stack Overflow 组织的开发者调研中，VS Code 被认为是最受开发者欢迎的开发环境。
• 如果你之前是 VS Code 的用户，那么可以快速熟悉 VS Code 环境。当然，如果你之前对 VS Code 也不熟悉，那么接下来将带你入门 VS Code 的使用。

• VS Code 界面

VS Code 不同于图形界面环境，对带宽要求较低，所以比较适用于一些需要大量代码编辑的场景，例如 C/C++，Java Web 开发和前端开发。在大多数情况下，我们更推荐你使用 VS Code 环境，而非 Linux VNC 桌面环境。
启动 VS Code 环境之后，你可以看到它的默认界面，大致分为 3 部分：
• 代码文件浏览区：左边的区域将用于组织项目的文件结构，你可以在此区域创建各种类型的代码文件和文件夹。
• 代码文件编辑区：当你双击打开相应的代码文件之后，将会呈现在编辑区域。你可以在此区域编辑代码，编辑后的代码会实时保存。
• Linux 终端：因为 VS Code 本身是运行在 Linux 容器环境中，所以下方的区域是一个 Linux 终端。你可以通过终端运行命令，执行编译、运行代码等操作。
在这里插入图片描述
菜单由顶栏固定显示的形式改为了点击按钮显示。点击左上角三条横线的图标可以显示完整的菜单栏。

如果你发现界面没有菜单按钮，可能是因为被意外隐藏了，此时可以在侧边工具栏点击右键，选择显示菜单，就可以正确显示菜单按钮。如果出现其他图标按钮消失的情况，处理方式也类似。
在这里插入图片描述
环境下方默认显示 Linux 终端，如果你的环境没有显示，可以点击菜单按钮，选择终端，新终端打开。或者按下键盘快捷键 ctrl + shift + ` （数字键 1 左侧的按键）也可以直接打开。

• 插件安装

我们已经在环境中预安装了部分常用的插件，包括简体中文插件，Java，Python 等语言相关的插件。
在这里插入图片描述
如果要安装你自己需要的插件，可以在搜索栏中输入名称或者 ID 搜索对应的插件，然后点击插件搜索里的安装或者详细信息的在 Remote 上安装按钮即可。

部分插件安装/卸载后可能需要重载环境才能生效，请留意右下角的提示信息。

• 环境使用须知

注意：因为 VS Code 的使用协议中不允许在非官方的 VS Code 程序里登录微软相关的账户，所以环境中无法使用登录账户同步配置功能。
其次，虽然 VS Code 是开源的程序，但是其提供的扩展商店以及商店中提供的一些扩展并非完全开源，且仅允许运行在官方的 VS Code 程序中。你可能会发现，一些在你本地的 VS Code 插件商店中可以被搜索安装的插件无法在线上环境中找到。
若需要使用，可以自行从商店下载安装文件到环境中手动安装。
另外，在线环境的 VS Code 运行在浏览器中，所以不支持部分需要本地程序支持的插件或者直接与其他软件进行集成。

复制粘贴问题

使用 Windows/Linux 等非 macOS 系统的 Chrome/Firefox 等浏览器打开环境，可能会出现在终端里无法使用快捷键复制粘贴命令的情况。这是浏览器安全机制和快捷键绑定机制导致的，我们暂时不能提供很好的解决方案。
如果出现此种情况，课程使用浏览器提供的复制粘贴工具，具体步骤如下：
• Chrome
在这里插入图片描述

• Firefox
在这里插入图片描述
如果你在安装或卸载某个插件后遇到环境崩溃，卡死，保存环境后无法启动等问题，可联系管理员提供你安装的插件的名称，版本等详细信息，我们将针对问题进行测试。
接下来，我们将通过多个示例项目，带你入门 VS Code 的使用。

• C/C++ 示例项目

以下示例项目看不懂代码没有关系，仅用于了解和学习 VS Code 的使用。

首先，我们从一个简单的 C/C++ 示例项目开始。
我们需要先在代码文件浏览区中通过右键新建文件创建一个名为 hello.c 的 C 语言文件。
在这里插入图片描述
然后，在编辑区域键入以下 C 代码，代码会自动保存。

#include<stdio.h>
int main()
{
    printf("Hello, World.");
    return 0;
}

在这里插入图片描述
如果想要执行上方的 C 语言代码，需要先编译代码。编译代码需要用到 Linux 终端，接下来在终端中输入以下命令。

gcc -o hello hello.c

注意参数是小写字母 o，不是数字 0。单击回车，这时目录下会生成了一个名为 hello 的文件，这是 C 语言程序编译后得到的可执行程序。
在这里插入图片描述
接下来，我们就可以在终端中执行文件，注意执行的是编译之后的文件：

./hello

执行完之后，就可以看到刚刚编写 C 语言文件的输出了。
在这里插入图片描述
终端输出 % 符号的原因可点击查看。

• 前端示例项目

以下示例项目看不懂代码没有关系，仅用于了解和学习 VS Code 的使用。

由于 VS Code 是在浏览器中工作的 IDE，所以其非常适合于前端项目的开发和调试。接下来，我们以一个简单的前端项目为例，演示 VS Code 常用功能使用。
首先，在代码文件浏览区中通过右键新建文件创建一个名为 hello.html 的 HTML 文件，然后在编辑区域输入以下 HTML 代码：

在这里插入图片描述
然后，我们键入以下 HTML 内容：

<!DOCTYPE html>
<html>
  <head>
    <title>欢迎来到 HTML 的世界</title>
  </head>
  <body>
    <p>VS Code 示例教学项目.</p>
  </body>
</html>

在这里插入图片描述代码会自动保存。此时，如果希望预览刚刚编写的 HTML 页面效果，可以单击编辑器页面右上角的预览图标打开。

除了预览按钮，你还可以：选中代码文件 → 右键 → Open Preview，或者使用快捷键 Ctrl + Shift + V 打开预览：
在这里插入图片描述
你可以看到，右侧的 HTML 页面已经可以展示出来了。如果后续编辑和修改代码，预览页面也会动态更新。

• Java版HelloWorld

以下示例项目看不懂代码没有关系，仅用于了解和学习 VS Code 的使用。
除了前端开发， VS Code 也可以进行 Java /Java Web 开发。
首先，在代码文件浏览区中通过右键新建文件创建一个名为 Hello.java 的 java 文件，然后在编辑区域输入以下代码：

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello");
    }
}

代码会自动保存。
到 Linux 终端，编译并执行 Java 程序：

javac Hello.java
java Hello

就可以看到输出结果了。

•代码调试功能

VS Code 环境中预制了 Java 相关的插件，所以可以直接在环境里 Debug Java 代码。
其他语言需要自行安装对应的插件。
在代码文件浏览区中点击右键新建文件创建一个名为 HelloWorld.java 的 Java 文件，然后在编辑区域输入以下代码：

/**
 * HelloWorld
 */
public class HelloWorld {
    public static void main(String[] args) {
        for (int a = 0; a < 10; a++) {
            System.out.println(a);
        }
    }
}

在这里插入图片描述
我们在 System.out.println(a); 处打上断点，以便查看 for 循环中变量 a 的值的变化。首先将鼠标放到代码对应的行号前，将出现的小红点点亮。

在这里插入图片描述
然后点击左侧运行图标，切换到调试的界面。可以点击上方的绿色运行标志，或者文件编辑栏里出现的 Debug 按钮开始调试。

开始调试后，终端会自动执行调试命令，左侧区域会显示变量和堆栈相关的信息，状态栏会变为橘黄色并且显示调试状态，顶部会显示一个调试工具栏。可以看到当前变量 a 的值为 0，点击上方的继续按钮执行一次调试。

在这里插入图片描述
程序会自动执行一次循环，a 的值变为 1。

如果要详细查看执行的每一个步骤，可以点击第二个单步跳过按钮，会高亮显示在变量 a 的值发生变化前执行过的代码。停止调试可以点击停止按钮，或者按下快捷键 Shift + F5。
如果不需要调试，也可以直接点击 Run 运行程序，同样会在下方终端里自动执行并输出结果。

在这里插入图片描述
• 文件上传和下载

实验中，如果需要运行已有项目或者继续之前没有完成的项目，我们可以在终端 Terminal 中使用 wget 或者 git 命令获取代码。
请在终端中尝试下载并解压示例项目：

wget https://labfile.oss.aliyuncs.com/courses/1433/maven-demo.zip
unzip maven-demo.zip

另外，VS Code 也支持上传本地项目压缩包或者文件夹，无需点击任何按钮，只需要将文件或文件夹从你本地直接拖动到 VS Code 文件浏览区域即可。
请勿一次性上传超过 50M 的压缩包或者包含非常多子文件的文件夹，否则可能导致环境卡死。

在这里插入图片描述
在 VS Code 中如果需要下载代码文件到本地，只需要选中要下载的文件夹或者代码文件，右键选择下载，就可以下载到本地。

• 实验总结

次试验中，我们了解了 VS Code 的界面布局以及常用功能的使用，你可以进一步通过鼠标点击菜单按钮了解 VS Code 提供的全部功能，或者打开 VS Code 官方文档查看详细功能说明。
在后续的新课程中，我们也会陆续使用 VS Code 环境替换默认的 Web IDE 环境，希望你多多学习，多多尝试使用 VS Code 进行开发。

代码书写习惯和质量

前端开发规范

规范的目的是为了编写高质量的代码，让团队成员每天的心情都是愉悦的，大家在一起是快乐的。（OS：回想下你 review 他人代码的经历，是不是就更有动力阅读下去了呢😂）

引自《阿里规约》的开头片段：现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。

• 命名规范

项目命名

全部采用小写方式，以中划线分隔。正例：sp1-lanqiao-blog 反例：sp1_lanqiao_blog / sp1LanqiaoBlog

目录命名
全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数。正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc 反例： script / style / demo_scripts / demoStyles / imgs / docs

文件命名
全部采用小写方式，以中划线分隔。正例： render-dom.js / signup.css / index.html / company-logo.png 反例： renderDom.js / UserManagement.html

命名严谨性
代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。

说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。

注意：即使纯拼音命名方式也要避免采用。

• 正例：henan / luoyang / rmb 等国际通用的名称，可视同英文
• 反例：DaZhePromotion [打折] / getPingfenByName() [评分]
需杜绝完全不规范的缩写，避免望文不知义。

• 反例：AbstractClass “缩写”命名成 AbsClass，condition “缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。

HTML规范

**标签** HTML 标签分为以下2类：

• 自闭合标签（self-closing），无需闭合。例如：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 等 )。正例：<img src="title.png"/> 反例：<img src="title.png"> 或 <img src="title.png"></img>
• 闭合标签（closing tag），需闭合。例如：textarea、title、h、div、span 等。

需要注意的是，所有具有开始标签和结束标签的元素都必须要写上起止标签。

其他注意事项：

• 尽量减少标签数量。
• 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，只能包含其它的内联元素。
• 块与内联不能并列，块级元素与块级元素并列、内嵌元素与内嵌元素并列。
• 有些标签是固定的嵌套规则，比如 ul 包含 li 等。
• 建议页面中多使用语义化标签，而不是整个页面以 div 构成。
特殊符号
特殊符号尽量使用转义符，比如 &nbsp。

注释
使用注释描述每个模块的功能。

引号
使用双引号(" ") 而不是单引号('') 。正例：<div class="box"></div> 反例：<div class='box'></div>

CSS规范

**命名规范**

• 命名必须由小写单词、中划线 - 组成。不允许使用大写字母或 _ 下划线。
• 语义化单词命名。
• 根据内容、功能来命名。
书写规范
• 每条规则结束后都必须加上分号。
• 如果属性值为 0，则不需要为 0 加单位。
• 注释进行简单描述。
• CSS 固定布局不使用 js，便于阅读和交接，不依赖于 js，有效避免使用 js 对其进行操作时产生不必要的冲突。
• CSS 样式都应写在 CSS 文件中，尽量不写在 Vue 文件中，且尽量少用 id。
• 禁止在 CSS 中使用* (全局)选择器。
• 尽量不写行间样式。

JS规范

命名规范
• 变量和函数为小驼峰法标识（即：lowerCamelCase）。
• 变量名不要以 $ 作为开始，尽量语义化。
• 变量或常量定义声明用let或 const，不使用 var。
• 常量为大写，统一写在 constants 文件夹下。且常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。

•正例： MAX_STOCK_COUNT

反例： MAX_count

注释规范
• 函数/方法包含注释说明，参数，返回值尽量注释标记。
• 代码修改同时，注释也要进行相应修改。
• 无用的注释代码及时删除。
风格规范
• 两个空格缩进。
• 通常运算符 ( = + - * / ) 前后需要添加空格，三目运算符等左右两边都需要加一个空格，冒号与属性值间添加空格。
• 一条语句通常以分号作为结束符。
• 对象最后一个属性值后不添加逗号。
• 优先使用 ES6+ 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。比如箭头函数、await/async ，解构，let、for…of 等等。

VUE 规范

Vue Template
建议 Vue 文件下的代码量越少越好，最多尽量不超过 500 行，超过时尽量拆分组件。组件拆分建议：页面组件、功能组件、公共组件。

组件样式
• 每个组件有单独的 style 样式。
• 组件样式禁止写在全局 styles 文件下，每一个组件都应用一个独立的 CSS 文件，尽量不出现多个组件的样式放到同一个 CSS 文件中。
• 使用 scoped 限制 <style scoped> </style>，避免引起多页面样式被覆盖。
• 尽量使用 sass/less 语法编写 css。
• 每个组件有单独的 css 或 scss 文件，并引入 Vue 组件内，Vue 组件中尽量不写样式，文件名统一为 index.scss 或 index.css 等。示例：

<style lang="scss" scoped >@import "./index.scss";</style>

语法规范
Vue 项目规范以 Vue 官方规范 https://cn.vuejs.org/v2/style-guide/ 中的 A 规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。

目录规范
• components 目录应按照组件进行目录划分。
• assets 目录为静态资源，里面存放 images、styles、icons 等静态资源。
• constants 目录存放项目所有常量。
• router 目录尽量按照 views 中的结构保持一致。
• store 目录按照业务进行拆分不同的 js 文件。
• views 目录命名要与后端、router、api 等保持一致。
注释规范
• 公共组件使用说明必须添加注释。
• api 目录的接口 js 文件必须加注释。
• store 中的 state，mutation，action 等必须加注释。
• Vue 文件中的 template 必须加注释，若文件较大添加 start end 注释。
• Vue 文件的 methods，每个 method 必须添加注释。
• Vue 文件的 data，非常见单词要加注释。

工作流规范

对于 Git 和 Github 操作不太熟练的同学，推荐先学习一下《Git 与 GitHub 入门实践》这门课程。
操作流程
课程仓库 不允许 Fork 操作，更新内容时：
• 先从 master 建立新的分支，禁止直接向 master 推送内容。
• 从新分支向 master 提 PR，并交由同事 Review。
其中，创建和发布提交流程如下：

在这里插入图片描述

总流程如下：
流程中添加了 3 个由 GitHub Action 自动处理的操作：
1·当从个人分支向 master 主分支提交 PR 时，会自动触发格式修正。Prettier 会修正 Markdown 格式并 commit 到个人分支。同时将内容第一次同步上线，以方便线上审核。
2·当内容合并至 master 之后，会自动触发向 product 分支提交上线合并 PR，该 PR 会由主管负责人确认后合并。
3·合并到 product 分支之后的内容会自动同步上线。
特别注意
• 每次提交前请先建立一个新的分支（可以创建多个分支），避免在一个分支上进行所有文件的提交，这对于后期的 review 和修订都是一件非常麻烦的事情。
• 收到 review 后，注意检查是否所有问题全部修订（当问题过多中间部分会被折叠起来）。

（今日以更新2023.11月2日）更新ing