week4

animate.css动画库

    打开animate.css的官网
    下载
    引入此animate.css文件
    挑选动画，把class放到需要的此动画的元素上
    设置上animate-duration:几秒；
    需要根据不同的动画设置不同的初始效果才会好看

无缝轮播

    思路：
        始终只有一张图，点左点右默认图片出现的位置是不一样的rimg/limg
        始终同时做着一件事，第一张在离开，第二张在进来，动画完毕后要删除第一张
        图片的加载速度比js执行速度慢，所以要思考动画还是需要搭配onload事件
        小圆点要区分左右，需要得新的j和老的j进行比较

swiper插件：专门的轮播插件

    打开浏览器搜swiper
    点击开始swiper按钮可以做出最基本的轮播
    如果需要其他，就点导航上的在线演示
    挑选喜欢的右键打开源代码
    可以多个轮播之间可以混搭

封装一个运动函数

    function animate(selector,pbj){
        var elem=document.querySelector(selector);
        for(var i in obj){
                console.log(i);
                elem.style[i]=obj[i]
                }
            }

百度/高德地图

    打开浏览器：搜索百度/高德地图开放平台
    注册登陆账号
    滑到最下面-注册成为开发者跳转到控制台
    应用管理->我的应用->创建应用->应用名称随意->应用类型选择浏览器端->白名单：0.0.0.010
    得到密钥
    鼠标放到导航栏，开发文档JavaScriptAPI->示例DEMO->挑选喜欢德地图，复制到项目之中
    修改css/js代码，查询在线的经纬度(百度地图拾取坐标系统)
    注意：地图可以混搭 GL和GL混搭 普通版和普通版混搭
    Vscode必须使用live server打开

Objcet：对象

封装/创建/定义：封装自定义对象：3种

    直接量方式：
        var obj={
            "属性名":属性值;
            .......,
            "方法名":function(){操作}，
        }
    预定义构造函数方式：
        var obj=new Object();//空对象
        //需要自己后续慢慢添加属性和方法
        obj.属性名=属性值；
        obj.方法名=function(){};
    自定义构造函数方式：2步
        创建自定构造函数
            function 类名(name,age,hobby){
                this.name=name;
                this.age=age;
                this.hobby=hobby;
            }
        调用构造函数创建对象
            var obj=new 类名(实参,....)

继承：父对象的成员(属性和方法)，子对象可以直接使用

    为什么要继承：
        代码重用，提高代码的复用性，节约了内存空间，网站的性能自然也就提升了
    何时继承：
        只要多个子对象共用的属性和[方法]，都要集中定义在父对象之中
    如何找到原型(父对象)：保存一类子对象的共有属性和共有方法
        对象名.__proto__;//必须要先有一个对象
        构造函数名.prototype;

两链一包：作用域链和原型链和闭包

    原型链：每个对象都有一个属性：.__proto__,可以一层一层找到每个人的父亲，形成的一条链式结构，就称之为叫做原型链
    作用域链：
        作用域：2种
            全局：随处可用，可以反复使用，缺点：容易被污染
            函数：只能在函数调用时内部可用，不会被污染，缺点：一次性的，使用完就会自动释放
        函数的执行原理：
            程序加载时：
                创建执行环境栈(ESC)：保存函数调用顺序的数组
                首先压入全局执行环境(全局EC)
                全局EC引用着全局对象window
                window中保存着我们的全局变量
            定义函数时：
                创建函数对象：封装代码段
                在函数对象种有一个Scope(作用域)的属性：记录着函数来自的作用域是哪里
                全局函数的scope都是window
            调用前：
                在执行环境栈(ESC)中压入新的EC(函数的EC)
                创建出活动对象(AO)：保存着本次函数调用时用到的局部变量
                在函数的EC中有一个scope chain(作用域链)属性引用着AO
                AO还有parent属性是函数的scope引用着的对象
            调用时：
                正是因为有了前三步，才带来了变量的使用规则：优先使用局部的，局部没有就找全局，全局没有报错
            调用完：
                函数的EC会出栈，没人引用着AO，AO就会自动释放，局部变量也就释放了
      闭包：
          希望保护一个可以【反复使用的局部变量】的一种词法结构，其实还是一个函数，只是写法比较特殊
              何时使用：希望保护一个可以【反复使用的局部变量】
              如何使用：
                  两个函数进行嵌套
                  外层函数创建出受保护的变量
                  外层函数rueturn出内层函数
                  内层函数操作受保护的变量
              使用场景：防抖节流

ES5-保护对象：保护对象的属性和方法

    对象的每个属性都具有四大特性
        {
            value:    ,//实际保存值的地方
            writable:ture,//开关，控制着这个属性是否可以被修改-默认值为ture
            enumerable:ture,//开关，控制着这个属性是否可以被for in 循环遍历到-默认值ture
            configurable:ture//开关，控制着这个属性是否可以被删除-默认值为ture
        }
    修改四大特性：2种
        Object.defineProperty(对象名,"属性名",{
            writable:ture/false,
            enumerable:ture/false,
            configurable:ture/false
        })
        调用一次方法只能保护一个属性的四大特性
    Object.defineProperties(对象名,{
            "属性名":{
                四大特性
            },
            .......
        })
       至少方法只调用了一次，但是四大特性写着始终麻烦，甚至不能防止添加
   三个级别：
       放扩展：放添加
           Object.PreventExtension(x);
       密封：防添加和删除
           Object.seal(x);
       冻结：防添加和防删除和防修改
           Object.freeze(x)
   四大特性应该是六大特性：
           Object.defineProperty(对象名,"属性名"{
               get:()=>{
                   console.log("获取数据会进行拦截")
               },
               set:(v)=>{
                   //v就是你设置的东西
                   console.log("设置数据会进行拦截")
               }
           })

深拷贝和浅拷贝

    浅拷贝：
        利用按值传递
    深拷贝：
        两者之间互不影响
    深拷贝还有一种方式：
        //以后如何脱掉后端传来的数据的衣服？
        后端穿衣服：var jsonTxt=JSON.stringify(jsonObj)-Node.js就是这句话，Node.js也是"JS"历史上第一次一门语言可以通吃前后端，后端不能直接传数据，必须穿上衣服才能出门，变成一个JSON字符串
        前端脱衣服：var jsonObj=JSON.parse(jsonTxt)或者eval("("+jsonTxt=")")

Error对象：错误

    学习的目的：可以快速找到错误以及防止用户乱输入
    浏览器端自带4种错误类型：
        语法错误：SyntaxError---一定是符号/语法写错了
        引用错误：ReferenceError---没有创建就使用
        类型错误：TypeError---不是你的方法，你却使用了，最有可能的就是你拿到了 undefined和null
        范围错误：RangeError---只有API会遇到：num.toFixed(d);//d取值范围，0~100之间
    错误处理：就算发生错误，让后续代码依然执行！
        语法：
            try{
                只放入你可能出错的代码
            }catch(err){
                发生错误后才会执行的代码
            }
        可用一个技术代替：分支技术！
    抛出自定义错误：只要是报错，就会导致后续代码不执行
        throw new Error("自定义错误消息")

严格模式

    开启："use strict"
    作用：
        禁止全局污染，必须先创建再使用
        将静默失败升级为报错
        看见了冲上去就删了

柯里化函数

    function add(a){
        return function(b){
            return function(c){
                console.log(a+b+c)
                }
            }    
        }
    add(2)(4)(6)

匿名函数：没有名字的函数，有两种用法：

    自调：
        (function(){
        操作;
        })();
    回调：
        elem.on事件名=function(){}
        arr.sort(function(){})
        var obj={
            "方法名".function(){}
        }
        var 方法名=function(){}
    一切的回调函数都可以简化为箭头函数

设计模式

    单例模式：也称之为单位模式，保证一个类仅有一个案例对象创建，并且提供一个访问它的全局访问点
    观察者模式：也有人称呼叫做：订阅-发布模式

事件轮询

    宏任务：
        定时器：setInterval和setTimeout
        AJAX-他是前端和后端连接的关键点，他也是一个异步宏任务
    微任务：
        ES6提供了Promsize对象--可以控制异步代码，依然是异步代码，但是可以控制执行的顺序了