chore: add

This commit is contained in:
FallenYing
2023-10-11 23:24:20 +08:00
parent d5b500e8d9
commit c810fd1647
18 changed files with 277 additions and 264 deletions

View File

@@ -1,6 +1,6 @@
# 附录 1前端介绍详细版 # 附录 1前端介绍详细版
### 前端的概念 ## 前端的概念
前端,想要入门,则必须要知道他所指代的内容。 前端,想要入门,则必须要知道他所指代的内容。
@@ -8,15 +8,15 @@
狭义就是指网页,而广义则是指互联网中一切可见的界面及交互功能。设计师负责设计出好看的界面,而前端工程师则是负责把他实现,并在实现基础上增加交互的部分和实际的功能。例如:各种 GUI、小程序 (各种)、快应用、APP 的界面、网页、鸿蒙应用等都可以由前端来完成。有些人可能会疑惑,这也算前端。我只能说,这就是大前端时代。许多人学习前端,在网上寻找教程,找到的教程都是非常远古或者基础的。由于前端的发展历史很长,教程也必须与时俱进。以前的教程仅限网页制作,但如今前端领域日新月异,各种新框架新功能不断开辟,我们不能都有所涉及,但也不能做井底之蛙。 狭义就是指网页,而广义则是指互联网中一切可见的界面及交互功能。设计师负责设计出好看的界面,而前端工程师则是负责把他实现,并在实现基础上增加交互的部分和实际的功能。例如:各种 GUI、小程序 (各种)、快应用、APP 的界面、网页、鸿蒙应用等都可以由前端来完成。有些人可能会疑惑,这也算前端。我只能说,这就是大前端时代。许多人学习前端,在网上寻找教程,找到的教程都是非常远古或者基础的。由于前端的发展历史很长,教程也必须与时俱进。以前的教程仅限网页制作,但如今前端领域日新月异,各种新框架新功能不断开辟,我们不能都有所涉及,但也不能做井底之蛙。
### 前端的学习 ## 前端的学习
因此,想要入门前端,则必须先建立一个较好的世界观,才能进行方法论的学习。最最基础的前端,也就是网页,需要从网页三剑客开始学习,即 HTML、CSS、JAVASCRIPT。这三样一个负责描述网页内容一个负责描述网页样式一个负责网页交互。没错这三个就是三门语言。每门语言都有不可忽视的发展成果。大多数人在网上寻找教程找到的都是最基础的教程甚至没有与时俱进比如有许多废弃的规定还在教程中比如有新的语法规范却没有教授。我这里并不推荐有没有什么好的教程而是要大家通过搜索引擎的帮助让自己建立一个正确的前端世界观而这篇文章知识来帮助你们少走弯路和死胡同。当然如果大家想要学好前端必须要自己学会阅读文档而不是一些教程。因为官方文档才是最前沿的最正确的最全面的。 因此,想要入门前端,则必须先建立一个较好的世界观,才能进行方法论的学习。最最基础的前端,也就是网页,需要从网页三剑客开始学习,即 HTML、CSS、JAVASCRIPT。这三样一个负责描述网页内容一个负责描述网页样式一个负责网页交互。没错这三个就是三门语言。每门语言都有不可忽视的发展成果。大多数人在网上寻找教程找到的都是最基础的教程甚至没有与时俱进比如有许多废弃的规定还在教程中比如有新的语法规范却没有教授。我这里并不推荐有没有什么好的教程而是要大家通过搜索引擎的帮助让自己建立一个正确的前端世界观而这篇文章知识来帮助你们少走弯路和死胡同。当然如果大家想要学好前端必须要自己学会阅读文档而不是一些教程。因为官方文档才是最前沿的最正确的最全面的。
### 前端的历史 ## 前端的历史
从历史中较为全面的了解前端可以帮助你快速建立相关的观念。当然前端的历史大家可以看看知乎上高赞的回答。我这里只说一下我的观念。前端在历史发展中非常注重一个理念不要重复造轮子DRY。没错别人做好的已经很完善的拿来用就行除非你自己还有什么其他的需求。这个观念与其他计算机领域的观念是不一样的。这也是前端能够快速发展的重要原因之一。浏览器等设备平台对代码进行一个渲染和执行我们必须遵守这个规范。但代码怎么样写怎么样提高效率怎么样支持多种写法都能得到一样的效果这就是前端发展的一个关键。先辈们对代码进行了二次的一个编译。先辈们建立了一系列编译器等操作使得前端能够在基石上向上发展。我们不必一板一眼的编写非常冗余的 HTML\CSS\JS 代码,而是编写特定语法的代码,然后通过代码编译成浏览器等平台可识别的 HTML\CSS\JS\其他的代码。这不仅使得我们前端开发的效率大大提高,还能把代码移植到其他平台,实现跨平台的功能。所以这才诞生出了 postcssvueemmet 等高效而又实用的成果。 从历史中较为全面的了解前端可以帮助你快速建立相关的观念。当然前端的历史大家可以看看知乎上高赞的回答。我这里只说一下我的观念。前端在历史发展中非常注重一个理念不要重复造轮子DRY。没错别人做好的已经很完善的拿来用就行除非你自己还有什么其他的需求。这个观念与其他计算机领域的观念是不一样的。这也是前端能够快速发展的重要原因之一。浏览器等设备平台对代码进行一个渲染和执行我们必须遵守这个规范。但代码怎么样写怎么样提高效率怎么样支持多种写法都能得到一样的效果这就是前端发展的一个关键。先辈们对代码进行了二次的一个编译。先辈们建立了一系列编译器等操作使得前端能够在基石上向上发展。我们不必一板一眼的编写非常冗余的 HTML\CSS\JS 代码,而是编写特定语法的代码,然后通过代码编译成浏览器等平台可识别的 HTML\CSS\JS\其他的代码。这不仅使得我们前端开发的效率大大提高,还能把代码移植到其他平台,实现跨平台的功能。所以这才诞生出了 postcssvueemmet 等高效而又实用的成果。
要说,前端为什么发展这么快,很重要的因素就是它非常热衷于开源。通过开源,大家可以一起维护一个项目,并通过传播,让其他人在它的基础上继续发展,逐渐壮大。你可以直接在前人的基础上继续发展,可以快速建立自己的生态,发现并合力解决各种 BUG。 要说,前端为什么发展这么快,很重要的因素就是它非常热衷于开源。通过开源,大家可以一起维护一个项目,并通过传播,让其他人在它的基础上继续发展,逐渐壮大。你可以直接在前人的基础上继续发展,可以快速建立自己的生态,发现并合力解决各种 BUG。
MDN 是个适合初学和文档查阅的网站 里面有学习前端的全流程 MDN 是个适合初学和文档查阅的网站 里面有学习前端的全流程
https://developer.mozilla.org/zh-CN/docs/learn <https://developer.mozilla.org/zh-CN/docs/learn>

View File

@@ -3,17 +3,17 @@
这里我们讲讲前端三剑客和前端框架 这里我们讲讲前端三剑客和前端框架
如下为 roadmap 上前端的路线 如下为 roadmap 上前端的路线
https://roadmap.sh/frontend <https://roadmap.sh/frontend>
- 前端三剑客 - 前端三剑客
- https://www.w3school.com.cn/html/html5_intro.asp - <https://www.w3school.com.cn/html/html5_intro.asp>
- https://www.w3school.com.cn/css/index.asp - <https://www.w3school.com.cn/css/index.asp>
- https://www.w3school.com.cn/js/index.asp - <https://www.w3school.com.cn/js/index.asp>
- 前端框架 - 前端框架
- https://cn.vuejs.org/ - <https://cn.vuejs.org/>
> 在官方文档学习 Vue 的过程中,强烈建议你在左上角 `API风格偏好` 中,改为组合式 > 在官方文档学习 Vue 的过程中,强烈建议你在左上角 `API风格偏好` 中,改为组合式
- https://zh-hans.react.dev/ - <https://zh-hans.react.dev/>
> 在官方文档学习 React 的过程中,强烈建议不要在 Class 写法停留太久,要速速学习 Hook 写法 > 在官方文档学习 React 的过程中,强烈建议不要在 Class 写法停留太久,要速速学习 Hook 写法

View File

@@ -1,17 +1,18 @@
# 附录 3跨端开发 # 附录 3跨端开发
> 人文 + 技术 + 经验 > 人文 + 技术 + 经验
>
> author少轻狂 > author少轻狂
## 何为跨端:孙行者、者行孙 ## 何为跨端:孙行者、者行孙
简单来说,就是一套代码,能在多个平台上跑。 简单来说,就是一套代码,能在多个平台上跑。
> 孙行者,行者孙,者孙行.......者行孙,孙者行,行孙者 > 孙行者,行者孙,者孙行.......者行孙,孙者行,行孙者
例如,你可以编写一套前端代码,然后在 Web、HarmonyOS、OpenHarmony、Android、Ios、Macos、Linux、Windows、小程序微信、QQ、抖音、支付宝...)上运行。 例如,你可以编写一套前端代码,然后在 Web、HarmonyOS、OpenHarmony、Android、Ios、Macos、Linux、Windows、小程序微信、QQ、抖音、支付宝...)上运行。
## 为何跨端:三生三世皆为你 ## 为何跨端:三生三世皆为你
随着业务的发展,产生了越来越多的业务场景,同时随着技术的发展,产生了 越来越多的端PC 端 (Windows、Mac) ,移动端 (安卓、iOs)、web 端、loT 设备 (车载设备、手表) 等。 随着业务的发展,产生了越来越多的业务场景,同时随着技术的发展,产生了 越来越多的端PC 端 (Windows、Mac) ,移动端 (安卓、iOs)、web 端、loT 设备 (车载设备、手表) 等。
但是,很多互联网企业制作应用时,往往需要使应用支持多个系统,但是每个系统的应用功能也需保持一致。为此,传统做法是各端安排研发人员进行开发相同功能。这不仅造成了资源冗余、浪费,开发、维护的成本也特别高。通常情况下,开发的周期也是比较长的。 但是,很多互联网企业制作应用时,往往需要使应用支持多个系统,但是每个系统的应用功能也需保持一致。为此,传统做法是各端安排研发人员进行开发相同功能。这不仅造成了资源冗余、浪费,开发、维护的成本也特别高。通常情况下,开发的周期也是比较长的。
@@ -33,6 +34,7 @@
3. 动态化:支持动态化下发,满足日益增长的业务需求 3. 动态化:支持动态化下发,满足日益增长的业务需求
## 如何跨端:港通天下 ## 如何跨端:港通天下
跨端其实不是一个新兴的名词。跨端又称跨平台。这其实很多语言都非常崇拜跨平台概念,原生支持跨平台。例如 JAVA 语言,它不仅可以开发安卓应用、其他操作系统的应用都可以开发。例如微软的.NET为跨平台而生。 跨端其实不是一个新兴的名词。跨端又称跨平台。这其实很多语言都非常崇拜跨平台概念,原生支持跨平台。例如 JAVA 语言,它不仅可以开发安卓应用、其他操作系统的应用都可以开发。例如微软的.NET为跨平台而生。
那么,前端如何实现的跨端呢? 那么,前端如何实现的跨端呢?
@@ -46,6 +48,7 @@
废话不多说,来看看主要技术方案。 废话不多说,来看看主要技术方案。
## 方案简述 ## 方案简述
如果,让你思考如何让 web 代码支持跨平台,你会怎么做呢? 如果,让你思考如何让 web 代码支持跨平台,你会怎么做呢?
以下是简单的思路: 以下是简单的思路:
@@ -63,8 +66,8 @@
| 自渲染方案 | Skia | 1. 性能最好<br />2. 一致性最好<br /> | 1. CSS 子集<br />2. 开发成本高<br />3. 生态一般<br /> | 1. Flutter<br /> | | 自渲染方案 | Skia | 1. 性能最好<br />2. 一致性最好<br /> | 1. CSS 子集<br />2. 开发成本高<br />3. 生态一般<br /> | 1. Flutter<br /> |
| 小程序方案 | webview+ 原生组件 | 1. 开发成本低<br />2. CSS 全集<br />3. 一致性好<br /> | 1. 生态一般<br /> | 1. 微信小程序<br /> | | 小程序方案 | webview+ 原生组件 | 1. 开发成本低<br />2. CSS 全集<br />3. 一致性好<br /> | 1. 生态一般<br /> | 1. 微信小程序<br /> |
### Hybrid 方案 ### Hybrid 方案
简单理解,就是浏览器套壳。 简单理解,就是浏览器套壳。
它是基于 WebView 渲染,通过 JS Bridge 把一部分系统能力开放给 JS 调用。 它是基于 WebView 渲染,通过 JS Bridge 把一部分系统能力开放给 JS 调用。
@@ -74,6 +77,7 @@
WebView 容器的工作原理是基于 Web 技术来实现界面和功能,通过将原生的接口封装、暴露给 JavaScript 调用JavaScript 编写的页面可以运行在系统自带的 WebView 中。这样做的优势是,对于前端开发者比较友好,可以很快地实现页面跨端,同时保留调用**原生的能力**,通过搭建桥接层和原生能力打通。但这种设计,跨端的能力受限于桥接层,当调用之前没有的原生能力时,就需要增加桥。另外,浏览器内核的渲染独立于系统组件,无法保证原生体验,**渲染的效果会差不少**。 WebView 容器的工作原理是基于 Web 技术来实现界面和功能,通过将原生的接口封装、暴露给 JavaScript 调用JavaScript 编写的页面可以运行在系统自带的 WebView 中。这样做的优势是,对于前端开发者比较友好,可以很快地实现页面跨端,同时保留调用**原生的能力**,通过搭建桥接层和原生能力打通。但这种设计,跨端的能力受限于桥接层,当调用之前没有的原生能力时,就需要增加桥。另外,浏览器内核的渲染独立于系统组件,无法保证原生体验,**渲染的效果会差不少**。
#### 浏览器 #### 浏览器
浏览器就是一种历史悠久的跨平台方案。 浏览器就是一种历史悠久的跨平台方案。
网页跨平台不意味着浏览器也是跨平台的,浏览器的可执行文件还是每个平台单独开发和编译的,但是他们支持的网页解析逻辑一样,这样上面跑的网页就是跨平台的。 网页跨平台不意味着浏览器也是跨平台的,浏览器的可执行文件还是每个平台单独开发和编译的,但是他们支持的网页解析逻辑一样,这样上面跑的网页就是跨平台的。
@@ -83,6 +87,7 @@ WebView容器的工作原理是基于Web技术来实现界面和功能通过
![](https://cdn.xyxsw.site/fdegetyjyrj.png) ![](https://cdn.xyxsw.site/fdegetyjyrj.png)
#### PWA #### PWA
尽管 PWA 的出现不是为了“跨端”,但他们对于“跨端”的天然支持,能够让一套代码运行在 PC、移动两端就再一次产生了跨端设计实施的可能性。 尽管 PWA 的出现不是为了“跨端”,但他们对于“跨端”的天然支持,能够让一套代码运行在 PC、移动两端就再一次产生了跨端设计实施的可能性。
> 小程序的“鼻祖“,但如今在国内已消亡。 > 小程序的“鼻祖“,但如今在国内已消亡。
@@ -93,8 +98,10 @@ PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018
纵观现有 Web 应用与原生应用的对比差距,如**离线缓存、沉浸式体验**等等,可以通过已经实现的 Web 技术去弥补这些差距,最终达到与原生应用相近的用户体验效果。 纵观现有 Web 应用与原生应用的对比差距,如**离线缓存、沉浸式体验**等等,可以通过已经实现的 Web 技术去弥补这些差距,最终达到与原生应用相近的用户体验效果。
**PWA=WEB 网页 + 离线缓存 + 消息推送** **PWA=WEB 网页 + 离线缓存 + 消息推送**
> 在 2017 年 7 月 5 日“百度 AI 开发者大会”Baidu Create2017——Web 生态分论坛上,百度开发者介绍了百度 Lavas 解决方案,帮助开发者快速搭建 PWA 应用。 > 在 2017 年 7 月 5 日“百度 AI 开发者大会”Baidu Create2017——Web 生态分论坛上,百度开发者介绍了百度 Lavas 解决方案,帮助开发者快速搭建 PWA 应用。
> lavas 不是一个框架,而是一个基于 vue 的 PWA 解决方案,通过 lavas 导出的模板帮助开发者解决了接入 PWA 过程中遇到的问题: > lavas 不是一个框架,而是一个基于 vue 的 PWA 解决方案,通过 lavas 导出的模板帮助开发者解决了接入 PWA 过程中遇到的问题:
>
> - Service Worker 生成 > - Service Worker 生成
> - Service Worker 更新,以及 sw 更新后的操作 > - Service Worker 更新,以及 sw 更新后的操作
> - App Skeleton页面渲染完成之前的页面框架 > - App Skeleton页面渲染完成之前的页面框架
@@ -102,11 +109,11 @@ PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018
> - App Shell集成了 vuetify 组件库 > - App Shell集成了 vuetify 组件库
> - 主题切换 > - 主题切换
> - vue 的图标解决方案... > - vue 的图标解决方案...
>
而现在 lavas 官网已经无法访问,这在很大程度上可以反应 PWA 在国内业务的一个现状。 而现在 lavas 官网已经无法访问,这在很大程度上可以反应 PWA 在国内业务的一个现状。
#### Electron #### Electron
![](https://cdn.xyxsw.site/wettrjryju.png) ![](https://cdn.xyxsw.site/wettrjryju.png)
Electron 是使用 JavaScriptHTML 和 CSS 构建跨平台的桌面应用程序的框架,可构建出兼容 Mac、Windows 和 Linux 三个平台的应用程序。 Electron 是使用 JavaScriptHTML 和 CSS 构建跨平台的桌面应用程序的框架,可构建出兼容 Mac、Windows 和 Linux 三个平台的应用程序。
@@ -118,9 +125,11 @@ Electron 的跨端原理并不难理解:它通过集成浏览器内核,使
- Native API 为 Electron 提供原生系统的 GUI 支持,借此 Electron 可以调用原生应用程序接口。 - Native API 为 Electron 提供原生系统的 GUI 支持,借此 Electron 可以调用原生应用程序接口。
### 原生渲染方案 ### 原生渲染方案
使用 JS 开发,通过中间层桥接后使用原生组件来渲染 UI 界面。例如,在 Android 开发中是使用 Kotin 或 Java 来编写视图;在 iOS 开发中是使用 Swift 或 Objective-C 来编写视图。 使用 JS 开发,通过中间层桥接后使用原生组件来渲染 UI 界面。例如,在 Android 开发中是使用 Kotin 或 Java 来编写视图;在 iOS 开发中是使用 Swift 或 Objective-C 来编写视图。
#### React Native #### React Native
React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。 React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。
![](https://cdn.xyxsw.site/eryyjyuj.png) ![](https://cdn.xyxsw.site/eryyjyuj.png)
@@ -128,14 +137,17 @@ React Native 是一个由 Facebook 于2015年9月发布的一款开源的 JavaSc
React Native 的思路是最大化地复用前端的生态和 Native 的生态,和 WebView 容器的最大区别在于 View 的渲染体系。React Native 抛弃了低效的浏览器内核渲染,转而**使用自己的 DSL 生成中间格式**,然后映射到对应的平台,**渲染成平台的组件**。相对 WebView 容器,体验会有一定的提升。不过,渲染时需要 JavaScript 和原生之间通信,在有些场景可能会导致卡顿。另外就是,渲染还是在 Native 层,要求开发人员对 Native 有一定的熟悉度。 React Native 的思路是最大化地复用前端的生态和 Native 的生态,和 WebView 容器的最大区别在于 View 的渲染体系。React Native 抛弃了低效的浏览器内核渲染,转而**使用自己的 DSL 生成中间格式**,然后映射到对应的平台,**渲染成平台的组件**。相对 WebView 容器,体验会有一定的提升。不过,渲染时需要 JavaScript 和原生之间通信,在有些场景可能会导致卡顿。另外就是,渲染还是在 Native 层,要求开发人员对 Native 有一定的熟悉度。
### 自渲染方案 ### 自渲染方案
简单来说,就是既不使用 webview 又不使用原生组件,而是使用自绘组件。 简单来说,就是既不使用 webview 又不使用原生组件,而是使用自绘组件。
#### Flutter #### Flutter
flutter 是近些年流行的跨端方案跨的端包括安卓、ios、web 等。它最大的特点是渲染不是基于操作系统的组件而是直接基于绘图库skia来绘制的这样做到了渲染的跨端。 flutter 是近些年流行的跨端方案跨的端包括安卓、ios、web 等。它最大的特点是渲染不是基于操作系统的组件而是直接基于绘图库skia来绘制的这样做到了渲染的跨端。
Flutter 与上述 Recat Native、WebView 容器本质上都是不同的,它没有使用 WebView、JavaScript 解释器或者系统平台自带的原生控件,而是有一套自己专属的 Widget底层渲染使用自身的高性能 C/C++ 引擎自绘。 Flutter 与上述 Recat Native、WebView 容器本质上都是不同的,它没有使用 WebView、JavaScript 解释器或者系统平台自带的原生控件,而是有一套自己专属的 Widget底层渲染使用自身的高性能 C/C++ 引擎自绘。
### 小程序方案 ### 小程序方案
使用小程序 DSL + JS 开发,通过中间层桥接后调用原生能力,使用 webview 来渲染 UI 界面。 使用小程序 DSL + JS 开发,通过中间层桥接后调用原生能力,使用 webview 来渲染 UI 界面。
从小程序的定位来讲,它就不可能用纯原生技术来进行开发,因为那样它的编译以及发版都得跟随微信,所以需要像 Web 技术那样,有一份随时可更新的资源包放在远程,通过下载到本地,动态执行后即可渲染出界面。 从小程序的定位来讲,它就不可能用纯原生技术来进行开发,因为那样它的编译以及发版都得跟随微信,所以需要像 Web 技术那样,有一份随时可更新的资源包放在远程,通过下载到本地,动态执行后即可渲染出界面。
@@ -152,26 +164,28 @@ Flutter与上述Recat Native、WebView容器本质上都是不同的它没有
![](https://cdn.xyxsw.site/rtjyujyu.png) ![](https://cdn.xyxsw.site/rtjyujyu.png)
## 类前端开发:拿过来吧你 ## 类前端开发:拿过来吧你
现代的客户端开发平台继承和发扬了 Web 的 HTML 语言的方式来构建表现层开发平台,其中有代表性的是 XAMLFlexJavaFXAndroid 几个平台。他们都使用基于 XML 的描述性语言作为开发语言,并且提供可视化的开发环境,使用一种强类型的程序设计语言作为背后支撑。完成表现层开发工作的前端开发人员只需要熟练掌握表现层开发语言极其机制,熟练使用表现层开发工具,少量掌握背后的程序设计语言就可以很好地完成表现层开发工作。主要原因是基于 XMl 的方式设计 UI可以使得视图层和逻辑层进行一个分离更清晰、更灵活。XML 可以进行一个可视化开发,门槛低,易上手。 现代的客户端开发平台继承和发扬了 Web 的 HTML 语言的方式来构建表现层开发平台,其中有代表性的是 XAMLFlexJavaFXAndroid 几个平台。他们都使用基于 XML 的描述性语言作为开发语言,并且提供可视化的开发环境,使用一种强类型的程序设计语言作为背后支撑。完成表现层开发工作的前端开发人员只需要熟练掌握表现层开发语言极其机制,熟练使用表现层开发工具,少量掌握背后的程序设计语言就可以很好地完成表现层开发工作。主要原因是基于 XMl 的方式设计 UI可以使得视图层和逻辑层进行一个分离更清晰、更灵活。XML 可以进行一个可视化开发,门槛低,易上手。
因此,有许多语言都采用类前端的方式进行视图层的开发,然后其他语言进行逻辑层的开发。 因此,有许多语言都采用类前端的方式进行视图层的开发,然后其他语言进行逻辑层的开发。
## .NET ## .NET
微软的.NET 就是基于 XAML 开发视图层,支持可视化开发(低代码)。 微软的.NET 就是基于 XAML 开发视图层,支持可视化开发(低代码)。
## 鸿蒙 ArkTs ## 鸿蒙 ArkTs
基于 JS 扩展的类 Web 开发范式的方舟开发框架包括应用层Application、前端框架层Framework、引擎层Engine、平台适配层Porting Layer 基于 JS 扩展的类 Web 开发范式的方舟开发框架包括应用层Application、前端框架层Framework、引擎层Engine、平台适配层Porting Layer
JS UI 框架采用类 HTML 和 CSS Web 编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持 ECMAScript 规范的 JavaScript 语言。JS UI 框架提供的类 Web 编程范式,可以让开发者避免编写 UI 状态切换的代码,视图配置信息更加直观。 JS UI 框架采用类 HTML 和 CSS Web 编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持 ECMAScript 规范的 JavaScript 语言。JS UI 框架提供的类 Web 编程范式,可以让开发者避免编写 UI 状态切换的代码,视图配置信息更加直观。
![](https://cdn.xyxsw.site/3465ytyjyjy.png) ![](https://cdn.xyxsw.site/3465ytyjyjy.png)
## 跨端不只是跨端:爱你的全世界 ## 跨端不只是跨端:爱你的全世界
## 什么样的场景可以跨端? ## 什么样的场景可以跨端?
跨端应用能够真正推进下去,除了有技术保障外,还需要合适的需求场景,使用 PC 端的功能型产品主要是需要大屏带来的“效率”(办公、个人管理、教育)与“沉浸”(数据、金融、游戏、影视)体验。 跨端应用能够真正推进下去,除了有技术保障外,还需要合适的需求场景,使用 PC 端的功能型产品主要是需要大屏带来的“效率”(办公、个人管理、教育)与“沉浸”(数据、金融、游戏、影视)体验。
![](https://cdn.xyxsw.site/ertehry.png) ![](https://cdn.xyxsw.site/ertehry.png)
@@ -181,6 +195,7 @@ JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式
依赖 PC、移动双端进行经营管理的电商场景也有很多内容适合跨端。 依赖 PC、移动双端进行经营管理的电商场景也有很多内容适合跨端。
## 跨端 UI 如何设计 ## 跨端 UI 如何设计
跨端的 UI 设计不仅仅是响应式,布局没问题就行,而是从 PC 端“网页”到移动端“App”的体验映射。 跨端的 UI 设计不仅仅是响应式,布局没问题就行,而是从 PC 端“网页”到移动端“App”的体验映射。
1. 双端基础组件设计规则对齐(对前端来说是同类组件 API、属性对齐以及组件功能形态映射 1. 双端基础组件设计规则对齐(对前端来说是同类组件 API、属性对齐以及组件功能形态映射
@@ -210,9 +225,11 @@ Mobile first 不是唯一准则。进行具体场景的跨端设计时,我们
## 高效开发++:人的生命是有限的 ## 高效开发++:人的生命是有限的
## 前后端不分离 ## 前后端不分离
当我们开始进行跨端开发的时候,我们会遇到一个很尴尬的问题。比如,我们要开发一个客户端或者说 APP利用前端跨端技术开发。此时我们不得不既要开发前端又要涉及后端的部分内容。例如获取相关数据之类的。此时我们使用前后端分离的方式在某些情境下就有可能不妥。尤其是仅个人开发已经有代码洁癖又要前后端分离那显然是一种不明智的开发方式。所以很多情况下进行一个前后端不分离的方式开发前后端或许是一个好的方法。 当我们开始进行跨端开发的时候,我们会遇到一个很尴尬的问题。比如,我们要开发一个客户端或者说 APP利用前端跨端技术开发。此时我们不得不既要开发前端又要涉及后端的部分内容。例如获取相关数据之类的。此时我们使用前后端分离的方式在某些情境下就有可能不妥。尤其是仅个人开发已经有代码洁癖又要前后端分离那显然是一种不明智的开发方式。所以很多情况下进行一个前后端不分离的方式开发前后端或许是一个好的方法。
## Serveless ## Serveless
简而言之,就是**云函数(分布式)+ 云数据库(分布式)**。 简而言之,就是**云函数(分布式)+ 云数据库(分布式)**。
Serverless 字面意思是无服务,但并不代表再也不需要服务器了,而是指开发者不需要过多的考虑服务器的问题,计算资源作为服务出现而不是服务器的概念出现。那么 Serverlss是对全部底层资源和操作的封装让开发者专注于业务逻辑。 Serverless 字面意思是无服务,但并不代表再也不需要服务器了,而是指开发者不需要过多的考虑服务器的问题,计算资源作为服务出现而不是服务器的概念出现。那么 Serverlss是对全部底层资源和操作的封装让开发者专注于业务逻辑。
@@ -226,6 +243,7 @@ FaaSFunction-as-a-Service是服务商提供一个平台、提供给用户
BaaSBackend-as-a-Service后端即服务包含了后端服务组件它是基于 API 的第三方服务,用于实现应用程序中的核心功能,包含常用的数据库、对象存储、消息队列、日志服务等等。 BaaSBackend-as-a-Service后端即服务包含了后端服务组件它是基于 API 的第三方服务,用于实现应用程序中的核心功能,包含常用的数据库、对象存储、消息队列、日志服务等等。
### 适用场景 ### 适用场景
Serverless 带来的其实是前端研发模式上的颠覆。相对以往纯前端研发的方式Serverless 屏蔽底层基础设施的复杂度,后台能力通过 FaaS 平台化,我们不再需要关注运维、部署的细节,开发难度得到了简化,前端开发群体的边界就得以拓宽,能够参与到业务逻辑的开发当中,更加贴近和理解业务,做更有价值的输出。 Serverless 带来的其实是前端研发模式上的颠覆。相对以往纯前端研发的方式Serverless 屏蔽底层基础设施的复杂度,后台能力通过 FaaS 平台化,我们不再需要关注运维、部署的细节,开发难度得到了简化,前端开发群体的边界就得以拓宽,能够参与到业务逻辑的开发当中,更加贴近和理解业务,做更有价值的输出。
- 场景 1: 负载有波峰波谷 - 场景 1: 负载有波峰波谷
@@ -271,6 +289,7 @@ Serverless 带来的其实是前端研发模式上的颠覆。相对以往纯前
## 理论结束 现在进入实践教学 ## 理论结束 现在进入实践教学
## uniapp 实战 ## uniapp 实战
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、Web响应式、以及各种小程序微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、Web响应式、以及各种小程序微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
开发者按 uni-app 规范编写代码,由编译器将开发者的代码编译生成每个平台支持的特有代码: 开发者按 uni-app 规范编写代码,由编译器将开发者的代码编译生成每个平台支持的特有代码:
@@ -288,6 +307,7 @@ uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编
3. 设计稿转代码([https://ide.code.fun/projects/619b7f3804575d001169ac66/pages/6442c187b98f5d001164a6a4](https://ide.code.fun/projects/619b7f3804575d001169ac66/pages/6442c187b98f5d001164a6a4) 3. 设计稿转代码([https://ide.code.fun/projects/619b7f3804575d001169ac66/pages/6442c187b98f5d001164a6a4](https://ide.code.fun/projects/619b7f3804575d001169ac66/pages/6442c187b98f5d001164a6a4)
## vitesse-lite-py 实战 ## vitesse-lite-py 实战
[https://github.com/MarleneJiang/vitesse-lite-py](https://github.com/MarleneJiang/vitesse-lite-py) [https://github.com/MarleneJiang/vitesse-lite-py](https://github.com/MarleneJiang/vitesse-lite-py)
1. 域间通信 1. 域间通信
@@ -300,10 +320,8 @@ uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编
![](https://cdn.xyxsw.site/df77f01037fc4ceb8d4aa8f06168fc95~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.gif) ![](https://cdn.xyxsw.site/df77f01037fc4ceb8d4aa8f06168fc95~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.gif)
## 参考作业 ## 参考作业
尝试使用某种跨端框架和云函数,实现一个查看课表应用,形式不限。推荐使用 hdu-lis 包拿到数据。 尝试使用某种跨端框架和云函数,实现一个查看课表应用,形式不限。推荐使用 hdu-lis 包拿到数据。
![](https://cdn.xyxsw.site/Snipaste_2023-04-22_18-57-44.png) ![](https://cdn.xyxsw.site/Snipaste_2023-04-22_18-57-44.png)

View File

@@ -16,7 +16,7 @@ Hello~这里是杭电助手技术部后端,无论基础如何,您都可以
> 在学习初期,视频可以帮助你快速理解并踏入大门,但在学习的后期,文档&博客才拥有第一手资料和最新动态 (视频就像你的教科书,更新的脚步永远跟不上技术)。<br/>在任务初期我们将给出对应的视频资料,在后期我们只给出图文资料。<br/>👏 当然,这不是强制要求:学的舒服是原则 > 在学习初期,视频可以帮助你快速理解并踏入大门,但在学习的后期,文档&博客才拥有第一手资料和最新动态 (视频就像你的教科书,更新的脚步永远跟不上技术)。<br/>在任务初期我们将给出对应的视频资料,在后期我们只给出图文资料。<br/>👏 当然,这不是强制要求:学的舒服是原则
# 👋 初识 Go 语言 (Day 1) ## 👋 初识 Go 语言 (Day 1)
> Go又称 Golang是 Google 开发的一种静态,强类型、编译型、并发型的编程语言。其于 2009 年 11 月正式发布成为开源代码项目。Go 的语法接近 C 语言,但其支持垃圾回收功能,开发效率远高于 C 语言。而其对海量并发的支持,以及在运行效率,低内存消耗方面的优异表现,也有人称其为互联网时代的 C 语言。 > Go又称 Golang是 Google 开发的一种静态,强类型、编译型、并发型的编程语言。其于 2009 年 11 月正式发布成为开源代码项目。Go 的语法接近 C 语言,但其支持垃圾回收功能,开发效率远高于 C 语言。而其对海量并发的支持,以及在运行效率,低内存消耗方面的优异表现,也有人称其为互联网时代的 C 语言。
@@ -26,20 +26,20 @@ Hello~这里是杭电助手技术部后端,无论基础如何,您都可以
这只吉祥物囊袋鼠的英文学名为 **Gopher**,每位热爱 Golang 的开发者都会自称 **Gopher** (就像 jvaver 一样 (x),而它的造型出于创始人之一 Rob Pike 的妻子之手。 这只吉祥物囊袋鼠的英文学名为 **Gopher**,每位热爱 Golang 的开发者都会自称 **Gopher** (就像 jvaver 一样 (x),而它的造型出于创始人之一 Rob Pike 的妻子之手。
#### 视频资料(**P2-P3**) ### 视频资料 (**P2-P3**)
<Bilibili bvid='BV1zR4y1t7Wj'/> <Bilibili bvid='BV1zR4y1t7Wj'/>
#### 文字资料: ### 文字资料:
- Golang 官网(非常好记: go.dev(eloper)) - Golang 官网 (非常好记go.dev(eloper))
https://go.dev/ <https://go.dev/>
- 一些第三方的前景概览 - 一些第三方的前景概览
https://www.topgoer.com/ <https://www.topgoer.com/>
#### 补充资料: ### 补充资料:
- [我使用 Golang 两年后的总结:优点和令人讨厌的怪癖](https://www.infoq.cn/article/ydmrvvr1ijaaih3eh5fw) - 比较客观的开发体验 - [我使用 Golang 两年后的总结:优点和令人讨厌的怪癖](https://www.infoq.cn/article/ydmrvvr1ijaaih3eh5fw) - 比较客观的开发体验
- [许式伟:我与 Go 语言的这十年](https://cloud.tencent.com/developer/article/1043859) - 七牛云 CEO、前 WPS 首席架构师、Go 语言布道师 - [许式伟:我与 Go 语言的这十年](https://cloud.tencent.com/developer/article/1043859) - 七牛云 CEO、前 WPS 首席架构师、Go 语言布道师
@@ -48,7 +48,7 @@ Hello~这里是杭电助手技术部后端,无论基础如何,您都可以
对比两篇博客,可以清晰地感受到 Golang 的发展之快:曾经还在娘胎里的 Golang现在已经在云原生、微服务、CLI 程序、DevOps、区块链等领域大杀四方。 对比两篇博客,可以清晰地感受到 Golang 的发展之快:曾经还在娘胎里的 Golang现在已经在云原生、微服务、CLI 程序、DevOps、区块链等领域大杀四方。
# 😥 Golang 环境搭建 (Day1 - 2) ## 😥 Golang 环境搭建 (Day1 - 2)
Golang 是一门年轻的语言 (相比 Java & JavaScript),它没有那么多的历史包袱,所以环境搭建在一众语言中可以算得上十分容易。同时 Golang 自带了丰富的工具链,许多 Gopher 的整个职业生涯中可能都不需要用到官方工具链以外的相关工具。 Golang 是一门年轻的语言 (相比 Java & JavaScript),它没有那么多的历史包袱,所以环境搭建在一众语言中可以算得上十分容易。同时 Golang 自带了丰富的工具链,许多 Gopher 的整个职业生涯中可能都不需要用到官方工具链以外的相关工具。
@@ -62,11 +62,11 @@ Golang 是一门年轻的语言(相比 Java & JavaScript),它没有那么多
首先是万能的 VSCode 首先是万能的 VSCode
https://code.visualstudio.com/ <https://code.visualstudio.com/>
还有智能的 GoLand 还有智能的 GoLand
https://www.jetbrains.com/go/ <https://www.jetbrains.com/go/>
喜欢折腾的同学可以选择 VSCode 作为自己的开发工具,如果想能够马上上手学习的同学,可以使用 GoLand 作为自己的开发工具 喜欢折腾的同学可以选择 VSCode 作为自己的开发工具,如果想能够马上上手学习的同学,可以使用 GoLand 作为自己的开发工具
@@ -74,28 +74,28 @@ https://www.jetbrains.com/go/
GoLand 可以使用教育邮箱学生认证白嫖噢~👀 GoLand 可以使用教育邮箱学生认证白嫖噢~👀
::: :::
#### 视频资料(**P4-P6**) ### 视频资料 (**P4-P6**)
<Bilibili bvid='BV1zR4y1t7Wj'/> <Bilibili bvid='BV1zR4y1t7Wj'/>
#### 文字资料: ### 文字资料:
- VSCode 的爹亲自教你装 Golang 环境 - VSCode 的爹亲自教你装 Golang 环境
https://learn.microsoft.com/zh-cn/azure/developer/go/configure-visual-studio-code <https://learn.microsoft.com/zh-cn/azure/developer/go/configure-visual-studio-code>
- 使用 GoLand 搭建 - 使用 GoLand 搭建
https://polarisxu.studygolang.com/posts/go/2022-dev-env/ <https://polarisxu.studygolang.com/posts/go/2022-dev-env/>
#### 补充资料 ### 补充资料
> 这些文章只是帮助你理解的更透彻,看不懂完全没关系。甚至你完全可以跳过他们,在任务结束后再来看看,或许你会有更多收获。 > 这些文章只是帮助你理解的更透彻,看不懂完全没关系。甚至你完全可以跳过他们,在任务结束后再来看看,或许你会有更多收获。
- Golang 依赖管理的前世今生:[一文搞懂 Go Modules 前世今生及入门使用 - 掘金](https://juejin.cn/post/6844904166310019086) - Golang 依赖管理的前世今生:[一文搞懂 Go Modules 前世今生及入门使用 - 掘金](https://juejin.cn/post/6844904166310019086)
- IDEA 系列学生认证教程 (用 GoLand 必看)[学生邮箱白嫖 JetBrains 全家桶——保姆级教程](https://zhuanlan.zhihu.com/p/136497468) - IDEA 系列学生认证教程 (用 GoLand 必看)[学生邮箱白嫖 JetBrains 全家桶——保姆级教程](https://zhuanlan.zhihu.com/p/136497468)
# 😕 Golang 基础语法的学习 (Day 1-8) ## 😕 Golang 基础语法的学习 (Day 1-8)
Golang 的语法是 C/C++ 系的,在许多地方你都可以看到他们的影子,这对未来 C 的学习更有自顶向下的帮助。当然,如果你曾经用过 Java、PythonGolang 的语法你可能会不太习惯,这不会是问题~在熟悉语法后你会发现“Golang 一把梭”是真实存在的 🤓。 Golang 的语法是 C/C++ 系的,在许多地方你都可以看到他们的影子,这对未来 C 的学习更有自顶向下的帮助。当然,如果你曾经用过 Java、PythonGolang 的语法你可能会不太习惯,这不会是问题~在熟悉语法后你会发现“Golang 一把梭”是真实存在的 🤓。
@@ -103,48 +103,46 @@ Golang 的语法是 C/C++ 系的,在许多地方你都可以看到他们的影
本次任务并不需要用到反射、并发等高级特性 (学到时可选择性暂时避开),最深只需要用到结构体与方法的相关知识。 本次任务并不需要用到反射、并发等高级特性 (学到时可选择性暂时避开),最深只需要用到结构体与方法的相关知识。
#### 视频资料(P9-P56 每集视频并不长,不要被吓到了喔) ### 视频资料 (P9-P56 每集视频并不长,不要被吓到了喔)
<Bilibili bvid='BV1zR4y1t7Wj'/> <Bilibili bvid='BV1zR4y1t7Wj'/>
### 文字资料:
#### 文字资料:
- 非常推荐的 Go Tour 中文版。Go Tour 是 **Go 官方为初学者打造的渐进式教程**,你可以跟随着它的步伐一点点探索 Go 语言。Go Tour 的代码都充满着它的**设计哲学与最佳实践**,是每位 Gopher 的必经之路。同时它也是**交互式的**,左侧是教程,右侧能直接敲代码,在网页上运行。 - 非常推荐的 Go Tour 中文版。Go Tour 是 **Go 官方为初学者打造的渐进式教程**,你可以跟随着它的步伐一点点探索 Go 语言。Go Tour 的代码都充满着它的**设计哲学与最佳实践**,是每位 Gopher 的必经之路。同时它也是**交互式的**,左侧是教程,右侧能直接敲代码,在网页上运行。
https://tour.go-zh.org/welcome/1 <https://tour.go-zh.org/welcome/1>
- 短小精湛的 Golang 入门教程,是 The Little Go Book 的中文翻译 - 短小精湛的 Golang 入门教程,是 The Little Go Book 的中文翻译
https://learnku.com/docs/the-little-go-book <https://learnku.com/docs/the-little-go-book>
#### 补充资料: ### 补充资料:
- [Go by Example 中文版](https://gobyexample-cn.github.io/) - Go by Example 是对 Go 基于实践的介绍,包含一系列带有注释说明的示例程序。 - [Go by Example 中文版](https://gobyexample-cn.github.io/) - Go by Example 是对 Go 基于实践的介绍,包含一系列带有注释说明的示例程序。
- [《Go 入门指南》](https://learnku.com/docs/the-way-to-go) - 《Go 入门指南》是《The Way to Go》的中文译本本书专为 Golang 初学者量身定制。教程较老,小部分内容有点过时,但质量很高。 - [《Go 入门指南》](https://learnku.com/docs/the-way-to-go) - 《Go 入门指南》是《The Way to Go》的中文译本本书专为 Golang 初学者量身定制。教程较老,小部分内容有点过时,但质量很高。
- [《Go 语言 101》](https://gfw.go101.org/) - 《Go 101》详细描述了 Golang 部分底层原理、最佳实践、代码风格、常见错误,适合进一步深入阅读。 - [《Go 语言 101》](https://gfw.go101.org/) - 《Go 101》详细描述了 Golang 部分底层原理、最佳实践、代码风格、常见错误,适合进一步深入阅读。
- [《Go 语言圣经》](https://books.studygolang.com/gopl-zh/) - 《The Go Programming》的中文版是官方书籍。内容相当老但包含着 Golang 的设计哲学与建设初期的思考和路线。 - [《Go 语言圣经》](https://books.studygolang.com/gopl-zh/) - 《The Go Programming》的中文版是官方书籍。内容相当老但包含着 Golang 的设计哲学与建设初期的思考和路线。
# 🎯 HTTP 协议学习 (Day 9-10) ## 🎯 HTTP 协议学习 (Day 9-10)
如果你从未接触过协议二字,那 HTTP 协议将是你大学生涯最重要的协议之一,也是 Web 的基础。与其说是小任务的基础,我更想说这是对人类互联的探索。 如果你从未接触过协议二字,那 HTTP 协议将是你大学生涯最重要的协议之一,也是 Web 的基础。与其说是小任务的基础,我更想说这是对人类互联的探索。
HTTP 协议起草与演进之路十分坎坷,但每一步都举足轻重,在人类历史上画下了浓墨重彩的一笔。 HTTP 协议起草与演进之路十分坎坷,但每一步都举足轻重,在人类历史上画下了浓墨重彩的一笔。
#### 文字资料: ### 文字资料:
- 非常著名的阮一峰博客 **(他的博客可以从最早开始都过一遍,很多计算机科普可以说永不过时)** - 非常著名的阮一峰博客 **(他的博客可以从最早开始都过一遍,很多计算机科普可以说永不过时)**
https://www.ruanyifeng.com/blog/2016/08/http.html <https://www.ruanyifeng.com/blog/2016/08/http.html>
- 图解系列非常有意思,最重要的是不止于介绍协议,更为你道来其历史设计的进程。本书不必在任务期间内看完,但我相信你会爱上它的。 - 图解系列非常有意思,最重要的是不止于介绍协议,更为你道来其历史设计的进程。本书不必在任务期间内看完,但我相信你会爱上它的。
https://book.douban.com/subject/25863515/ <https://book.douban.com/subject/25863515/>
- 经典菜鸟教程,不过有点枯燥乏味。可以用于回顾和工具书查阅。 - 经典菜鸟教程,不过有点枯燥乏味。可以用于回顾和工具书查阅。
https://www.runoob.com/http/http-intro.html <https://www.runoob.com/http/http-intro.html>
#### 补充资料: #### 补充资料:
@@ -158,7 +156,7 @@ https://www.runoob.com/http/http-intro.html
> MDN 是一个不断发展的学习网络技术和网络软件的平台。MDN 的使命简单明了:提供一个更好的网络蓝图并赋能新一代开发者和内容创意者在此之上构建网络。 > MDN 是一个不断发展的学习网络技术和网络软件的平台。MDN 的使命简单明了:提供一个更好的网络蓝图并赋能新一代开发者和内容创意者在此之上构建网络。
# 🎉 回到正题:小任务 ## 🎉 回到正题:小任务
> 一些题外话:是的,任务期已经过去了约十天 (当然优秀的你可能更快~),但在我看来,小任务其实已经不再那么重要了。如果在以上小节中你曾感到兴奋、热情、探索的欲望,我诚挚地相信,你能在技术的道路上走的很远很远~ > 一些题外话:是的,任务期已经过去了约十天 (当然优秀的你可能更快~),但在我看来,小任务其实已经不再那么重要了。如果在以上小节中你曾感到兴奋、热情、探索的欲望,我诚挚地相信,你能在技术的道路上走的很远很远~
@@ -168,7 +166,7 @@ https://www.runoob.com/http/http-intro.html
<del>经过了上文详细的“喂饭”小节,下面轮到同学们自己吃饭了~</del> <del>经过了上文详细的“喂饭”小节,下面轮到同学们自己吃饭了~</del>
#### 系统概述 ### 系统概述
- 使用 Gin 框架设计登录系统的接口与整体结构。 - 使用 Gin 框架设计登录系统的接口与整体结构。
- 至少设计 `Login` `GetUser` `Logout` 三个接口,对 `GetUser` 接口鉴权。 - 至少设计 `Login` `GetUser` `Logout` 三个接口,对 `GetUser` 接口鉴权。

View File

@@ -14,9 +14,9 @@
- 第三方库集合 (你可以在其中尝试找到你需要的东西) - 第三方库集合 (你可以在其中尝试找到你需要的东西)
https://github.com/avelino/awesome-go <https://github.com/avelino/awesome-go>
https://github.com/jobbole/awesome-go-cn <https://github.com/jobbole/awesome-go-cn>
## 扩展接口 ## 扩展接口

View File

@@ -1,7 +1,7 @@
# 7.网络应用开发入门 # 7.网络应用开发入门
> 作者aFlyBird0 > 作者aFlyBird0
>
> 我本来写了一大堆客套话,诸如各位“恭喜各位看到这里”、“本章节多么多么有趣、干货、面向就业”。然后全部删掉,决定采用结构化的写作方式来写。 > 我本来写了一大堆客套话,诸如各位“恭喜各位看到这里”、“本章节多么多么有趣、干货、面向就业”。然后全部删掉,决定采用结构化的写作方式来写。
## 章节题目解释 ## 章节题目解释

View File

@@ -1,6 +1,6 @@
# 经济学科普 Part1 # 经济学科普 Part1
> AuthorYuelun Yu > Author: Yuelun Yu
## 前言 ## 前言
@@ -231,10 +231,9 @@
1. 当前,中国的农村老人养老金很少遭到诟病,能否通过提升他们的养老金来提高他们的生活质量呢?养老金,或者说货币流通、再分配的本质是什么? 1. 当前,中国的农村老人养老金很少遭到诟病,能否通过提升他们的养老金来提高他们的生活质量呢?养老金,或者说货币流通、再分配的本质是什么?
## 虚假的繁荣经济
# 虚假的繁荣经济 ### 生产余力与经济繁荣
## 生产余力与经济繁荣
假设甲村的人非常聪明,他们发明了一种能够全自动播种、收割小麦的机器,使得面粉的产量增加了 10%。现在甲村就有 3 个经济部门了。分别是:面粉厂、面包厂和农机厂。 假设甲村的人非常聪明,他们发明了一种能够全自动播种、收割小麦的机器,使得面粉的产量增加了 10%。现在甲村就有 3 个经济部门了。分别是:面粉厂、面包厂和农机厂。
@@ -261,7 +260,7 @@
**可惜的是,要增加多少储蓄才能让人们有足够多的消费意愿这一问题根本无法准确回答,政府部门在这一过程中总是倾向于多发行货币,因此,这种情况下通常也会带来商品价格的上涨。** **可惜的是,要增加多少储蓄才能让人们有足够多的消费意愿这一问题根本无法准确回答,政府部门在这一过程中总是倾向于多发行货币,因此,这种情况下通常也会带来商品价格的上涨。**
## 产出结构、资源分配 ### 产出结构、资源分配
在上文提到,甲村现在有了个新的经济部门,农机制造部门。 在上文提到,甲村现在有了个新的经济部门,农机制造部门。
@@ -279,7 +278,7 @@
**这一事实说明经济系统的运行规则存在其固有缺陷,并不一定可以把资源倾斜给实际提供产出的部门,相反,随着面包产量增加、政府增发货币,农机厂可能是收入提升最少的,意味着农机厂获得的资源分配会越来越少。** **这一事实说明经济系统的运行规则存在其固有缺陷,并不一定可以把资源倾斜给实际提供产出的部门,相反,随着面包产量增加、政府增发货币,农机厂可能是收入提升最少的,意味着农机厂获得的资源分配会越来越少。**
## 不可能的指数增长 ### 不可能的指数增长
我们总是用指数化的方式来描述经济的增长,总说这一期的产量较上一年增长了多少百分比。但若仔细考虑增长的来源,就能发现指数增长是不可能实现的,并且衰减通常来得非常快、衰减幅度也会非常大。 我们总是用指数化的方式来描述经济的增长,总说这一期的产量较上一年增长了多少百分比。但若仔细考虑增长的来源,就能发现指数增长是不可能实现的,并且衰减通常来得非常快、衰减幅度也会非常大。
@@ -307,7 +306,7 @@
假设农机厂依赖机床来进行农具的生产,一台机床在 1 期可以产出 1 台农具。机床是高精尖产物,每期只能生产一台。那么就有在 t 期的农机保有量=t + t-1 + t-2 + t-3 + ... + 1 = (t + t^2)/2是一个二次函数。面粉产量与 t 的关系也是一个二次函数。而当我们用指数增长与二次函数的增长速度相比较时,就会发现在早期,指数函数增长总比二次函数慢一些,而在之后,指数函数的增长速度会大幅超过二次函数。 假设农机厂依赖机床来进行农具的生产,一台机床在 1 期可以产出 1 台农具。机床是高精尖产物,每期只能生产一台。那么就有在 t 期的农机保有量=t + t-1 + t-2 + t-3 + ... + 1 = (t + t^2)/2是一个二次函数。面粉产量与 t 的关系也是一个二次函数。而当我们用指数增长与二次函数的增长速度相比较时,就会发现在早期,指数函数增长总比二次函数慢一些,而在之后,指数函数的增长速度会大幅超过二次函数。
## 经济繁荣周期 ### 经济繁荣周期
在本节的最后,来考虑一下竞技是如何变得繁荣的。 在本节的最后,来考虑一下竞技是如何变得繁荣的。
@@ -327,7 +326,7 @@
从上述讨论中不难发现,经济系统实际上并没有自限性地防止价格过度上涨的机制,而通常在经济繁荣周期结束后,也没有让价格对应下调的机制。这意味着在经济繁荣周期结束后,经济体通常会进入滞涨周期。在滞涨周期中,资产的价格长期维持高位,人们通过发展生产力、再分配等手段来促进价格体系回归正常,因此,滞涨周期也可以理解为价格体系的修复周期。 从上述讨论中不难发现,经济系统实际上并没有自限性地防止价格过度上涨的机制,而通常在经济繁荣周期结束后,也没有让价格对应下调的机制。这意味着在经济繁荣周期结束后,经济体通常会进入滞涨周期。在滞涨周期中,资产的价格长期维持高位,人们通过发展生产力、再分配等手段来促进价格体系回归正常,因此,滞涨周期也可以理解为价格体系的修复周期。
## 下一篇&本篇总结 ### 下一篇&本篇总结
在本篇中,我们简单建立了一个经济系统的模型。并利用这个模型,演示了现实生活中发生的各种事件和其对系统的影响。 在本篇中,我们简单建立了一个经济系统的模型。并利用这个模型,演示了现实生活中发生的各种事件和其对系统的影响。

View File

@@ -20,7 +20,7 @@ IP 是一个由小数点分割成四段的序列,每段数字的取值为 $[0,
所有在互联网上的计算机都会被分配到一个 IP用于标识自己。 所有在互联网上的计算机都会被分配到一个 IP用于标识自己。
现在先抛开具体的实现方式不提,给你一个既定的事实: 互联网能够将数据从一个IP地址传递到另一个任意的IP地址。 现在先抛开具体的实现方式不提,给你一个既定的事实互联网能够将数据从一个 IP 地址传递到另一个任意的 IP 地址。
现在你已经知道了怎样使用互联网传送数据,先不讨论怎么说,**理论上说只需要知道对方的 IP给他发数据就可以了**。 现在你已经知道了怎样使用互联网传送数据,先不讨论怎么说,**理论上说只需要知道对方的 IP给他发数据就可以了**。
@@ -88,7 +88,7 @@ DNS(Domain Name System) 域名系统
A 记录是目前互联网上最主要的记录类型,他的记录值是一个 IPv4 地址(就是上述的 IPv4 是版本号)。 A 记录是目前互联网上最主要的记录类型,他的记录值是一个 IPv4 地址(就是上述的 IPv4 是版本号)。
举个例子,域名`aaa.bbb.cn`做 A 解析到 `1.1.1.1`,我们需要设置: 举个例子,域名`aaa.bbb.cn`做 A 解析到 `1.1.1.1`,我们需要设置
- 主机记录 aaa - 主机记录 aaa
- 记录类型 A - 记录类型 A
@@ -99,7 +99,6 @@ A 记录是目前互联网上最主要的记录类型,他的记录值是一个
## HTTP ## HTTP
HTTP 协议用于 WEB 服务器,一般多见于浏览器获取网页内容。浏览器会用 HTTP 协议发送 HTTP 请求到服务器,服务器处理 HTTP 请求并返回 HTTP 响应。很多的 APP小程序和电脑上的应用程序都在广泛地使用 HTTP HTTP 协议用于 WEB 服务器,一般多见于浏览器获取网页内容。浏览器会用 HTTP 协议发送 HTTP 请求到服务器,服务器处理 HTTP 请求并返回 HTTP 响应。很多的 APP小程序和电脑上的应用程序都在广泛地使用 HTTP
HTTP 协议有不少版本,现在互联网上最流行的是 HTTP/1.1 版本,浏览器一般最高支持 HTTP/2.0,最新版本是 HTTP/3.0,下面只讨论 HTTP/1.1 HTTP 协议有不少版本,现在互联网上最流行的是 HTTP/1.1 版本,浏览器一般最高支持 HTTP/2.0,最新版本是 HTTP/3.0,下面只讨论 HTTP/1.1
@@ -177,7 +176,7 @@ start_ts=1690809334&mid=74145050&aid=998480789&cid=1195467370&type=3&sub_type=0&
一行一个请求头,不同的请求头有不用的用途,广泛认可的请求头有 一行一个请求头,不同的请求头有不用的用途,广泛认可的请求头有
- Host 主机名,也就是域名如果使用IP访问这里会写成IP - Host 主机名也就是域名,如果使用 IP 访问,这里会写成 IP
- Content-Type 表示 Payload 的内容格式 - Content-Type 表示 Payload 的内容格式
- User-Agent 发 HTTP 包的人用的浏览器类型和版本号 - User-Agent 发 HTTP 包的人用的浏览器类型和版本号
- Cookie 用于存储认证信息等,由服务器设置,浏览器每次请求都会携带 - Cookie 用于存储认证信息等,由服务器设置,浏览器每次请求都会携带

View File

@@ -30,11 +30,12 @@ IP 协议是网络层最主要的协议,几乎所有的上层数据包都需
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Example Internet Datagram Header Example Internet Datagram Header
</pre> </pre>
## 版本 ## 版本
第一个字段是 IP 协议版本号,用于标识 IPv4 和 IPv6 两个版本,这两个版本的报文格式是不同的。上图展示的是 IPv4 的报文格式 第一个字段是 IP 协议版本号,用于标识 IPv4 和 IPv6 两个版本,这两个版本的报文格式是不同的。上图展示的是 IPv4 的报文格式
## IHLInternet Header Length ## IHL (Internet Header Length)
就是 IP 协议的头部部分的长度,单位是 4byte由于 IP 头一般长度为 20byte所以这个值一般为 5。如果存在 Options 字段,这个值会相应增加。 就是 IP 协议的头部部分的长度,单位是 4byte由于 IP 头一般长度为 20byte所以这个值一般为 5。如果存在 Options 字段,这个值会相应增加。
@@ -164,7 +165,6 @@ PS C:\Users\bs> TRACERT.EXE bilibili.com
注意,由于 TTL 在每次转发中都会改变,所以实际上,每次转发都会重新计算校验和。 注意,由于 TTL 在每次转发中都会改变,所以实际上,每次转发都会重新计算校验和。
## IP 地址 ## IP 地址
正如上图的 `Source Address``Destination Address` 字段所展示的一样,一个 IP 地址占用 4 byte 的存储空间。在书面的写法上,我们用 `.` 将每一个 byte 分割开,例如 `1.1.1.1` 这样更便于人类处理和分类。 正如上图的 `Source Address``Destination Address` 字段所展示的一样,一个 IP 地址占用 4 byte 的存储空间。在书面的写法上,我们用 `.` 将每一个 byte 分割开,例如 `1.1.1.1` 这样更便于人类处理和分类。
@@ -177,7 +177,6 @@ PS C:\Users\bs> TRACERT.EXE bilibili.com
可选参数Options比较繁琐一般没啥用有兴趣的可以看看下面参考资料中 RFC 791 对此的描述。 可选参数Options比较繁琐一般没啥用有兴趣的可以看看下面参考资料中 RFC 791 对此的描述。
## 参考资料 ## 参考资料
- [RFC 791 - Internet Protocol (ietf.org)](https://datatracker.ietf.org/doc/html/rfc791) - [RFC 791 - Internet Protocol (ietf.org)](https://datatracker.ietf.org/doc/html/rfc791)

View File

@@ -78,23 +78,23 @@ baimeow@server:~$ ip addr
| 地址块 ([CIDR](https://zh.wikipedia.org/wiki/无类别域间路由)) | 范围 | 地址数 | 效用域 | 用途 | | 地址块 ([CIDR](https://zh.wikipedia.org/wiki/无类别域间路由)) | 范围 | 地址数 | 效用域 | 用途 |
| :----------------------------------------------------------: | :---------------------------: | :---------: | :------: | :----------------------------------------------------------: | | :----------------------------------------------------------: | :---------------------------: | :---------: | :------: | :----------------------------------------------------------: |
| 0.0.0.0/8 | 0.0.0.0 0.255.255.255 | 16,777,216 | 软件 | 用于广播信息到当前主机。[[1\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-1) | | 0.0.0.0/8 | 0.0.0.0 0.255.255.255 | 16,777,216 | 软件 | 用于广播信息到当前主机。[[1]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-1) |
| 10.0.0.0/8 | 10.0.0.0 10.255.255.255 | 16,777,216 | 专用网络 | 用于[专用网络](https://zh.wikipedia.org/wiki/专用网络)中的本地通信。[[2\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc1918-2) | | 10.0.0.0/8 | 10.0.0.0 10.255.255.255 | 16,777,216 | 专用网络 | 用于[专用网络](https://zh.wikipedia.org/wiki/专用网络)中的本地通信。[[2]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc1918-2) |
| 100.64.0.0/10 | 100.64.0.0 100.127.255.255 | 4,194,304 | 专用网络 | 用于在[电信级NAT](https://zh.wikipedia.org/wiki/电信级NAT)环境中服务提供商与其用户通信。[[3\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-3) | | 100.64.0.0/10 | 100.64.0.0 100.127.255.255 | 4,194,304 | 专用网络 | 用于在[电信级 NAT](https://zh.wikipedia.org/wiki/电信级NAT)环境中服务提供商与其用户通信。[[3]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-3) |
| 127.0.0.0/8 | 127.0.0.0 127.255.255.255 | 16,777,216 | 主机 | 用于到本地主机的[环回地址](https://zh.wikipedia.org/wiki/IPv4#环回地址Loopback_Address)。[[4\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-4) | | 127.0.0.0/8 | 127.0.0.0 127.255.255.255 | 16,777,216 | 主机 | 用于到本地主机的[环回地址](https://zh.wikipedia.org/wiki/IPv4#环回地址Loopback_Address)。[[4]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-4) |
| 169.254.0.0/16 | 169.254.0.0 169.254.255.255 | 65,536 | 链路 | 用于单链路的两个主机之间的[链路本地地址](https://zh.wikipedia.org/wiki/链路本地地址)而没有另外指定IP地址例如通常从[DHCP](https://zh.wikipedia.org/wiki/动态主机设置协议)服务器所检索到的IP地址。[[5\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-5) | | 169.254.0.0/16 | 169.254.0.0 169.254.255.255 | 65,536 | 链路 | 用于单链路的两个主机之间的[链路本地地址](https://zh.wikipedia.org/wiki/链路本地地址),而没有另外指定 IP 地址,例如通常从[DHCP](https://zh.wikipedia.org/wiki/动态主机设置协议)服务器所检索到的 IP 地址。[[5]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-5) |
| 172.16.0.0/12 | 172.16.0.0 172.31.255.255 | 1,048,576 | 专用网络 | 用于[专用网络](https://zh.wikipedia.org/wiki/专用网络)中的本地通信。[[2\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc1918-2) | | 172.16.0.0/12 | 172.16.0.0 172.31.255.255 | 1,048,576 | 专用网络 | 用于[专用网络](https://zh.wikipedia.org/wiki/专用网络)中的本地通信。[[2]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc1918-2) |
| 192.0.0.0/24 | 192.0.0.0 192.0.0.255 | 256 | 专用网络 | 用于IANAIPv4特殊用途地址表。[[6\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc5736-6) | | 192.0.0.0/24 | 192.0.0.0 192.0.0.255 | 256 | 专用网络 | 用于 IANAIPv4 特殊用途地址表。[[6]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc5736-6) |
| 192.0.2.0/24 | 192.0.2.0 192.0.2.255 | 256 | 文档 | 分配为用于文档和示例中的“TEST-NET”测试网它不应该被公开使用。[[7\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc5737-7) | | 192.0.2.0/24 | 192.0.2.0 192.0.2.255 | 256 | 文档 | 分配为用于文档和示例中的“TEST-NET”测试网它不应该被公开使用。[[7]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc5737-7) |
| 192.88.99.0/24 | 192.88.99.0 192.88.99.255 | 256 | 互联网 | 用于[6to4](https://zh.wikipedia.org/wiki/6to4)[任播](https://zh.wikipedia.org/wiki/任播)中继。[[8\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-8)(已废弃[[9\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc7526-9) | | 192.88.99.0/24 | 192.88.99.0 192.88.99.255 | 256 | 互联网 | 用于[6to4](https://zh.wikipedia.org/wiki/6to4)[任播](https://zh.wikipedia.org/wiki/任播)中继。[[8]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-8)(已废弃[[9]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc7526-9) |
| 192.168.0.0/16 | 192.168.0.0 192.168.255.255 | 65,536 | 专用网络 | 用于[专用网络](https://zh.wikipedia.org/wiki/专用网络)中的本地通信。[[2\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc1918-2) | | 192.168.0.0/16 | 192.168.0.0 192.168.255.255 | 65,536 | 专用网络 | 用于[专用网络](https://zh.wikipedia.org/wiki/专用网络)中的本地通信。[[2]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc1918-2) |
| 198.18.0.0/15 | 198.18.0.0 198.19.255.255 | 131,072 | 专用网络 | 用于测试两个不同的子网的网间通信。[[10\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-10) | | 198.18.0.0/15 | 198.18.0.0 198.19.255.255 | 131,072 | 专用网络 | 用于测试两个不同的子网的网间通信。[[10]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-10) |
| 198.51.100.0/24 | 198.51.100.0 198.51.100.255 | 256 | 文档 | 分配为用于文档和示例中的“TEST-NET-2”测试-网-2它不应该被公开使用。[[7\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc5737-7) | | 198.51.100.0/24 | 198.51.100.0 198.51.100.255 | 256 | 文档 | 分配为用于文档和示例中的“TEST-NET-2”测试 - 网 -2它不应该被公开使用。[[7]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc5737-7) |
| 203.0.113.0/24 | 203.0.113.0 203.0.113.255 | 256 | 文档 | 分配为用于文档和示例中的“TEST-NET-3”测试-网-3它不应该被公开使用。[[7\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc5737-7) | | 203.0.113.0/24 | 203.0.113.0 203.0.113.255 | 256 | 文档 | 分配为用于文档和示例中的“TEST-NET-3”测试 - 网 -3它不应该被公开使用。[[7]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc5737-7) |
| 224.0.0.0/4 | 224.0.0.0 239.255.255.255 | 268,435,456 | 互联网 | 用于多播。[[11\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc1112-11) | | 224.0.0.0/4 | 224.0.0.0 239.255.255.255 | 268,435,456 | 互联网 | 用于多播。[[11]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc1112-11) |
| 233.252.0.0/24 | 233.252.0.0 - 233.252.0.255 | 256 | 文档 | 分配为用于文档和示例中的“MCAST-TEST-NET”它不应该被公开使用 | | 233.252.0.0/24 | 233.252.0.0 - 233.252.0.255 | 256 | 文档 | 分配为用于文档和示例中的“MCAST-TEST-NET”它不应该被公开使用 |
| 240.0.0.0/4 | 240.0.0.0 255.255.255.254 | 268,435,455 | 互联网 | 用于将来使用。[[12\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc6890-12) | | 240.0.0.0/4 | 240.0.0.0 255.255.255.254 | 268,435,455 | 互联网 | 用于将来使用。[[12]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc6890-12) |
| 255.255.255.255/32 | 255.255.255.255 | 1 | 子网 | 用于受限广播地址。[[12\]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc6890-12) | | 255.255.255.255/32 | 255.255.255.255 | 1 | 子网 | 用于受限广播地址。[[12]](https://zh.wikipedia.org/wiki/保留IP地址#cite_note-rfc6890-12) |
如果需要搭建自己的比如说家庭网络,寝室网络,一般会选择 如果需要搭建自己的比如说家庭网络,寝室网络,一般会选择

View File

@@ -15,4 +15,3 @@
在链路层我们已经实现了两个直接相连的设备之间的数据收发,也可以在总线类型的网络上完成数据手法,更成熟一点,可以借助交换机来构建一个具有一定规模的中心化网络。 在链路层我们已经实现了两个直接相连的设备之间的数据收发,也可以在总线类型的网络上完成数据手法,更成熟一点,可以借助交换机来构建一个具有一定规模的中心化网络。
但中心化是有极限的这必然无法承载这个整个互联网因此我们需要再往上一层定义一个新的概念IP 地址,并完成实现数据包的转发操作,将互联网推向去中心化。 但中心化是有极限的这必然无法承载这个整个互联网因此我们需要再往上一层定义一个新的概念IP 地址,并完成实现数据包的转发操作,将互联网推向去中心化。

View File

@@ -52,7 +52,7 @@
很多人不理解,不理解也罢。 很多人不理解,不理解也罢。
互联网不是一个很cool的东西吗? 互联网不是一个很 cool 的东西吗
这是一个遍布全球由无数独立个体一个一个连接起来而形成的一张网,这难道不酷吗? 这是一个遍布全球由无数独立个体一个一个连接起来而形成的一张网,这难道不酷吗?
@@ -63,6 +63,7 @@
有这样的一个群体,我们普遍称呼他们为“路由佬”,他们便是这样一群,沉迷于配网的一群人。 有这样的一个群体,我们普遍称呼他们为“路由佬”,他们便是这样一群,沉迷于配网的一群人。
本章节存在的意义和前面的章节不同,并非是教学,而是劝人快去配网,非常重实践,上面讨论的都是简化模型,理想模型,学习模型,再往下就是实验性网络和真实互联网了,这其实已经脱离了该讲义的宗旨了,所以只会概述概述概述。 本章节存在的意义和前面的章节不同,并非是教学,而是劝人快去配网,非常重实践,上面讨论的都是简化模型,理想模型,学习模型,再往下就是实验性网络和真实互联网了,这其实已经脱离了该讲义的宗旨了,所以只会概述概述概述。
## 画个饼先 ## 画个饼先
```mermaid ```mermaid