Code Refactoringについて説明しましょう

Code Refactoring?

これは、結果を変更することなく、外部画面や機能の動作を変更するのではなく、コードの可読性とメンテナンス性を向上させるために、コード内部の構造を変更することを意味する.

いつ保理の仕事をしますか。

Googleの結果、多くの場合、自分の開発プログラムに従ってやっていることが明らかになった.
コードを書くときに手抜きをする人もいれば、機能を完成した後、直接読むときに理解できないコードになった人もいます.
だから自分の開発プログラムを作って、適切に😅

ぶんかいさぎょう

ほとんどはコードの不要な部分を除去する作業です.
作成したコードに注意深くチェックして適用しましょう.

HTML

シンボルマークの作成

再分解の原因の一つは毒性である.コンピュータラベルはエンジンの最適化、ネットワークアクセスなどの利点がありますが、可読性にも優れています.
そのため、できるだけ西文タグを使ってHTMLドキュメントを書くべきです

img tag artプロパティの使用

img tagの属性にはartの属性がありますart属性はimg説明を書くための属性であり、上記で説明した記号マークに似た理由で書くことが望ましい.art属性はコードのみを見て、画像が何なのか分かりやすく、srcの前に書くことが望ましい

Self Closing Tag

input、link、imgのようなラベルはself closting tag
これらのラベルの後ろにclostingtagを記入する必要はありません.

Prettier

筆者はVscodeを使用してPrettierを紹介しており、Code Fomatterを使用してコードを記述する際にさまざまな助けを提供しています.
コード作成後、再分解が必要な部分は自分で修復しますが、まだ使用していない場合は、お勧めします.

PUG

以前はExpressライブラリNodejsを勉强するときに一度使ったことがありますが、htmlを简単に表现できる文法を提供しています.mixin、extendなども使えます.とてもいいです.
複数のライブラリを使うのも良い方法だと思います

CSS

CSSはJavaスクリプトよりメンテナンスが難しい
そのため、CSS分解は重要な仕事です.

属性の順序

レイアウトに大きな影響を与える順序で、隣接するプロパティ間を組み合わせることが望ましい
次の順序でプロパティを作成します.

Layout Properties (position, float, clear, display)

Box Model Properties (width, height, margin, padding)

Visual Properties (color, background, border, box-shadow)

Typography Properties (font-size, font-family, text-align, text-transform)

Misc Properties (cursor, overflow, z-index)

ソース:wecode

不要なスタイルの作成を禁止

display: "lnline";
display: "block";
width: 100%;

場合によっては、上記のスタイル値がデフォルトの場合があります
それ以外に、デフォルトのスタイルに対応するスタイルを書く必要はありません.

bottom-up方式

親サイズ割当->子サイズ割当:上下

子サイズ割当->親サイズ割当:下部から上部

親にwidth heightを与えるよりも、子供の大きさに合わせて自然に親の大きさを調整したほうがいい.
だから、私たちはいつも下から上へ書く.

SASS(SCSS)

前の記事で述べたように、variable、nesting、mixin、extendなどには多くの機能があり、CSSの可読性とメンテナンス性を向上させることができます.

共通

ファイルの切断

これはhtml、css、jsの分解作業に適しており、適切にファイルを分けてコードを書くとより良いです.
ただし、あまり離さないように、項目の大きさによって分けたほうがいいです.

重複コードの削除

目的に応じて、関数、クラスなどを用いて重複部分を最大限に解消すべきである
終了~