Web标准与前端规范化|青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第7天。今天的课程分为两部分:上半部分总结了前端Web标准的发展史,下半部分针对流行的前端框架做了代码规范的讲解。

一、本节课重点内容:

本节课重点包括:只读时代———原生三件套发展史，体验时代：Ajax、UGC、Jquery、WebApi,敏捷时代——Node.js、Webpackage、React等常见框架，前端应用场景。

二、课堂知识点纪要:

前端应用场景:

  前端应用场景大致分为：桌面端和移动端,移动端又细分出大屏设备、
  手机浏览器。

node.js:

   node.js是一个基于js的服务器语言框架,使前端不用学习新语言就可以
   开发mock后端。

终端和跨端:

  终端:主要是包括各种前端框架的脚手架,如Vue-CLI、Webpack-CLI等，使得服务
  器终端可以便捷的部署服务、交互数据。
  
  客户端:客户端是用户角度使用的各种设备上的软件载体。用户通过软件客户端获取响应服务。
  
 跨端:跨端分为桌面跨端和移动跨端，跨端同时整合了终端和客户端功能，桌面跨端框架
 有Electron、NW.js等，移动跨端主流有React Native和Flutter。

浏览器、网络、服务器:

  浏览器原理需要从架构、导航、渲染、交互四个层面进入学习。学习前端除了页面的
  设计渲染外,还需要掌握网络技术与服务器语言，能够实现前端与后端的交互。
  
  学习前端需要学习HTTP1.0、HTTP1.1、常见请求报文等基础网络知识。才能实现请求发报等需求。
  
  服务器知识，需要了解服务器负载，在前端请求进行优化减轻服务负载。

Web标准
```
  Web标准主要是由四大标准组织:W3C、Ecma、WHATWG和IETF制定，
  代码编程规范可以从官网查询,在官网域名后+TR:
```
- W3C的规范查询地址:All Standards and Drafts - W3C
- TC39规范查询:TC39 – Specifying JavaScript.
- WHATWG规范查询:Standards — WHATWG
- IETF规范查询:IETF | Internet Engineering Task Force
  - W3C每年都回召开公开线上研讨会，可以进行线上学习: (www.w3.org/participate…)
Promise异步编程
- 在实现网络请求式，有时候需要考虑设计先后执行的函数，这个时候就可以使用Promise库了 Promise常用的方法由resolve(),reject(),all（）方法等,Promise是实现网络异步编程必用工具之一,其函数都可以用js封装，也是面试常考考点。
- 具体可以参考这篇文章:TypeScript实现所有Promise方法Typescript实现Promise,[then|catch|finally|resolve|reject|race|all|any]_我准备起飞的博客

三、实践练习案例:

手动实现一个PromiseAll方法:

//Authored by iiru
//powerby styled.js
//Cite with https://juejin.cn/post/7069805387490263047
import React from "react";
import { Button, Modal } from 'antd';
import {MainContain,MainContent} from "./promise";
//重新封装自制的 Promise.All方法
class myPromise{
    static MyAll(method:any){
        return new Promise((resolve, reject)=>{
            let arr:any = [];
            console.log(method);
            method.forEach((item:any, id:any)=>{
                Promise.resolve(item).then(res=>{
                        arr[id] = res;
                        if (arr.length === method.length)
                        {
                            resolve(arr)
                            console.log(arr);
                        }
                    }
                ).catch(reject)
            })

        })
    }
}

export function PromiseAll(){
    //定义三个Promise方法
    const mise1 =  Promise.resolve("test resolve").then(()=>console.log("mise1"))
    const mise2 = new Promise((resolve,reject)=> {
        setTimeout(() => {
            resolve('test resolve,reject');
            console.log("mise2")
        }, 2000)

    })
    const mise3 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('test reject,resolve')
            console.log("mise3")
        },3000)
     }
    )

    //对三个Promise函数用封装好的MyAll调用  MyAll方法封装在myPromise类里面
    const MyPromise =()=> myPromise.MyAll([mise1,mise2,mise3])
    const [isModalVisible, setIsModalVisible] = React.useState(false);
    const [response,setResponse] = React.useState("");

    const showModal = (e:any) => {
        setResponse(e);
        setIsModalVisible(true);
    };
    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
            <>
                <MainContain>
                    <MainContent>
                        {/*异步调取弹窗*/}
                        <Button onClick={()=> {
                            MyPromise().then(
                                r=>showModal(r))
                        }} >点击触发MyPromiseAll
                        </Button>
                        <Modal title="PromiseALL Methods Return"
                               visible={isModalVisible}
                               onOk={handleOk}
                               onCancel={handleCancel}>
                            {response}
                        </Modal>
                    </MainContent>
                  </MainContain>
            </>
    )
};

css样式代码

//Authored by iiru
//powerby styled.js
import styled from "styled-components";
export const MainContain =styled.div`
   width:100%;
   height:1000px;
   background-image: linear-gradient(to right, #f49ecb,#d94bcc);
  
  .mainContent{
   margin:5% 25% 0 25%;
   width:500px;
   height:16%;
   background:#391a33;
  }
`
export const MainContent =styled.div`
     margin:4% 45%;
     width:200px;
     float:right;
     font-size:32px;
     color:#efefef;
`

四、参考文献:

深入理解现代浏览器深入理解现代浏览器--75team/w3c (github.com)
TypeScript实现所有Promise方法Typescript实现Promise,[then|catch|finally|resolve|reject|race|all|any]_我准备起飞的博客
W3C的规范查询地址:All Standards and Drafts - W3C
TC39规范查询:TC39 – Specifying JavaScript.
WHATWG规范查询:Standards — WHATWG
IETF规范查询:IETF | Internet Engineering Task Force
W3C每年都回召开公开线上研讨会，可以进行线上学习: (www.w3.org/participate…)

五、心得体会:

  学习了今天的课程，我了解了Web标准的制定流程,了解了Web技术发展史;学习了Promise异步方法的封装，
  对网络请求有了新认识。我感受到了前端学习不仅有页面设计、还有网络交互，这在请求网络接口中尤为
  突出，前端学习的知识树比我想象的要大的多，我还需要努力学习，补齐短板。