NodeJs 의 Express 및 Webuploader 를 기반 으로 큰 파일 분할 업로드 와 통합 (2) - 구성 요소 화 실현

첫 번 째 편 을 바탕 으로 큰 파일 분할 업로드 와 통합 의 실현 을 실현 하고 모듈 화 를 결합 시 키 려 면 본 내용 이 있 습 니 다. 큰 파일 분할 업로드 가 합 쳐 진 구성 요소 화 실현 입 니 다.
현재 브 라 우 저 에서 비교적 유행 하 는 것 은 Requirejs 이기 때문에 이 편 은 Requirejs 와 결합 하여 기능 을 더욱 구성 합 니 다.
사실 Requirejs 를 이용 하여 이전의 기능 을 개조 하 는 것 은 비교적 쉽다. Requirejs 공식 문서 에 따 르 면 다음 과 같은 몇 가지 단계 가 있다.
1) Requirejs 를 다운로드 합 니 다.
2) view 템 플 릿 파일 에서 이전의 js 인용 방식 을 개조 합 니 다.
3) 원래 의 논리 적 기능 을 하나의 구성 요소 로 추상 화하 고 페이지 에서 호출 된 Requirejs 통일 입구 파일 에서 호출 하면 된다.
다음은 2, 3 단계 에 대해 자세히 소개 하 겠 습 니 다. 모든 코드 는 제 GitHub 개발 지점 을 보십시오.
두 번 째 단 계 는 간단 합 니 다. 코드 를 붙 이기 전에 upload. jade 가 개 조 된 코드 입 니 다. 그 중에서 html dom 부분 은 변 하지 않 고 여러 script 을 requirejs 로 도입 하 는 방식 만 바 꿉 니 다.

extends ../layout/front

block content
    link(rel="stylesheet" type="text/css" href="plugins/webuploader/webuploader.css")
    link(rel="stylesheet" type="text/css" href="css/front/upload.css")

    #uploader.wu-example
        .dndArea
            .file-select
                #picker     
                p         
        //         
        #thelist.uploader-list
        button#ctlBtn.btn.btn-default     

    script(src="js/require-2.1.11.min.js" defer async="true" data-main="js/front/upload.js")

3 단계 가 중요 하고 관건 이다.먼저 추상 적 인 논리 기능 은 하나의 구성 요소 입 니 다. 이 세 계 는 requirejs 의 config 를 미리 정의 해 야 합 니 다. 저 는 js / front / upload. js 에 썼 고 구성 요소 의 디 렉 터 리 구 조 를 조정 하여 설정 을 붙 였 습 니 다.

requirejs.config({
    baseUrl: 'js',
    paths: {
        jquery: 'jquery-1.8.3.min',
        webuploader: '../plugins/webuploader/webuploader',
        md5: 'md5.min',
    }
});

그 다음 에 추상 적 인 개조 기능 을 Requirejs 의 구성 요소 로 해 야 한다. 개조의 사고방식 은 js 의 prototype 원형 모델 을 참고 했다. 구체 적 인 원형 모델 은 나의 다른 문장 인 자바 스 크 립 트 가 대상 을 대상 으로 프로 그래 밍 하 는 봉인 (一) 을 참고 할 수 있다.
원형 모드 의 기본 프레임 워 크 (세트) 는 다음 과 같다.

function ClassName(a, b)
{
        this.xxx = a;
        this.yyy = b;
}
ClassName.prototype.zzz = function() {
        console.log('zzz');
};

var obj = new ClassName('x', 'y');

원형 모드 에 따라 구성 요 소 를 패키지 하여 업로드 합 니 다.

define(['jquery', 'md5', 'webuploader'], function ($, md5, WebUploader) {

    /**
     *  
     * @constructor
     */
    function Uploader() {
        //-------------    -------------
        this.config = {};
        this.uploader = {};
    }

    // -------------    --------------

    //      (    )
    Uploader.prototype.init = function (cfg) {
        if (!this.support()) {
            return false;
        }

        //-------------    -------------
        var _config = {
            //      ，      。
            auto: false,

            // swf    
            swf: '../../webuploader/Uploader.swf',

            //        。
            server: '/upload_chunks',

            //        。  。
            //            ，   input  ，    flash.
            pick: {
                id: '#picker',
                label: '      '
            },

            //           
            compress: false,

            //     
            dnd: '.dndArea',
            disableGlobalDnd: false,

            //                 。     document.body
            paste: document.body,

            //       
            chunked: true,//       。
            chunkSize: Math.pow(1024, 2),//     (Byte)
            threads: 1,//     

            //    image,      jpeg，             ！
            resize: false
        };

        //-----------------    -----------------

        //         
        function _initConfig(cfg) {
            this.config = $.extend(_config, cfg);
            this.uploader = WebUploader.create(this.config);
        }

        //        
        function _initEvent() {
            var that = this;

            //              
            this.uploader.on('fileQueued', function (file) {
                var $list = $(".uploader-list");

                var item = '
' +
                    '
' +
                    '
' + file.name + '
' +
                    '
    ...
' +
                    '
' +
                    '
';

                $list.append(item);
            });

            //            ,         
            this.uploader.on('uploadStart', function (file) {
                that.uploader.options.formData.guid = md5([file.id, file.name, file.size, file.type, file['__hash']].join(''));
            });

            //                 。
            this.uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

                //       
                if (!$percent.length) {
                    var progress = '
' +
                        '
' +
                        '
' +
                        '
';

                    $percent = $(progress).prependTo($li).find('.progress-bar');
                }

                $li.find('p.state').text('   ');

                $percent.css('width', percentage * 100 + '%');
            });

            this.uploader.on('uploadSuccess', function (file) {
                // console.log(file);

                //        ,                Get   url
                if (that.uploader.options.chunked) {
                    $.post('/merge_chunks', {
                        'hash': md5([file.id, file.name, file.size, file.type, file['__hash']].join('')),
                        'name': file.name,
                        'size': file.size
                    }, function (data) {
                        if (data.status) {
                            $('#' + file.id).find('p.state').text('   ');
                            $('#' + file.id).find('.progress-bar').css({
                                'background-image': 'url(' + data.url + ')',
                                'background-size': 'cover',
                                'background-repeat': 'no-repeat'
                            });
                        } else {
                            $('#' + file.id).find('p.state').text('    !');
                        }
                    }, 'json');
                }
            });

            this.uploader.on('uploadError', function (file) {
                $('#' + file.id).find('p.state').text('    ');
            });

            this.uploader.on('uploadComplete', function (file) {
                // $('#' + file.id).find('.progress').fadeOut();
            });
        }

        _initConfig.apply(this, [cfg]);
        _initEvent.apply(this);
    };

    //     
    Uploader.prototype.support = function () {
        try {
            if (!WebUploader.Uploader.support()) {
                alert('Web Uploader         ！       IE   ，      flash    ');
                throw new Error('WebUploader does not support the browser you are using.');
            }

            return true;
        } catch (e) {
            if (e instanceof Error) {
                console.error(e.message);
            } else {
                console.error('Error!');
            }

            return false;
        }
    };

    //     
    Uploader.prototype.startUpload = function () {
        if (!this.support()) {
            return false;
        }

        this.uploader.upload();
    };

    return new Uploader();
});

여기 서 개인 속성 과 방법 으로 초기 화 되 었 고 Webuploader 인 스 턴 스 를 패키지 류 의 공공 속성 으로 합 니 다.
다음은 이 구성 요 소 를 호출 해 보 겠 습 니 다. upload. js 에 쓰 겠 습 니 다.

requirejs(['modules/uploader'], function (Uploader) {
    Uploader.init({
        pick: {
            id: '#picker',
            label: '    '
        },
        threads: 2,
    });

    $('#ctlBtn').on('click', function (event) {
        event.stopPropagation();
        Uploader.startUpload();
    });
});

그 중에서 Uploader. init 방법 도 전달 하지 않 아 도 된다.
이로써 전체적인 기능 모듈 화 개조 가 끝 났 는 지 상대 적 으로 간단 한 지 관건 은 모듈 화 구성 요소 의 실현 에 있다.
또한, 당신 은 더 좋 은 패 키 징 모듈 화 구성 요소 방식 이 있 을 지도 모 릅 니 다. 저 는 교 류 를 참고 하 시기 바 랍 니 다. 잘못된 점 은 신 들 이 많이 지적 해 주 십시오.