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

Proud472
97 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第5天

一、本节课重点内容:

本节课重点包括:只读时代———原生三件套发展史，体验时代：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](https://link.juejin.cn?target=https%3A%2F%2Fwww.w3.org%2FTR%2F "https://www.w3.org/TR/")

-   TC39规范查询:[TC39 – Specifying JavaScript.](https://link.juejin.cn?target=https%3A%2F%2Ftc39.es%2F "https://tc39.es/")

-   WHATWG规范查询:[Standards — WHATWG](https://link.juejin.cn?target=https%3A%2F%2Fspec.whatwg.org%2F "https://spec.whatwg.org/")

-   IETF规范查询:[IETF | Internet Engineering Task Force](https://link.juejin.cn?target=https%3A%2F%2Fwww.ietf.org%2F "https://www.ietf.org/")

    -   W3C每年都回召开公开线上研讨会，可以进行线上学习: ([www.w3.org/participate…](https://link.juejin.cn?target=https%3A%2F%2Fwww.w3.org%2Fparticipate%2Feventscal.html "https://www.w3.org/participate/eventscal.html"))

  • Promise异步编程

三、实践练习案例:

  • 手动实现一个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;

四、参考文献:

avatar
文章
阅读
粉丝