网页前端开发初学者必看问题解答

发表时间: 2024-05-11 19:13

引子：本文包含了七个问题，源于在 2024 年 3 月，和两位初学网页开发的教师朋友，线下聊天。整理记录于此。

问题 1：网站前端、后端分别指什么？含有哪些技术？

前端后端的称谓，源于 Web 网站架构，B-S 架构（浏览器 Browser - 服务器 Server）。传统桌面软件采用 C-S 架构（客户端-服务器）。

前端 = 浏览器端，其中的网页技术由内容 HtmL5 + 样式 CSS3 + 交互 JavaScript三种技术构成。

后端 = 服务器端，部署着 Web 应用后端框架，通常为 MVC 框架，用于：1 定义数据模型，2 连接 Database 数据库，3 执行业务逻辑代码，4 与前端接收和发布数据。

常用的后端编程语言有：Java、NodeJS、Python、C#、PHP 等。

问题 2：Java 和 Javascript 语言（简称 JS）的区别？

这是两种不同的流行编程语言。Java 出现在先；JavaScript 出现在后，为了蹭 Java 的热度命名为 JS。

JS 一开始被设计为仅在浏览器中运行的前端语言，后来才有 NodeJS 用于后端。

Java 则一直用于后端开发。

常见到 Java + JS、Python + JS、Node + JS 的前后端语言组合。

问题 3： JS 语言的框架/组件。

框架或组件，是以编程语言为基础，构建的功能集合，能够解决一类现实问题。实际开发中尽可能的使用成熟框架组件，“不要重复发明轮子”。

HTML + CSS 的 Bootstrap（Tailwind）框架，这类样式框架能够快速编写一套网站。

JS 的组件 jQuery，在前端交互中提供语法糖，简化了 JS 调用 DOM（文档对象模型）的写法。

JS 框架 React 或 Vue，是大型前端开发框架，也称单页应用程序 SPA。主要功能有：组件化、虚拟 DOM、响应式数据、路由、状态管理、工程化编译工具等。

Python 的 Pandas 框架，是数据处理包；Python 的 Django 框架，用于后端开发。

Java 的 Spring 框架，著名的后端 MVC 框架，用来构建大型互联网站点，如淘宝、京东、头条等。

问题 4：网页前端开发为什么复杂？

先说较为复杂的后端开发，功能有：读取写入数据，处理数据/逻辑，作为服务器处理高并发高负载。

为了降低后端的复杂性，处理数据/逻辑这部分代码逐步迁移到前端，前端的复杂度就趋近于后端。

超大型网站中，后端最复杂的部分是解决上亿并发量的分布式模块。

前端除了处理数据/逻辑的复杂性之外，还有交互上的新需求，逐步发展出局部页面刷新技术 Ajax，单页应用 SPA 等，也增加了复杂度。

问题 5：设计出一个 3 周授课计划。

第一周：入门

① 讲 HTML 代码，把案例在本地和云端分别跑起来，让学生改代码更换内容。

② 讲 CSS 代码，同上。

③ 讲 Bootstrap 框架，这个框架中封装简化了大量的 CSS 用法，通过查看 BS 文档能够快速构建网站样式。

第二周：讲 JavaScript 语法

① Helloworld 程序，用 Console.log("Hello World!"); 在浏览器的控制台中输出字符串，通过 F12 打开。

② 变量和类型，var count 声明一个新变量，但初始化为 null 空值。不声明的变量，则为 undefined 值。声明变量并初始化 var count = 0;

③ 语句有三种：顺序、分支判断 if else、循环 for。

④ 输出消息，Console.log 之外还有 Alert。输入内容通过 <input>。

⑤ 数组 var arr1 = [0, 1, 2];

⑥ 函数，对一段代码的封装，调用函数，能够提高程序的组织效率。

⑦ DOM 文档对象模型，这个是浏览器中特有的一种 JS 复杂对象，对象中包含了页面 HTML 内容和 CSS 样式。因此，我们能够通过 JS 语言，去操作 DOM 对象，改变内容样式，以达到交互的效果。jQuery 组件可以简化 DOM 操作的写法。

第三周：继续讲解网页中的 JS 代码实例。

① 巨屏区域设计：调用了 jQuery 和 cslider 组件。jQuery 选择器、Ajax 数据操作。

② 新闻案例：先读取 json 数据 ajax get，将数据对象循环处理为 HTML 内容，通过选择器精确定位 HTML 标签并渲染。注意数组 [ ]，对象 { } 的区别，对象是包含键值对的类似字典。总结：新闻案例，是将数据渲染为页面内容。

③ 记账案例：类似购物车，交互特点是数据可以自行增减，通过 <button> 按钮。

④ 打地鼠案例：提供了更多的交互。

这个课程 1 个月时间紧，学生 0 基础，因此主要目标是认识前端概念，初步了解编程语言的开发，体验开发实践。编程语言的基础，只是一些语法点，需要长期练习，在实践中查询并理解记忆知识点。

问题 6：VSCode 工具的使用。

VSCode - Visual Studio Code 是微软公司推出的一款代码编辑器，也称 IDE 集成开发环境。主要是在本地安装，也有服务器版本，用于本地编写各类编程语言。

通常，将一个网页项目源码所在的文件夹，放入 VSCode 当前工作目录，就能开始编程了。

VSCode 提供了 HTML、CSS、JS 的语法高亮，代码识别补全，简单语法检查、代码提示等辅助功能，也有快速生成代码的能力（如输入 html，生成页面代码骨架），用多了就熟能生巧。

问题 7：修改代码后，如何实时的看到页面变化？

本地开发时，使用 VSCode 插件 Live Server，就能保存代码后，页面刷新看到变化。

本地开发时，通过 npm 工程化启动本地服务器，在浏览器中访问指定链接。

云端开发，可以通过 codepen.io，上传源码，修改代码看到变化。

本地发布网页到服务器端，是最终用户看到的效果。