前端语言串讲 | 青训营

Emma_Y719
89 阅读2分钟

html css javascript简介

三者关系

image.png

  • 骨架-皮囊-肌肉
  • 元素结构-样式-交互运动

html

image.png

  • 标签，也可以看作是元素

CSS

image.png

  • 选择器 + 样式声明

js

image.png

  • symbol:
    • 独一无二且不可变的数据类型
    • 作用:
      • 创建一个唯一的标识符
      • 在对象中创建隐藏属性或私有属性 
        const mySymbol = Symbol('mySymbol');
const obj = {
  [mySymbol]: 'Hidden property value',
  regularProperty: 'Visible property value',
};

console.log(obj.regularProperty); // 输出：'Visible property value'
console.log(obj[mySymbol]); // 输出：'Hidden property value'

// 使用 for...in 遍历不会包含 Symbol 键名
for (let key in obj) {
  console.log(key); // 输出：'regularProperty'
}

浏览器

image.png

相互配合使用

CSS在html中应用

三种方式 image.png

js在html中应用

使用 <script></script> 标签

默认会阻塞渲染，async使脚本的下载变成异步，differ使脚本的执行变成异步

js定义在全局，在html中可以直接调用

DOM树

将html的元素转化成 js对象

事件机制

事件捕获：对于计算机来说，找到对应的元素

事件冒泡：对于开发者，方便做事件代理

image.png

事件循环：先执行微任务再执行宏任务

宏任务：浏览器默认情况下执行的任务

image.png

html在js中应用

JSX

css在js中应用

1.代码直接修改

image.png

2.style属性

image.png

3.css model

4.JSS

HTML

基本组成

image.png

image.png

image.png

头标签

image.png

H5语义化标签

image.png

H5

存储

image.png

image.png

indexedDB 带索引，可存储任何数据类型，异步，支持事务

基于存储的应用

PWA: 基于service worker

AMP: 对搜索引擎使用，判断是否是AMP格式的网页（使用谷歌标签声明关键内容）

image.png

web worker

传统的 JavaScript 运行在单个主线程上

web worker在浏览器中创建后台线程（Worker 线程）

以便在后台运行一些计算密集型的任务，而不会影响主线程

image.png

service worker

拦截请求，实现资源缓存，离线访问，推送通知

image.png

web socket

客户端和服务端双向通信

类似TCP的连接请求

image.png

shadow dom

在 HTML 文档中创建一个独立的隔离的 DOM 子树

形成一个封闭的作用域，以避免组件之间的样式和结构冲突

web component

自定义标签

image.png

SVG & cavas

image.png

MVC & MVVM & MVP

image.png

avatar
文章
阅读
粉丝