当前位置：网站首页>Promise和模块块化编程
Promise和模块块化编程
2022-07-02 00:26:00 【Al_tair】
大家好呀！我是小笙，我来简述一些前端知识。
Promise和模块块化编程
Promise
基本介绍
- 传统的 Ajax 异步调用在需要多个操作的时候，会导致多个回调函数嵌套（代码不够直观）就是常说的 Callback Hell
- Promise 是异步编程的一种解决方案
- 从语法上说，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)命名冲突 (2)文件依赖
- Javascript 代码越来越庞大，Javascript 引入模块化编程，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块
- Javascript 使用"模块"（module）的概念来实现模块化编程, 解决非模块化编程问题
CommonJS 模块编程(ES5)
- 每个 js 文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、对象， 都是私有的，对其他 js 文件不可见
- 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 后再执行
- ES6 使用 (1)export {名称/对象/函数/变量/常量} (2) export 定义 = (3) export default {} 导出模块
- 使用 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 : {
default: obj }; }
console.log(_common.default.age);
console.log(_common.default.name);
console.log(_common.default.sum(3, 4));
边栏推荐
- 使用 ES 实现疫情地图或者外卖点餐功能（含代码及数据）
- From 20s to 500ms, I used these three methods
- Pytorch learning record
- 【CTF】bjdctf_2020_babystack2
- EMC circuit protection device for surge and impulse current protection
- Three methods of finding inverse numbers
- 2022 pinduoduo details / pinduoduo product details / pinduoduo SKU details
- Heketi record
- Node——添加压缩文件
- The origin of usb-if Association and various interfaces
猜你喜欢
Practical calculation of the whole process of operational amplifier hysteresis comparator
数据库--SqlServer详解
JS -- image to base code, base to file object
实例讲解将Graph Explorer搬上JupyterLab
Using multithreaded callable to query Oracle Database
多表操作-一对一,一对多与多对多
![[opencv450] hog+svm and hog+cascade for pedestrian detection](/img/55/cdf0bb8231ee59e34c8d5a9d6def23.png)
[opencv450] hog+svm and hog+cascade for pedestrian detection
时间复杂度与空间复杂度
Openvino model performance evaluation tool DL workbench
SQL Server Installation Guide
随机推荐
Review data desensitization system
Multi table operation - one to one, one to many and many to many
时间复杂度与空间复杂度
PWN attack and defense world cgpwn2
USB-IF协会与各种接口的由来
From 20s to 500ms, I used these three methods
I want to ask, which is the better choice for securities companies? I don't understand. Is it safe to open an account online now?
I would like to ask, which securities is better for securities account opening? Is it safe to open a mobile account?
GCC compilation
mysql之B tree 以及 B+tree
Learn online case practice
The difference between timer and scheduledthreadpoolexecutor
启牛学院开户安全的吗？开户怎么开？
heketi 记录
【QT】QtCreator卸载与安装（非正常状态）
ThreadLocal内存泄漏是什么，怎么解决
Database -- sqlserver details
Openvino model performance evaluation tool DL workbench
Export default the exported object cannot be deconstructed, and module Differences between exports
Use es to realize epidemic map or take out order function (including code and data)