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
-
MVVM
-
MVP