前端基礎に関するいくつかの雑多な知識点

実際に大学 1 年生の時にフロントエンドを学ぶという考えがあり、多少なりとも html や css について理解していましたが、その時は Android に専念していたため、続けることはありませんでした。
エンジニアは、どんなエンジニアであれ、特定の分野で学んだことには限界があるので、IT 業界は広いので、他の分野も見てみる必要があります。
もし私がどんなエンジニアになりたいかを強いて言うなら、フルスタックエンジニアになりたいと思っています（能力があれば）。

雑多な要点#

ここでは、私が重要だと思う理解すべき知識や忘れやすいポイントを記録しています。特に固定の論理的順序はありません。

位置問題#

最も一般的に使用される 2 つ：absolute と relative

absolute: 元の位置から脱離して位置を指定します。最近位置を指定した親要素に対して位置を指定し、もしなければ文書に対して相対的に位置を指定します。
relative: 元の位置を保持して位置を指定します。自分の元の位置に対して相対的に位置を指定します。

z-index: 要素の層を変更し、その要素の Z 軸を表します。デフォルトは 0 です。

要素が float 属性を使用してどの方向に浮動するかを定義する場合、後続の要素がその後に浮動し続けないようにするには、以下を使用します：

.nav::after{
    content:"";
    display:block;
    clear:both;
}

フォント#

フォントが長さを超える場合、ページを整然と美しく保つために、余分なフォントは…… で表示します：

.product-buyer-name {
overflow: hidden; /*セルの部分を隠します。*/
text-overflow: ellipsis; /*文字が超えた部分は省略記号で表示*/
white-space: nowrap;  /*セル（TD）内のテキスト内容がどれだけあっても自動的に改行しないようにし、この時余分な内容は水平方向にセルを破ります*/
}

ウェブページ上のいくつかの小さなアイコン
私はずっと、ウェブページ上のいくつかの小さなアイコンは img を挿入して表示されるものだと思っていましたが、さらに深く掘り下げてみると、淘宝のタブバーの小さなアイコンはカスタムで表示されていることがわかりました。
ここでフォントクラスに関連しているのは、特定のフォントを表示する必要があるが、コンピュータにそのフォントがない場合は表示できないためです。この場合、同じ方法でそのフォントのリソースを読み込み、他のコンピュータにそのフォントが存在しなくてもそのフォントの効果を表示できるようにします。

では、このようなフォントリソースやアイコンリソースはどのように入手するのか、もちろん、
Google や百度です
アリババのベクターアイコンライブラリには多くのリソースがあり、必要なリソースを選択してカートに追加し、ソースコードをダウンロードします。

ダウンロードしたソースコードにはリソースファイルとその CSS のデモが含まれており、使用する際にはまずリソースファイルをコピーします。

プロジェクトの下に生成された font-face をコピーします。

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?##iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg##iconfont') format('svg');
}

使用する iconfont のスタイルを定義します。

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

対応するアイコンを選択し、フォントコードを取得してページに適用します。

<i class="iconfont">&##x33;</i>

JavaScript における var, let, const の違い#

const: 読み取り専用の定数を宣言し、一度宣言するとその値は変更できません。
let: 宣言された変数は let 命令があるコードブロック内でのみ有効です。

変数の昇格

概要：変数は宣言前に使用できます。

var: 許可される
let：許可されない
const：許可されない

console.log(a);//正常に実行され、コンソールにundefinedが出力される
var a = 1;
console.log(b);//エラー、Uncaught ReferenceError: b is not defined
let b = 1;

console.log(c);//エラー、Uncaught ReferenceError: c is not defined
const c = 1;

主に実行時エラーを減らし、変数が宣言前に使用されるのを防ぎ、予期しない動作を引き起こすことを防ぎます。

一時的死区

概要：コードブロック内に let または const 命令が存在する場合、そのブロックはこれらの命令で宣言された変数に対して、最初から閉じたスコープを形成します。宣言前にこれらの変数を使用するとエラーになります。

var: 存在する
let：存在しない
const：存在しない

例：

var num = 123;
if (true) {
	num = 'abc';//エラー
	let num;
}

説明：グローバル変数 num は存在しますが、ブロックレベルスコープ内で let が新たに num 変数を宣言したため、後者はこのブロックレベルスコープにバインドされ、let が変数を宣言する前に num に値を代入しようとするとエラーになります。

重複宣言

概要：同じスコープ内で同じ変数を重複して宣言すること。

var: 許可される
let：許可されない
const：許可されない

var は重複定義を許可するため、以下のような結果をもたらします：

var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}
console.log(i);// 出力 5

var 命令にはブロックスコープがありません、for ループ内の i は外側の i を置き換えます。

初期値#

var: 必要ない
let：必要ない
const：必要

スコープ#

var: ブロックレベルを除く
let：ブロックレベル
const：ブロックレベル

ブロックレベルスコープ：

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
    console.log(n); // 10 内側のn
  }
  console.log(n); // 5 現在のレベルのn
}

この利点は、いくつかのアイデアをテストするために使用でき、変数の名前の重複を心配する必要がなく、外部からの干渉を心配する必要がないことです。var のスコープは、上記の重複宣言の例のような状況を引き起こす可能性があります。