JavaScript - day22

28 阅读2分钟

一、定位技术

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>