Promise和模块块化编程

Posted Al_tair

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Promise和模块块化编程相关的知识，希望对你有一定的参考价值。

Promise和模块块化编程

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

Promise和模块块化编程

Promise

基本介绍

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

图解分析

方案一：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>

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

// monster.json

	"id": 1,
	"name":"孙悟空",
	"age": 500

// monster_detail_1.json

	"id": 1,
	"ability":"72变",
	"skill": "翻江倒海",
	"address": "花果山"

方案二：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>

数据存储暂时用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

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

CommonJS 模块编程(ES5)

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

思路分析

代码示例

// 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


// 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));

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” 导入模块

思路分析

代码示例

批量导出导入

第一种导出模块/数据：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;

第一种导入模块/数据：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));

定义时导出导入

第二种：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;

第一种导入模块/数据：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));

默认导出导入

第三种：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;

第二种是针对默认导出的 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 :  defaultJS模块化编程


 ES6的模块化/class/promise及其他新的特性


 simotion ST编程，变量和程序的模块化


 模块化UPS有哪些优势？与传统UPS两者之间有啥区别


 javaScript面向对象-模块化-面相关对象编程——行走的方块案例


 第166天学习打卡（项目 谷粒商城8 前端基础ES6 promise 模块化 Vue）