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

 为什么是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%的时间是用来写。这样才能写出来好的代码。

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