前端随手记
整理下之前写前端页面一些问题。
之前在公司里使用的都是公司自研的前端框架，感觉JS部分和vue差不多。
布局、控件和控件方法都是看API文档，这里主要记录下框架不支持的东西，即使用原生JS技术解决方案。
提示：以下是本篇文章正文内容，下面案例可供参考
一. ajax回调函数内部无法修改外部变量。
如：前端发送ajax请求给后台需要查询该用户是否有审核权限，因此需要定义一个全局变量，将后台查询结果赋值给这个变量，在进行审核的时候对该变量进行判断，如果有审核权限，则允许该用户进行后续操作。
但是在ajax回调函数内部无法修改外部变量，此时需要将ajax请求由异步请求改为同步请求，才会对全局变量赋值成功。
$.ajaxSetup({
async: false
});
$.post('/interface/execute/sql', {
sqlId: '35334',
sqlType: '2',
sqlParamJson: JSON.stringify({
staffId:session.staff.staffId
})
}, function (retList) {
retList = JSON.parse(retList);
if(retList.length>0){
isRole=true;
}
});
$.ajaxSetup({
async: true
});
此处请求的这个接口是公司大牛开发的一个适配oracle，mysql等数据库的通用sql执行接口，只需要在数据库配置表里写sql即可，不需要后台用代码写sql查询语句了，非常方便。后续可以自己参照其写一个锻炼锻炼。
二、 利用window.open在页面件传递对象，数组变量
在当前页面点击详情打开新的页面，而新的页面加载需要当前页中的某些数据，公司前端框架只支持弹出小的对话框这种的传值，不支持打开新的页面传值。下面使用window.open进行操作。
当前页
showListInfo: function(rowid,faultType){
var data = this.$("#faultGrid").grid('getRowData', rowid);
data.startTime = me.$('#startTime').val();
data.endTime = me.$('#endTime').val();
data.faultType=faultType;
window.rowData= data;
window.open('/webnet/views/faultListView');
}
新页面读取上一页面传递的数据
console.log(window.opener.rowData)
三、选择器
记录一个复杂选择器的写法，基本上选择器的用法都用上了，下次再写的时候可以参照。
var orderId=$("#e_subAlarm div[class='datagrid-body'] table tr[class*='datagrid-row-selected']:eq(1) td[field='orderId'] > div").text();
四、JS生成随机汉字
function getHanZi() {
var str='秦时明月汉时关万里长征人未还但使龙城飞将在不教胡马渡阴山烟里丝丝弄碧曾见几番拂水飘绵送行色登临望故国谁识京华倦客长亭路年去岁来应折柔条过千尺闲寻旧踪迹又酒趁哀弦灯照离席梨花榆火催寒食愁一箭风快半篙波暖回头迢递便数驿望人在天北凄恻恨堆积渐别浦萦回津堠岑寂斜阳冉冉春无极念月榭携手露桥闻笛沉思前事似梦里泪暗滴';
let strings = str.split("");
return strings[Math.floor(Math.random() * strings.length)];
}
五、ES6的新特性小记
let和const命令
之前，js定义变量只有一个关键字：var
var有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。
let所声明的变量，只在let命令所在的代码块内有效。
我们把两种命令对比试试：
<script>
for(var t = 0; t < 5; t++){
console.log(t);
}
console.log("循环外：" + t)
for(let i = 0; i < 5; i++){
console.log(i);
}
console.log("循环外：" + i)
</script>
const声明的变量是常量，不能被修改
<script>
const tempStr = 'abc';
tempStr = 'cbd';
console.log(tempStr);
</script>
ES6中定义函数的简写方式
//一个参数时：
var print = function (obj) {
console.log(obj);
}
// 简写为：
var print2 = obj => console.log(obj);
//多个参数：
// 两个参数的情况：
var sum = function (a , b) {
return a + b;
}
// 简写为：
var sum2 = (a,b) => a+b;
//代码不止一行，可以用{}括起来
var sum3 = (a,b) => {
return a + b;
}
map和reduce
数组中新增了map和reduce方法。
map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
举例：有一个字符串数组，我们希望转为int数组
let arr = ['1','20','-5','3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)
reduce()：接收一个函数（必须）和一个初始值（可选）。
第一个参数（函数）接收两个参数：
- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素
reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
举例：
<script>
const arr = [1,20,-5,3]
console.log(arr.reduce((a,b)=>a+b)); //19
console.log(arr.reduce((a,b)=>a+b,5)); //24
</script>
六、原生JS上传附件
需要做一个修改附件的功能，非常紧急，但是该项目依赖的前端版本低，附件控件的方法不支持。切换版本有不明确的风险，因此需要使用原生JS编写修改附件的功能。
html
<div class="modal-body" style="overflow: auto;width:98%;height:70%;">
<div class="col-md-12">
<form class="form-horizontal" id="ModFileForm" enctype="multipart/form-data">
<div class="row col-md-12">
<div class="col-md-12" style="margin-bottom: 10px;">
<div class="form-group">
<label class="col-md-2 control-label">附件：</label>
<div class="col-md-9">
<div class="input-group">
<span class="fileinput-button input-group-addon">
<input class="js-fileupload" id="tempMagInputFile" type="file" name="files">
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="fileCommit" type="button">提交</button>
</div>
js
fileCommit: function () {
var fileList = me.$('#tempMagInputFile')[0].files;
if (!fileList.length) { //如果文件为空，触发它
fish.toast('info','请选择文件');
return;
}
var filename = fileList[0].name;
var formData = new FormData();
formData.append('filename', filename);
formData.append('uploadInstance', '');
formData.append('uploadType', 'disk');
formData.append('docKey', '');
formData.append('uploadFile', fileList[0], filename);
$.ajaxSetup({
async : false
});
$.ajax({
type: 'POST',
url: '/service/attachmentService/uploadFile',
async: false,
data: formData,
cache: false,
contentType: false,
processData: false,
timeout: 60000,
success: function (result) {
if (result.resultCode == '1000') {
fish.toast('success', '文件上传成功！');
$('input[name="fileName"]').val(filename);
me.docId=result.fileId;
} else {
fish.toast('error', '文件上传失败！' + result.resultMessage);
}
},
error: function (xhr, textStatus, errorThrown) {
fish.toast('error', '上传异常：' + xhr.responseText);
}
});
$.ajaxSetup({
async : true
});
if (me.docId!=null&&me.docId!="") {
me.options.eomsTacheInfo.docId = me.docId;
me.options.eomsTacheInfo.filename=filename;
$.blockUI({message: '修改中。。。'});
if(me.options.eomsTacheInfo&&me.options.eomsTacheInfo.form_ele_inst_id){
$.post('/service/execute/t-sql', {
sqlIds: '35319,35321',
sqlType: '0',
sqlParamJson: JSON.stringify(me.options.eomsTacheInfo)
}, function (result) {
if (result >= 2) {
fish.toast('success', '修改成功！');
me.popup.close(result);
}
}).fail(function (xhr, textStatus, errorThrown) {
fish.toast('error', '修改异常：' + xhr.responseText);
}).always(function () {
$.unblockUI();
});
}else{
$.post('/service/execute/t-sql', {
sqlIds: '35320,35321',
sqlType: '0',
sqlParamJson: JSON.stringify(me.options.eomsTacheInfo)
}, function (result) {
if (result >= 2) {
fish.toast('success', '修改成功！');
me.popup.close(result);
}
}).fail(function (xhr, textStatus, errorThrown) {
fish.toast('error', '修改异常：' + xhr.responseText);
}).always(function () {
$.unblockUI();
});
}
} else {
fish.toast('info', '获取文件ID失败！');
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
