第七周到第十三周复习笔记

第七周到第十三周知识复习笔记

第七周

• JS盒子模型
  • client类
  • offset类
  • scroll类
• 字符串search()与indexOf()的区别和应用场景
  • indexOf()方法：查找字符串中特定的字符；
    • 缺点：只能查找一个特定的字符；
  • search()方法：查找字符串中符合要求的一类字符；配合正则使用；
    • 优点：查找一类符合要求的字符；
  • 二者返回值：存在，返回下标值；不存在，返回-1;
  • 一般用于查找浏览器种类；查找IE6/7/8浏览器，配合window.navigator.useragent
• 获取元素身上的属性
  • getComputedStyle()方法，是window的属性；属性值构造函数；
    • 代码：window.getComputedStyle(oDiv,null).width，其中null没有含义,其位置可以设置任何值；
    • 兼容性：标准浏览器（包括IE9/10/11)支持；IE5/6/7/8浏览器不支持，会报错；
  • currentStyle属性，是元素身上的属性；
    • 代码：oDiv.currentStyle.width；
    • 兼容性：IE浏览器（包括IE9/10/11)都支持；标准浏览器（Chrome）不支持，会报错；
  • 报错条件判断使用try{...}catch(e){...}；
  • 可以使用if...else条件判断语句，判断条件为window.getComputedStyle是否存在；
• 工具库封装之getCss()
  • getCss():获取元素身上的属性；
  • 判断条件使用try.catch方法,也可以使用if..else...方法；
    • 标准浏览器（包括IE9/10/11）中使用getComputedStyle();IE8及其以下浏览器用currentStyle方法；
  • 封装中针对属性值的不同种类进行细化操作；
    • 数字加单位，如200px，属性名为width等;
    • 字符串单词，如solid，属性名为borderStyle等;
    • 二进制颜色值，如#fff，属性名为color等；
  • 属性值不能是复合值；如background,border,padding;
  • 针对不同浏览器的兼容处理设置的代码；如透明度的设置；
• 结构父级和定位父级
  • 结构父级：指节点的上一级节点，通过parentNode来获取；
    • 最大的结构元素为html元素；
  • 定位父级：添加定位元素的上一级定位元素，通过offsetParent来获取；
    • 最大的定位父级元素为body元素；(IE7浏览器中body外还有一个定位父级，未知)；
• 封装offset方法
  • 目的：获取指定元素ele到浏览器视口左边缘和上边缘的距离；
  • 分析：
    • 在IE8/9/10/11浏览器和标准浏览器(Chrome等)中
      • 最大的定位元素为body;
      • 如果一个元素的定位父级为body；那此时它的offsetLeft/offsetTop指的就是从自己的边框外边缘到浏览器视口的左边缘和上边缘之间的距离；包括了body元素的margin，padding，border；
      • 获取指定元素ele到浏览器视口左、上边缘的距离：ele到自己的定位父级的距离+此定位父级的左/上边框+它到body元素的offsetLeft/Top值；
    • 在IE7浏览器中
      • 最大的定位元素不为body；比body大一级；
      • 与IE8/9/10浏览器和标准浏览器不同的是，会多出2px的距离；
    • 在IE5浏览器中
      • 最大的定位元素为body；
      • 与IE8/9/10浏览器和标准浏览器不同的是：如果一个元素的定位父级为body，那它的offsetLeft/offsetTop值不包括body元素的左/上边框宽度；
  • 封装兼容的offset方法：
    • 判断条件为：while(par || par!==document.body){}
    • IE7浏览器不需要处理，到左上边缘距离就是多2px;
    • IE5不考虑，没有办法，放弃；
• 封装win方法
  • 获取浏览器区域的宽高和左上卷去长度的兼容代码：
    • 宽度：document.documentElement.clientWidth || document.body.clientWidth
    • 高度：document.documentElement.clientHeight || document.body.clientHeight
    • 左卷去长度：document.documentElement.scrollLeft || document.body.scrollLeft;
    • 上卷去长度：document.documentElement.scrollTop || document.body.scrollTop;
  • 设置浏览器区域的左上卷去长度；
    • 左卷去长度：document.documentElement.scrollLeft=document.body.scrollLeft=xxx;
    • 上卷去长度：document.documentElement.scrollTop=document.body.scrollTop=xxx;
  • 封装思想：
    • 根据函数是否传第二个实参值，来判断是获取还是设置；
    • 获取有返回值，设置无返回值；
• 元素的行间样式设置和非行间样式的获取
  • 行间样式设置通过style设置，如oDiv.style.width="500px";
  • 封装的getCss()方法，可以获取非行间样式，也能获取行间样式；
• 跑马灯实例和瀑布流实例
• 回到顶部实例
  • 基本功能：点击回到顶部按钮，滚动条滚动到顶部；
  • 升级1：当scrollTop大于一屏的高度时，按钮显示；小于一屏的高度时，按钮隐藏；
  • 升级2：点击回到顶部按钮，按钮隐藏，滚动条滚动；
  • 升级3：点击回到顶部按钮，按钮不隐藏，滚动条滚动，滑动鼠标滚轮，滚动条立即停下；
  • 升级4：点击回到顶部按钮，按钮隐藏，滚动条滚动，并且滑动鼠标滚轮，滚动条立即停下；
• 元素分布显示实例-“恭喜发财”四个字的延迟显示
  • 知识点：
    • 设置原来的元素透明度为0；可以给元素设置transition过渡效果；
    • 设置全局变量n，作为元素的索引；
    • 通过定时器来使n自增；然后n作为索引，让指定元素透明度为1；
    • 就实现了每个元素隔一段时间就依次显示的效果；
• 单张图片的懒加载
  • 知识点：
    • 给页面中img标签添加自定义属性，用于储存src地址，需注意的是，已经设置的自定义属性必须用getAttribute()获取，不能用点获取；
    • 两个事件，onload事件：元素加载成功后触发；onerror事件：元素加载失败后触发；
    • 图片懒加载的判断条件：utils.offset(img).top+img.offsetHeight<scrollTop+clientHeight
    • 图片懒加载：指的就是判断条件成立后，图片加载，加载时先验证；
    • 创建img标签，可以实例创建，也可以创建元素；将页面标签上的自定义属性值赋给此元素，判断其是否加载成功；
    • 在lazyLoad()函数中，需要添加一个判断条件，图片只懒加载一次，所以给元素添加自定义属性loaded，判断其是否存在；
• 多张图片的懒加载；
• 花瓣网终级版实例；
• 封装工具库；
  • getByClass()
    • 在IE8及其以下浏览器中document.getElementsByClassName()方法不支持；需要自己封装；
• 封装工具库，共27个方法；

第八周

• webstorm中支持es6的设置：Preferences > Languages & Frameworks > JavaScript > ECMAScript 6
• 箭头函数的this指向
  • 箭头函数中的this指向与父级中的this指向相同；
• class创建类
  • 私有属性，公有属性，静态属性的创建；
• 类的继承
  • super()设置：子类会继承父类的私有属性，并且子类的原型作为父类的实例；
    • 子类原型上不存在父类的私有属性；
    • 子类原型上存在constructor属性，属性值为子类构造函数；
  • 子类函数的__proto__指向父类函数；即父级类函数在子级类函数的原型链上；
    • 这样子类函数就可以调用父类函数身上的静态属性；
• es6增加的特性
  • 对象字面量创建：如果对象中的属性名和属性值相同，则可以写一个；
  • 字符串模板：字符串拼接变量；如meihao${str};
  • 对象解构赋值：将对象身上的属性名解构出来，当使用时，直接使用属性名，就能拿到属性值，不用再使用对象点属性名获取；
    • 表达式：var {属性名1，属性名2}=obj
    • 注：若对象身上的属性值为函数时，调用函数时，里面的this指向不再是对象，而是window;
• var,let,const三者的区别
  • var可以进行预解释，而let,const不能进行预解释；
  • var可以重复设置声明，不会报错；而let不能重复设置声明；
  • let会形成私有作用域；const设置一个常量，不能更改；
• 箭头函数中的形参
  • 设置默认的形参值：var fn=(a=3,b=5)=>{console.log(a+b)}
  • 箭头函数体内不能通过arguments来获取所有形参值，可以设置...keys形参，通过keys来获取形参；如果不没有实参，则获得空数组；
• 扩展运算符
  • ...数组名:代表将数组中的所有元素当成参数依次传入，与apply传参相似；
• 三个小球运动实例
• promise概念和实例
• 小球左右运动的实例及优化版；
  • 定时器timer，设置在运动小球元素上，设置成自定义属性；可以避免全局变量；
  • 点击事件触发，必须关闭定时器；
• 封装运动库
  • 运动库封装在自执行函数中，其中的函数就不是全局函数，必须设置成全局函数，才能被调用；
    • 即代码window.animate=animate;
  • 传入的target是一个对象；里面添加多个属性对；
    • 在封装函数中新建两个对象，begin和change
    • 遍历target对象，分别将起点位置和总路长存在两个对象中；
  • 重点：先开启定时器，然后在遍历begin对象，分别求出各属性的实时位置，然后设置在该元素身上；
• 左右轮播图制作
• jQuery知识点
  • 原生JS代码放在head标签中的代码；如window.onload=function(){};
  • jQuery中JS放在head标签中的代码；
    • 代码$(function(){xxxx})或$(document).ready(function(){xxx});
• 选择器
  • xxx.first-of-type：指的是xxx找到的元素为其所有同级标签中的同类型的第一个；
• jQuery中给jQuery添加静态方法和公共方法
  • 添加静态方法：$.extend({tab:function(){...}})；类函数可以调用，如：$.tab()；
  • 添加原型上的公共方法：$.fn.extend({tab2:function(){...}})；实例可以调用，如：$("div").tab2()；

第九周

• 事件分类
  • 分为DOM0级事件和DOM2级事件
  • DOM0级事件：
    • 绑定：ele.onclick=fn;
    • 解绑：赋值null;ele.onclick=null;
  • DOM2级事件：
    • 标准浏览器(包括IE9/10)：
      • 绑定：ele.addEventListener(type,fn,userCapture);
      • 解绑：ele.removeEventListener(type,fn,userCapture)
      • userCapture:人为控制发生事件流在哪个阶段（捕获/冒泡）；其中true：为捕获，false：为冒泡；默认为冒泡；
    • IE7/8浏览器：
      • 绑定：ele.attachEvent("on"+type,fn);
      • 解绑：ele.detachEvent("on"+type,fn);
  • 元素的原型链：元素本身—HTMLDivElement—HTMLElement—Element—Node—EventTarget—Object;
• 事件流：
  • 构成：捕获 target事件流 冒泡；
  • 捕获：从高级到本身，依次触发同一行为（事件）；
  • 冒泡：从本身到高级，依次触发同一行为（事件）；
  • 一个元素触发顺序：先捕获,后冒泡；
  • 注意：
    • DOM0级事件只发生冒泡不发生捕获；
    • DOM2级事件通过addEventListener绑定时，userCapture值默认为false，只发生冒泡；设置userCapture值为true，则只发生捕获；
• 事件类型
  • 鼠标事件
    • 主要类型：onclick(单击),ondbclick(双击),onmouseover/onmousenter(光标移入)，onmouseout/onmouseleave(光标移出)；
    • onmouseover与onmouseout两者为一对，子级会发生冒泡事件；
    • onmouseenter与onmouseleave两者为一对，子级不会发生冒泡事件；
  • 系统事件
    • 类型：onload,onresize,onscroll;
  • 键盘事件
    • 类型：onkeyup（键盘抬起）,onkeydown（键盘按下）,onkeypress（键盘按下抬起事件）
  • 表单事件
    • 类型：onfocus：表单聚焦事件；onblur：表单失焦事件；autofocus:自动聚焦；
• 事件对象
  • 事件触发后，会产生事件对象；
    • 标准浏览器：会默认向函数体内传入事件对象；可以通过形参获取；
    • IE6,7,8浏览器：不会默认传实参，只能通过window.event来获取；
    • 事件对象的兼容代码：e=e || window.event;
• 事件源：指的是触发事件的元素
  • 标准浏览器：事件对象中存在两个属性target和srcElement，通过它们都可以获取事件源；
  • IE6,7,8浏览器：事件对象不存在target属性，只存在srcElement属性；
  • 事件源的兼容代码：e.target= e.target || e.srcElement；
• 事件行为：指的就是执行什么事件；如click，就是鼠标点击行为；
  • 事件对象中可以通过type属性获取该行为，如e.type；
• 鼠标事件对象：MouseEvent
  • 坐标属性：clientX,clientY
    • 定义：指的是距离当前可视区域左上角的坐标；
    • 兼容性：所有浏览器都兼容；
    • 代码：console.log(e.clientX,e.clientY)
  • 坐标属性：pageX,pageY
    • 定义：指的是距离第一屏左上角的坐标；
    • 兼容性：IE6,7,8浏览器不兼容；
    • 代码：console.log(e.pageX,e.pageY)
    • 与clientX/Y的区别：相差的是浏览器卷去的长度；
    • 兼容代码：

     e.pageX=e.pageX || e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft);
     e.pageY=e.pageY || e.clientY+(document.documentElement.scrollTop || document.body.scrollTop);
    

• 键盘事件对象：keyboardEvent
  • 键盘码属性：keyCode
    • 键盘上每个键都对应着一个键盘码，为数字；
    • 代码：e.keyCode;
• 阻止默认事件的兼容代码：
  • 代码：e.preventDefault?e.preventDefault():e.returnValue=false;
• 阻止冒泡的兼容代码
  • 代码：e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
• 冒泡的运用：事件委托
  • 事件委托：将事件行为绑定在父级身上，通过子级触发该行为，在父级绑定函数中拿到事件对象，获取事件源，即获取触发的元素，然后对其进行其他的操作；
• 解决onmouseover和onmouseout事件中冒泡的问题
  • 解决方法：1）在子级中设置相同的行为事件，然后阻止冒泡；2）在父级事件函数中，通过事件对象，拿到事件源，进而进行筛选，阻止子级的触发；3）利用onmouseenter和onmouseleave事件代替；
• 封装myBind方法
  • bind方法在IE8及其以下浏览器中不能使用；
  • bind方法解析
    • 封装位置：Function类函数的原型上；
    • 参数：第一个参数必传：改变this指向，默认传给函数体事件对象；
    • 返回值：函数体；
    • 重点：向函数的函数体内默认传入事件对象；
  • bind方法的结果：函数的预处理，可以改变this指向，并且可以向函数体内传实参；还能在实参的后面默认传入一个事件对象（在事件赋值中存在）；
  • bind方法的问题：bind方法配合事件使用时的问题
    • 事件的赋值函数，如果直接将函数名赋值给事件，则函数体内的this为该触发元素；若赋值为fn.bind()，通过bind进行预处理后，函数体内的this就跟bind的第一个参数有关；若赋值为null，则fn函数体内的this为window，因为其函数定义阶段就是在window中，如果想让函数体内拿到元素，则赋值为该元素；
• 元素DOM2级事件绑定
  • addEventListener()：适用于标准浏览器（包括IE9,10）；解绑：removeEventListener()；
  • attachEvent()：适用于除了标准浏览器的其他浏览器；解绑：detachEvent()；
    • 存在的问题：
    • 1）乱序执行；
    • 2）触发时函数体内的this为window；
    • 3）重复绑定同一函数问题；
  • 注：attachEvent()绑定的函数体，事件触发时，会默认向函数体内传事件对象实参；
• 封装事件库：
  • 思路：三个函数
    • 绑定on
    • 执行run
    • 解绑off;
  • 知识点：
    1）元素设置自定义属性，属性值为数组，用于存储绑定的函数；
    2）将run函数绑定在系统事件池中，只绑定一次；通过attachEvent绑定run,run函数体内的this为window；必须通过call来给run里面传入当前元素，不能通过e.target来拿元素，会出错，在事件委托时，事件对象不再是父级容器，而绑定是给父级容器绑定的；
    3）run函数中，主要是执行数组中的函数，需要对数组元素进行筛选，删除null元素；在执行函数时，需要通过call来保证函数体内的this为触发元素，可以通过事件对象来获取元素，默认向函数内传事件对象；
    4）解绑时，将数组内的元素赋值为null,并break阻止循环继续；
• 多级菜单实例
  • html架构：ul下多个li，其中需要扩展的li中包含i标签，span标签，ul标签；依次嵌套；
    • i标签中通过背景图设置加减图标；span标签中为li元素中的内容；ul为扩展的菜单；
  • 思路：
    • 利用冒泡思想，将事件委托在外层容器上，通过事件源来判断触发事件的元素；
    • 显示和隐藏的设置思路：
      • 判断条件：判断触发元素的父元素节点，它下面的ul的显示隐藏状态；
      • 若为显示状态，则让父级节点下的子孙ul隐藏，并设置子孙i元素的背景图为加号；
      • 若为隐藏状态，则让父级节点下的儿子ul显示，并设置儿子i元素的背景图为减号；
• 放大镜实例
  • 边界值获取时注意：容器通过clientWidth/clientHeight来获取宽高，容器内的元素通过offsetWidth/offsetHeight来获取宽高；
  • 小图与大图对应移动的思路：
    • 分别获取小图中移动的元素的最大值和大图移动的最大值；
    • 小图和大图位置呈现相同的方法：通过比例对应；小图的left值和大图的left值成比例，比例为二者最大值的比值；
  • 小图中p移动时，边界值的判断和设置；
  • 光标的位置最好使用：pageX和pageY;
• 产品展示实例
  • 知识点：
    • 通过display:flex布局，如果元素为内联（块状）元素，会在IE8及其以下浏览器出现空白节点间距，解决办法：将标签之间紧密相连，不留空隙；或使用浮动代替flex布局；
    • background-size在IE8及其以下浏览器中不兼容，不能使用；
    • 获取移动元素定位时，通过pageX和pageY获取光标位置；通过封装的offset方法，来获取外部容器到浏览器边缘的上左边距；计算出移动元素的定位数值；
• 焦点捕获与焦点释放
  • 焦点捕获：setCapture，给一个元素设置焦点捕获后，焦点永远在该元素上；代码：oDiv.setCapture();
  • 释放焦点捕获：releaseCapture；代码：oDiv.releaseCapture();
  • 兼容性：IE浏览器支持，FireFox火狐浏览器支持属性，但无效果，其他浏览器不支持；
• 拖拽实例
  • 问题1：光标快速滑动时，会跑出移动元素，会出现问题；
    • 解决方法：1）IE浏览器中，通过setCapture焦点捕获在移动元素身上；2）其他浏览器，将事件绑定在document身上；
  • 绑定在document身上，move函数中this就不再是移动元素，可以使用bind来进行函数预处理，保证move函数中this为触发元素；
  • 通过bind预处理的函数与原来的函数，二者不再是同一个函数体，是不同的地址；在函数解绑时，会出现问题；
    • 解决方法：可以将bind预处理的函数绑定在原函数的静态属性上，这样在解绑时，就可以通过静态属性拿到函数体；

第十周

• 百度搜索框实例
  • 知识点：
    • 文本框中可能出现空格，筛选空格，通过正则筛选；得到筛选后的文本框内容长度，通过判断内容的长度是否为0，来控制ul的显示和隐藏；
    • 实例中的点击事件，通过事件委托在外围容器上，通过事件源来判断触发元素，进而进行相应的设置；
    • 页面跳转代码：window.open("url")：跳转到新的页面中；window.location.href="url"：在本页面中打开；
    • jQuery中在函数中添加代码:return false的作用有三种：1）阻止程序执行；2）阻止默认事件；3）阻止冒泡；
  • 注意：
    • 在绑定keyup事件时，不能使用jquery中的keyup事件或on事件绑定；因为jQuery中的事件，可以重复绑定同一个方法，多次执行；而是绑定DOM0级事件，这样同一个方法只会执行一次；
    • 文本框当按键盘上键时，光标会默认到文本内容的最前面，所以需要控制光标的位置；此方法效果不好；
    • jQuery获取的元素无DOM映射，所以在DOM操作后，必须重新获取元素；
• 封装myAjax函数

• 知识点：
  • 钩子函数设置的位置：fnLoading,complete,error,success;
    • fnLoading:设置在响应请求之前的准备，即xhr.onreadystatechange(){}的前面；
    • complete:设置在xhr.readyState===4成功后，即请求成功；
    • success：设置在状态码为2xx后，即响应成功后设置；
    • error:设置在状态码不为2xx后，即响应失败后设置，传入的实参为状态码；
  • 新建xhr对象的兼容代码：兼容IE6
    • 判断条件：window.XMLHttpRequest；因为每一个类函数都是window的属性；
    • 兼容代码：xhr=new ActiveXObject("Microsoft.XMLHTTP");
  • get与post请求，二者传递给服务器参数的方法；
    • get请求：将参数以键值对形式字符串，通过"?"拼接到url后面；
    • post请求：设置请求头，通过send传递参数，参数为键值对形式的字符串；
      • post请求时，设置请求头代码：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
  • jsonp请求时的全局函数创建；
    • 全局函数可以通过随机数和时间戳来设置不同的函数名，但是要注意全局函数名不能存在小数点；
    • jsonp请求与xhr请求不同，是两个独立的请求方式，所以，当为jsonp请求后，后面的代码都不需要执行，所以需要在switch中jsonp的情况后，设置return；阻断程序执行；
  • 加载超时timeout的设置；
    • 通过setTimeout()来设置一个定时器，在超过设置的timeout后，触发函数，弹出超时，并给xhr.onreadystatechange赋值为null;
    • 需注意的是：在请求成功后，必须设置关闭定时器；
  • 每一个类函数都是window的属性；
  • 封装后的使用：get请求，用于获取数据；post请求，用于提交数据；jsonp请求，用于跨域请求（目前只能跨百度服务器）；

• bind预处理函数知识
  • bind预处理后的函数与原函数不同，不是同一个地址，当与on/off绑定事件和解绑事件配合使用时，给元素绑定bind处理后的函数体后，在解绑时，会出现问题；
  • 解决方法：可以将bind预处理后的函数体设置为原函数的静态属性值，储存在原函数的静态属性上，当解绑时，直接解绑静态属性即可；
• 拖拽实例
  • 拖拽实例中的问题：
    • 移动速度过快时，光标会抛出移动元素，导致move事件不再触发；会出错；
      • 解决方法：1）IE浏览器，设置焦点捕获，将焦点捕获在移动元素身上；2）标准浏览器，将move和up事件绑定在document元素上；
    • 移动过程中，会默认选中文字；
      • 解决方法：1）IE浏览器中，由于焦点捕获在移动元素身上，所以不会出现此问题；2）标准浏览器，阻止默认事件；
  • 拖拽中的数据获取：1）移动元素到浏览器边缘的距离，使用自己封装的offset方法，不能使用offsetLeft/offsetTop方法，会出错；2）通过事件对象获取光标位置时，使用自己封装的兼容的pageX和pageY，使用clientX和clientY当浏览器存在滚动长度时，会出错；
  • 标准浏览器中，将move事件绑定在document身上，则toMove函数中的this就为document元素了，不再是移动元素；所以需要通过自己封装的myBind方法，进行函数的预处理；
    • 问题：通过myBind方法预处理后的函数与原函数不是同一个函数，地址发生变化，所以在解绑的时候，就不能解绑了；
    • 解决方法：可以将myBind方法预处理的函数绑定在原函数的静态属性上，然后在解绑时，通过原函数的静态属性拿到绑定的地址函数，就能够解绑了；
• 运动小球的拖拽实例
  • 在拖拽实例基础上增加了x轴和y轴方向上的运动；
• 订阅式发布
  • 实质：给元素创建一个自定义行为，这个行为包括很多方法，当需要执行该元素身上的这个自定义行为时，让所有的跟有关的方法都执行；
  • 思路：
    • 封装两个函数on和fire;
    • on函数：
      • on函数作用：创建自定义行为，给元素绑定该行为命名的自定义属性，属性值为数组，插入多个方法；
      • 参数：ele元素 type自定义行为 fn方法
      • 1）创建一个自定义行为type，将其作为属性名，在元素身上创建一个自定义属性，属性值为一个数组；
      • 2）将每次绑定的函数，插入到创建的数组中，注意不要重复绑定同一方法；
    • fire函数：
      • fire函数作用：执行该函数，获取到数组，遍历执行数组内的函数；
      • 参数：type自定义行为 e事件对象
      • 执行数组内的函数时，通过call来保证函数内部的this为绑定的元素，并默认传入事件对象e;
      • 注意：fire函数执行时，默认其中的this为window，所以也需要通过call来保证fire函数体内的this为绑定的元素本身；
• 封装EventEmitter类函数
  • 作为订阅式发布使用，通过继承，让其他的类继承它的方法；
  • 三个公共属性：on、fire、off;
  • on属性：
    • 参数：type自定义行为 fn待绑定的函数
    • 返回值：返回实例this
    • 实例this上设置属性type，属性值为数组，将方法插入到数组中，注意避免重复绑定问题；
  • fire属性：
    • 参数：type自定义行为 e事件对象
    • 返回值：无
    • fire函数中获取数组，然后遍历执行，要先判断遍历得到的元素是否为函数（可能存在null），然后通过call来保证函数执行时，内部this为实例，并传入事件对象e；
  • off属性：
    • 参数：type自定义行为 fn待解绑的函数
    • 返回值：无
    • off函数中获取数组，然后遍历，判断是否与fn相同，若相同，赋值为null,并break阻断循环；（不能删除该项，会出错）
  • 注意：当在fire和off中获取数组时，必须注意一种情况，若没有绑定，使用fire或off时，数组不存在，则不会有length属性，所以需要赋值为空数组；
  • 使用：其他类函数继承EventEmitter类函数，即可获取其公共属性on、fire、off；再通过实例引用；
• es5、es6面向对象版的带订阅式发布的拖拽实例；

第十一周

• 照片墙实例
  • 知识点：
    • 元素没有添加绝对定位，也可以通过offset来获取到定位父级的left值和top值；
    • 定位布局中，子级元素盒子模型（包括margin在内）相对于父级元素的边框内边缘定位；
• 音符实例
• html5兼容IE6-IE8代码：在head变迁中引入htmltshiv.js插件

   <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
   <![endif]-->
  

• html5分类
  • 兼容性：标准浏览器支持，IE9及其以上浏览器支持；其他不支持；
  • 新增属性：
  • 多媒体：audio,video
  • 应用存储：webStorage；分为：localStorage和sessionStorage
  • localStorage：本地存储在浏览器中；不能传递给服务器端；
    • 生命周期：只要通过setItem()设置后，在同一个浏览器中，就已经存储上，不会消失，只能通过removeItem()或clear()来删除；注意：同一个浏览器中不同的文件中，都可以拿到存储数据，并对其进行操作；
    • localStorage:是类函数Storage的实例，类的原型上存在多个方法，进行本地存储的操作；
    • 私有属性：length，指绑定key的个数；
    • 方法：setItem(key,value);getItem(key);removeItem(key);clear();key(索引值)
    • 调用方法：window.localStorage.setItem();，其中window可以省略；
  • sessionStorage：本地存储在一个会话中，即一个页面中；
    • 生命周期：储存在本窗口中，其他窗口不能获取，关闭窗口后，存储的数据会销毁；
    • sessionStorage:也是类函数Storage的实例，存在私有属性和调用类函数的公共方法；
    • 调用方法：windos.sessionStorage.setItem();;
  • 新增获取元素的方法：querySelector,querySelectorAll;
    • 获取第一个满足条件的元素：document.querySelector(".mei");
    • 获取所有满足条件的元素：document.querySelectorAll(".mei");
  • 新增元素类名操作：classList
    • 格式：ele.classList.xxx(className)
    • 方法：add(),remove(),contains(),toggle(),item(索引值),value();
• canvas时钟实例
  • 知识点：
    • 画布偏移：translate(x,y);将画布原点（0,0）位置移动到（x,y）点；
    • 画布旋转：rotate(angle);其中angle为弧度；
      • 整个画布会被旋转；原点位置被改变；
    • save():保存当前环境的状态；
    • restore():返回之前保存过的路径状态和属性；
    • 配合使用：
      • 改变画布的位置：偏移translate(),旋转rotate();
      • 在改变画布位置之前，通过save()来保存原来画布的位置；然后进行修改；
      • 当需要使用修改之前的画布位置时，通过restore恢复原来的位置；
      • 使用：只要修改位置，就必须在此之前保存初始位置，修改位置后，相对应的操作完事后，恢复初始位置；
      • 注意：通过save()保存住第一次的位置，然后通过restore()获取第一次的位置，紧接着，若需要修改位置，必须通过save()再次保存住第一次的位置，否则，再通过restore()拿到的位置不再是第一次的位置，而是修改后的位置；
    • arc()绘圆，其中半径值为圆心到圆线的宽度中心线的距离;
    • ctx.textBaseline="top/bottom/middle/alphabetic(默认)/hanging"：设置文本的对齐方式；
  • 思路：
    • 绘制时钟时，通过translate()来偏移画布原点到时钟中心点；
    • 绘制时针，分针，秒针时，通过rotate()来旋转画布，进行设置；需注意：画布位置会被修改，所以需要通过save()保存住原位置，通过restore()来恢复原位置；
  • 重点：
    • 在绘制过程中必须时刻关注画布是否被修改，即添加偏移和旋转；
    • 使用的所有命令都是相对于原点来进行赋值的；
    • 当使用translate(x,y)来偏移原点位置到画布的x,y坐标处，然后再使用translate(0,0)进行偏移设置，此时原点位置还在原地，没有变化，因为0,0取值是相对于此刻的原点位置进行设置的，如果想回到原来的位置，可以通过translate(-x,-y)来回到原位置；
    • 在绘制画布时，要使用save()和restore()来保存原位置和恢复原位置；
    • 只要修改位置，就必须在此之前保存初始位置，修改位置后，相对应的操作完事后，恢复初始位置；
• jQuery中的offset(),获取到的left和top值为元素到浏览器窗口左上角的距离值；
• canvas炫酷小球实例
• CSS3知识解读
  • transition和animation的区别：
    • 正常情况下，二者都填在元素身上，但transition需要通过事件触发，设置要改变到的属性值，然后通过一个过渡过程执行，而animation不需要通过事件触发，直接加载后，就立刻执行；
    • transition只能从一个值变化到另一个值，执行一次；而animation可以分段执行；通过0-100%设置不同阶段来执行不同的代码；而且可以执行多次；
• CSS3 3D转换
  • transform-style:用于让子级元素在3D空间中显示；
    • 设置在父级元素中，使子级元素在3D空间中显示；不设置此属性，子级元素不会在3D空间中显示；
    • 代码：transform-style: flat/perserve-3d
  • perspective属性：透视，视觉；呈现出近大远小的效果；激活一个3D空间；
    • 代码：perspective: 2000px;单位为像素；
    • 设置在父级元素上，父级元素称为舞台元素，子级元素发生旋转等变形，才会有3D视觉效果；
    • 取值：
      • 取值为none,没有3D效果；
      • 取值越小，3D效果越明显；
  • transform-origin的设置，决定元素变形的基点位置；
  • 变形的设置先后顺序不同，效果也不同；如transform: rotateX(90deg) translateY(-25px)和transform: translateY(-25px) rotateX(90deg)
  • 3D旋转：rotateX/Y/Z
    • 绕X轴旋转：rotateX，从右向左看，顺时针为正，逆时针为负；
    • 绕Y轴旋转：rotateY，从下向上看，顺时针为正，逆时针为负；
    • 绕Z轴旋转：rotateZ，从外向里看，顺时针为正，逆时针为负；
• 3D切割图实例
  • 思路：
    • 不同的模块可以通过ul来设置，通过浮动来同行显示；
    • 每个模块ul中的li元素，通过3D旋转形成一个空间立方体；
    • 通过设置不同li背景图的定位，来进行不同背景图的显示；
    • 通过点击按钮来进行翻转；
    • 实现不同模块之间的延迟翻转：1）通过设置不同模块的transition-delay过渡延迟时间来实现；2）通过设置定时器，每个一段时间执行不同模块；
  • 点睛之笔：过渡延迟时间transition-delay的设置，实现不同模块之间的延迟翻转；
• fullpage.js插件实例
  • 回调函数
    • afterLoad: 滚动到某一屏后的回调函数，接收两个参数；
    • onLeave: 在滚动到下一屏之前的回调函数，接收三个参数；
  • 导航栏滑动色块的知识点
    • 页面布局：色块添加绝对定位，导航栏ul为绝对定位，即色块要相对于ul进行定位移动；色块在html中可以放在ul下的第一个li中；
    • 滑块的移动位置获取，可以获取li元素的offsetLeft值；滑动效果，要在滑块中添加过渡transition；
    • 三大事件：mouseover,mouseleave,click
      • 通过事件委托绑定在ul父级元素上，利用冒泡原理，在事件中获取事件源，然后进行一系列的操作；
      • mouseover事件：
        • 事件源为li或a元素；
        • 获取li的offsetLeft值来作为滑块定位的left值；设置属性滑动；
        • 筛除立即购买的li,当滑到其身上时，滑块不设置；
        • 当滑块滑到立即购买的li上时，让滑块回到点亮的位置处，可遍历其的所有兄弟元素，然后哪个存在cur类名，然后设置位置到此处；
      • mouseleave事件：
        • 与mouseout事件的对比：优点在于将ul和其下的所有子元素看成一个整体，只有在移出ul时，才会触发mouseleave事件；
        • 事件触发后，让滑块回到点亮位置处；
        • 注意：当光标移动到立即购买的li时，也不算移出，所以不会触发事件，所以就必须与mouseover事件中的设置对应，当光标移入立即购买的li时，让光标回到点亮处；二者相互照应；
      • click事件：
        • 事件源必须为a元素，因为只有点击a链接时，屏幕才会跳转；
        • 事件触发后，让a元素的父级节点li设置cur类名，其他的li兄弟删除cur类名；
    • 滚动页面时对应的导航栏的滑块滑动和对应的导航点亮
      • 利用onLeave回调函数，获取到下一屏的index值，然后设置对应导航的操作；
  • 知识点：
    • 在排除最后一个li时的代码:var $aLi=$("#myMenu").children("li:not(.lastLi)");
    • 锚点知识：window对象中存在location属性，属性中存在hash属性，属性值为锚点；所以通过window.location.hash="firstPage";来设置锚点；进而控制页面的跳转

第十二周