阶段03-JS进阶(总结02待补充)

5.BOM对象 面试官系列
一、是什么

BOM 浏览器对象模型，把浏览器当成一个对象看待，顶级对象是	window，是浏览器的一个实
例，提供操作浏览器的方法，其作用是跟浏览器做一些交互效果，比如如何进行页面的后退、前
进、刷新、浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息，如：浏览器品牌
版本、屏幕分辨率等。

浏览器的全部内容可以看作DOM，整个浏览器可以看成BOM，区别如下：

---

二、window

在浏览器中，window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象
因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

关于窗口控制方法如下：
moveBy(x,y)：从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动	窗体，y为负数，将向上移动窗体
moveTo(x,y)：移动窗体左上角到相对于屏幕左上角的(x,y)点
resizeBy(w,h)：相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体
resizeTo(w,h)：把窗体宽度调整为w个像素，高度调整为h个像素
scrollTo(x,y)：如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
scrollBy(x,y)： 如果有滚动条，将横向滚动条向左移动x个像素，将纵向滚动条向下移动y个像素

window.open() 既可以导航到一个特定的url，也可以打开一个新的浏览器窗口
如果 window.open() 传递了第二个参数，且该参数是已有窗口或者框架的名称，那么就会在目标窗口加载第一个参数指定的URL
window.open('htttp://www.vue3js.cn','topFrame')
==> < a href=" " target="topFrame"></ a>
window.open() 会返回新窗口的引用，也就是新窗口的 window 对象
const myWin = window.open('http://www.vue3js.cn','myWin')
window.close() 仅用于通过 window.open() 打开的窗口
新创建的 window 对象有一个 opener 属性，该属性指向打开他的原始窗口对象

---

三、location

url示例：http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

除了hash之外，只要修改location的一个属性，就会导致页面重新加载url！！！
location.reload()，此方法可以强制刷新当前页面。这个方法会根据最有效的方式
刷新页面，如果自上一次请求以来没有改变过，页面就会从浏览器缓存中重新加
载,如果强制从服务器重载，传递一个参数true即可。

---

四、navigator

navigator 对象主要用来获取浏览器的属性，区分浏览器类型。属性较多，且兼容性比较复杂
navigator.userAgent 浏览器UA设置,判断当前是哪种浏览器
navigator.onLine 当前设备是否在线

---

五、screen

---

六、history

history是浏览器记录当前标签页访问页面的对象 不记录跳转的网址；
history对象主要用来操作浏览器URL的历史记录，可通过参数向前，向后，或向指定URL跳转
1.history.go()
接收一个整数数字或者字符串参数：向最近的一个记录中包含指定字符串的页面跳转
history.go('maixaofei.com')
当参数为整数数字的时候，正数表示向前跳转指定的页面，负数为向后跳转指定的页面
history.go(3) //向前跳转三个记录
history.go(-1) //向后跳转一个记录
2.history.forward()：向前跳转一个页面
3.history.back()：向后跳转一个页面
4.history.length：获取历史记录数

---

1.url 统一资源定位符 标识一个网络资源的地址

包括:
协议protocol:  http/https  
主机地址host:
	-IP(主机地址 每一台电脑主机都有自己特定的标识，ipv4/ipv6)
	-域名(等同于IP地址,更易记忆) 通过DNS解析找到对应我的IP 找到对应IP主机下的文件 
	域名=服务器名(类似于学院名,区分域名对应的不同业务 www官网/mail邮箱)+主域(类似大学名)
端口号port:可以理解为窗口,主机之间互相交流的端口
	http  默认打开80端口
	https 默认打开443端口
源origin = 协议protocol+主机地host+端口号port
	如果两个url完全一致,两个页面同源
	有任意一个不一致,就是非同源

本地开启服务:
	vscode插件 live service 可以将vscode打开的文件根目录地址开启服务
	仅可以访问根目录上的文件
	默认三个本地IP(可以通过win+r->输入cmd ->ipconfig查看):
		127.0.0.1 自己的主机访问的服务地址,有一个对应的域名 localhost
		192.160.0.100 自己主机的ipv4地址 局域网IP,同一局域网下可以互相访问
		192.168.1.160 无线网的主机地址,同一无线网下可以互相访问
		(上述可使用前提:关闭防火墙)

路径path:访问主机分享文件的地址
	1.文件路径  用户直接访问主机分享的文件
	2.路由 目前比较流行的形式(后端监听地址访问事件:返回特点的内容)	
查询参数search:
	query 帮助用户访问到特定的资源 ?name=value
锚点fragment: #内容
url：协议 + 主机地址 + 端口号 + 可选【路径 + 参数 + 锚点】

2.open方法

一个参数:window.open(URL) 在新标签页面打开网址
两个参数:window.open(URL,windowName) 在windowName对应的窗口打开网址
	windowName可以是a的target属性值/自定义名/iframe的name属性
三个参数:window.open(URL,windowName[不能是自身],windowFeature[窗口特征])在新的浏览器窗口打开网址

4.location对象

location保存当前窗口正在打开的URL的对象
它既是 window 对象的属性，也是 document 对象的属性
（window.location === document.location）
location解析URL组成的对象
属性:
    href:当前页面的网址
    origin源 =protocol协议+hostname主机地址+port端口号
    search获取查询参数 ?name = value  ***(可用于页面传值)
    传值会有中文编码 效果等同于encodeURI(中文)
    可以通过decodeURI(编码)-->中文
    hash 获取锚点的值 #abc...
方法:
    location.assign(url) 作用同href,可以让页面跳转到指定的地方，后退按钮可用
    location.replace(url) 替换掉地址栏中的地址，但是不记录历史,也就是后退按钮不可用
    location.reload(是否强制刷新) true强制从服务器获取页面 false如果浏览器有缓存的话，直接从缓存获取页面

5.正则(了解)

正则表达式 用于匹配字符串中是否含有某个片段的规则
使用场景:
    1.字符串校验
    2.input值校验
    3.模板语法 
使用方式:ctrl c+v
声明方式:
    1.构造函数 new ExReg("匹配内容","属性i/g/m/y/u")
    2.自变量形式 /匹配内容/属性  [常用方式]
方法:
    正则对象.test(字符串) 返回字符串是否符合正则匹配规则,有true无false
    str.match(正则) 返回字符串中符合正则匹配规则的内容 是一个数组形式
    str.replace("正则",xxx)   

6.navigator对象

navigator  浏览器信息统计对象 
属性:
	navigator.userAgent 浏览器UA设置,判断当前是哪种浏览器
	navigator.onLine 当前设备是否在线

7.新动画

旧动画:以步长控制的动画,实现复杂的效果难以应付;
新动画:实现多样的动画效果,通过控制动画时长实现;
实现原理
已过时间       已过路程
------------ = ----------- =k
 总时长         总路程

function(){
    // 获取:已过时间 总时间 总路程
    // 声明起始时间
    var startTime = Date.now();
    // 声明总时间 动画持续时间duration
    var duration = 1000; //时间单位毫秒
    var timer = setInterval(function(){
        // 声明当前时间
        var now = Date.now();
        // 求出已过时间
        var passTime = now - startTime;
        // 求出比例
        var bite = passTime / duration;
        // 因为时间戳 剪出来的不一定是整数
        if(bite>1){
            bite = 1;
            clearInterval(timer);
        }
        // 求出已过路程的运动
        box.style.left = 50+600*bite+"px";
    },1000/60)
}

8.requestAnimationFrame()

var rid = requestAnimationFrame(function(time){})
意味着 在下次浏览器刷新的时候执行参数函数 function(time){}
当它开始自调用的时候 表示和浏览器刷新同频率的执行某个函数
参数time 表示从性能测量开始的时间戳==performance.now()
cancelAnimationFrame(rid) 可取消raf设定的动画,很少用

 //按照步长控制动画
function(){
     var rid = requestAnimationFrame(function move(){
         box.style.left = box.offsetLeft + 5 + "px";
         // 调用自身
         rid = requestAnimationFrame(move);
         // 到达指定位置,清除raf设定的动画
         if(box.offsetLeft >= 900){
             cancelAnimationFrame(rid);
         }
     })
}
// 按照动画时长控制动画
function(){      
    // 声明开始时间
    var startTime = performance.now();
    // 声明动画持续时间
    var duration = 2000;
    requestAnimationFrame(function move(now){
        // 声明当前时间
        // var now = performance.now();  //函数中默认一个参数now  相当于这句代码
        // 求出已过时间
        var passTime = now - startTime;
        // 求出比例
        var bite = passTime / duration ;
        if(bite>1){
            bite=1;
        }
        box.style.left = 50+600*bite +"px";
        // 只要没有到达指定位置就一直执行函数
        if(bite<1){
            requestAnimationFrame(move);
        }
    })
}

9.新动画封装函数

执行函数
function () {
        // box弓箭函数
        animate(2000, back, function (percent) {
            box.style.left = 50 + 600 * percent + "px";
        })
    }    
//时序函数
function back(bite) {
        return Math.pow(bite, 2) * (4 * bite - 3);
    }
//在animate函数中加入时间扭曲函数(timingFunction函数)
//使用回调函数将时序函数作为参数传入
function animate(duration, timingFn, callback) {
        // 声明开始时间
        var startTime = performance.now();
        requestAnimationFrame(function move(now) {
            // 求出已过时间
            var passTime = now - startTime;
            // 求出比例
            var bite = passTime / duration;

            if (bite > 1) {
                bite = 1;
            }

            // 要执行的动画过程
            callback(timingFn(bite));

            if (bite < 1) {
                requestAnimationFrame(move);
            }
        })
    }

6.H5&C3补充
7.Flex
8.jQuery
9.jQuery动画-补充
10.swiper插件