JavaScript（三）

BOM

BOM是浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
也是JS的一个接口

这里要注意：不可以用 name 作为声明名字，因为 window.name本身是有定义的。

一、使js代码在确保页面加载完成后再进行（onload）

1、一般写一个然后全包含：

window.onload = () => {
	这里写 js 操作代码
}

2、如果需要写多个 load ，则使用监听函数

window.addEventListener('load',function(){ ... });

3、在页面图片太多的情况下，使用这种这种写法可以先加载页面出来，再加载图片，flash，css等，加载速度比 load 更快些。

document.addEventListener('DOMContentLoaded', function () { })

二、调整窗口事件

只要窗口发生变化，就会触发 resize 事件，所以一般配合 window.innerWidth 窗口宽度高度来响应变化

window.addEventListener('resize', () => {
    if (window.innerWidth <= 800) {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
})

三、定时器（自动循环工具）

1、一次性定时器
后面的数字是毫秒，不写的话默认是0

setTimeout(function(){ ... }, 2000)

2、停止定时器 clearTimeout( … )
首先定时器应该有名字

var time1 = setTimeout(function(){ ... }, 2000)

xxx.addEventListener(' 触发类型 ',()=>{
	clearTimeout( time1 )
})

3、重复定时器
后面的数字表示，每隔2秒执行一次函数

setInterval(function(){ ... }, 2000)

4、停止重复定时器
首先定时器应该有名字

var time2 = setInterval(function(){ ... }, 2000)

xxx.addEventListener(' 触发类型 ',()=>{
	clearInterval( time2 )
})

四、同步 / 异步

JS是单线程语言。为了解决这个问题，HTML5 提出了 Web Worker 标准，允许建立多线程。于是出现了同步和异步

系统自动分为同步任务和异步任务
1、同步任务指的就是直接的执行语句，放在执行栈中，优先执行
2、异步任务指的是子语句、回调函数、条件方法体等，放在异步处理进程中，分别处理执行

系统优先执行同步任务，再到异步处理进程中，寻找执行语句，并依次执行，在寻找再执行，形成事件循环。

五、location对象

1.URL

统一资源定位符，是互联网上标准资源的地址。互联网上每个文件都有一个唯一的URL，包含信息指出文件的位置以及浏览器应该怎么处理它。

语法格式为如下：

protocol://host [:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议常用的 http,ftp,maitos等
host	主机(域名) www.itheima.com
port	端口号 可选，省略时使用方案默认端口 如http的默认端口为80
path	路径 由 零或多个 ’ / ’ 符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数 以 键值对 的形式通过＆符号分隔开来
fragment	片段 #后面内容 常见于链接 锚点

2.获取URL参数数据

① 举一个例子：
前面有一个表单：

经过输入并点击登录之后 （这里注意，中文字符会被编译成乱码，需要翻译，后面学好了补回来）
index.html网页中就收到了location参数，此时如果直接输出，则会输出带 “？” 的参数

使用 substr 截取掉？并使用 split(’=’) 识别分割成字符串，就可以提取其中的数据信息了

3、location对象常用方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（支持记录历史，可以实现后退功能）
location.assign()	替换当前页面（不记录历史，所以无法后退页面）
location.assign()	刷新页面，如果里面的参数为true，就相当于强制刷新

六、navigator对象

navigator对象包含有关浏览器的信息，有很多属性
最常用的就是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值

七、history对象

history对象用于网页的历史记录交互功能。

history对象	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能，尝试如果是1 => 前进1个页面，如果是-1 => 后退1个页面

八、PC端网页特效

1、元素偏移量 offset 系列

使用offset系列的相关属性可以动态得到该元素的位置、大小等信息

、获得元素距离带有定位父元素的位置
、获得元素自身的大小（宽度高度）
、返回的素质都不带单位

offset系列常用属性：

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素 如果父级都没有定位这返回 body
element.offsetTop	返回元素相对带有定位的父元素上方的偏移
element.offsetLeft	返回元素相对带有定位的父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

2、offset 与 style 的区别

简而言之就是，用 offset 来获取元素大小，用 style 来更改值

3、元素可视区 client 系列

通过 client 的相关属性来获取元素可视区的相关信息，该元素的边框大小、元素大小等
注意的是：clientWidth 的获取和 offsetWidth 获取的区别，一个带单位带边框，另一个不带边框

4、元素滚动 scroll 系列

主要适用于内容大于盒子大小的情况，此时内容会有滚动效果
如果单纯使用 clientHeight 只会返回可视区的大小，并非内容

如果是页面被卷去头部，用 window.pageYOffset 来获取

九、立即调用函数

# 常规：
function fn(){
	......
}
fn();

# 立即调用：
(function(){
	......
})() 
//这里加个小括号表示立即调用，括号内也可以用来传递参数，但需要和前面的括号里面的参数格式对应

十、实现动画的原理

1、获得盒子当前位置
2、让盒子在当前位置加上1个移动距离
3、用定时器不断重复这个操作
4、加一个结束定时器的条件
5、注意此元素需要添加定位，才能使用 element.style.left。

1、动画封装

① 要有两个参数，（目标对象，目标位置）
② 将整个动画过程，用一个带参数的方法封装起来，使用参数调用方法的方式调用方法。
③为了避免事件重复触发造成死循环，一般方法内加上调用前先清除原方法的方式

2、缓动动画（变速运动）

① 加回调函数：
回调函数需写在定时器里面；
回调函数可以作为参数写在实参里面。

② 减速运动的算法：（目标值 - 现在的位置）/ 10 = 每次移动的距离
（需要加个停止条件，否则就会不断移动成为死循环）
建议把步长取整数，不要出现小数的情况，正数向上取整（Math.ceil），负数向下取整（Math.floor）

3、动画效果通用 js 代码

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(() => {
        let step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (callback) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 30)
}

十一、复制

xxx.cloneNode(); 克隆函数，复制并返回副本
括号内是 true，则复制 xxx 节点的所有子孙节点
若是flase，则只是复制 xxx 节点的所有子节点

十二、手动调用鼠标键盘事件

例如，一个鼠标点击事件

arrowL.addEventListener(‘click’, () => { … }

我们可以直接手动调用

arrowL.click();

十三、节流阀

为了防止点击过快造成动画异常
思路是建立一个锁（true / false），在动画的前后进行锁住和打开，并结合回调函数

function xxx(){
	flag = false; //关锁
	......
	animate(obj,target,()=>{
		flag = true; //开锁
	});
}

十四、滚动到页面某个地方（例如返回顶部）

window.scroll(x,y);

（普通页面只需要y值的具体大小即可）
想在跳转页面中加上动画效果

① 把原本的动画中的 obj.offsetLeft 改成 window.pageYOffset （垂直页面距离）
② obj.style.left = obj.offsetLeft + step + ‘px’; 改成 window.scroll(0, window.pageYOffset + step);
③ 调用对象设置为 window

十五、移动端

1、触屏事件

2、触摸事件对象

① touchstrat 对象

3、拖动元素

① 使用 touchstart 、 touchmove 、touchend 结合实现拖动元素的操作
② 手指坐标用 targetTouches[0] 里面的 pageX 和pageY
③ 手指移动距离+盒子原来的位置=盒子拖动后位置
④ 手指移动距离：手指滑动中的位置 - 手指刚开始的位置
⑤ 格外注意，考虑是否要阻止屏幕滚动事件，否则移动模块屏幕也会影响

var div = document.querySelector('div');
var startX = 0;  //手指的初始坐标
var startY = 0;
var x = 0;  //盒子的初始位置
var y = 0;

div.addEventListener('touchstart', (e) => {
    startX = e.targetTouches[0].pageX;
    startY = e.targetTouches[0].pageY;
    x = div.offsetLeft;
    y = div.offsetTop;
})
div.addEventListener('touchmove', (e) => {
    //手指移动距离
    let moveX = e.targetTouches[0].pageX - startX;
    let moveY = e.targetTouches[0].pageY - startY;
    //移动盒子
    div.style.left = x + moveX + 'px';
    div.style.top = y + moveY + 'px';
    //阻止屏幕滚动的默认行为
    e.preventDefault();
})

4、移动端轮播图

5、移动端功能插件

www.swiper.com.cn
www.superslide2.com
github.com/cubiq/iscroll

① 引入相关 swiper 文件

<link rel="stylesheet" href="../../swiper-bundle.min.css">
<script src="../../swiper-bundle.min.js"></script>

② 按规定使用插件

1.打开想要的功能插件的相关网页
2.原封不动的复制里面的结构样式及js
3.再在上面进行一定基础的修改即可