前端架构&软实力复习-0

2021-05-14 08:20:122021-06-28 10:59:47

npm版本 

"5.0.3",
"~5.0.3",
"^5.0.3"
  • "5.0.3"表示安装指定的5.0.3版本
  • "～5.0.3"表示安装5.0.X中最新的版本
  • "^5.0.3"表示安装5.X.X中最新的版本

fullScreen 

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script>
        function onFullScreenClick() {
          console.log(111);
          document.querySelector('#fullScreenImage').requestFullscreen();
        }
      </script>
    </head>
    <body>
      <button onclick="onFullScreenClick()">
        full screen
      </button>
      <div id="fullScreenImage">
        <img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00139-2321.jpg"></img>
      </div>
    </body>
</html>

git命令

  • git commit --amend -m '提交原因' 修改最近一次commit的信息

有限状态机

有限状态机（finite state machine），计算机科学中用来对象行为建模的工具，其作用主要是描述对象在它的生命周期内所经历的状态队列，以及如何响应来自外界的各种事件

状态机有基本几个要素：

  • 当前所处状态。在各个时刻只处于一种状态
  • 状态转移函数。在某种条件下，会从一种状态转移至另一种状态
  • 有限状态序列。拥有有限，可枚举的状态数

监听页面崩溃

被监听页面和监听者建立一种心跳机制，每隔一定时间向监听者发送一次心跳；监听者根据心跳来推断被监听者的情况。

微前端

将一个大型应用划分为一个主应用和一个或多个小应用，应用间相互独立，可相互通信

白屏时间/渲染时间

白屏时间: window.performance.timing.domLoading - window.performance.timing.navigationStart

首屏时间：window.performance.timing.domInteractive - window.performace.timing.navigationStart

npm ci

npm ci（6.0版本以上）

  1. 会删除项目中的node_modules文件夹
  2. 按照项目中的package-lock.json来安装确切版本的依赖项

continuous-local-storage

continuous-local-storage是nodejs中类似本地存储的，它可以实现多个文件中数据共享，但是不用挂载到全局对象

//a.js
const storage=require('continuous-local-storage');
var space=stroage.createNameSpace('data');
space.set('user','xx')
 
//b.js
const storage=require('continuous-local-storage');
var space=storage.getNameSpace('data');
console.log(space.get('user'))
//输出xx

参考

前端:从状态管理到有限状态机的思考