HTML

1. 如何实现上拉加载，下拉刷新

• 上拉加载

  • scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值

  • clientHeight:它是一个定值，表示屏幕可视区域的高度；

  • scrollHeight：页面不能滚动时也是存在的,此时scrollHeight等于clientHeight。scrollHeight表示body所有元素的总长度(包括body元素自身的padding)

let clientHeight  = document.documentElement.clientHeight; //浏览器高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;
 
let distance = 50;  //距离视窗还用50的时候，开始触发；

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("开始加载数据");
}

• 下拉刷新 下拉刷新的原生实现，主要分成三步：

  • 1.监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；
  • 1.监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值；
  • 1.监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置

CSS

1.

JS

1.如何解决模块循环引用问题

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用

• CommonJS模块

  • 使用require语句导入模块，module.exports导出模块，输出的是值的拷贝，按需引入，同步执行
  • 对于基本数据类型，属于复制，对于复杂数据类型，属于浅拷贝
  • 如何解决循环加载的原理：循环加载时，属于加载时执行。即脚本代码在require的时候，就会全部执行，然后在内存中生成该模块的一个说明对象。当再次执行require命令，下次会直接读取缓存。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出（解决原理）

• ES6模块

  • import语句导入模块，export语句导出模块，是异步的
  • ES6模块原理：不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用，脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行（解决原理）

TS

Webpack

React

Vue