2022.09.26

1.import * as 用法

1.创建一个b.js,导出两个值

export const name = 'chen'; export const age = 21;

2.两种使用方法

<script type="module"> 
// 方法一: 会导出这个默认的对象作为一个对象 
import {name, age } from './b.js' 
console.log(name) 
 //方法二: 会将若干export导出的内容组合成一个对象返回； 
import * as b from './b.js' 
console.log(b.name) 
console.log(b.age) 
</script>

2.物理像素，设备独立像素，像素比

1.物理像素：又称设备像素，简称pp，设备屏幕上实际有的像素点，如pc端常见分辨率1920 * 1080，意味着在屏幕水平方向上有1920个像素点，垂直方向上有1080个像素点。

2.设备独立像素（Device Independent Pixels）：又称设备无关像素，简称DIP/DP，是一种逻辑单位，一般情况下用css像素表示。通过window.screen.width/window.screen.height可以查看到

3.设备像素比（Device Pixels Ratio：物理像素与设备独立像素之比。windows系统显示设置中的缩放与布局，苹果系统中的UI看起来来类似，都是通过改变该值实现的。通过window.devicePixelRatio可以查看到

3.Web端通过缩放比与rem实现自适应

function setFont () {
  const designWidth = 1920
  const designHeight = 1080
  const designScale = (designHeight / designWidth).toFixed(3)
  const fullWidth = document.documentElement.clientWidth
  const fullHeight = document.documentElement.clientHeight
  const fontScale = (fullHeight / fullWidth).toFixed(3)
  if (designScale > fontScale) {
    const scale = fullHeight / 1080
    document.documentElement.style.fontSize = scale * 100 + 'px'
    // 高度少
    // console.log(document.documentElement.style.fontSize = (fullHeight / 2053) * 100 + 'px')
    return scale
  } else {
    const scale = fullWidth / 1920
    document.documentElement.style.fontSize = scale * 100 + 'px'
    //宽度少
    // console.log(document.documentElement.style.fontSize = (fullWidth / 3640) * 100 + 'px')
    return scale
  }
}

window.onresize = function () {
   setFont()
}

4.myChart.dispose()作用:释放图表，销毁对象并设为null

5.echarts图表自适应

因为echarts图表只能渲染一次,有以下两种方式

第一种方式通过调用echarts的api  resize()实现
// 单个图表自适应
  var chinaMap = echarts.init(document.getElementById("china-map"));
  window.onresize = chinaMap.resize;
//多个图表自适应
var myChart = echarts.init(document.getElementById("first"));
  var secondChart = echarts.init(document.getElementById("second"));
  var thirdChart = echarts.init(document.getElementById("third"));
  var fourthChart = echarts.init(document.getElementById("fourth"));
  window.addEventListener("resize", () => {
    myChart.resize();
    secondChart.resize();
    thirdChart.resize();
    fourthChart.resize();
  });
  
第二种方式动态改变容器大小,重新渲染echarts

<div id="xxx" style='width:10rem;height:10rem'></div>

js代码:
//初始化图表
init(){
  var chinaMap = echarts.init(document.getElementById("china-map"));
  ......
}

window.onresize = () => {
    this.setFont() //动态改变根字体大小,通过rem改变容器大小
    this.myChart.dispose() //释放图表，销毁对象并设为null
    this.init()  //重新渲染图表
}

6.es6中的类 class

首先，ES6 的 class 属于一种“语法糖”，所以只是写法更加优雅，更加像面对对象的编程，其思想和 ES5 是一致的。

1. 创建一个class类

class myClass{
	//构造器，默认为空的构造器
	//当class在被new时就会调用构造器
	//相当于function
	//function myClass(name,age){
	//	this.name=name
	//	this.age=age
	//}
	constructor(name,age){
		//这些都是实例属性
		//只有实例才能访问
		this.name=name
		this.age=age
	}
}

2. 创建类实例对象

var i=new myClass('小明'，18)

3.在class内部只能写构造函数，静态属性，静态方法，实例方法
class的静态方法和静态属性都挂载到constructor上，实例属性和方法都挂载到了实例对象上
就是把function封装成了class，class的本质还是function，使用起来更加方便了

4.const self = this 在类中的作用

function SeatReservation(name, initialMeal) { 
var self = this; 
self.name = name; 
self.meal = 
ko.observable(initialMeal); 
}

这个涉及到this的指向，一般的函数中this的指向是调用函数的对象，而这个对象不一定是函数实例了，为了保险用self指向类的实例

7.echarts中x轴刻度标签长度过长显示省略号或者旋转标签,代码如下:

let rotate = 0
const dom = document.getElementById(this.bodyDom)
if((dom.offsetWidth / dataX.length / size) >= length) {
    rotate = 0
} else {
    rotate = 135
}

//option中xAxis的配置

xAxis: {
  data: dataX,
  axisLabel: {
    textStyle: {
      fontSize: nowSize(size),
    },
    rotate: rotate,
    formatter: function(name) {
        return  name
      //显示省略号: return name.length > 3 ? `${name.substr(0, 3)}...` : name;
    }
  },
},