个人学习细节笔记

1. 对象动态属性名

			// 属性名动态变化
			const obj = {
				name:'tom',
				[flow_no ? 'sub':'thr']:'str'
			}

2. 数据类型判断

// 使用typeof判断简单数据类型时,注意判断null时为object
typeof(null)  // object
typeof([])  // object
typeof({})  // object
typeof (() => {}) // function 
// ES6 中 typeof 如何区分函数和对象类型:
// 一个对象如果没有实现 [[Call]] 内部方法, 那么它就返回 object
// 一个对象如果实现了 [[Call]] 内部方法, 那么它就返回 function

// instanceof() 用于判断引用数据类型,还可判断是否在某个实例的原型对象上
[1,2,3] instanceof Array // true
function person (name,age){
  this.name = name
  this.age = age
}
const Tom = new person('Tom',20)
Tom instanceof person  // true

// Object.prototype.toString.call() 可判断所有数据类型
Object.prototype.toString.call(111); // [object Number]
Object.prototype.toString.call(null); // [object Null]
Object.prototype.toString.call(undefined); // [object Undefined]
Object.prototype.toString.call([]); // [object Array]
Object.prototype.toString.call({}); // [object Object]

3. js 的事件循环

js引擎在执行js代码时,会将任务分为两类 同步任务与异步任务. 其中同步任务在主线程上执行,而异步任务则由任务队列上的事件循环机制异步执行.
js是单线程的,既所有的任务都要放入到主线程内执行,上一个任务执行结束才能执行下一个任务.事件执行顺序为同步任务---->异步任务,而异步任务又分为宏任务和微任务,先执行微任务,再执行宏任务
常见的宏任务有 定时器回调函数 (setTimeout, setInterval)、I/O 操作、UI 渲染
常见的微任务有async await\ Promise 的回调函数 (then, catch, finally)、MutationObserver 的回调函数、queueMicrotask

4. js注意事项

[] == ![]  // true
+0 == -0; // true
null == undefined; // true
NaN == NaN;   // false
{} == {}; // false

5. flexible.js 和rem 移动端适配
   flexible.js源码

;(function flexible(window, document) {
  // 获取 HTML跟元素
  var docEl = document.documentElement;
  // dpr 物理像素比
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  // 设置body字体大小
  function setBodyFontSize() {
    if (document.body) {
      // 如果页面有body元素则直接设置字体大小
      document.body.style.fontSize = 12 * dpr + 'px';
    } else {
      // 如果页面没有body元素，则等页面主要的DOM元素加载完毕后，再执行setBoydFontSize
      document.addEventListener('DOMContentLoaded', setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  // 设置HTML元素字体大小
  function setRemUnit() {
    var rem = docEl.clientWidth / 10;  // 将视口宽度分成10份, 如375px的屏幕宽度,则1rem = 37.5px ,设置插件的跟字号,则可计算对应尺寸px应有多少个rem
    docEl.style.fontSize = rem + 'px';
  }

  setRemUnit();

  // reset rem unit on page resize
  // 当页面尺寸发生变化的时候，要重新设置rem的大小
  window.addEventListener('resize', setRemUnit);
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  // 有些浏览器不支持0.5的写法
  if (dpr >= 2) {
    var fakeBody = document.createElement('body');
    var testElement = document.createElement('div');
    testElement.style.border = '.5px solid transparent';
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines');
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

根据flexible.js的代码, 将屏幕宽度分为10块, 那么插件跟字号设置大小, 根据UI设计图 尺寸 如375px, 插件的跟字号就设置成 37.5

6. 配置 @路径 vue3 vite ts

npm i path -s 
npm install @types/node --save-dev

vite.config.ts

import path from  'path'
export default defineConfig({
  plugins: [vue()],
  base: '/',
  // 配置path，需要安装和引入
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  }
})

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    ...
}