一、定位技术

1.1 定位技术有哪些

• GPS - 美国（卫星定位）：1、缴纳版权费用 2、安全性低
• 北斗 - 中国自主：最初并不是民用，而是军用，使用的是惯性定位（定位并不精准），后期发展为了民用，添加了卫星定位了（更精确了）
• 基站定位 - 信号的范围发射，可以检测到你现在的信号属于哪个范围。
• IP定位

1.2 网站的定位技术都是使用的GPS

1.3 开发者如何使用百度/高德地图

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

二、匿名函数

没有名字的函数

2.1 匿名函数的两种用法

• 自调：只能执行一次，函数中的没用的变量是会自动释放的

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

• 回调：匿名函数不是自调，就是回调，切的回调函数，都可以简化为箭头函数

elem.on事件名=function(){}
    arr.sort(function(){})
    var obj={
            "方法名":function(){}
    }

三、设计模式

不仅仅局限于前端，它是一种编程思想

3.1 单例模式

也称之为单体模式，保证一个类仅有一个实例对象，并且提供一个访问它的全局访问点

<script>
    // 最简单的单例模式 利用let不允许重复声明的特性 不推荐
    /* let obj = {
        "name" : "张三",
        "getName" : function () {
            return this.name
        }
    }
    console.log(obj);
    console.log(obj.name);
    console.log(obj.getName()); */
    // 推荐写法
    var h52301 = (function () {
        let state = null
        return function(name,age) {
            this.name = name;
            this.age = age;
            if (state) {
                return state
            }
            return state = this
        }
    })()
    h52301.prototype.say = function () {
        console.log(this.name);
    }

    var zs = new h52301('张三',18)
    console.log(zs);//{name: '张三', age: 18}
    var ls = new h52301('李四',20)
    console.log(ls);//{name: '张三', age: 18}
    zs.say()//张三
    ls.say()//张三
    console.log(zs==ls);//true
</script>

3.2 发布订阅模式

<button id="btn">发布</button>
<script>
    let obj = {};
    // 创建订阅者
    function on(id,fn) {
        if (!obj[id]) {
            obj[id] = []
        }
        obj[id].push(fn)
    }
    on("张三",(msg)=>{console.log('1111',msg);})
    on("张三",(msg)=>{console.log('2222',msg);})
    console.log(obj);//{"张三":[fn,fn]}
    // 发布者的操作
    function emit(id,msg) {
        obj[id].forEach(fn=>fn(msg))
    }
    btn.onclick = () => {
        emit('张三','5555')
    }
</script>

四、事件轮询

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

4.1 宏任务：

不会再卡住我们的单线程应用，可以让后续代码先走,但是多个宏任务同时存在，到底谁先执行谁后执行，分不清

• 定时器：setInterval和setTimeout
• Ajax

<script>
    setTimeout(function(){
        console.log(1);
    },Math.random()*3000)

    setTimeout(function(){
        console.log(2);
    },Math.random()*3000)

    setTimeout(function(){
        console.log(3);
    },Math.random()*3000)
    console.log('后续代码');
</script>

4.2 微任务：

ES6提供的Promise对象,可以控制异步代码执行的顺序

<script>
    function ajax1(resolve) {
        setTimeout(()=>{
            console.log(1);
            resolve()
        },Math.random()*3000)
    }
    function ajax2() {
        return new Promise
        (resolve=>{
            setTimeout(()=>{
                console.log(2);
                resolve()
            },Math.random()*3000)
        })
    }
    function ajax3() {
        setTimeout(()=>{
            console.log(3);
        },Math.random()*3000)
    }
    new Promise(ajax1).then(ajax2).then(ajax3)
    console.log('后续代码');
</script>