• Promise和模块块化编程

    Promise和模块块化编程

    大家好呀！我是小笙，我来简述一些前端知识。

    • 1

    Promise和模块块化编程

    Promise

    基本介绍

    1. 传统的 Ajax 异步调用在需要多个操作的时候，会导致多个回调函数嵌套（代码不够直观）就是常说的 Callback Hell
    2. Promise 是异步编程的一种解决方案
    3. 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息

    图解分析

    image-20220530112858519

    方案一：JQuery + Ajax

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#btn").click(function() {
                    $.getJSON(
                        "./data/monster.json",
                        function(data, status, XHttp) {
                            let {id,name,age} = data;
                            // Callback Hell
                            $.getJSON(
                                `./data/monster_detail_${id}.json`,
                                function(data, status, XHttp) {
                                    console.log(data);
                                }
                            )
                        },
                    )
                })
            })
        </script>
    </head>
    <body>
        <button id="btn" type="button">按钮（发出Ajax请求）</button>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    数据存储暂时用json文件代替

    // monster.json
{
	"id": 1,
	"name":"孙悟空",
	"age": 500
}
// monster_detail_1.json
{
	"id": 1,
	"ability":"72变",
	"skill": "翻江倒海",
	"address": "花果山"
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    方案二：Promise链式调用

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="jquery3.6.0/jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            // (resolve,reject)参数列表 (备注:resolve,reject名字可以自己定)
            // resolve: 如果请求成功，可以调用resolve函数
            // reject: 如果请求失败，可以调用reject函数
            let promise = new Promise((resolve, reject) => {
                $.getJSON(
                    `data/monster.json`,
                    function(data, status, XHttp) {
                        console.log(data);
                        resolve(data);
                    }
                )
            }).then((data => {
                return new Promise((resolve, reject) => {
                    $.getJSON(
                        `data/monster_detail_${data.id}.json`,
                        function(data, status, XHttp) {
                            console.log(data);
                            resolve(data);
                        }
                    )
                })
            })).then(
                (data => {
                    return new Promise((resolve, reject) => {
                        $.getJSON(
                            `data/monster_girl_${data.girlId}.json`,
                            function(data, status, XHttp) {
                                console.log(data);
                            }
                        )
                    })
                })
            )
        </script>
    </head>
    <body>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    数据存储暂时用json文件代替

    // monster.json
{
	"id": 1,
	"name":"孙悟空",
	"age": 500
}
// monster_detail_1.json
{
	"id": 1,
	"ability":"72变",
	"skill": "翻江倒海",
	"address": "花果山",
    "girlId":2
}
// monster_girl_2.json
{
	"id": 2,
	"name":"XXX",
	"age": 400
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    方案三：promise 代码优化/重排

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="jquery3.6.0/jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            // 这里我们将重复的代码，抽出来,编写一个方法 get(url, data)
            function get(url, data) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: url,
                        data: data,
                        success(resultData) {
                            resolve(resultData);
                        },
                        error(err) {
                            reject(err);
                        }
                    })
                })
            }

            //1. 先获取 monster.json 
            //2. 获取 monster_detail_1.json 
            //2. 获取 monster_girl_2.json 
            get("data/monster.json").then((resultData) => { 
                //第 1 次 ajax 请求成功后的处理代码 
                console.log("第 1 次 ajax 请求返回数据=", resultData); 
                return get(`data/monster_detail_${resultData.id}.json`);
            }).then((resultData) => { 
                //第 2 次 ajax 请求成功后的处理代码 
                console.log("第 2 次 ajax 请求返回数据=", resultData);
                return get(`data/monster_girl_${resultData.girlId}.json`);
            }).then((resultData) => { 
                //第 3 次 ajax 请求成功后的处理代码 
                console.log("第 3 次 ajax 请求返回数据=", resultData); 
                //继续.. 
            }).catch((err) => {
                console.log("promise 请求异常=", err); 
            })
        </script>
    </head>
    <body>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    模块化编程

    基本介绍

    1. 传统非模块化开发有如下的缺点：(1)命名冲突 (2)文件依赖
    2. Javascript 代码越来越庞大，Javascript 引入模块化编程，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块
    3. Javascript 使用"模块"（module）的概念来实现模块化编程, 解决非模块化编程问题

    image-20220531095833837

    CommonJS 模块编程(ES5)

    1. 每个 js 文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、对象， 都是私有的，对其他 js 文件不可见
    2. CommonJS 使用 module.exports={} / exports={} 导出 模块 , 使用 let/const 名称 = require(“xx.js”) 导入模块

    思路分析

    image-20220531101400651

    代码示例

    // function.js
const sum = function(a, b) {
	return parseInt(a) + parseInt(b);
}
const sub = function(a, b) {
	return parseInt(a) - parseInt(b);
}

let name = "罗念笙";
let age = 18;

// module.exports = { 
// sum: sum, 
// sub: sub, 
// name: name,
// age: age 
// }
// 如果属性名和函数/变量/对象..名字相同，可以简写
module.exports = {
	sum,
	sub,
	name,
	age
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    // use.js
const m = require("./function.js");
// 解构赋值
const {sub} = require("./function.js"); 


console.log(m.sub("100","200")); 
console.log(m.sum(10,90)); 
console.log(m.name)
console.log(m.age); 
console.log(sub(19,8));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    ES6 模块编程

    注意:ES6 的模块化无法在 Node.js 中执行，需要用 Babel 转码 ES5 后再执行

    Babel转码ES5在线工具

    1. ES6 使用 (1)export {名称/对象/函数/变量/常量} (2) export 定义 = (3) export default {} 导出模块
    2. 使用 import {} from “xx.js” / import 名称 form “xx.js” 导入模块

    思路分析

    image-20220531161328826

    代码示例

    批量导出导入

    第一种导出模块/数据：export{对象，函数，变量，常量等}

    const sum = function(a, b) {
	return parseInt(a) + parseInt(b);
}
const sub = function(a, b) {
	return parseInt(a) - parseInt(b);
}

let name = "罗念笙";
let age = 18;

export{
	sum,
	sub,
	name,
	age
}

// Babel 转码 ES5 
"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.sum = exports.sub = exports.name = exports.age = void 0;
var sum = function sum(a, b) {
  return parseInt(a) + parseInt(b);
};
exports.sum = sum;
var sub = function sub(a, b) {
  return parseInt(a) - parseInt(b);
};
exports.sub = sub;
var name = "罗念笙";
exports.name = name;
var age = 18;
exports.age = age;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    第一种导入模块/数据：import {名称} from “XX.js”

    import{
	sum,
	sub,
	name,
	age
} from "./common.js";

console.log(name);
console.log(age);
console.log(sub(4,2));
console.log(sum(3,4));

// Babel 转码 ES5 
"use strict";
var _common = require("./common.js");
console.log(_common.name);
console.log(_common.age);
console.log((0, _common.sub)(4, 2));
console.log((0, _common.sum)(3, 4));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    定义时导出导入

    第二种：export 对象/函数 = {}

    export const sum = function(a,b){
    return parseInt(a) + parseInt(b);
}

// Babel 转码 ES5 
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.sum = void 0;
var sum = function sum(a, b) {
    return parseInt(a) + parseInt(b);
};
exports.sum = sum;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    第一种导入模块/数据：import {名称} from “XX.js”

    import{
	sum,
} from "./common2.js";
console.log(sum(5,4));

// Babel 转码 ES5 
"use strict";
var _common = require("./common2.js");
console.log((0, _common.sum)(5, 4));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    默认导出导入

    第三种：export default{对象，函数，变量，常量等}

    export default{
    // 注意对象的变化 var 对象名 = {} => 对象名:{}
    // 注意函数的变化 const sum = function(a,b) => sum(a,b) 
	sum(a,b){
		return parseInt(a) + parseInt(b);
	},
	name:"罗念笙",
	age:18
} 

// Babel 转码 ES5 
"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _default = {
  sum: function sum(a, b) {
    return parseInt(a) + parseInt(b);
  },
  name: "罗念笙",
  age: 18
};
exports.default = _default;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    第二种是针对默认导出的 import 名称 from “XX.js”

    import m from "common3.js";

console.log(m.age);
console.log(m.name);
console.log(m.sum(3,4));

// Babel 转码 ES5 
"use strict";
var _common = _interopRequireDefault(require("common3.js"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log(_common.default.age);
console.log(_common.default.name);
console.log(_common.default.sum(3, 4));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
  • 相关阅读:
    metrology
    [C++] std::format应用自定义类型
    智慧档案馆/智慧档案室建设要点
    王道书 P191 思维拓展
    js基础-数据类型检测
    docker网络和模式
    SpringMVC程序开发
    web端常见导航设计
    下一代 IDE 工具 JetBrains Fleet 正式公测
    ubuntu20.04安装opencv 3.2.0 报错
  • 原文地址：https://blog.csdn.net/Al_tair/article/details/125563689