前端语言串讲｜青训营

用户5781541181221
101 阅读6分钟

7.26 前端语言串讲

一.前端语言的基本能力

1.1 前端三剑客

html用于构建前端的结构，控制内容的排版形式，为网页设计提供模板结构。它是所有网页的基石。

css用于设计网页的样式，为所有的页面元素赋予特殊的形式，同时也使用各种方法使得网页变得可交互。它是网页“长什么样”、“给人什么感觉”的构造者。

javascript用于提高网页的交互性，它可以为网页赋予复杂的功能与特征，以响应网页使用者的需求。它主要由具有较强功能的编程性语言组成。

如下图所示，这三者在进行前端设计时有着相辅相成的联系。html构建了人体的骨骼，css在骨架上形成了人体的皮囊，而javascript则组成了人的肌肉，使人得以进行多种精密的活动。

image-20230726150902206转存失败，建议直接上传图片文件

html的本质是由标签构成的文本文件，通过网站容器可以实现从文本到具体页面效果的转换。css的格式是selector后面跟随一个包含多个declaration的大括号，每个declaration是一个键值对，实现一种具体效果。为了实现css的效果，selector的选择十分重要，每种selector都对应一种特殊的选择方法。下图是css的一些语法组成。

image-20230726152010169转存失败，建议直接上传图片文件

javascript借鉴C语言的基本语法，java语言的数据类型和内存管理，借鉴scheme语言，将函数提升到一等公民的地位。通用作用包括校验数据输入、交互控制、平台无关性、处理数据和时间等等。现代的javascript新增了Let/Const、箭头函数、字符串模板、默认参数等等。javascript共有七种基本类型，基本语法如下：

image-20230726153135088转存失败，建议直接上传图片文件

function是一种特殊的字符，在段落中可以被整体地使用。使用function只需要两个部分：声明或定义一个function，然后去使用或运行它。定义方法如下：

image-20230726153429250转存失败，建议直接上传图片文件

1.2 浏览器中的作用方式

浏览器一般包含两种引擎：渲染引擎和javascript引擎。渲染引擎主要用于加载页面，读取html内容并构建DOM树，接着获取css资源并构建cssom树，再将两者的特性相结合，最终计算出网页的样式和排版并推断其中哪些可以视作一整个图层，将页面绘制出来。javascript需要使用解释器才能够运行，一个优秀的解释器除了需要能够解决复杂的语法，还要拥有高度优化的性能。以V8为例，其工作流程如下图：

image-20230726154141351转存失败，建议直接上传图片文件

二.前端语言的协作配合

2.1 css在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" href="style.css">        
</head>

2.2 javascript在HTML中的应用

<button onclick="showContent()">Show hidden content</button>

<template>
    <h2>Flower</h2>
    <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent(){
        var temp = document.getElementsByTagName("template")[0];
        var clon = temp.content.cloneNode(true);
        document.body.appendChild(clon)
}   
</script>

<button onclick="getElementById('time').innerHTML= Date()">
    Show Date
</button>

<p id="geeks" onclick="onclick_event()">
    Click Here
</p>

DOM树是javascript中的一个重要部分。DOM的事件机制流程是一个双向过程，包括事件捕捉和事件冒泡。事件捕捉：点击按钮时，click时间从document一直定位到button;事件捕获：定位到button后，click事件会被激发，并层层向外传递。

javascript本身也包含一些事件机制。javascript是单线程的，有着exentloop的机制。javascript有一个微任务队列和一个宏任务队列，首先执行已在call stack中的宏任务，然后从微任务队列中取出微任务（如Promise）进行执行，全部完成后再从宏任务队列中取出宏任务（如script代码块）依次执行。

image-20230726162723324转存失败，建议直接上传图片文件

2.3 HTML在javascript中的应用

function renderHello(){
    var template = document.getElementById('template').innerHTML;
    var rendered = Mustache.render(template,{ name: 'Luke'});
    document.getElementById('target').innerHTML = rendered;
}

<html>
    <body onload="renderHello()">
        <div id="target">Loading...</div>
        <script id="template" type="x-tmpl-mustache">
            Hello {{ name }}!
        </script>

        <script src="https://unpkg.com/mustache@latest"></script>
        <script src="render.js"></script>
    </body>
</html>

2.4 css在javascript中的应用

css可以通过DOMAPI在js里进行应用，也可以通过jsx或者jss。

div.style.width="100px";
dic.style.cssText="width;100px;height:100px;background: palevioletred;";
dic.setAttribute("class","div2")
link.setAttribute("href","css2.css")

cssmodule用于解决全局类名冲突的问题：

image-20230726164601256转存失败，建议直接上传图片文件

三.HTML介绍

HTML是前端开发中最基础的一门语言，它不是图灵完备的，它只是一门标记语言。其基本语法分为五个部分，最核心的是标签。

image-20230726164818887转存失败，建议直接上传图片文件

3.1 标签的分类

html的标签可以分为四种主要类型：文档型、闭合型、换行型、H5新元素。文档型是html必须具备的标签类型。闭合型则分为闭合标签，如

，和空标签，如
换行型则分为块级标签，如

,

,

等等和行内标签，如。H5新元素包括语义化标签、媒体标签、表单标签和功能标签。

3.2 HTML head

image-20230726170658701转存失败，建议直接上传图片文件

3.3 HTML body

html body的标签十分繁多，可以依据不同功能分成不同的组别。

3.4 HTML ARIA

了解ARIA并非只是为了盲人阅读，它可以为我们设计UI系统提供指导意义。它可以使我们的代码更加容易被理解

<span role="checkbox" aria-checked="false" tabinbox="0" aria-labelledby="chk1-label"></span>
<label id="chk1-label">Remember my preferences</label>

3.5 HTML5

HTML5不再是单纯的纯文本标记语言，而是包括了Canvas、音视频、拖拽、Worker、svg、位置信息等多种功能的集成。

HTML5中有多种语义化标签可以使用，实现多种功能，便于开发者更好地维护网站结构。它也同时扩展了表单能力，可以实现多种形式的表单。HTML5中有三种存储方法：Cookies（4KB)、Local Storage(5-25MB)和Session Storage(50MB)。

IndexedDB适合用于更复杂的场景，对应特殊的存储需求。

PWA基于Service Worker，AMP便于搜索引擎爬取，两者均用于提高页面的访问效率。

Audio：

const audioCtx = new (window.AudioContext || window.webkitAudioContext);
const osci = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osci.connect(gain)
gain.connect(audioCtx.destination);
osci.start();

Video:

const mediaSource = new MediaSource();
const video = document.createElement('video');
video.src = mediaSource;
mediaSource.addSourceBuffer(...);
video.play();

Audio和Video可以定制化Media能力。

HTML5可以使用Blob、ArrayBuffer等进行二进制支持。

Web Worker的工作流程为：1.在主线程中new一个Worker 2.在主线程中定义监听器 3.使用postMessage互传数据 4.使用terminate销毁线程

WebSocket是一种全双工通信方式，本质是TCP的连接请求：

const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('open',(event) => {
    socket.send('Hello Server!');
});

socket.addEventListener('message', (event) => {
    console.log('Message from server ', event.data);
});

Shadow DOM是一种特殊的节点类型。

avatar
文章
阅读
粉丝