前端基礎裡一些雜七雜八的知識點

其實在大一就有學習前端的想法，也就多多少少了解了一點 html 和 css，但是那時候身在安卓方向，就還是以安卓為主，也沒有堅持下去。
工程師嘛，無論是什麼工程師，局限於一個領域上所學到的東西肯定是有限的，it 界那麼大，總得看看別的地方。
如果硬要說我想成為什麼工程師，我希望我能成為一個全棧工程師吧（有能力的話

雜七雜八的要點#

這裡主要是記了一些我需要重要理解或者容易忘記的知識點。沒有一個固定的邏輯順序。

定位問題#

最常用的兩個：absolute 和 relative

absolut: 脫離原來的位置定位。對最近有定位的父級進行定位，假如沒有則相對文檔進行定位。
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 來顯示的，但是再深入一點了解到，類似淘寶網上的 tab 欄的小圖標是通過一個自定義顯示出來的。
這裡我規劃到了字體類是因為當我們需要顯示部分字體，但是電腦上沒有該字體的時候是無法顯示的，這裡我們就要用一樣的方法，將這個字體的資源加載進去，達到一個顯示他人電腦字體不存在也依然可以看到該字體的效果。

那麼這種字體資源還有圖標資源該怎麼來呢，當然是，
Google 或者百度啦
在阿里巴巴矢量圖標庫上有挺多資源，我們在裡面挑選我們需要的資源並且加入購物車後下載源碼

下載到的源碼裡有資源的文件以及他一個 css 的 demo，在使用上我們先拷貝資源文件後。

拷貝項目下面生成的 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 的作用域會有可能導致上面重複聲明例子中的情況