JS代码头像上传地址优化之6=2 和 代码扩展

原创 2015年11月19日 11:56:05

 为什么是split(img)地址优化和代码扩展?6=2 ,先来看一个片段代码:


//上传图片事件与回调函数 (优化前)

uploadimg_Event: function (trigger, event) {//触发元素Obj,回调函数event(图片完整路径,图片文件名)。    
        $(trigger).click(function () {
            var element = this;
            var d = upload.uploadImage();
            d.addEventListener('close', function () {
                if (this.returnValue != 'undefined' && this.returnValue != '') {
                    var splitvalue = (this.returnValue)[0].split('/');
                    var m = $.pathurl().split('Style/');
                    var n = m[0];
                    var imgurl = n + splitvalue[0] + '/' + splitvalue[2] + '/' + splitvalue[3];
                    var imgname = splitvalue[3];
                    event(imgurl, imgname);
                } else {
                    alert('未能上传文件!')
                }
            });
            d.showModal();
        });
    }


上面的片段代码是一个图片上传的函数,同样也是一个3年工作经验人写的,不知道大家看了上面的片段代码有可优化的地方没,如果没有证明你写代码也处于一个过渡阶段,如果有,优化的地方是哪里了?

代码优化:(优化后)

uploadimg_Event: function (trigger, event) {//触发元素Obj,回调函数event(图片完整路径,图片文件名)。    
        $(trigger).click(function () {
            var element = this;
            var d = upload.uploadImage();
            d.addEventListener('close', function () {
                if (this.returnValue != 'undefined' && this.returnValue != '') {
                     //优化前
                                var splitvalue = (this.returnValue)[0].split('/');
                                var m = $.pathurl().split('Style/');
                                var n = m[0];
                                var imgurl = n + splitvalue[0] + '/' + splitvalue[2] + '/' + splitvalue[3];
                                var imgname = splitvalue[3];
                                event(imgurl, imgname);


                                //优化后
                                var splitvalue = (this.returnValue)[0].split('/');
                                event($.pathurl().split('index.php/')[0] + splitvalue[0] + '/' + splitvalue[2] + '/' + splitvalue[3], splitvalue[3]);

                } else {
                    alert('未能上传文件!')
                }
            });
            d.showModal();
        });
    }

相信大家在看完上面的代码的时候就已经明白为什么是6=2了吧!当然也有个别地方大家可能是不明白的,看不懂的我会在下面的代码解析说道,上面的判断代码虽然只是一个小小的示例,代码看似很简单,但也是很多程序员容易犯的错误,如果大家都向优化代码前那样去写代码,随便声明变量因那么内存将成倍增长,性能也是随之下降,大多数人在编写代码的时候并没有考虑到“冗余”这个问题。所以大家在写代码的时候一定要多去想,想好了再去写,一味地盲目编写代码对自己和系统都没有任何的提升。下面我们来说说扩展吧!还是去修改上面的片段代码?

思考问题:

1、如何让这个片段代码在全站都可以用了?

答:放在一个全局文件Common中

2、全站每个地方所需要上传的图片是多少张?又怎么控制了?

答:给uploadimg_Event函数中添加一个number参数来控制上传张数,这样有利于不同地方上传的图片数量是不一样的。

3、如果我发现上传的照片错了哪有怎么办呢,怎么从新上传?

答:uploadimg_Event函数中添加一个del参数,这个参数用来判断调用类型是添加图片还是删除图片。


上面的三个问题都将在上面的片段代码之上进行扩展。

//上传图片事件与回调函数(代码扩展)

        uploadimg_Event: function (trigger, event, number, del) {
            if (verificationList.thisNull(del) && del == "del") {
                if (content != 0) {
                    content--;
                } else {
                    alert("没有您要删除的信息");
                }
            } else if (verificationList.thisNull(del) && del == "add") {
                content = 0;
                var maxnumber = number;
                $(trigger).click(function () {
                    if (content < maxnumber) {
                        content++;
                        var element = this;
                        var d = upload.uploadImage();
                        d.addEventListener('close', function () {
                            if (this.returnValue != 'undefined' && this.returnValue != '') {
                                //优化后
                                var splitvalue = (this.returnValue)[0].split('/');
                                event($.pathurl().split('index.php/')[0] + splitvalue[0] + '/' + splitvalue[2] + '/' + splitvalue[3], splitvalue[3]);

                            } else {
                                content--;
                                alert('未能上传文件!')
                            }
                        });
                        d.showModal();
                    } else {
                        alert('最多只能上传' + maxnumber + '');
                    }
                });
            } else {
                alert("系统不能识别您的操作!");
            }

        },

在上面的扩展代码就已经决绝了上面我们提出的三个问题。相信大家也看懂了上面写的代码了吧!在来说说uploadimg_Event这个函数的参数及调用问题?

参数解析:

trigger:trigger参数是一个object参数,参数在函数中的意义是用来绑定click事件的,好处我就不说了,自己理解

event:event参数所以一个回调函数,参数在函数中的意义是当上传图片成功后返回两个参数,一是:返回图片的路径地址,二是:返回图片名称。这样做的好处是在不同的地方调用后处理的方式都不一样,怎么返回的大家在上面的扩展代码中看。

number: number 参数是控制图片上传的数量,包括删除后是否能再次上传。

del:del参数是控制当前调用uploadimg_Event函数的删除或添加,这样我们就达到了一个函数两种方法(add / del)的效果。


调用解析:

    //添加图片
    cm.uploadimgEvent($('.add_pho_link'),

//回调函数,imgurl 上传图片的完整路径,imgname 上传图片的名称。

 function (imgurl, imgname) {

//此处可以写处理代码?

    }, 4, "add");
    
    $('#js_petaddpho a').unbind('click').click(function () {
       $(this).closest('li').remove();
        cm.uploadimgEvent("", "", "", "del"); //删除图片
    });



总结:在我们写代码的时候别只顾着去实现代码,更多的应该是想,想这个代码怎么实现,我个人觉得一个的代码的实现是由70%的时间是用作于想,30%的时间是用来写。这样才能写出来好的代码。

如果上面的代码您觉得有更好的建议或者优化的地方希望留言不吝赐教



版权声明:本文为博主原创文章,未经博主允许不得转载。

html页面通过ActiveX控件调用摄像头实现拍照上传demo代码下载

原文:html页面通过ActiveX控件调用摄像头实现拍照上传demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1832077946801152.ht...
  • yaerfeng
  • yaerfeng
  • 2016年08月18日 09:28
  • 7993

html页面上传图片并进行展示

html页面: 本功能实现图片上传并显示,点击“查看”按钮也显示图片 缩略图 @ if (!isEmpty(news.thumbnail_atta_id)) { 查看 ...
  • paradisesunny
  • paradisesunny
  • 2015年06月05日 15:31
  • 13437

js+java实现的头像上传和裁剪,完美兼容各种浏览器

js+jquery+java实现头像剪切上传,页面样式仿百度头像上传布局,界面美观大方...
  • wqj975005563
  • wqj975005563
  • 2015年09月09日 15:57
  • 8309

上传头像用到的插件代码imagecropper.js

  • 2017年05月12日 10:34
  • 81KB
  • 下载

留言板基于springmvc+js+jq+ajax+oracle开发的留言板项目简单适合新手,代码注释很详细,包括点赞,发布留言增删改查头像上传等

  • 2017年11月04日 09:57
  • 12.47MB
  • 下载

微信js sdk 授权上传头像下载代码片段和注意事项

应用微信js sdk首先需要对页面进行授权,上传接口需要localIds转为字符串 res.localIds.toString();,上传后只有三天有效期,长时间使用需下载到自己服务器上...
  • zyz_3362
  • zyz_3362
  • 2016年08月09日 16:08
  • 1419

iOS通过http post 文件流上传文件(头像)代码实现

由于服务器要求以文件流上传头像至服务器,之前使用的是ASIFormDataRequest,只需简单设置,就可以实现上传[request setFile:imageDirectory forKey:@"...
  • ldx117182975
  • ldx117182975
  • 2016年07月26日 10:29
  • 1890

Android上传头像代码,相机,相册,裁剪

activity_main.xml "1.0" encoding="utf-8"?> "http://schemas.android.com/apk/res/android" and...
  • LM_ZP
  • LM_ZP
  • 2016年05月12日 09:30
  • 548

对Jquery上传头像截取代码的更新

使用JQuery+Jquery.UI实现了该功能,因为无法设置容器意外的元素作为Handler,所以只能用两张图片模拟一张并同步拖拽来实现效果(后来有空看了一下代码,其实Jquery.UI是可以设置容...
  • neubuffer
  • neubuffer
  • 2013年11月23日 14:34
  • 1217

Retioft 头像上传 (Post请求 相当完整的一套 填接口 参数即可用)包括 请求 图片裁剪 内部代码详细 说明文字详细 简单易懂

  • 2017年12月08日 15:52
  • 139KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS代码头像上传地址优化之6=2 和 代码扩展
举报原因:
原因补充:

(最多只允许输入30个字)