001 js的三大组成部分
// js:ECMAScript + BOM + DOM
// BOM:browser object model 浏览器对象模型
// DOM:document object model 文档对象模型
002 BOM
// BOM:浏览器对象模型
// 每隔浏览器窗口都是一个window对象
// var window = new Window() // 在每一次打开一个页面的时候默认就创建了一个window对象
// 每一个页面不共享window
// 每次创建的全局变量和函数都是属于window对象的属性和方法
console.log(window);
var a = 10 ;
console.log(window.a);
function fn() {
console.log(666);
}
window.fn()
003 BON的常见属性
// BOM常见属性
// navigator
// userAgent 会详细的显示浏览器的版本信息
// location 地址栏
// href 整个网址
// host 域名+端口号
// hostname 域名
// port 端口号
// protocal 协议 (http / https)
// search 问号后面的一串 表单提交的数据
// hash 井号后面的一串 锚点
// assign() 跳转至新的页面
// replace() 替换当前页面 --- 不会被历史记录
// reload() 刷新页面
// history 历史记录
// length 在同一个窗口打开过几个页面
// forward() 前进
// back() 后退
// go(1 / -1) 可进可退
// document 文档 DOM实际上是BOM的一部分
004 BOM方法
// open() 打开新的浏览器窗口 网页重定向(默认被拦截)
// close() 关闭本窗口
005 BOM事件
// load事件:等待页面资源加载完毕之后执行
// scroll 页面滚动时触发这个事件 --- 高频率触发的事件
// resize 窗口大小大声改变时触发此事件 --- 高频率触发的事件
006 移动端适配
html{
/* 1rem = 100px */
/* rem是相对于根元素变化的单位 */
/* 移动端适配也就是动态设置根元素的字体大小,然后使用rem做单位 */
/* font-size: calc(100vw / 7.5); */
}
body{
/* font-size: .24rem; */
}
.a{
/* width: 1rem;
height: 1rem;
background-color: #f00; */
}
007 高频率触发事件的处理方案
// onscroll / onresize 是高频率触发事件
// 函数的防抖和节流
// 干啥的? 解决高频率触发事件
// 函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。 --- 每次点击,就重做
// 函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。 --- 点击一次,就把事情干完,没干完之前点击没用
// 点了一次之后,一段时间不能再点,事情干完之后可以再点 函数节流
// 点了以后立即清除定时器 函数防抖