前端路线--ES6(day04)

@import

@import url(“index.css”);
导入CSS引用

模块化

var username = “二哥”; //定义一个变量,将来在所有的页面中使用
var age = 18
var fn = function () {
return username + “:” + age
}
//导出(export)
// 导出这个变量
// 暴露
export {
username,
age,
fn
}

//导入( import)
// 按需导入 ./表示同级目录
import { username, age } from “./base.js”
console.log(username); //二哥
console.log(age); //18

//导出(export default)
var obj = {
username: “二哥”,
age: 18,
fn: function () {
return this.username + “:” + this.age
}
}
// export default
export default obj

1.export和export default区别:
//相同点:都可以导出模块
// 不同点:export可以写多次
// export default只能写一次

2.为什么要模块化?
将相似功能的代码提取出来放到一个文件中,通过export 或者export default 暴露
在使用的时候通过import 导入

3.// export default 命令。
// - 在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
// - export default 中的 default 是对应的导出接口变量。
// - 通过 export 方式导出,在导入时要加{ },export default 则不需要。
// - export default 向外暴露的成员,可以使用任意变量来接收。

day04-03-promise

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 什么是Promise
        // Promise是异步编程的解决方案,其实它是一个构造函数,在构造函数身上有自己的方法all reject resolve,在它的原型有then和catch等方法

        // Promise的特点?
        // 1、Promise的状态不受外界的影响。
        // Promise 异步操作有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。除了异步操作的结果,任何其他操作都无法改变这个状态。

        // 2、一旦开始,中途无法改变这个状态
        // Promise 对象只有:从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ,状态就不会再变了即 resolved(已定型)。

        // 如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。当处于 pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
        console.dir(Promise)

        // 定义一个promise对象
        let promise = new Promise((resolve, reject) => {
            // resolve 成功的回调函数
            // reject  失败的回调函数

            // setTimeout 开启一个异步操作
            // Promise 一旦开始,立即执行
            setTimeout(function () {
                console.log("执行一个promise异步操作");
                resolve("执行成功了") //将成功的结果返回
            }, 3000)
        })

        // .then(成功回调函数,失败回调函数)
        promise.then((result) => {
            console.log(result);  //执行成功了
        }, (err) => {
            console.log(err);
        })

    </script>
</body>

</html>

day04-04-promise成功案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点击按钮开始异步操作</button>
    <script>
        let oBtn = document.querySelector("#btn");
        let promiseFn = () => {
            console.log(1);
            let promise = new Promise((resolve, reject) => {
                setTimeout(function () {
                    console.log(2);
                    resolve("成功666")
                }, 2000)
            })

            return promise
        }

        oBtn.onclick = function () {
            // console.log(promiseFn());
            // promiseFn()  是一个promise对象,就可以使用.then()
            promiseFn().then(result => {
                console.log(result); //成功666
            })
        }

        // 1 2 成功



    </script>
</body>

</html>

day04-05-promise失败案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点击按钮开始异步操作</button>
    <script>
        let oBtn = document.querySelector("#btn");
        let promiseFn = () => {
            console.log(1);
            let promise = new Promise((resolve, reject) => {
                // 随机数1-10随机整数
                let num = Math.ceil(Math.random() * 10)
                console.log(`num的值:${num},num>6成功,否则失败`);
                setTimeout(function () {

                    if (num > 6) {
                        resolve("成功666")  //执行成功回调
                    } else {
                        reject("失败555")  //执行失败回调
                    }
                }, 2000)
            })

            return promise
        }

        oBtn.onclick = function () {
            // console.log(promiseFn());
            // promiseFn()  是一个promise对象,就可以使用.then()
            promiseFn().then(result => {
                // 成功的回调
                console.log(result); //成功666
            }, (err) => {
                // 失败的回调
                console.log(err);
            })
        }

        // 1 2 成功



    </script>
</body>

</html>

day04-06-捕获异常catch()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点击按钮开始异步操作</button>
    <script>
        let oBtn = document.querySelector("#btn");
        let promiseFn = () => {
            console.log(1);
            let promise = new Promise((resolve, reject) => {
                // 随机数1-10随机整数
                let num = Math.ceil(Math.random() * 10)
                console.log(`num的值:${num},num>6成功,否则失败`);
                setTimeout(function () {
                    if (num > 6) {
                        resolve("成功666")  //执行成功回调
                    } else {
                        reject("失败555")  //执行失败回调
                    }
                }, 2000)
            })

            return promise
        }

        oBtn.onclick = function () {
            // console.log(promiseFn());
            // promiseFn()  是一个promise对象,就可以使用.then()
            promiseFn().then(result => {
                // 成功的回调
                console.log(result); //成功666
            }).catch(err => {
                // 异常捕获
                console.log(err);
            })
        }

        // 1 2 成功



    </script>
</body>

</html>

day04-07-then()的链式调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function promiseFn1() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    let num = Math.ceil(Math.random() * 10) //1-10的随机整数
                    console.log(`num的值:${num}`);
                    console.log("promiseFn1");
                    if (num > 6) {
                        resolve("num大于6--成功")
                    } else {
                        reject("失败")
                    }
                }, 1000)
            })
            return promise1
        }

        function promiseFn2() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    let num = Math.ceil(Math.random() * 10) //1-10的随机整数
                    console.log(`num的值:${num}`);
                    console.log("promiseFn2");
                    if (num > 3) {
                        resolve("num大于3--成功")
                    } else {
                        reject("失败")
                    }
                }, 1000)
            })
            return promise1
        }

        function promiseFn3() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    let num = Math.ceil(Math.random() * 10) //1-10的随机整数
                    console.log(`num的值:${num}`);
                    console.log("promiseFn3");
                    if (num > 5) {
                        resolve("num大于5--成功")
                    } else {
                        reject("失败")
                    }
                }, 1000)
            })
            return promise1
        }

        // 需求 
        // 如果promiseFn1()执行成功了在执行promiseFn2(),否则不再执行promiseFn2()
        // 如果promiseFn2()成功了再执行promiseFn3()
        promiseFn1().then(result => {
            console.log(result);
            return promiseFn2()
        }).then(result2 => {
            console.log(result2);
            return promiseFn3()
        }).then(result3 => {
            console.log(result3);
            return promiseFn1()
        })
    </script>
</body>

</html>

day04-08-all()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function promiseFn1() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    let num = Math.ceil(Math.random() * 10) //1-10的随机整数
                    console.log(`num的值:${num}`);
                    console.log("promiseFn1");
                    if (num > 6) {
                        resolve("num大于6--成功")
                    } else {
                        reject("失败")
                    }
                }, 1000)
            })
            return promise1
        }

        function promiseFn2() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    let num = Math.ceil(Math.random() * 10) //1-10的随机整数
                    console.log(`num的值:${num}`);
                    console.log("promiseFn2");
                    if (num > 3) {
                        resolve("num大于3--成功")
                    } else {
                        reject("失败")
                    }
                }, 1000)
            })
            return promise1
        }

        function promiseFn3() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    let num = Math.ceil(Math.random() * 10) //1-10的随机整数
                    console.log(`num的值:${num}`);
                    console.log("promiseFn3");
                    if (num > 5) {
                        resolve("num大于5--成功")
                    } else {
                        reject("失败")
                    }
                }, 1000)
            })
            return promise1
        }

        // 需求 
        // 如果promiseFn1()执行成功了在执行promiseFn2(),否则不再执行promiseFn2()
        // 如果promiseFn2()成功了再执行promiseFn3()

        // all([异步1,异步2,...]) 是Promise中的一个API
        // 多个异步操作并行执行,只有都成功了才会返回成功的结果,只要有一个失败就失败了
        console.dir(Promise)
        Promise.all([promiseFn1(), promiseFn2(), promiseFn3()]).then(result => {
            console.log(result); //['num大于6--成功', 'num大于3--成功', 'num大于5--成功']
        })

    </script>
</body>

</html>

day04-09-race()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function promiseFn1() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    let num = Math.ceil(Math.random() * 10) //1-10的随机整数
                    console.log(`num的值:${num}`);
                    console.log("promiseFn1");
                    if (num > 6) {
                        resolve("num大于6--成功")
                    } else {
                        reject("失败")
                    }
                }, 1000)
            })
            return promise1
        }

        function promiseFn2() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    let num = Math.ceil(Math.random() * 10) //1-10的随机整数
                    console.log(`num的值:${num}`);
                    console.log("promiseFn2");
                    if (num > 3) {
                        resolve("num大于3--成功")
                    } else {
                        reject("失败")
                    }
                }, 1000)
            })
            return promise1
        }

        function promiseFn3() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    let num = Math.ceil(Math.random() * 10) //1-10的随机整数
                    console.log(`num的值:${num}`);
                    console.log("promiseFn3");
                    if (num > 5) {
                        resolve("num大于5--成功")
                    } else {
                        reject("失败")
                    }
                }, 1000)
            })
            return promise1
        }

        // 需求 
        // 如果promiseFn1()执行成功了在执行promiseFn2(),否则不再执行promiseFn2()
        // 如果promiseFn2()成功了再执行promiseFn3()

        // race([异步1,异步2,...]) 是Promise中的一个API
        // race()第一个成功直接返回结果,后面的结果不再输出
        // 第一个失败了后面不再输出结果
        console.dir(Promise)
        Promise.race([promiseFn1(), promiseFn2(), promiseFn3()]).then(result => {
            console.log(result); //
        }, (err) => {
            console.log(err);
        })

    </script>
</body>

</html>

day04-10-Generator

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // Generator 函数---了解
        // 两个部分:
        // 1、在function后添加*
        // 2、在函数内部使用yield关键字,将函数的执行流程挂起

        function* fn() {
            console.log("001");
            yield "1";
            console.log("002");
            yield "2";
        }
        let f = fn()
        f.next()
        f.next()
    </script>
</body>

</html>

day04-11-async函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // async 函数返回一个 Promise 对象
        // 在function 前边添加async,那么这个函数就变成了async函数
        // await 是配合async函数使用的,不能单独使用
        function promiseFn1() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作

                setTimeout(() => {
                    let num = Math.ceil(Math.random() * 10) //1-10的随机整数
                    console.log(`num的值:${num}`);
                    if (num > 6) {
                        resolve("num大于6--成功")
                    } else {
                        reject("失败")
                    }
                }, 1000)
            })
            return promise1
        }

        function promiseFn2() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    resolve("成功2")
                }, 1000)
            })
            return promise1
        }

        function promiseFn3() {
            let promise1 = new Promise((resolve, reject) => {
                // setTimeout  定义一个异步操作
                setTimeout(() => {
                    resolve("成功3")
                }, 1000)
            })
            return promise1
        }

        // 给fn变成了异步async函数
        async function fn() {
            let result1 = await promiseFn1()
            let result2 = await promiseFn2()
            let result3 = await promiseFn3()
            console.log(result1);
            console.log(result2);
            console.log(result3);
        }
        fn()

        // promiseFn1().then(result => {
        //     console.log(result);
        //     return promiseFn2()
        // }).then(result2 => {
        //     console.log(result2);
        //     return promiseFn3()
        // }).then(result3 => {
        //     console.log(result3);
        //     return promiseFn1()
        // })


    </script>
</body>

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: cesium-popup-es6是一个基于ES6语法编写的Cesium.js的弹窗组件,用于在Cesium地图上显示自定义的弹窗内容。 这个组件主要包含了以下几个部分: 1. Popup类:这是弹窗的主要类,负责创建和管理弹窗的各种属性和方法。通过使用Popup类,可以很方便地在地图上创建弹窗,并设置弹窗的位置、大小、内容等。 2. 事件监听:cesium-popup-es6还提供了一些事件监听的方法,可以在弹窗的打开、关闭以及其他交互操作时进行相应的处理。例如,可以监听鼠标点击事件来关闭弹窗,或者监听地图的移动事件来更新弹窗的位置。 3. 样式定制:该组件允许用户通过设置自定义的CSS样式来定制弹窗的外观和风格。这使得用户可以根据自己的需要来修改弹窗的颜色、字体、边框等样式属性,从而实现个性化的弹窗显示效果。 4. 兼容性:cesium-popup-es6能够很好地与Cesium.js的其他功能和插件进行集成,同时对不同的浏览器和设备也具备良好的兼容性。这意味着无论是在PC端还是移动端,无论是在Chrome还是在Safari等浏览器上,cesium-popup-es6都能够正常运行。 总的来说,cesium-popup-es6文档提供了关于如何使用和定制这个弹窗组件的详细说明,方便开发者在Cesium.js地图项目中加入自定义的弹窗功能。无论是展示地理信息、交互操作还是其他相关需求,cesium-popup-es6都能够帮助开发者实现一个易于使用和美观的弹窗效果。 ### 回答2: cesium-popup-es6 是一个基于 Cesium.js 的弹出窗口组件,该组件使用 ES6 编写。它为用户提供了在 Cesium 场景中高度可定制的弹出窗口功能。 组件的文档详细介绍了 cesium-popup-es6 的使用方法和各个配置项的说明。首先,你需要通过 npm 或者其他构建工具下载并引入该组件。然后,在你的代码中创建一个 Popup 实例并传入相应的参数,包括弹出窗口的内容、位置、大小、样式等。 文档中还介绍了组件的主要功能,包括弹出窗口显示和隐藏的方法,以及与 Cesium 场景的交互。你可以通过调用 show 方法来显示弹出窗口,通过调用 hide 方法来隐藏弹出窗口。组件还提供了许多配置项,例如你可以自定义弹出窗口的样式、位置以及与其它元素的交互等。 文档中也提供了丰富的示例代码,以帮助用户更好地理解和使用 cesium-popup-es6 组件。这些示例代码覆盖了各种场景,包括在固定位置显示弹出窗口、在鼠标点击位置显示弹出窗口等。 总的来说,cesium-popup-es6 文档提供了详细的使用说明和示例代码,帮助用户了解和使用该弹出窗口组件。用户可以根据自己的需求进行定制,实现丰富多样的弹出窗口效果。 ### 回答3: cesium-popup-es6 是一个基于ES6语法的Cesium.js库的文档。 该文档主要用于指导开发者在使用cesium-popup-es6库时的操作步骤和相关功能的使用方法。 文档的目录结构清晰明了,按照功能模块进行分类,方便开发者快速找到需要的信息。 在文档的开头部分,首先介绍了cesium-popup-es6的基本概述,包括其功能特点和适用场景,帮助开发者了解该库的作用和优势。 接下来,文档详细介绍了cesium-popup-es6的安装和配置步骤。通过简明的指导,开发者可以快速将该库引入到自己的项目中,并进行相应的配置。 然后,文档详细说明了cesium-popup-es6库的各种功能和使用方法。比如,如何创建和定位弹出窗口、如何设置窗口内容和样式、如何捕获窗口的事件等等。每一项功能都给出了具体的代码示例和详细的说明,方便开发者理解和应用。 文档还提供了一些常见问题的解答和一些建议的最佳实践,帮助开发者在使用cesium-popup-es6库时避免一些常见的问题和错误。 最后,文档附带了一些附录,包括cesium-popup-es6的API参考和一些相关的资源链接,方便开发者查阅进一步的信息和深入理解该库。 总之,cesium-popup-es6 文档是一份详尽而全面的文档,对于开发者学习和使用cesium-popup-es6库非常有帮助,可以提高开发效率并简化开发过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值