Deep Dive Into Modern Web Development

本文最后更新于:2021年4月1日 早上

University of Helsinki 课程 Department of Computer Science 笔记

Deep Dive Into Modern Web Development

Web 应用的基础设施

基础知识

  • Chrome/Firefox
  • Git
  • Visual Studio Code ✅
    • nano、 Notepad、 Gedit、NetBeans ❎
  • Node.js>10.18

Web 应用的基础设施

  • 开发者模式
    • Network,选中 Disable cache

HTTP GET

Traditional web applications

  • 当进入一个页面时,浏览器会从服务器获取 HTML 文档的详细页面结构,以及文本内容

    • 这个文档可能是保存在服务器目录中的静态文本文件
    • 可能是服务器根据应用的代码动态构建的 HTML 文档
  • 传统的 web 应用中,浏览器是个“憨憨”。 它只会从服务器获取 HTML 数据,所有应用的逻辑都在服务器上处理

Running application logic on the browser

  • 调用链条的代码流程分析
  • 控制台上能输出内容: console.log

Event handlers and Callback functions/事件处理和回调函数

  • 事件处理和回调函数
  • 事件处理函数被称为回调函数。应用代码并不直接调用函数本身,而是运行时环境(浏览器)会在事件发生时适当时间调用函数

Document Object Model or DOM

  • 我们可以将 html 页面看作隐式树结构
    • 浏览器的功能就是基于这种,把 HTML元素描述成一棵树的想法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html
head
link
script
body
div
h1
div
ul
li
li
li
form
input
input
  • 文档对象模型 DOM 是一个应用编程接口 API,它支持对 web 页面对应的元素树进行编程修改

Manipulating the document-object from console/从控制台中操作文档对象

  • 从控制台中操作文档对象
  • DOM 树的最顶层节点称为文档 document 对象
    • 使用 DOM-API 在网页上执行各种操作
      • 可以通过在控制台中键入 document 来访问文档对象

CSS

  • 层叠样式表 CSS,是一种用来确定 web 应用外观的标记语言

  • 类选择器 class selectors:用于选择页面的某些部分,并对它们定义样式规则来装饰它们

    • 类选择器的定义始终以句点开头,并包含类的名称
  • 控制台的 Elements 选项卡可用于更改元素的样式

Loading a page containing JavaScript - revised/加载一个包含 JavaScript 的页面-复习

  • 浏览器使用 HTTP GET 请求从服务器获取定义内容和页面结构的 HTML 代码
  • Html 代码中的 Links 标签会让浏览器获取 CSS 样式表 main.css
  • 以及 JavaScript 代码文件 main.js
  • 浏览器执行 JavaScript 代码,代码向地址 https://studies.cs.helsinki.fi/exampleapp/data.json 发出 HTTP GET 请求,请求返回了包含 note 的 JSON 数据。
  • 获取数据后,浏览器执行一个 event handler 事件处理程序,使用 DOM-API 将 Note 渲染到页面

Forms and HTTP POST/表单与 HTTP POST

  • 发送表单的 HTTP POST 过程

AJAX

  • AJAX:使用包含在 HTML 中的 JavaScript 来获取网页内容,而且不需要重新渲染页面

Single page app/单页面应用

  • 传统的网页:所有的逻辑都在服务器上,浏览器只按照指示渲染 HTML
  • 单页应用 SPA:只从服务器获取一个 HTML 页面,其内容由 JavaScript 在浏览器中执行操作

JavaScript-libraries/JavaScript 库

  • 库:通常会使用比直接操作 DOM-API 更容易的工具库来操作页面
    • e.g.:jQuery 、Angular、React 、VueJS

Full stack web development/全栈-web 开发

  • 最接近最终用户的浏览器是最顶层,而服务器是最底层。 在服务器下面通常还有一个数据库层。 因此,我们可以将 web 应用的体系结构看作是一层层的堆栈。

练习

  • [x] 练习0.1
  • [x] 练习0.2
  • [x] 练习0.3
  • [x] 练习0.4
  • [x] 练习0.5
  • [x] 练习0.6

React 入门

React 简介

  • 利用 create-react-app 新建项目

Componet/组件

  • 定义组件

    • 箭头函数(ES6)
1
2
3
4
5
(param1, param2, …, paramN) => expression
//相当于:(param1, param2, …, paramN) =>{ return expression; }

// 没有参数的函数应该写成一对圆括号。
() => { statements }
  • 定义组件的函数中可以包含任何类型的 JavaScript 代码

  • 可以在组件内部渲染动态内容

JSX

  • 看起来 React 组件返回的是 HTML 标签,但实际并不是这样。

  • React 组件的布局大部分是使用JSX编写的。 尽管 JSX 看起来像 HTML,但我们其实是在用一种**特殊的方法写 JavaScript **。

  • 在底层,React 组件实际上返回的 JSX 会被编译成 JavaScript

  • JSX 是一种“类XML”语言,这意味着每个标签都需要关闭

Multiple components/多组件

  • React 的核心理念,就是将许多定制化的、可重用的组件组合成应用
  • 约定:应用的组件树顶部都要有一个 root 组件叫做 App

props: passing data to components/props:向组件传递数据

  • props:作为参数,它接收了一个对象,该对象具有组件中所定义所有“属性”所对应的字段
    • 任意数量
    • 值可以是字符串,也可以是 JavaScript 表达式的结果(需要用花括号)

Some note/一些注意事项

  • 控制台应该始终开着,确保每一个修改都能按照预期的方式工作
    • 可以在 React 代码中加入 console.log()
  • React 组件名称首字母必须大写
  • React 组件的内容(通常)需要包含 一个根元素
    • 创建组件数组也是一个有效的解决方案,但是不明智
    • 由于根元素是必须的,所以在 Dom 树中会有额外的 div 元素。 这可以通过使用 <> <\>来避免,即用一个空元素来包装组件的返回内容

JavaScript

Variables/变量

  • const 定义常量,let 定义变量

    • 分配给变量的数据类型,在执行过程中可以发生更改

    • 本课程中明确不建议使用 var

Arrays/数组

  • 即使将数组用 const 定义,也可以修改该数组中的内容

    • 因为数组是一个对象,而数组变量总是指向这同一个对象(类似于指针
  • push 方法将一个新元素添加到数组中

    • 函数编程范型的一个特点,就是使用不可变的数据结构
    • 在React代码中,最好使用 concat方法 ,因为它不向数组中添加元素,而是创建一个新数组,新数组中包含了旧数组和新的元素
      • t.concat(5) 这种方法调用不会向旧数组添加新的元素,而是直接返回一个新数组
  • 遍历元素的一种方法是使用 forEach

  • 数组中的单个元素可以很容易地通过解构赋值赋给变量

Objects/对象

  • 定义对象
    • 一个非常常见的方法是使用对象字面量 ,就是通过在大括号中列出它的属性来实现的
      • 对象的属性可以使用**“句点”号或括号进行引用、添加**
    • 也可以利用构造函数定义对象,但是 Javascript 并没有对标面向对象中类的概念

Functions/函数

  • 箭头函数

  • 关键字 function

    • 函数声明
    • 函数表达式
  • 在本课程中,我们将使用箭头语法定义所有函数

组件状态,事件处理

Component helper functions/组件辅助函数

  • 组件辅助函数,可以直接访问传递给组件的所有props

  • 在 JavaScript 中,在函数中定义函数是一种常规操作

Destructuring/解构

  • props 是一个对象

  • 解构赋值:数组、对象快速赋值

Page re-rendering/页面重渲染

  • 重复调用 ReactDOM.render 可以实现页面免刷新进行重渲染,但是不推荐

Stateful component/有状态组件

  • 通过 React 的 state hook 向应用的App 组件中添加状态