2022-44周(10.17-10.23) 项目问题整理

新知识

1、好文学习

1、在vue2 css里使用js定义的变量

// var()函数，取变量值
// 检测浏览器是否支持 CSS 变量
const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

效果：

<tempalte>
  <div class="box"></div>
</template>
<script>
export default{
 data(){
  return {
    bg:'#000'
  }
 },
  mounted(){
   // 改变bg
    setTimeout(() => {
       this.bg='red'
    }, 2000);
  }
}
</script>
<style>
.box{
 background:v-bind(bg)
}
</style>

vue3 尤大佬已做过支持，改变css变量的方式是改变dom属性，类似

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

vue2 自己实现，思路：想有自己特定的编译需求使用vue编译模板工具vue-template-compiler，尤大佬把他抽离了出来。简单来说就是将模板预编译为渲染函数（template => ast => render）。方法parseComponent，这个方法是用来处理vue文件的。接受参数是vue文件的所有字符串和可选options，返回是处理后的对象。对象将template、style、js都分开作为一项对象元素，改写这个里面的处理方式即可：先处理style正则获取变量，再到模板中找寻匹配的变量进行 :style 类型插入绑定；

// vite.config.js
const { createVuePlugin } = require('vite-plugin-vue2')
const compiler = require('vue-template-compiler');

export default{
  plugins:[
    createVuePlugin({
    vueTemplateOptions: {
      compiler: {
          ...compiler,
          parseComponent(t, o) {
            const code = compiler.parseComponent(t, o);
            const styles = transformCss(code);
            transformHtml(code, styles);
            return code;
        },
        }
      }
    })
  ]
}

2、小程序页面跳转刷新两次定位问题

思路：快速点击引发的多次加载及渲染；从阻止多次点击入手；
解决方案：
1、业务侧主动添加触发防抖；不利于
2、为跳转行为添加锁；需要对全部进行封装管理且如果代码执行出错锁未释放则跳转功能将会废弃
3、多次点击回退出问题，可能是一些分包未下载或注入，跳转新页面耗时长，因此当前才可快速点击多次，可以使用占位组件结合分包异步化：将目标页的内容和涉及到的组件移入对应分包，页面加载时如果分包未下载或注入就用占位组件替代，从而大幅减少页面首次渲染，即可用时间。

2、css in js vs css module

什么是css in js?

import React, { Component } from 'react';
import styles from 'styled-components'; // 关键包

const Title = styles.h1`
 padding: 20px;
 background-color: #222;
 text-align: center;
 color: white;
 font-size: 1.5em;
`;

class App extends Component {
 render() {
   return (
     <Title>
       React application title
     </Title>
   );
 }
}

什么是css module?

import React, { Component } from 'react';
import styles from './App.module.css';

class App extends Component {
 render() {
   return (
     <div className={styles.title}>
       React application title
     </div>
   );
 }
}

css module 简单易学，复用方便，规范作用域，简介，可用scss、less等语言，符合css应用习惯；css in js 集合代码中无法缓存增加js加载消耗，css隔离，不利用主题行应用开发；

参考文章
css module vs css in js
css-modules-vs-css-in-js-who-wins?

问题

1、@typescript-eslint/no-use-before-define: ‘React’ was used before it was defined.

报错语法：

import React, { useState, useEffect, useCallback, useMemo } from 'react';

解决办法1：

 "no-use-before-define": "off",
  "@typescript-eslint/no-use-before-define": ["error"]

解决办法2：包降级

"@typescript-eslint/eslint-plugin": "4.0.1",
"@typescript-eslint/parser": "4.0.1",

参考文档：
react-was-used-before-it-was-defined

2、shim vs polyfill vs babel

Babel:Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码。注意：Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API。
Polyfill:Polyfill的准确意思为，用于实现浏览器并不支持的原生API的代码。

Shim 通常是一个代码库，它给旧环境（并不一定特指浏览器环境）带来的往往是全新的 api，而且这些 api 只能在这个环境当中运行。polyfill 抚平 浏览器之间的差异，一个浏览器层面的 shim；

shim-vs-polyfill
用了babel还需要polyfill吗？？？

3、虚拟主机、云服务器的区别

虚拟主机、VPS、云服务器三者的区别