Geekly Articles each Day

Javascript（およびjQuery）を実際に教えたように

CouchdbやStrophe JS 、そしておそらくXMPPについてのメモの内容を超える気分はまったくありません。そのため、JavaScriptをどのように学んだかを説明します。

経験から、実際に得た知識をすぐに使用しないと、頭から知識が幻想的な速度で消えることがわかったので、自分に役立つ何かを書くことにしました。 そして以来 その瞬間、私はAmarokのウェブフェイスの必要性を感じ、それをグーグルで検索することができませんでした（少なくとも私はそれが好きでした）。

免責事項：この記事は、「1か月でJSを学習する方法」に関するものではありません。自分ではわかりません。
ドラマ「鋼が焼き戻された方法^ H ^ H開発が開発された」は、gitログで見ることができます。
これは、思慮深い結論のない単なる説明であり、最後にJSをよく知っている人のための質問がいくつかあります。



費やした時間。


私は仕事で働いているので、その名が示すように、私は働いています。すべてが荷降ろしやその他の昼休みの瞬間に書かれていました。
主観的な評価によると、資料を読んで、グーグルをして、コードを直接考えて、コードを直接書くという、1週間なしの2か月の純粋な時間を要しました。

構成部品




要点をつかもう！

すべては純粋なJSで始まり、jQuery {-UI}の密な使用で終わりました。
合計、我々は持っています：
  1. Amarok Dbusバインディング

    import dbus
    bus = dbus.SessionBus()
    player = bus.get_object("org.mpris.amarok", "/Player")

    ..

    def action(request, action, value):
    '''1 input value, no output. Reporting if needed.'''
    if action == 'set': player.VolumeSet(int(value))
    if action == 'up': player.VolumeUp(int(value))
    if action == 'down': player.VolumeDown(int(value))
    if action == 'setposition':
    current_track = int(media.GetCurrentTrack())
    meta = media.GetMetadata(current_track)
    length = int(meta['mtime'])#331000
    #logging.debug(int(length*float(value)))
    player.PositionSet(int(length*float(value)))
    if action == 'add': addTrack(value)
    if action == 'del': delTrack(value)
    return HttpResponse()


  2. 制御ロジックを実装するスクリプト。
    裸のJSに何かが残っている
    function metadata() {
    var statusElem = document.getElementById('metadata');
    statusElem.innerHTML = controller2('/metadata/');
    };

    jQuery {-UI}を使用して何かがかなり前に書き直されました
    function highlightCurrentTrack() {
    // Highlights current track
    var current_track = controller2('/track/');

    $("#playlisttable tr.hlight").toggleClass('hlight');
    $("tr#track"+current_track).toggleClass('hlight');
    }


  3. 直接インターフェース：
    -コントロールボタン。 これらはamarok.js-特別な種類のリンク（たとえば、/ volume / set /（\ d {1,3}）/）への呼び出しです。
    -現在のトラックに関する情報-/メタデータ/へのアクセス。
    -失われた時間の進行状況インジケーター-jQuery-UIを介した進行状況バー。
    -ボリュームコントロールスライダー-jQuery-UIスライダー経由。
    -プレイリストは、プレイリスト（）を呼び出すことによっても形成されます-実際、それは$ .getJSON（ '/ playlist / json /'であり、リストを含むテーブルの形成です。
    -ファイルブラウザーは再帰関数を使用して実装され、特定のディレクトリ（〜/ muzakなど）をバイパスし、jQueryを使用して最小化されたクリック可能なフォームに縮小されます。


準備完了

画像

-トラックの切り替え（前後、損失、停止、一時停止）
-再生中のトラックの情報を表示する：現在の位置、合計時間、進行状況、アーティスト：名前。
-ボリュームスライダー（ストックデザイン、キックしないでください！）
-プレイリストとファイルブラウザ用のタブを備えたDiv。

既知のバグ



予定：
-人間のデザインを作るために（私にとっては最も困難です。なぜなら、私から「彼」という文字への製図工が、「良い」というわけではないからです）。
-プレイリストテーブル内のクリック可能な行など、使いやすさを少し向上させます。これにより、ランダムな順序でトラックを切り替えることができます。
-コードamarok.jsを確認して、過剰で全体的な調和をスローします。

amarok.jsコードと一般的なアプリケーションロジックのヒントを合理的に批判したいと思います。

Gitウォッチはこちら

UPD：
ソース

私は通常Apressの本が好きですが、私が使用したjQueryの本は両方ともPackt- Learning jQuery 1.3およびjQuery UI 1.7 The jQueryのユーザーインターフェイスライブラリによって発行されました。 最初のものはjQueryライブラリを使用する利点とその使用方法を非常に明確に説明し、2番目のものはアニメーション、エフェクト、ウィジェットを作成するためのjQueryに基づくjQuery-UIライブラリを明らかにします。
優れたドキュメントがjQuery.comに直接投稿されています （ plugins-plugins.jquery.com ）。

純粋なJSでAjaxの部分を書き直すまで、 Ajaxとxmlhttprequest.ruの概要は非常に役立ちました。

当初、選択はjQueryとPrototypeの間でしたが、jQueryはよりアクセスしやすい情報で学習するのが主観的に簡単であると思われました。

おそらく、トピックは「JSを使用したamarokのWebフェイスのプログラミング」と呼ばれるべきですが、合成合成の例よりも大きなアプリケーションを作成すると、結果のコードを表示する機会を逃すことなく、はるかに理にかなっていることを強調したかったのです。

Source: https://habr.com/ru/post/J82044/

More articles:


All Articles