一、模板的写法与分析
1.效果图
demo.png
2.对应的js模板
扩展资料
javascript组件封装中一段通用代码解读，function (global, factory) 为什么这么写
https://www.cnblogs.com/yujinlong/p/7574186.html
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.MyFunc = factory());//给全局window对象赋值
}(this, (function () {
'use strict';
/**===============================================================================================================**/
/**===============================================================================================================**/
/**============================================ 整合定位1：工具方法区 ==============================================**/
/**===============================================================================================================**/
/**===============================================================================================================**/
/**
* 工具方法样例
* @param {obj} option 处理对象
* @param {str} symbol 分隔符
* @return 处理option的方法
*/
function transformMsg(option, symbol) {
// 这里撰写工具方法的逻辑
option.msg = symbol + option.msg + symbol
return option;
}
/**===============================================================================================================**/
/**===============================================================================================================**/
/**======================================== 整合定位10：返回给外界的最终对象 =========================================**/
/**===============================================================================================================**/
/**===============================================================================================================**/
return {
show: function (option) {
// 这里撰写对外方法逻辑
console.log("拼接前", option.msg);
transformMsg(option,"#");
console.log("拼接后", option.msg);
}
}
})));
3.对应的html代码
<!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>
<script src="./test.js"></script>
<script>
MyFunc.show({msg:"你好"})
</script>
</head>
<body>
</body>
</html>
二、实际使用案例：封装原生Ajax组件
1.Ajax组件模板AICCHttp.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.AICCHttp = factory());//给全局window对象赋值
}(this, (function () {
'use strict';
/**===============================================================================================================**/
/**===============================================================================================================**/
/**============================================ 整合定位1：工具方法区 ==============================================**/
/**===============================================================================================================**/
/**===============================================================================================================**/
/**
* 拼接url参数的方法
* @param {str} url 拼接的原始地址
* @param {obj} params 拼接的参数对象
* @return 拼接后的url
*/
function transformParams(url, params) {
if (params) {
url = url + "?"
for (var key in params) {
url = url + encodeURIComponent(key) + "=" + encodeURIComponent(params[key]) + "&";
}
url = url.substring(0, url.length - 1);
}
return url;
}
/**
* 追加请求头的方法
* @param {obj} xhr 原始的XMLHttpRequest
* @param {obj} headers 拼接的请求头
* @return 封装后的XMLHttpRequest对象
*/
function appendRequestHeaders(xhr, headers) {
if (headers) {
for (var key in headers) {
xhr.setRequestHeader(key, headers[key]);
}
}
return xhr;
}
/**===============================================================================================================**/
/**===============================================================================================================**/
/**======================================== 整合定位2：返回给外界的最终对象 =========================================**/
/**===============================================================================================================**/
/**===============================================================================================================**/
return {
get: function (option) {
var xhr = new XMLHttpRequest();
xhr.open('GET', transformParams(option.url, option.params), true);
appendRequestHeaders(xhr, option.headers);
xhr.addEventListener("load", function () {
option.success.call(this, JSON.parse(xhr.responseText));
});
xhr.send();
},
post: function (option) {
var xhr = new XMLHttpRequest();
xhr.open('POST', transformParams(option.url, option.params), true);
if(option.contentType !== false){
xhr.setRequestHeader("Content-Type", option.contentType || "application/json");
}
appendRequestHeaders(xhr, option.headers);
xhr.addEventListener("load", function () {
option.success.call(this, JSON.parse(xhr.responseText));
});
xhr.send(option.data);
}
}
})));
实际使用Ajax组件
<script>
AICCHttp.get({
url: "http://localhost:8777/get",
params: { name: "张三", age: 11, createTime: "2021/07/16 11:22:33" },// 后端为yyyy-MM-dd格式接收，post请求下，直接写没问题，get请求下前端却要变成yyyy/MM/dd才行，有些奇怪，但实验结果如此
headers: {
"MY-TOKEN": "xxx"
},
success: function (resp) {
console.log(resp)
}
});
AICCHttp.post({
url: "http://localhost:8777/post?love=敲代码",
data: JSON.stringify({ name: "李四", age: 18, createTime: "2021-07-01 10:00:00" }),
headers: {
"MY-TOKEN": "xxx"
},
success: function (resp) {
console.log(resp)
}
});
</script>
