最後のファイルアップローダー

私は中核以外の教育と10年以上の経験を持つWeb開発者です。 私は顧客のために、時には上司にしか起こらないウェブのためにすべてをしました。 この仕事が大好きです。 しかし、それでも私はまったく笑わずにやることがいくつかあります。 それらの1つはファイルアップローダーです。 最初から-それが誰にも起こらずにajaxになったとき-そして今まで-それは写真のサイズを変更し、いくつかのストリームにファイルをアップロードし、はるかに-それは私にとって最も愛されていないタスクの1つのままです なんとか処理できたようです。 興味があれば、猫へようこそ。

ちょっとしたCoffeescript、jQueryに関するかなりの不満、$ .Deferredの簡単な説明、インプレースとアウトオブプレースの不注意に適用されたパターン、そして面白い面白い本へのリンクがあなたを待っています。





したがって、私たちの前のタスクは、ファイルアップローダーをサイトにアップロードすることです。 もちろん、AJAXはもちろん、進行中です。もちろん、既に完成したデザインです。 そもそも-なぜこれが問題なのですか？ クロスブラウザ。 古き良きトリック（i-frameでのa-la送信フォーム）は進歩をもたらさず、新しいもの（xhr.send）は古いブラウザでは機能しません。 ブラウザの標準化が 突然停止し、クロスブラウザの問題が死なないようにという希望がありました。 追加のタスクは、ドラッグアンドドロップです。 input'aの外観にはまだ問題があります。

どのようなオプションがありますか？

方法No. 1、Google主導の開発

Shustrenkoは、必要なすべての機能を実装するかなり人気のあるjQueryライブラリーをgoogleします。 アプローチは時間の不足で正しいです。 プロジェクトに非常に迅速に統合され、ブラウザとの互換性を心配し、フォーマットされたDOMも表示します。 結局のところ、DOMをスタイルで再加工しても問題はありません（jQueryを使用しても、それが主な専門分野ですよね）。機能について興味のある関係者（「はい、そうではありません。しかし、偶発的に発生したチップの種類を見てください。本当にすごいですか？」）。 そして、すべてがスーパーであるように見え、すべてが素晴らしいようです。 1日間、それを処理してテストに渡すことはかなり可能です。 しかし、その後...最初のツバメはデザイナーから飛び出します-いくつかの歌姫が出ました（誰かがダウンロードを中断したか、別のよりエキゾチックな状況を作り出しました） しかし、このdivは表示されなかったため、控えめに言っても、そのdivのスタイルはまったく同じではありません。 デザイナーの当然の非難を消化し、テスターの代表団の到着を観察します。 企業の標準により、ユーザーのXXパーセント（および最も価値のあるユーザー）が働いている素晴らしいブラウザーでは、進行状況が表示されません。 ホラー テスターを地獄に送ってください（「ブラウザがサポートしていない場合、どうすればいいですか？」）。勝利の表情で、あごのフックをスキップします：「Vkontakteアップロードはこのブラウザで動作します！」 そしてその瞬間、プロジェクトに対して最悪の犯罪の1つを犯します。この素晴らしいプラグインのソースコードにアクセスします。 （オプションとして、昨年より前にプラグイントラッカーでこのエラーに関するメッセージを見つけ、運が良ければ、この特定の問題をプラグインする何らかの松葉杖を見つけてください）。 実際、これはプログラマーほど怖くない。 あなたは誰かのコードを読むことを学ぶでしょう-時には良い、時には...異なる。 デバッガーをもう一度使用します。 jQueryのプラグイン開発者について悪いことを言いたくはありません。 私が出会ったほとんどの場合、彼らのコードは部外者をサポートするように設計されていないだけです。 しかし、プロジェクトのタイミングが燃え始める可能性があります。 時間がないため、このオプションを選択したことを覚えていますか？

それでも、まだプラグインをプラグインしている場合は、プロジェクトリポジトリにプラグインの縮小バージョンのみを残してください。 また、プラグインサイトへのリンクをどこにも残さないでください。

要約：デザインと機能を補うことができる場合にのみ、馴染みのないプラグインを使用します。 まあ、またはデザイナーや他のテスターの復//トレーニングのために。 または、リバースエンジニアリングスキルのトレーニングとして。

パス番号2、履歴

ハ！ 半年前、私たちはすでにそのようなものを書きました。 オランダ人（ギリシャ人、オーストラリア人、ペルシャ人...） 緑色の楕円形の進行状況バーがまだありました。 古いプロジェクトを開きます（別のコンピューター、燃え尽きたリポジトリー、およびそれほど単純ではない別の100500の理由）。 アップローダーを見た、煙の種類。 そしてそこ...最初に-最新のブラウザのみのサポート。 次に、クライアント側のフラッシュのサイズ変更。 第三に、この最も記憶に残る楕円形（デザイナーはスカムです！）進行状況はアップローダーコード自体に組み込まれています。 4番目、5番目など さらに、その特定のプロジェクトの詳細の束。 喜びの観点から-また、氷ではありません。 半年のロールバック-現代の技術の山の高さに思考を飛ばすのではなく。

要約：面白くない。 6か月前に第一人者であり、高品質のコードのみを提供したとしても、とにかくクールになりました。

パス番号3、予想外の

それでは、少し夢を見てみましょう。 何が欲しい？ （ビール、隣人、猫に加えて）。 少なくとも-アップローダーを作りたいです。 最大限、一度だけ長い間やりたいと思っています。 現在のプロジェクトから簡単に取り出して、最小限の変更で次のプロジェクトに貼り付けることができます。 ちなみに、この欲求は、EricとElizabeth Freimenovによる「Design Patterns」という1つの面白い小さな本に触発されています。 いいえ、これは誰もが読むべき4人組のオリジナルの本ではありません。 このもう1つの方がはるかに簡単です。 それほど強くないが、読みやすい。 著者が読者の頭に追い込もうとする最初の原則の1つは、変化しているものをカプセル化することです。 私たちの場合、アーキテクチャの最も可変的な側面は、サーバーにデータを送信する方法である必要があります（それだけでなく、後で詳しく説明します）。 覚えているなら、jQueryプラグインの前にこの問題について議論しました。 したがって、サーバーにデータを送信するためのメカニズムのプールを作成し（より多くのOOPの定式化が必要な場合-共通のインターフェイスを持つクラスのセットがあります）、アップローダーとの対話インターフェイスを定義すると-1つの大きな問題はいくつかの小さな問題に分割されます。 そして、それらを解決することはすでにより良いです。 どのように見えますか？ 非常にシンプル：

Uploader = senders: [xhrFile, formDataFile, formDataForm, iframe] send: (options)-> stream = false $.each @senders, (i, func)=> if stream = func(options) false stream
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2語で-関数の配列を並べ替え（javascriptも同じです！）、各関数にはオプションがあります（実際に触診する内容が分からないため、大部分は）、最初に返された空でない結果が送信に使用されます。 （オプションとして、例外をスローしなかった最初のものがより正確ですが、これまでのところ怠zyです。）この場合、最も「価値のある」関数は配列の最初であり、最後はフェイルセーフです（同じsubmit-form-to-iframeメソッド）。 はい、deferredが関数を返すと既に推測しています-そして、アップローダーインターフェースで、関心のあるすべてのリスナーをハングアップします（そして、それらをオプションに渡しません）。 彼は、関数の例の後、ネタバレの下で少し混乱していることを説明しました。

ここで、この記事のコードの品質に関する数行：

-コードがjQueryに関連付けられているのは、作者がプロジェクトが遅かれ早かれそれを使用すると考えているためではなく、Deferredを含む一定数の「アメニティ」のためです。

-部分的にコードは1つの素晴らしいプラグインから取られます 。 正直に言うと、このプラグインとすすり泣きを読むことからアイデアが生まれました。「まあ、なぜ、なぜロジックが実装から分離されないのですか？」

-現時点では、コードのテストはかなり不十分であり、これはアーキテクチャの単なる例示です。



関数の例：

  iframe = (options)-> return false unless options.input && options.input.value id = 'frame' + Math.random() $form = $ '<form>', method: options.method, enctype:'multipart/form-data', target: id, action: options.url $('<iframe>', name: id ).appendTo($form).on 'load', -> try response = @contents() throw new Error unless response.length && response[0].firstChild dfd.resolve response, name: options.input.value catch e dfd.reject response, name: options.input.value $form.hide().appendTo('body').submit() (dfd = $.Deferred()).promise()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、古いブラウザーの場合と同じアップタイム機能です。 要するに、フォームを作成し、iframeを目指して、送信します。 遅延を返します。これは、ターゲットiframeをロードすることで解決またはリダイレクトされます。 deferredに渡される引数は、外部リスナーで受信されます。 延期の説明が完全に明確でない場合、次の機能の後にスポイラーを歓迎しますが、もちろん、 ハブやドキュメントの 投稿などを読むことをお勧めします 。

  formDataFile = (options)-> return false unless options.files && options.files.length && window.FormData $.when.apply $, options.files.map (f)-> formData = new FormData() formData.append options.name, f xhr = new XMLHttpRequest() dfd = $.Deferred() xhr.onload = xhr.onerror = ->dfd[@status == 200 && 'resolve' || 'reject'] @response, file if xhr.upload xhr.upload.onprogress = (e)->dfd.notify e, file xhr.open options.method, options.url, true xhr.responseType = 'text' xhr.send formData dfd.promise()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すでにもっと面白いものがあるでしょう。 指定された各ファイル（options.filesがどこから来て、その中に何があるか）ごとに、個別のXMLHttpRequestを作成し、遅延します。 最初の例のように、サーバーからデータをロードするためにリダイレクトまたは解決します。 フェイルセーフの方法とは対照的に、解決/拒否に加えて、ブラウザが支配する場合、アップロードの進行状況に関する遅延データ（xhr.upload.onprogress =（e）-> dfd.notify e、file）を送信します。 deferredを使用して、$ .whenを使用してそれらを1つにグループ化して戻ります。 この場合、whenの使用が完全に正当化されるわけではないので、コメントでその理由を喜んで読みます。







非常に条件付きで、状況は次のように説明することができます：サーバーにデータを数回送信する機能を実行し（ファイルごとに1回）、各センサーを残し（据え置き）、これらのセンサーからインジケーターを取り出します（約束）。 3チャンネルのセンサーとインジケーターがあります。



経験豊富な注意深い読者は、すでに「Ba！ だから、これは義務の連鎖です！」そしてそれでも、それは100％正しいでしょう（JSの特性とそれをもっと簡単にしたいという願望を考慮に入れて）。 懐疑論者は、唇、jsのパターンをきしむように浄化します。 しかし、私たちはそれらに耳を傾けません。他の何かが私たちにとって重要です。タスクの条件から踊り、常識に導かれて、私たちは自分でパターンの実現にほとんど達しました。つまり、それについて少し読んで、 。



1つの問題を解決しなかった場合、問題を解決するための許容可能な方法を見つけました。 私たちには何が残っていますか？ ファイルを読み取るタスクもあります。 ブラウザーの機能に応じて、入力で選択されたファイルのオブジェクトを取得するか、フォルダーの内容を読み取ることもできます（必要に応じて再帰的に）。 または、何もできません（ブラウザを推測します）-入力するだけです。 すぐに同じこと-一連のリーダー（一連の職務）を形成し、適切な機能を選択することでそれを反復したいという要望が生じます。 それをすべてUploadsオブジェクトに入れます。 これは次のようになります。

 Uploader = _responsibilityChain: (options, chain, name = false)-> stream = false $.each chain, (i, func)=> if stream = func(options) #        Uploader #          @[name] = func if name false stream readers: [entry, file, input] read: (options)->@_responsibilityChain options, @readers, 'read' senders: [xhrFile, formDataFile, formDataForm, iframe] send: (options)->@_responsibilityChain options, @senders, 'send'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このメカニズムの実装は、Uploaderの別の機能で実行されました。 そして、イテレーションのすぐ内側で、Uploaderオブジェクトに必要なメソッド（読み取りまたは送信）として接近する関数を設定します。 次に、読み取り関数自体を（コメントとともにプラグインコードからより多くの範囲で）見てみましょう。

 #     input = (options)-> return false unless options.input.value $.Deferred().resolve([]).promise() #    -      input #         , Deferred      3-  file = (options)-> files = $.makeArray $(options.input).prop 'files' return false unless files.length if (files[0].name == undefined && files[0].fileName) # File normalization for Safari 4 and Firefox 3: $.each files, (index, file)-> file.name = file.fileName; file.size = file.fileSize; $.Deferred().resolve(files).promise() #   -reader.    . , ..  #  Deferred.    ,    entry = (options)-> roots = $(options.input).prop('webkitEntries') || $(options.input).prop('entries') return false unless roots && roots.length > 0 readEntries = (entries, path='')-> $.when.apply($, $.map entries, (entry)-> dfd = $.Deferred() errorHandler = (e)-> e.entry = entry if e && !e.entry # Since $.when returns immediately if one # Deferred is rejected, we use resolve instead. # This allows valid files and invalid items # to be returned together in one set: dfd.resolve [e] resolveHandler = (file)-> # Workaround for Chrome bug #149735 file.relativePath = path dfd.resolve file if entry.isFile entry._file && resolveHandler(entry._file) || entry.file resolveHandler, errorHandler else if entry.isDirectory entry.createReader().readEntries((entries)-> readEntries(entries, path + entry.name + '/' ).done((files)->dfd.resolve files ).fail(errorHandler) , errorHandler) else # Return an empy list for file system items other than files or directories: dfd.resolve([]); dfd.promise() #we do need this pipe here bc we do resolve some files scoped ).pipe -> Array.prototype.concat.apply [],arguments readEntries(roots).promise()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要するに、各関数は独自の方法でオプションからの入力をレイプし、遅延ファイルを返します。これは、読み込まれたファイルのリストで落ち着きます。



熱心で経験豊富な読者は、ここのどこかで「そのパターンではない！」と叫ぶべきです。 そして再び、それは100％正しいでしょう。 内部のプログラマーは、ここで何かがおかしいと感じています。 一部のリーダーの作業の結果は、すべての送信者に送信するために送信することはできません（たとえば、入力リーダーの後、xhrFile送信者は送信できません）。 まあ、彼らとゴブリン。 この状況は、不適切な送信者のfalseを返すことで処理されます。 しかし、送信者の内部の入力からデータを直接読み取ることは氷ではありません-忘れないでください、まだDrag'n'Dropがありますか？ 今のところ、そのままにしておきましょう。突然奇跡が起こり、コメントに賢明なアドバイスが表示されますか？



もう1つの注意-入力リーダーは何もしません-空の配列で延期された遅延を返します。 これは単なるデフォルト値であり、Uploader.read内でこの機能を転送できます。 美しさのために残された-いが、均一。



さらに-読み取りと送信をリンクし、オプションのデフォルト値を追加する必要があります。 もう一度、Uploaderオブジェクトに関数を挿入します。

 Uploader: #...  ,      upload: (options)-> options = $.extend method: 'POST' name: options.input && options.input.name , options @read(options).then (files)=>$.when.apply $, @send $.extend options, files:files
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここではすべてが簡単です-入力からファイルを読み取り、取得した値をオプションに追加し、Uploader.sendに送信するための結果オブジェクトを返します。 sendから受信した遅延オブジェクトは、いついつでもグループ化され、クライアントにグループ化された遅延オブジェクトを提供します。



すべての使用方法：

  $('#some-file-input').change -> Uploader.upload(input: this, url: '/files/upload' ) .done -> #         alert "#{arguments.length} files uploaded" .fail -> #          alert "Some files were not uploaded" .progress -> #      (~ 50 ),    console.log arguments
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まとめ

入力[type = file]の表示に関する問題の解決策として、このようなトリックを提案します-位置を使用して入力自体を非表示にします：コンテナの端をはるかに超えて、ラベルを定型化します。



小さく、簡単に拡張可能なファイルアップローダーがあります。 新しいアップロードメカニズムが表示されたら、送信者とベールのソート済みリストに簡単に追加します。 関数間を結ぶデータの形式は固定されており、$ .Deferredです。 しかし：

-同時ダウンロード数に制限はありません

-ダウンロードキャンセルメカニズムなし

-クライアント側での不快なイベント-イベント「ファイルがアップロードされました」、「ファイルエラー」があります。 進行状況イベントには、ダウンロードされたファイルの数を確認する組み込み機能はありません



興味深い場合は、欠点（および利点）を取り除く方法を示します。 これで、私は私の休暇、ビール、バッシュ、隣人を取らせてください。



使用された文献のリスト：

1. jQuery-File-Uploadプラグインコード-github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js

2. jQuery.Deferredドキュメント-api.jquery.com/category/deferred-object

3.本「デザインパターン」 Freemanov-www.ozon.ru/context/detail/id/20216992