优化部分代码的书写规范

优化部分代码的书写规范
pull/1300/head^2
贤心 2023-06-20 10:43:51 +08:00 committed by GitHub
commit 191134a11f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 188 additions and 181 deletions

View File

@ -97,23 +97,23 @@ layui.use(['upload', 'element'], function(){
var element = layui.element;
var uploadInst = upload.render({
elem: '#test1'
,url: 'https://httpbin.org/post'
//,size: 2000 //限制文件大小,单位 KB
//,accept: 'file'
,method: 'get'
,fileAccept: 'image/*'
,exts: 'jpg|png|gif|bmp|jpeg|pdf'
,data: { //额外参数
a: 1
,b: function(){
elem: '#test1',
url: 'https://httpbin.org/post',
// size: 2000, //限制文件大小,单位 KB
// accept: 'file',
method: 'get',
fileAccept: 'image/*',
exts: 'jpg|png|gif|bmp|jpeg|pdf',
data: { // 额外参数
a: 1,
b: function(){
return 2
}
}
,choose: function(obj){
},
choose: function(obj){
console.log('choose', obj);
}
,before: function(obj){
},
before: function(obj){
//预读本地文件示例不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接base64
@ -122,8 +122,8 @@ layui.use(['upload', 'element'], function(){
return;
layer.msg('不允许上传')
return false;
}
,done: function(res, index){
},
done: function(res, index){
//如果上传失败
if(res.code > 0){
@ -131,8 +131,8 @@ layui.use(['upload', 'element'], function(){
}
//上传成功
console.log(res, index);
}
,error: function(index, upload){
},
error: function(index, upload){
this.item.html('重选上传');
//演示失败状态,并实现重传
@ -143,43 +143,43 @@ layui.use(['upload', 'element'], function(){
});
element.progress('demo', '0%');
}
,progress: function(n, elem, res, index){
},
progress: function(n, elem, res, index){
console.log(n + '%', elem, res, index); //获取进度百分比
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
}
});
//重置上述 upload 实例
// 重置上述 upload 实例
uploadInst.reload({
name:'avatar'
,accept: 'images' //只允许上传图片
,acceptMime: 'image/*' //只筛选图片
name:'avatar',
accept: 'images', // 只允许上传图片
acceptMime: 'image/*', // 只筛选图片
//,size: 2
});
// 演示多图片上传
upload.render({
elem: '#test2'
,url: 'https://httpbin.org/post'
,multiple: true // 多文件
,unified: true // 一起上传 --- 2.8.8+
,accept: 'images'
,number: 3 //同时上传的数量
,size: 1024
,before: function(obj){
//预读本地文件示例不支持ie8
elem: '#test2',
url: 'https://httpbin.org/post',
multiple: true, // 多文件
unified: true, // 一起上传 --- 2.8.8+
accept: 'images',
number: 3, // 同时上传的数量
size: 1024,
before: function(obj){
// 预读本地文件示例不支持ie8
obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
// this.files = obj.pushFile();
}
,done: function(res, index){
},
done: function(res, index){
// 上传完毕
console.log(res, index)
}
,allDone: function(obj){
},
allDone: function(obj){
console.log(obj)
}
});
@ -187,16 +187,16 @@ layui.use(['upload', 'element'], function(){
// 演示多文件列表 --- 本示例仅演示未开启 unified 属性的情况
var demoListView = $('#demoList');
var uploadListIns = upload.render({
elem: '#testList'
,url: 'https://httpbin.org/post'
,accept: 'file'
,multiple: true
,number: 3
,auto: false
,bindAction: '#testListAction'
,size: 30
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
elem: '#testList',
url: 'https://httpbin.org/post',
accept: 'file',
multiple: true,
number: 3,
auto: false,
bindAction: '#testListAction',
size: 30,
choose: function(obj){
var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
@ -227,8 +227,8 @@ layui.use(['upload', 'element'], function(){
element.render('progress');
});
}
,done: function(res, index, upload){
},
done: function(res, index, upload){
//if(res.code == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
@ -237,16 +237,16 @@ layui.use(['upload', 'element'], function(){
return;
//}
this.error(index, upload);
}
,allDone: function(obj){
},
allDone: function(obj){
console.log(obj)
}
,error: function(index, upload){
},
error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
,progress: function(n, elem, e, index){
},
progress: function(n, elem, e, index){
console.log(n);
console.log(index);
element.progress('progress-'+ index, n + '%'); //进度条
@ -255,20 +255,20 @@ layui.use(['upload', 'element'], function(){
upload.render({
elem: '.test333'
,url: 'a'
,accept: 'file'
,before: function(obj){
elem: '.test333',
url: 'a',
accept: 'file',
before: function(obj){
console.log(this.item);
}
,done: function(res){
},
done: function(res){
console.log(res)
}
});
upload.render({
elem: '.testm'
,done: function(res, index, upload){
elem: '.testm',
done: function(res, index, upload){
//获取当前触发上传的元素,一般用于 elem 绑定 class 的情况,注意:此乃 layui 2.1.0 新增
var item = this.item;
}
@ -276,28 +276,28 @@ layui.use(['upload', 'element'], function(){
/*
upload.render({
elem: '#test33'
,url: ''
,accept: 'file'
,done: function(res){
elem: '#test33',
url: '',
accept: 'file',
done: function(res){
console.log(res)
}
});*/
upload.render({
elem: '#test4'
,url: ''
,accept: 'video'
,done: function(res){
elem: '#test4',
url: '',
accept: 'video',
done: function(res){
console.log(res)
}
});
upload.render({
elem: '#test5'
,url: ''
,accept: 'audio'
,done: function(res){
elem: '#test5',
url: '',
accept: 'audio',
done: function(res){
console.log(res)
}
});
@ -305,39 +305,39 @@ layui.use(['upload', 'element'], function(){
//手动上传
upload.render({
elem: '#test6'
,url: ''
,auto: false
//,multiple: true
,bindAction: '#test7'
,choose: function(obj){
elem: '#test6',
url: '',
auto: false,
// multiple: true,
bindAction: '#test7',
choose: function(obj){
var that = this;
obj.preview(function(index, file){
that.elem.after('<span class="layui-inline layui-upload-choose">'+ file.name +'</span>');
console.log(file.name);
//obj.resetFile(index, file, '123.jpg');
});
}
,before: function(){
},
before: function(){
console.log(345);
}
,done: function(res){
},
done: function(res){
console.log(res);
}
});
upload.render({
elem: '#test8'
,url: 'https://httpbin.org/post'
,done: function(res){
elem: '#test8',
url: 'https://httpbin.org/post',
done: function(res){
console.log(res);
}
});
upload.render({
elem: '#test9'
,url: ''
,done: function(res){
elem: '#test9',
url: '',
done: function(res){
console.log(res);
}
});

View File

@ -17,11 +17,11 @@ const yargs = require('yargs');
const config = {
// 注释
comment: [
'/** v<%= pkg.version %> | <%= pkg.license %> Licensed */<%= js %>'
,{pkg: pkg, js: ';'}
]
'/** v<%= pkg.version %> | <%= pkg.license %> Licensed */<%= js %>',
{pkg: pkg, js: ';'}
],
// 模块
,modules: 'lay,laytpl,laypage,laydate,jquery,layer,util,dropdown,slider,colorpicker,element,upload,form,table,treeTable,tree,transfer,carousel,rate,flow,code'
modules: 'lay,laytpl,laypage,laydate,jquery,layer,util,dropdown,slider,colorpicker,element,upload,form,table,treeTable,tree,transfer,carousel,rate,flow,code'
};
// 获取参数
@ -38,8 +38,8 @@ const dir = {
// 输出目录
const dest = ({
dist: './dist'
,rls: dir.rls + '/layui'
dist: './dist',
rls: dir.rls + '/layui'
}[argv.dest || 'dist'] || argv.dest) + (argv.vs ? '/'+ pkg.version : '');
// js
@ -150,21 +150,21 @@ exports.help = () => {
let usage = '\nUsage: gulp [options] tasks';
let parser = yargs.usage(usage, {
dest: {
type: 'string'
,desc: '定义输出目录可选项dist默认、rls、任意路径'
}
,vs: {
type: 'boolean'
,desc: '生成一个带版本号的文件夹'
type: 'string',
desc: '定义输出目录可选项dist默认、rls、任意路径'
},
vs: {
type: 'boolean',
desc: '生成一个带版本号的文件夹'
}
});
parser.showHelp(console.log);
console.log([
'Tasks:'
,' default 默认任务'
,' rls 发行任务'
,' cp 将 dist 目录复制一份到参数 --dest 指向的目录'
'Tasks:',
' default 默认任务',
' rls 发行任务',
' cp 将 dist 目录复制一份到参数 --dest 指向的目录'
].join('\n'), '\n\nExamples:\n gulp cp --dest ./v --vs', '\n');
return gulp.src('./');
};

View File

@ -15,12 +15,12 @@
"gulp-uglify": "^3.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-replace": "^1.1.3",
"gulp-replace": "^1.1.4",
"gulp-rename": "^2.0.0",
"gulp-header": "^2.0.9",
"gulp-footer": "^2.1.0",
"del": "^2.2.2",
"minimist": "^1.2.5"
"minimist": "^1.2.8"
},
"bugs": {
"url": "https://gitee.com/layui/layui/issues"

View File

@ -6,76 +6,83 @@
layui.define(['lay','layer'], function(exports){
"use strict";
var $ = layui.$
,layer = layui.layer
,device = layui.device()
var $ = layui.$;
var layer = layui.layer;
var device = layui.device();
//外部接口
,upload = {
config: {} //全局配置项
//设置全局项
,set: function(options){
// 外部接口
var upload = {
config: {}, // 全局配置项
// 设置全局项
set: function(options){
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
//事件
,on: function(events, callback){
},
// 事件
on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}
};
//操作当前实例
,thisUpload = function(){
// 操作当前实例
var thisUpload = function(){
var that = this;
return {
upload: function(files){
that.upload.call(that, files);
}
,reload: function(options){
},
reload: function(options){
that.reload.call(that, options);
}
,config: that.config
},
config: that.config
}
}
};
//字符常量
,MOD_NAME = 'upload', ELEM = 'layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
// 字符常量
var MOD_NAME = 'upload';
var ELEM = 'layui-upload';
var THIS = 'layui-this';
var SHOW = 'layui-show';
var HIDE = 'layui-hide';
var DISABLED = 'layui-disabled';
,ELEM_FILE = 'layui-upload-file', ELEM_FORM = 'layui-upload-form', ELEM_IFRAME = 'layui-upload-iframe', ELEM_CHOOSE = 'layui-upload-choose', ELEM_DRAG = 'layui-upload-drag'
var ELEM_FILE = 'layui-upload-file';
var ELEM_FORM = 'layui-upload-form';
var ELEM_IFRAME = 'layui-upload-iframe';
var ELEM_CHOOSE = 'layui-upload-choose';
var ELEM_DRAG = 'layui-upload-drag';
//构造器
,Class = function(options){
// 构造器
var Class = function(options){
var that = this;
that.config = $.extend({}, that.config, upload.config, options);
that.render();
};
//默认配置
// 默认配置
Class.prototype.config = {
accept: 'images' //允许上传的文件类型images/file/video/audio
,exts: '' //允许上传的文件后缀名
,auto: true //是否选完文件后自动上传
,bindAction: '' //手动上传触发的元素
,url: '' //上传地址
,force: '' //强制规定返回的数据格式,目前只支持是否强制 json
,field: 'file' //文件字段名
,acceptMime: '' //筛选出的文件类型,默认为所有文件
,method: 'post' //请求上传的 http 类型
,data: {} //请求上传的额外参数
,drag: true //是否允许拖拽上传
,size: 0 //文件限制大小,默认不限制
,number: 0 //允许同时上传的文件数,默认不限制
,multiple: false //是否允许多文件上传不支持ie8-9
accept: 'images', // 允许上传的文件类型images/file/video/audio
exts: '', // 允许上传的文件后缀名
auto: true, // 是否选完文件后自动上传
bindAction: '', // 手动上传触发的元素
url: '', // 上传地址
force: '', // 强制规定返回的数据格式,目前只支持是否强制 json
field: 'file', // 文件字段名
acceptMime: '', // 筛选出的文件类型,默认为所有文件
method: 'post', // 请求上传的 http 类型
data: {}, // 请求上传的额外参数
drag: true, // 是否允许拖拽上传
size: 0, // 文件限制大小,默认不限制
number: 0, // 允许同时上传的文件数,默认不限制
multiple: false // 是否允许多文件上传不支持ie8-9
};
//初始渲染
// 初始渲染
Class.prototype.render = function(options){
var that = this
,options = that.config;
var that = this;
var options = that.config;
options.elem = $(options.elem);
options.bindAction = $(options.bindAction);
@ -86,14 +93,14 @@ layui.define(['lay','layer'], function(exports){
//追加文件域
Class.prototype.file = function(){
var that = this
,options = that.config
,elemFile = that.elemFile = $([
var that = this;
var options = that.config;
var elemFile = that.elemFile = $([
'<input class="'+ ELEM_FILE +'" type="file" accept="'+ options.acceptMime +'" name="'+ options.field +'"'
,(options.multiple ? ' multiple' : '')
,'>'
].join(''))
,next = options.elem.next();
].join(''));
var next = options.elem.next();
if(next.hasClass(ELEM_FILE) || next.hasClass(ELEM_FORM)){
next.remove();
@ -105,8 +112,8 @@ layui.define(['lay','layer'], function(exports){
}
that.isFile() ? (
that.elemFile = options.elem
,options.field = options.elem[0].name
that.elemFile = options.elem,
options.field = options.elem[0].name
) : options.elem.after(elemFile);
//初始化ie8/9的Form域
@ -117,10 +124,10 @@ layui.define(['lay','layer'], function(exports){
//ie8-9初始化
Class.prototype.initIE = function(){
var that = this
,options = that.config
,iframe = $('<iframe id="'+ ELEM_IFRAME +'" class="'+ ELEM_IFRAME +'" name="'+ ELEM_IFRAME +'" frameborder="0"></iframe>')
,elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="post" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">'
var that = this;
var options = that.config;
var iframe = $('<iframe id="'+ ELEM_IFRAME +'" class="'+ ELEM_IFRAME +'" name="'+ ELEM_IFRAME +'" frameborder="0"></iframe>');
var elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="post" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">'
,'</form>'].join(''));
//插入iframe
@ -480,15 +487,15 @@ layui.define(['lay','layer'], function(exports){
delete options.elem;
delete options.bindAction;
var that = this
,options = that.config = $.extend({}, that.config, upload.config, options)
,next = options.elem.next();
var that = this;
var options = that.config = $.extend({}, that.config, upload.config, options);
var next = options.elem.next();
//更新文件域相关属性
next.attr({
name: options.name
,accept: options.acceptMime
,multiple: options.multiple
name: options.name,
accept: options.acceptMime,
multiple: options.multiple
});
};
@ -508,9 +515,9 @@ layui.define(['lay','layer'], function(exports){
// 设置选择的文本
var setChooseText = function(files, filename){
var elemFile = that.elemFile
,item = options.item ? options.item : options.elem
,value = files.length > 1
var elemFile = that.elemFile;
var item = options.item ? options.item : options.elem;
var value = files.length > 1
? files.length + '个文件'
: ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || '');
@ -534,7 +541,7 @@ layui.define(['lay','layer'], function(exports){
}
};
//点击上传容器
// 点击上传容器
options.elem.off('upload.start').on('upload.start', function(){
var othis = $(this);
@ -543,7 +550,7 @@ layui.define(['lay','layer'], function(exports){
that.elemFile[0].click();
});
//拖拽上传
// 拖拽上传
if(!(device.ie && device.ie < 10)){
options.elem.off('upload.over').on('upload.over', function(){
var othis = $(this)
@ -561,25 +568,25 @@ layui.define(['lay','layer'], function(exports){
extendAttrs.call(this);
setChooseFile(files);
options.auto ? that.upload() : setChooseText(files); //是否自动触发上传
options.auto ? that.upload() : setChooseText(files); // 是否自动触发上传
});
}
//文件选择
// 文件选择
that.elemFile.off('upload.change').on('upload.change', function(){
var files = this.files || [];
extendAttrs.call(this);
setChooseFile(files);
options.auto ? that.upload() : setChooseText(files); //是否自动触发上传
options.auto ? that.upload() : setChooseText(files); // 是否自动触发上传
});
//手动触发上传
// 手动触发上传
options.bindAction.off('upload.action').on('upload.action', function(){
that.upload();
});
//防止事件重复绑定
// 防止事件重复绑定
if(options.elem.data('haveEvents')) return;
that.elemFile.on('change', function(){
@ -610,7 +617,7 @@ layui.define(['lay','layer'], function(exports){
options.elem.data('haveEvents', true);
};
//核心入口
// 核心入口
upload.render = function(options){
var inst = new Class(options);
return thisUpload.call(inst);