コンピュータ言語のフリージャズ

Flatiron SchoolのPhase 4 Final Projectについては、JavaScriptを使用してクライアントにビューを処理するプロジェクトを作成しました.私はこのブログのポストを使用して私が遭遇した課題のいくつかを詳細に説明し、どのように私はそれを克服した場合、それはフロントエンドの開発を学んでいる誰かと共鳴した場合.
特に、Ruby on Railsはハードコアパンクですが、JavaScriptは本当にコーディングの無料のジャズです.Railsは厳格で、あなたがたどり着きます、そして、あなたが逸脱するならば、あなたがそれをするために明らかにハードコードを与えなければならない規則のかなり厳しいセットを持っています.あなたがもう一つの方向であまりに多くのその慣例を降圧するならば、よく、それはもはやパンクロックのように聞こえません.あなたのアグロリード“歌手”に言及しないように、いらいらし始めます.JavaScriptでは、非常にいくつかのガイドラインがあります!グローバル変数と関数を宣言する!引数を使用して関数を呼び出します.パラメータを宣言しなかった場合は?すごい!JSはそれを実行しようとします.変数名に関数を宣言して、データを処理するコールバックとして別の関数に渡しますか?うん!何でも行きます!それは即興のジャズのようです-それは、初心者が形と固有の組織の欠如で迷子になるのが簡単でありえます.どのような和音私は即興を想定していた?CADD 7 DIN 9?私はルートノートのフラット5番目を使用することができます“スコープで”ですか?(音楽家として、私は完全にそれが本当のコードでないというわけではありません-私のための電源コードとルートメモ!)!
このプロジェクトは、両方のスタイルの融合-私のバックエンドを処理するRails API、およびJavaScriptを使用してデータを取得し、クライアント側を表示します.Rails APIを作ることはmod 3の良いチェックでした、そして、それがなぜそのような役に立つフレームワークであるかについて強調しました.プレイヤーはチームにとって入れ子になったリソースであり、チームにとってはプレイヤーとしての役割を果たしていた.TeamsShareコントローラで欲しかったデータだけがここでの唯一の大きな課題であった.

render json: teams, only: [:name, :logo_img, :players, :id], include: {players: {except: [:created_at, :updated_at]}}

私は、私のJavaScriptをコーディングする私のプロジェクトのフロントエンドを完全に別々のrepoとファイルディレクトリを作るために続けました.開始は単純でした-私はイベントリスナーを文書に置きました、そして、DOMがロードされるとき、私はgetteam ()と呼ばれるまだ書かれた関数を呼び出します(論理的に十分に、私はブラウザに私が私のバックエンドに入れた利用可能なチームを表示したかったです).
getTeam ()は、APIへのフェッチ要求を行い、データが正しくフォーマットされると、それぞれのチームオブジェクトを取り込み、DOMに表示するために新しいチーム(ES 6オブジェクト指向のシンタックスシュガーを使用する)を作成して、foreChange ()を実行します.

function getTeam(){
    fetch('http://localhost:3000/api/teams')
    .then(r => r.json())
    .then(resp => {
        resp.forEach(team => {
            const t = new Team(team, modal)
            t.addToDom()
        })
    })

これは、オブジェクト指向に入るところが意味をなすところです.チームのすべての懸念は1つの大きいクラスの下にあることができました、したがって、「新しいチーム」がフェッチ要求から呼ばれるとき、各々は各々の属性を正しくセットする建設者メソッドで初期化されることができました.チームクラスのaddTomdom ()メソッドは、次の重要な課題を提起しました:その目的は実際に適切なHTMLノードにアクセスし、アプリケーションユーザーにデータを正しく表示しました.しかし、私は私が書いていた機能は、コードの30行を取ると超新星に行く開始していた!私は、それがそれがそのロゴがクリックされるときに、それがそのチームに関連したプレーヤーを示すためにフェッチ要求をすることになっているとき、それがそのロゴをクリックしたとき、各々のチームを示していました.全く同じ別のフェッチ要求を持つことはリファクタの必要性にあるように思えました.これはこの1つの機能が2つの完全に別々の懸念の原因となっていたからです.

    addToDom() {
        const teamOnDom = document.querySelector('#team-container')
        const teamDiv = document.createElement("div")
        teamDiv.classList.add("team")
        teamDiv.innerHTML += this.renderTeam()
        teamOnDom.appendChild(teamDiv)
        teamDiv.addEventListener('click', () => {
            this.modal.classList.remove("hide")
            this.renderPlayers()
        })
    }

私は、それをポップアップして、名簿を示すモーダルを表示した後に、それ自身の機能、renderplayers ()にAPIに呼び出しをリファクタリングしました.
プレイヤーはチームの入れ子になったリソースでした.彼らは自分のクラスを彼らの心配を処理する必要がありますか?私はチームに電話することができたので、それに反対しました.チームのクラスの選手';と簡単にアクセスできる各プレーヤーについての情報のすべてがあります.
プロジェクトの要件を打つために、私は別のCRUD機能で私のバックエンドに追加のフェッチ要求を必要とした-私はすでに'読み取り'を持っていたと私のアプリは、プレイヤー名簿を管理するため、それは各プレイヤーについての情報を更新できるようになりました意味がなされた.パッチ要求は、トリックをします.最初に、私は私の終点を理解する必要がありました.私は設定オブジェクトを第2引数として渡さなければなりませんでした.そして、それは目標としたリソースについての情報を更新するためにこの要求を指定します.

updatePlayer(form, id) {
            fetch(`http://localhost:3000/api/teams/${this.id}/players/${id}`, {
                method: "PATCH",
                headers: {
                    "Content-Type": "application/json",
                    "accept": "application/json"},
                body: JSON.stringify( 
                    {
                        first_name: form[0].value,
                        last_name: form[1].value,
                        jersey_number: form[2].value,
                        primary_position: form[3].value,
                        handedness: form[4].value,
                        injured: form[5].value
                    }
                )
            })
                .then(r => r.json())
                .then(data => this.renderPlayers(data))
    } 

各プレイヤーについての既存の情報は、ユーザーにレンダリングされた編集フォームに既に存在していましたが、そのフォームで編集された情報は、データベースに保持する構成オブジェクトの本体に渡されました.脇に、私はすべての閉じた括弧とカーリーブラケットの会計はこれで巨大な頭痛であることを発見!引数として渡されたオブジェクトは、自身の埋め込みオブジェクトであり、引数としてオブジェクトを渡します.stringify () serializer関数.VSのコードがまだ私のコードに焼かれた構文エラーがあったと私に話していた理由を理解するために、少なくとも三重チェックをしました!
JavaScriptの全体的な開発者に挑戦し、それを書く前に自分のコードを構造化に挑戦する自由形式の言語です.私が思う鍵は、機能を念頭に置いてプロジェクトに行って、それらの懸念を彼ら自身の機能に分割して、適切なデータを扱うために互いの機能を通過することです.