JavaScript第22天

1、百度/高德地图：

        1、定位技术有哪些？

                1、GPS - 美国（卫星定位）：

                        1、缴纳版权费用

                        2、安全性低

                2、北斗 - 中国自主：

                        最初并不是民用，而是军用，使用的是惯性定位（定位并不精准）

                        后期发展为了民用，添加了卫星定位了（更精确了）

                3、基站定位 - 信号的范围发射，可以检测到你现在的信号属于哪个范围

                4、IP定位 - 在网不要乱说话，乱造谣

        2、网站的定位技术都是使用的GPS，我们并不需要学习如何使用GPS，我们有现成：百度/高德地图

        3、开发者如何使用：

                1、打开百度：搜索百度地图开放平台

                2、注册、登录百度账号

                3、拉到最下面、点击立即注册成为开发者
                4、进入控制台
                5、应用管理->我的应用->创建应用->实名认证->获得密钥（AK）
                6、鼠标移动到导航条->放到开发文档上->web开发->JavaScript API->示例DEMO
                7、挑选出你喜欢的地图，然后复制全部代码（HTML/CSS/JS），到你需要的位置
                8、查询经纬度：https://api.map.baidu.com/lbsapi/getpoint/index.html
                9、百度地图上每一个都可以混搭在一起，但是一定要注意版本：普通版(老) 和 webGL(新)，是不可以混搭的

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

        1、自调：只能执行一次，好处：函数中的没用的变量是会自动释放的，他可以用于代替全局代码写法，两者很相似：都只会执行一次，但是自调会释放

<script>
    (function(){
        console.log(1);
    })();
</script>

         2、回调：匿名函数不是自调，就是回调

<script>
    elem.on事件名=function(){}
    arr.sort(function(){})
    var obj={
        "方法名":function(){}
    }
    //一切的回调函数，都可以简化为箭头函数
</script>

 3、设计模式：不仅仅局限于前端，它是一种编程思想，越来越复杂，对于我们前端人员要求也越来越高了

        如果你对设计模式有兴趣，可以了解一下21种设计模式

        1、单例模式：也称之为单体模式，保证一个类仅有一个实例对象，并且提供一个访问它的全局访问点，为vue，new Vue();

                1、如何实现：

                        最简单的单例模式：利用ES6的let不允许重复声明的特性，刚好就符合了单例的特点

<script>
    let obj={
	    "name":"小明",
	    "getName":()=>this.name,
	}
</script>

                         不太推荐这种写法：

                                1、污染命名空间（容易变量名冲突）

                                2、维护时不容易管控（搞不好就直接覆盖了）

                        推荐写法：

<script>
    var h=(function(){
	    let state=null;
		return function(name,age){
			this.name=name;
			this.age=age;
			if(state){
			    return state;
			}
			return state=this;
		}
	})();
	h.prototype.sayHello=function(){
	    console.log(this.name);
	}
	var xm=new h("小明",18);
	var xl=new h("小兰",19);

	console.log(xm);
	console.log(xl);
	console.log(xl==xm);

	xm.sayHello();
	xl.sayHello();
</script>

                         何时使用：我们的页面只有一个弹出框

        2、发布订阅模式 ：为vue的bus总线用到的底层原理就是我们的发布订阅模式

<script>
    let obj={};
	//创建订阅者
	function on(id,fn){
	    if(!obj[id]){//判断有没有此id（有没有这个人），没有我就创建了一个空数组
		    obj[id]=[];
		}
		obj[id].push(fn);
	}
	on("大黄",(msg)=>{console.log("小兰来了",msg)});
	on("大黄",(msg)=>{console.log("小尹来了",msg)});
	on("大黄",(msg)=>{console.log("小张来了",msg)});
	on("大黄",(msg)=>{console.log("小李来了",msg)});
	on("大黄",(msg)=>{console.log("小赵来了",msg)});
	console.log(obj);//{"大黄":[fn,fn,fn,fn,fn]}		
	//发布者的操作
	function emit(id,msg){
	    obj[id].forEach(fn=>fn(msg));//obj["大黄"].forEach
	}
	btn.onclick=()=>{
	    emit("大黄","一支穿云箭");
	}
</script>

 4、事件轮询：js其实是单线程引用，代码必然是从上向下，一步一步的执行，如果某一块代码非常耗时，可能会导致整个页面卡住，如果你把js放在head之中，会看到页面是一个白板

        1、宏任务：不会再卡住我们的单线程应用，可以让后续代码先走，我们慢慢跟着来，但是问题在于，多个宏任务同时存在，到底谁先执行谁后执行，分不清

                1、定时器：setInterval和setTimeout

                2、Ajax

        2、微任务：ES6提供的Promise对象 - 可以控制异步代码，依然是异步代码，但是可以控制执行的顺序了

<script>
    function ajax1(resolve){
        setTimeout(()=>{
            console.log(1);
            resolve();
        },Math.random()*5000);
    }
    function ajax2(){
        return new Promise(resolve=>{
            setTimeout(()=>{
                console.log(2);
                resolve();
            },Math.random()*5000);
        })
    }
    function ajax3(){
	    setTimeout(()=>{
		    console.log(3);
		},Math.random()*1000);
	}
    new Promise(ajax1).then(ajax2).then(ajax3);//promise的回调函数提供了一个形参函数，可以用于放行
    console.log("后续代码");
</script>