前端知识大杂烩

顽强拼搏
131 阅读2分钟

前端语言的基本能力

前端示意图

image.png

前端的关系

image.png

HTML

image.png

CSS

image.png

  • CSS Colors
  • CSS Backgrounds
  • CSS Borders
  • CSS Margins
  • CSS Padding
  • CSS Height/Width
  • CSS Box Model
  • CSS Outline
  • CSS Text
  • CSS Fonts
  • CSS Icons
  • CSS Links
  • CSS Lists
  • CSS Tables
  • CSS Display
  • CSS Max-width
  • CSS Position
  • CSS Z-index
  • CSS Overflow
  • CSS Float
  • CSS Inline-block
  • CSS Align

image.png

JavaScript

发展历程

image.png

创始人

image.png

特点

  1. 借鉴C语言的基本语法；
  2. 借鉴]ava语言的数据类型和内存管理；
  3. 借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位；
  4. 借鉴Self语言，使用基于原型(prototype)的继承机制。

七种类型

image.png
image.png

加载过程

image.png

V8的工作流

image.png

前端语言的协作配合

Trending

image.png

CSS in HTML

Inline CSS

This is a paragraph.

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>

JavaScript in HTML

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
    <link rel="stylesheet"href="http://jqueryui.com/resources/demos/style.css">
    <script>
      //update the status
      function submissionReceived(input)
        //update span
        $"#have").html("You have");
      <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>

image.png
image.png

HTML in JavaScript

//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 }
	</script>
		<script src="https://unpkg.com/mustache@latest"></script>
		<script src="render.js"></script>
	</body>
</html>

class HelloMessage extends React.Component {
	render() {
	return (
		<div>
			Hello {this.props.name}
		</div>
    );
	}
}

ReactDOM.render(
	<HelloMessage name="Taylor"/>
	mountNode
};

CSS in JavaScript

div.style.width="100px";

div.style.cssText="width:100px;height:100px;background:palevioletred;";

div.setAttribute("class","div2")

link.setAttribute("href","css2.css");

import React from "react";
import "./App.css";

function App () {
  return (
	<div className="App">
		<header className="App-header">
			<h2 style={{color:"blue",backgroundColor:"white"}}
				Hello From React
			</h2>
		</header>
	</div>
)；
export default App;

<template lang="jade">
div
	p {{greeting }} World!
	other-component
</template>
<script>
import OtherComponent from './0therComponent.vue'

export default {
	data () {
		return {
			greeting:'Hello'
    }
  },
	components: {
	OtherComponent
  }
}
</script>

<style lang="stylus" scoped>
p
	font-size 2em
	text-align center
</style>

/* styles.css */
.button {
	border-radius:4px;
	font-size:16px;
/* ···· */

/* Button.js */
import React from 'react'

import styles from './styles.css'

const Button  = (children,...props })=> (
	<button {..props} className = { styles.button }>
	{children}
</button>
)

<!-- output HTML -->
<html>
	<head>
		<!-- ··· -->
		<style type="text/css">
			.styles_button_2hs2r {/* ... */ }
		</style>
	</head>
<body>
	<!-- ... -->
	<button class="styles_button_2hs2r">My Button</button>
	</body>
</html>

import React from 'react'
import {render}from 'react-dom'
import {createUseStyles}from 'react-jss'

//Create your Styles.Remember,since React-JSS uses the default preset,
//most plugins are available without further configuration needed.
const usestyles createUseStyles({
	myButton: {
	color:'green',
	margin: {
	//jss-expand gives more readable syntax
	top:5,//jss-default-unit makes this 5px
	right:0,
	bottom:0,
	left:'1rem'
	'span': {
	//jss-nested applies this to a child span
		fontWeight:'bold'//jss-camel-case turns this into 'font-weight'
    }
	},
	myLabel: {
		fontStyle:'italic'
  	}
  })

const Button ({ children }) => {
	const classes useStyles()
	return (
		<button className={classes.myButton}>
			<span className={classes.myLabel)>{children}</span>
		</button>
    )
}
                       
const App = () => <Button>Submit</Button>
render(<App />document.getElementById('root'))

你不知道的HTML(5)

HTML并非图灵完备，它只是一门标记语言。

image.png

HTML全部标签分类

image.png

HTML head标签

image.png

HTML body功能性标签

image.png

HTML ARIA

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

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

image.png
image.png

HTML5语义化标签

<body>
	<header>
			<nav>
				······
			</nav>
		</header>
	<aside>
		<nav>
			······
		</nav>
	</aside>
	<section>.....</section>
	<section>.....</section>
	<section>.....</section>
	<footer>
		<address>.....</address>
	</footer>
</body>

建议：用对比不用好，不用比用错好。

HTML5表单增强

image.png

HTML5存储

image.png

HTML5 IndexedDB

image.png
image.png
image.png
HTMLS PWA Amp
image.png
image.png

HTML5 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();

image.png
image.png

const mediaSource = new MediaSource();

const video = document.createElement('video');

video.src = mediaSource;

mediaSource.addSourceBuffer(...);

video.play();

image.png

网址：csplite.com/csp152/

HTML5二进制

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

GeoLocation API

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));
}

<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

image.png

HTML5 Web Socket

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 Shadow DOM

image.png

HTML5 Web Component

class WordCount extends HTMLParagraphElement {
	constructor() {
	super();
	const wcParent = this.parentNode;
    
	function countWords(node)	{
		const text = node.innerText node.textContent;
		return text.trim().split(/\s+/g).filter((a)=a.trim().length 0).length;
  }
    
	const count = `Words:${countWords(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 root
	shadow.appendchild(text);
  }
}

//Define the new element
customElements.define('word-count',WordCount,extends:'p'});

<div>
  <article contenteditables"">
    <h2>Sample heading</h2>
    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.Nunc
      pulvinar sed justo sed viverra.Aliquam ac scelerisque tellus.
      vivamus porttitor nunc vel nibh rutrum hendrerit.Donec viverra
      vestibulum pretium.Mauris at eros vitae ante pellentesque bibendum.
      Etiam et blandit purus,nec aliquam libero.Etiam leo felis,pulvinar
      et diam id,sagittis pulvinar diam.Nunc pellentesque rutrum sapien,
      sed faucibus urna sodales in.Sed tortor nisl,egestas nec egestas
      luctus,faucibus vitae purus.Ut elit nunc,pretium eget fermentum
      id,accumsan et velit.Sed mattis velit diam,a elementum nunc
      facilisis sit amet.</p>
    <p is="word-count"></p>
  </article>
</div>

Sample heading Lorem ipsum dolor sit amet,cons pellentesque bibendum.Etiam et faucibus vitae purus.Ut elit nunc, Words:94

HTML5 SVG Canvas

image.png
image.png

WebGL WebGPU

All APIs continue to evolve and be maintained to meet industry standards. Provides a rich mix of open technologies for future innovation.

image.png
image.png

Some Amazing Demo: davidwalsh.name/webgl-demo

HTML5 WebAssembly

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

image.png
image.png

const buffer = await
  fetch('...')
  .then(resp =resp.arrayBuffer());

const instance = 
	WebAssembly.instantiate(buffer);

拓展分享

Web的风靡

对用户友好

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

对开发者友好

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

领域成熟度

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

未来的方向

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

大前端

image.png
image.png
image.png

MVC & MVVM & MVP

image.png

MVC

image.png

MVP

image.png

MVVM

image.png

总结

image.png

avatar
文章
阅读
粉丝