Lesson 1 前端语言串讲 学习笔记 | 青训营

129 阅读1分钟

Lesson 1 前端语言串讲

VideoLink: 前端语言串讲 - 掘金

CoursewareLink: 前端语言串讲 - 掘金

前端语言的基本能力

Browser

Browser 通常包含两种引擎:渲染引擎 和 JavaScript 引擎

渲染引擎的工作如下:

JavaScript 引擎的工作如下:(以 V8 为例)

前端语言的协作配合

Trending

CSS in HTML

  • Inline CSS
<p style="color: blue;"> This is a paragraph. </p>
  • Internal CSS
<head>
    <style type = text/css>
        body {background-color: blue;}
        p {color: yellow;}
    </style>
</head>
  • External CSS
<head>
    <link rel="stylesheet" type="text/css" herf="style.css">
</head>

JavaScript in HTML

JavaScript in HTML有个很重要的内容——DOM:它把页面上 HTML 转化为 Javascript对象,例如:

事件机制:

任务机制:

MICROTASK First

HTML in Javascript

通过 Javascript 修改 HTML

CSS in Javascript

通过 Javascript 修改 CSS

HTML

HTML DTD

HTML 并非图灵完备,它只是一门标记语言,基本语法如下

HTML 全部标签分类

HTML head Tag

HTML body Tag

HTML ARIA

了解 ARIA 并非只是为了供盲人阅读,它可以为我们设计 UI 系统提供指导意义。

HTML5 语义化标签

HTML5 表单增强

HTML 存储

HTML IndexedDB

HTML5 PWA & AWP

HTML5 Audio

HTML5 Video

HTML5 Binary

HTML5 API

HTML5 Worker

HTML5 Web Socket

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080')
// Connection opened
socket.addEventListener('open',(event) => {
    socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', (event) => {
    console.log('Message from server ',event.data);
});

HTML5 Shadow DOM

HTML5 Web Component

自定义标签的能力

HTML5 SVG & Canvas

WebGL & WebGPU

HTML5 WebAssembly

WebAssembly(WSAM) 是一种新的编码方式,可以直接在浏览器中运行

拓展交流

Web 的风靡

大前端

MVC & MVVM & MVP

  • MVC MVC

  • MVVM

  • MVP

总结