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

一点不会
140 阅读7分钟

笔记内容：

  • 前端语言的基本能力
  • 前端语言的协作配合
  • 你不知道的HTML(5)
  • 拓展分享

前端语言的基本能力




Create the structure

  • Controls the layout of the content
  • Provides structure for the web page design
  • The fundamental building block of any web page








Stylize the website

  • Applies style to the web page elements
  • Targets various screen sizes to make web pages responsive
  • Primarily handles the "look and feel" of a web page






Increase interactivity

  • Adds interactivity to a web page
  • Handles complex functions and features
  • Programmatic code which enhances functionality




image.png

如果把HTML比作人的骨骼，那么CSS就是人的皮肤，而Javascript就是人的肌肉。

HTML

可以用一张图来概括

image.png

CSS

基本写法：

image.png

CSS的一些选择器：

image.png CSS的伪类和伪元素写法：

  • 伪类(pseudo-classes)
a:link {color: #111}
a:hover {color: #222}
div:first-child {color: #333}
div:nth-child(3) {color: #444}
  • 伪元素(pseudo-elements)
p::first-line {color: #555}
p::first-letter {color: #666}
a::before {content : "hello world";}

JavaScript

发展历程：

image.png 特点：

  • 借鉴c语言的基本语法;
  • 借鉴Java语言的数据类型和内存管理;
  • 借鉴Scheme语言,将函数提升到"第一等公民"〈first class〉的地位;
  • 借鉴Self语言,使用基于原型(prototype)的继承机制。

image.png

基本信息：

image.png

image.png

浏览器的工作流程

image.png

前端语言的协助配合

前端的发展趋势

image.png

CSS in HTML

内联CSS(Inline css)

<p style="color:sienna; margin-left:20px"> 这是一个段落。</p>

内部CSS(lnternal css)

<head> 
<style> 
hr {color:sienna;} 
p {margin-left:20px;} 
body {background:#000fff;} 
</style> 
</head>

外部CSS(External css)

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head>

JavaSciprt in HTML

image.png JavaSciprt的使用：

// file: render.js
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}}!                                               //body中的js
</script>                                                   
<script src="https: // unpkg.com/mustache@latest"></script>  //引用指定网络url下的js文件
<script src=" render.js"></script>                           //引用本地的js文件
</body>
</html>

CSS in JavaSciprt

这是一个vue文件

<template>
<div>
<p> {{greeting}}World!</p>
<other-component/>
</template>
<script>
import othercomponent from "./otherComponent.vue'
export default {
    data(){
        return {
            greeting: 'Hello'
            }
    },
    components: {otherComponent}
}
</script>
<style scoped>
p{
font-size:em;
text-align:center;
}

你不知道的HTML(5)

HTML DTD

image.png

tips:HTML并非图灵完备,它只是—门标记语言。

HTML 全部标签分类

image.png

HTML head标签

image.png

HTML body功能性标签

image.png

HTML ARIA

ARIA (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。

它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。

image.png 写法：

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

HTML5语义化标签

<body>
    <header>
        <nav>
           xxx
        </nav>
    </header>
    <aside>
        <nav>
           xxx
        </nav>
    </aside>
    <section>xxx</section>
    <section>xxx</section>
    <section>xxx</section>
    <footer>
        <address>xxx</address>
    </footer>
</body>

tips:用对比不用好，不用比用错好

HTML5表单增强

image.png

HTML5存储

CookiesLocal StorageSession Storage
Capacity4 kb10 mb5 mb
BrowsersHTML 4/HTML 5HTML 5HTML 5
Accessible fromAny windowAny windowSame tab
ExpiresManually setNeverOn tab close
storage LocationBrowser and serverBrowser onlyBrowser only
Sent with requestsYesNoNo

IndexedDB

CookiesWeb StorageIndexedDB
StorageSmall lookup table with pairs of key, data valuesStrings only.
Key, value storage		ObjectStore that can store any type of data including objects
Capacity4KB5MB-25MB5OMB upwards
IndexingNot AvailableNot AvailableAvailable
API Call TypeSynchronousSynchronousAsynchronous
Operations performanceDirectly performedDirectly performedTransactional
Learning CurveLowLowHigh

结构：

image.png

统计使用：

image.png

HTML5 PWA&AMP

PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。

image.png

AMP是移动页面加速器Accelerated Mobile Pages的简称，是Google带领开发的开源项目，目的是为提升移动设备对网站的访问速度。

image.png

HTML5 Audio

原理 image.png

代码实现:

//创建一个音频上下文
const audioCtx = new (window.AudioContext || window.webkitAudioContext);
//创建一个正弦振荡器
const osci = audioCtx.createoscillator();
//创建一个音量增幅器
const gain = audioCtx.createGain();
//正弦振荡器关联音量增幅器
osci.connect(gain);
//音量增幅器关联音频上下文的音频输出器
gain.connect(audioCtx.destination);
//开始正弦波动
osci.start();
//停止正弦波动
osci.stop();

HTML5 Video

原理： image.png

实现代码

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

HTML5 二进制

历史上，JavaScript无法处理二进制数据。如果一定要处理的话，只能使用 charCodeAt() 方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成Base64编码，再进行处理。这两种方法不仅速度慢，而且容易出错。ECMAScript5引入了Blob对象，允许直接操作二进制数据。

Bolb对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的API，用来操作文件。 image.png

代码示例：

function loadAsText(file){
const reader = new FileReader();
reader.onload = function( loadedEvent){ 
//result contains loaded file.
console.log(loadedEvent.target.result);}
//输出文本字符串格式
reader.readAsText(file);
//输出二进制数组格式
reader.readAsArrayBuffer(file);
//输出DataURL格式字符串
reader.readAsDataURL(file);}

HTML5 API

应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。

Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让 Web 内容访问到设备的地理位置，这将允许 Web 应用基于用户的地理位置提供定制的信息。

代码示例：

const position = navigator.geolocation.getCurrentPosition(showPosition);
console.log ('Latitude: ',position.coords.latitude);
console.log( ' Longitude: ', position. coords.longitude);

Drag & Drop 是一个实现拖拽功能的API

用户可以使用鼠标选择可拖动的元素，将这些元素拖动到可放置的元素，然后通过释放鼠标按钮来放置它们。在拖动操作期间，可拖动元素的半透明表示跟随指针。

代码示例：

function allowDrop(ev) {
ev.preventDefault();}
function drag(ev){
ev.dataTransfer.setData( "text", ev.target.id);}
function drop(ev) {ev.preventDefault();
var data = ev.dataTransfer.getData( "text");
ev.target.appendChild(document.getElementById(data));)

//在html页面中使用
<div
    style="width:350px;height:70px;border:1px solid #aaa;" ondrop="drop(event)"
    ondragover="allowDrop(event)"
/>
<img
    src="https://www.w3schools.com/html/img_logo.gif"draggable="true"
    ondragstart="drag(event)" width="336"
    height="69"
>

HTML5 Web Worker

Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建，一个 worker 可以将消息发送到创建它的 JavaScript 代码，通过将消息发布到该代码指定的事件处理程序（反之亦然）。

image.png

HTML5 Web Socket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

image.png

代码示例：

// 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 Web Componment

Web Component 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们。

class WordCount extends HTMLParagraphElement{iconstructor() {
    super();
    const wcParent = this. parentNode;

    function countWords(node){
        const text = node.innerText ll node.textContent;
        return text.trim().split(/\s+/g).filter((a) => a.trim( ).length > 0).length}

    const count =`Words: $icountwords(wcParent)};
    // Create a shadow root
    const shadow = this.attachShadow({mode: 'open'});
    
    // Create text node and add word count to it
    const text = document.createElement( 'span ' );
    text.textContent = count;
    
    // Append it to the shadow rootshadow.appendChild(text);
    /l/Define the new element
    customElements.define( 'word-count', WordCount, { extends: 'p' });

HTML5 Shadow DOW

Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。

image.png

HTML5 WebAssembly

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

image.png

拓展交流

Web的风靡

  • 对用户友好

    • 无需安装
    • 无需强大硬件
    • 升级非常方便
    • 容错率强
    • 传播方便

  • 对开发者友好

    • 心智模型成熟
    • 丰富的API能力
    • 框架、工具标准化
    • 开发、调试简单
    • 具备跨平台能力

  • 领域熟练度

    • whatwg/w3c/ecma
    • 浏览器厂商整合
    • 各类Web应用风靡
    • 商用平面设计标准化
    • 全面组件化

  • 未来的方向

    • 效率工具(Rust)
    • JS 2 Anything
    • 服务端容器化
    • 低(无)代码站点
    • 大前端的统一
    • 三维可视化

MVC & MVVM & MVP

MVC： Model View Controller
MVVM： Model View ViewModel
MVP： Model View Presenter

image.png

课程总结：

image.png

avatar
文章
阅读
粉丝