前端语言串讲笔记| 青训营

弓长856
40 阅读5分钟

Day1 前端语言串讲笔记

一、前端语言的基本能力

  • HTML：是用来描述文档结构和语义的标记语言。通过使用一系列的标签和属性，可以将页面划分成不同的区域，并为这些区域添加文本、图片、链接等内容**。**HTML 是网页中的骨架，可以方便地搭建出网页基础结构。（相当于骨骼）

  • CSS：是用于设置网页样式的样式表语言。通过定义各种样式规则，如字体、颜色、布局等，可以使得网页达到某种美观而统一的设计效果。CSS 让开发者专注于网页的视觉效果和交互效果，提高了用户体验。（皮囊）

  • Javascript：是一门动态的脚本语言，具有强大的功能和丰富的 API 库。JavaScript 可以为网页添加响应式的交互性，比如与用户进行交互、获取并修改页面元素的内容、处理用户提交的表单数据、与后端进行数据交互等。在现代网页中，JavaScript 已经成为不可或缺的语言。（肌肉）

    image.png

1.HTML

HTML是一种标记语言，用于创建网页的结构和内容。它使用一系列标记来指示浏览器如何显示页面上的内容。通过将标签和属性放置在一个文档中，可以定义文本、图像、链接、多媒体和其他页面元素的格式和位置。

HTML还支持多种新颖的元素和API，使开发人员能够创建更丰富、交互性更强的Web应用程序。

2.CSS

CSS是一种用于网页样式设计的语言，代表层叠样式表（Cascading Style Sheets）。通过定义各种样式规则和属性，可以控制网页上所有元素的外观、布局和交互效果。

CSS选择器

包括着元素选择器、类选择器、ID选择器、后代选择器、兄弟选择器、伪选择器

3.Javascript

借鉴了C语言的基本语法 借鉴了Java的数据类型和内存管理 将函数提升到第一等公民的位置 使用原型链为继承机制

基本类型有:

`String`，`Number`，`Boolean`，`Null|Underfined`，`Symbol`

4.浏览器V8的运行机制

解析：V8 首先将 JavaScript 代码解析成抽象语法树（AST）。

编译：接下来，V8通过 Ignition 将 AST 编译成字节码。字节码可以在虚拟机中运行。

执行：V8 执行字节码，并根据需要进行优化。TurboFan 是 V8 引擎中用于优化代码执行的编译器之一。它负责将 JavaScript 字节码编译成高效的机器码，以提高代码的执行效率。

垃圾回收：V8 使用垃圾回收机制来自动管理内存。它会定期检查内存中的对象，回收那些不再被引用的对象所占用的内存。

image.png

二、前端语言的协作配合

1.CSS in HTML

在 HTML 中使用 CSS 有三种方法：内联样式、内部样式表和外部样式表

2.Javascript in HTML

在 HTML 中使用 JavaScript 有两种方法：内部脚本和外部脚本

3.事件机制

事件捕捉：点击按钮时，click事件从document一直定位到button

事件捕获：定位到button后，click事件会被激发，并层层向外传递

4.HTML in Javascript

在 JavaScript 代码中使用字符串来表示 HTML 内容，并使用 DOM API 来动态地将这些内容添加到网页中。

5.CSS in Javascript

在 JavaScript 代码中使用 DOM API 来动态地修改 HTML 元素的样式。

三、你不知道的HTML5

image.png

image.png

1.html5

HTML5 引入了一些新的语义元素，例如 <article>、<section>、<nav> 和 <header> 等，它们使您能够更清晰地描述网页的结构和内容。

此外，HTML5 还提供了一些新的表单控件，例如日期选择器、颜色选择器、搜索框等，它们使您能够更方便地收集用户输入。

HTML5 还支持音频和视频播放，您可以使用 <audio> 和 <video> 元素来在网页中嵌入音频和视频内容，而无需依赖第三方插件。

image.png

2.html5存储

image.png

四、拓展交流

1.MVC

MVC优点： 耦合性低，重用行高，生命周期成本低，部署快，可维护性高，有利软件工程化管理

MVC缺点： MVC模型的一个缺点是它增加了系统结构和实现的复杂性。对于简单的界面，严格遵循MVC，使模型、视图与控制器分离，会增加结构的复杂性，并可能产生过多的更新操作，降低运行效率¹。此外，视图与控制器间的联系过于紧密。视图与控制器是相互分离，但确实联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用

2.MVP

优点：

模型与视图完全分离，我们可以修改视图而不影响模型

可以更高效地使用模型，因为所有的交互都发生在一个地方——Presenter内部

我们可以将一个Presenter用于多个视图，而不需要改变Presenter的逻辑。这个特性非常的有用，因为视图的变化总是比模型的变化频繁。

缺点：

MVP模型的一个明显缺点是它增加了代码的复杂度，特别是针对小型Android应用的开发，会使程序冗余。此外，由于对视图的渲染放在了Presenter中，所以视图和Presenter的交互会过于频繁。如果Presenter过多地渲染了视图，往往会使得它与特定的视图的联系过于紧密。一旦视图需要变更，那么Presenter也需要变更。

avatar
文章
阅读
粉丝