# 0、前端知識體系

## 0.1、前端三要素

1. HTML(結(jié)構(gòu)) : 超文本標(biāo)記語言(Hyper Text Markup Language)，決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。

2. CSS (表現(xiàn)) :層疊樣式表(Cascading Style Sheets)設(shè)定網(wǎng)頁的表現(xiàn)樣式

3. JavaScript (行為): 是一種弱類型腳本語言，其源代碼不需經(jīng)過編譯，而是由瀏覽器解釋運行用于控制網(wǎng)頁的行為

## 0.2、結(jié)構(gòu)層 (HTML)

## 0.3、表現(xiàn)層 (CSS)

CSS 層疊樣式表是一門標(biāo)記語言，并不是編程語言，因此不可以自定義變量，不可以引用等，換句話說就是不具備任何語法支持，它主要缺陷如下:

1、語法不夠強大，比如無法嵌套書寫，需要書寫很多重復(fù)的選擇器;。沒有變量和合理的樣式復(fù)用機制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，反復(fù)造輪子且難以維護:

2、這就導(dǎo)致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發(fā)人員會使用一種稱之為 [CSS 預(yù)處理器] 的工具，提供 CSS 缺失的樣式層復(fù)用機制、減少冗余代碼，提高樣式代碼的可維護性。大大提高了前端在樣式上的開發(fā)效率。

### 什么是 CSS 預(yù)處理器

CSS預(yù)處理器就是以CSS作為目標(biāo)生成文件的CSS文件制造工廠編程語言。只要使用這種語言進行 CSS 的編碼工作。即，一種專門的編程語言，進行Web頁面樣式設(shè)計，再通過編譯器轉(zhuǎn)化為正常的 CSS 文件，以供項目使用。

### 常用的 CSS 預(yù)處理器有哪些

#### SASS

基于 Ruby，通過服務(wù)端處理，功能強大。解析效率高。需要學(xué)習(xí) Ruby 語言，上手難度高于 LESS。

#### LESS

less.js less中文網(wǎng) ?

基于 NodeJS，通過客戶端處理，使用簡單。功能比 SASS 簡單，解析效率也低于SASS，但在實際開發(fā)中足夠了，所以我們后臺人員如果需要的話，建議使用 LESS。

## 0.4、行為層 (JavaScript)

JavaScript 一門弱類型腳本語言，其源代碼在發(fā)往客戶端運行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給瀏覽器由瀏覽器解釋運行.

### 1 Native 原生 JS 開發(fā)

原生的JS 開發(fā)，也就是讓我們按照 [ECMAScript] 標(biāo)準(zhǔn)規(guī)范的開發(fā)方式，簡稱是 ES，特點是所有瀏覽器都支持。

### 2 微軟的標(biāo)準(zhǔn)

TypeScript 是一種由微軟開發(fā)的自由和開源的編程語言。

它是JavaScript 的一個超集，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭?/p>

該語言的特點就是除了具備 ES 的特性之外還納入了許多不在標(biāo)準(zhǔn)范圍內(nèi)的新特性，所以會導(dǎo)致很瀏覽器不能直接支持 TypeScript 語法，需要編譯后 (編譯成 JS) 才能被瀏覽器正確執(zhí)行。

### 3 JavaScript 框架

##### ?1 jQuery5：js庫 不是框架?

熟知的 JavaScript 框架，優(yōu)點是簡化了 DOM 操作，缺點是 DOM 操作太頻繁影響前端性能;在前端眼里使用它僅僅是為了兼容 IE6、7、8;

##### 2 ?Angular:模塊化開發(fā)框架

Google 收購的前端框架，由一群 Java 程序員開發(fā)，其特點是將后臺的 MVC 模式搬到了前端并增加了模塊化開發(fā)的理念，與微軟合作，采用 TypeScript 語法開發(fā);

對后臺程序員友好，對前端程序員不太友好;

最大的缺點是版本迭代不合理(如:1代 ->2代，除了名字，基本就是兩個東西;截止發(fā)表博客時已推出了 Angular6)

##### 3 React: 提出了[虛擬 DOM] 的概念

Facebook 出品，一款高性能的JS 前端框架; 特點是提出了新概念[虛擬 DOM] 用于減少真實 DOM 操作，在內(nèi)存中模擬 DOM 操作，有效的提升了前端渲染效率;

缺點是使用復(fù)雜，因為需要額外學(xué)習(xí)一門 [JSX] 語言;

##### 4 Vue :集angular與 react 大成 ?模塊開發(fā)+虛擬dom

一款漸進式 JavaScript 框架，所謂漸進式就是逐步實現(xiàn)新特性的意思，如實現(xiàn)模塊化開發(fā)、路由、狀態(tài)管理等新特性。其特點是綜合了 Angular (模塊化) 和 React (虛擬 DOM) 的優(yōu)點;

##### 5 Axios : 前端通信框架

因為 vue 的邊界很明確，就是為了處理 DOM，所以并不具備通信能力，此時就需要額外使用一個通信框架與服務(wù)器交互;當(dāng)然也可以直接選擇使用jQuery 提供的AJAX 通信功能:

### 4 UI 框架 ? ?

- Ant-Desin（用得多?

阿里巴巴出品，基于 React前端框架 的 UI 框架

- ElementUl（用得多、iview、ice: 餓了么出品，基于 Vue 的 UI 框架

- Bootstrap:Twitter 推出的一個用于前端開發(fā)的開源工具包

- AmazeUl: 又叫“妹子 UI”，一款 HTML5 跨屏前端框架

### 5 JavaScript 構(gòu)建工具

##### Babel:JS 編譯工具，

主要用于瀏覽器不支持的 ES 新特性，比如用于編譯 TypeScript。

##### WebPack:?

模塊打包器，主要作用是打包、壓縮、合并及按序加載

注:以上知識點已將 WebApp 開發(fā)所需技能全部梳理完畢

## 0.5、三端統(tǒng)一

### ?混合開發(fā) (Hybrid App)一套代碼二端統(tǒng)一

主要目的是實現(xiàn)一套代碼二端統(tǒng)一(PC、Android: .apk、iOS: .ipa ) 并能夠調(diào)用到設(shè)備底層硬件 (如: 傳感器、GPS、攝像頭等)，打包方式主要有以下兩種:

#### 。云打包:HBuild -> HBuildX，DCloud 出品:API Cloud

#### 。本地打包: Cordova (前身是 PhoneGap)

### 微信小程序

詳見微信官網(wǎng)，這里就是介紹一個方便微信小程序 UI 開發(fā)的框架: WeUI

## 0.6、后端技術(shù)

前端人員為了方便開發(fā)也需要掌握一定的后端技術(shù)，但我們 Java 后臺人員知道后臺知識體系極其龐大復(fù)雜，所以為了方便前端人員開發(fā)后臺應(yīng)用，就出現(xiàn)了 NodeJS 這樣的技術(shù)。

# 1、什么是javascript

## 1.1概述

## 一個合格的后端人員，必須要精通JavaScript

由于設(shè)計時間太短，語言的一些細(xì)節(jié)考慮得不夠嚴(yán)謹(jǐn)，導(dǎo)致后來很長一段時間，Javascript寫出來的程序混亂不堪。如果Brendan Eich預(yù)見到，未來這種語言會成為互聯(lián)網(wǎng)第一大語言，全世界有幾百萬學(xué)習(xí)者，他會不會多花一點時間呢?總的來說，他的設(shè)計思路是這樣的:

##### (1) 借鑒C語言的基本語法;

##### (2) 借鑒Java語言的數(shù)據(jù)類型和內(nèi)存管理

##### (3) 借鑒Scheme語言，將函數(shù)提升到"第一等公民”(first class)的地位;

##### (4) 借鑒Self語言，使用基于原型 (prototype)的繼承機制。

所以，Javascript語言實際上是兩種語言風(fēng)格的混合產(chǎn)物---- (簡化的)函數(shù)式編程+ (簡化的)面向?qū)ο缶幊獭＿@是由Brendan Eich (函數(shù)式編程)與網(wǎng)景公司(面向?qū)ο缶幊?共同決定的。

多年以后，Brendan Eich還是看不起Java。他說:

Java (對Javascript)的影響，主要是把數(shù)據(jù)分成基本類型 (primitive)和對象類型 (object)兩種，比如字符串和字符串對象，以及引入了Y2K問題。這真是不幸啊

## 1.2

ECMAScript它可以理解為是JavaScript的一個標(biāo)準(zhǔn)最新版本已經(jīng)到es6版本~

但是大部分瀏覽器還只停留在支持 es5 代碼上!

開發(fā)環(huán)境---線上環(huán)境，版本不一致

# 2 快速入門?

## 2.1 引入javascript?

? ??

? ??

? ??

#### 瀏覽器必備調(diào)試須知：

ELements （元素）console （控制臺） sources（源文件及資源） network （抓包 表單信息）application?

### 3 數(shù)據(jù)類型?

### var 不能用數(shù)字開頭，可以_$ 中文

#### 1number

js不區(qū)分小數(shù)和整數(shù)，Number

123 //整數(shù)123

123.1 // 浮點數(shù)123.1

1.123e3 //科學(xué)計數(shù)法

-99//復(fù)數(shù)

NaN

// not a number

Infinity //表示無限大

#### 2字符串

'abc'"abc"

#### 3布爾值

true , false

#### 4邏輯運算 ?&& || !

&& 兩個都為真，結(jié)果為真

|| 一個為真，結(jié)果為真

! 真即假，假即真

#### 5比較運算符

##### 1 =賦值?

##### 2 == 等于 (類型不一樣，值一樣，也會判斷為true)

例如：

> console.log(1=="1")

? true

##### 3 ===絕對等于(類型一樣，值一樣，結(jié)果true)

例如：?

> console.log(1==="1")

false

=== 這是一個JS的缺陷，堅持不要使用 ==?

比較須知:NaN===NaN false?

##### 這個與所有的數(shù)值都不相等，包括自己

只能通過 isNaN(NaN) 來判斷這個數(shù)是否是 NaN

#### 6浮點數(shù)精度問題

1 console.1og((1/3) == (1-2/3))

盡量避免使用浮點數(shù)進行運算，存在精度問題!?

` ?console.log((1 / 3) === (1 - 2 / 3)); ` ?

?console.log((1 / 3) === (1 - 2 / 3));

VM57:1 false

console.log(Math.abs((1 / 3) === (1 - 2 / 3))<0.00001);

true；

#### 7null 和 undefined

。null 空

undefined 未定義

#### 8 數(shù)組

Java的數(shù)值必須是相同類型的對象~，JS中不需要這樣!

```java

//保證代碼的可讀性，盡量使用 []

var arr = [1, 2,3, 4, 5, "hello",null,true];

new Array(1,12, 3 , 4, 4, 5,"hello");

? ? <script>

? ? ? ? var arr = [1, 2, 43, 'hello', null, true,"world!"];

? ? ? ? console.log(arr[3],',',arr[6]);

? ? </script>

//取數(shù)組下標(biāo): 如果越界了，就會 undefined

```

對象

對象是大括號，數(shù)組是中括號~~

每個屬性之間使用逗號隔開，最后一個不需要添加

1 //Person person = new Person(1, 2, 3,4, 5);

2

var person = f

name: "qinjiang",

age: 3,

tags: ['js',"java', "web', '..."]

取對象的值 ??

### 4 嚴(yán)格檢查模式

? ? use strict

# 3 數(shù)據(jù)類型

## 3.1 字符串

### 1、正常字符串我們使用 單引號，或者雙引號包裹

### 2、注意轉(zhuǎn)義字符

\t

\n

u4e2d ? \u#### Unicode字符

x41 ? ? \x## ? Asc11字符

### 3 多行字符串編寫

? `` tab 上面 esc鍵下面

var msg =`

hello

?world

你好ya

? 你好

`

> ?編碼值中0x是什么

> 在編程中，0x 前綴表示后面的數(shù)值是十六進制（Hexadecimal）表示法。十六進制是一種表示數(shù)字的方法，使用 16 個符號（0-9 和 A-F）來表示 0-15 的數(shù)值。

> 在 JavaScript 中，使用 0x 前綴可以表示一個十六進制的數(shù)值。例如，0x4e2d 表示十六進制數(shù)值 4E2D，其對應(yīng)的十進制值為 20013。

> 同樣地，還有其他進制的表示方式，例如：

> 0b 前綴表示二進制（Binary）數(shù)值，例如 0b1010 表示二進制數(shù)值 1010。

> 0o 前綴表示八進制（Octal）數(shù)值，例如 0o16 表示八進制數(shù)值 16。

> 這些進制的前綴可以幫助開發(fā)者明確指定數(shù)值的進制類型，并在編程中進行數(shù)值的表示和操作。

---

>

> 同樣 ，在編程中，\x 是一種轉(zhuǎn)義序列（Escape sequence）的表示形式，用于表示一個字符的十六進制編碼值。

> 當(dāng)你在字符串中使用 \x 后跟兩個十六進制數(shù)字時，它將被解釋為對應(yīng)的字符。例如，\x41 表示 ASCII 值為 41（十進制為 65）的字符，即大寫字母 "A"。

> 這種轉(zhuǎn)義序列的形式允許你在字符串中插入特定的字符，例如控制字符、非打印字符或其他特殊字符。使用 \x 轉(zhuǎn)義序列可以方便地表示字符的十六進制編碼值。

### 4 模板字符串

//tab 上面 esc鍵下面

```java

let name = "wangqqian ",

let age = 3;

let msg = 你好呀，${name]

```

### 5、字符串長度

'console.1og(str.1ength);'

### 6、字符串的可變性，不可變

console.log(student[o])

s

undefined

student[o] = 1

console.log(student)

student

undefined

### 7 大小寫轉(zhuǎn)換

//注意，這里是方法，不是屬性了

```java

student.toUpperCase(）

student.toLowerCase()

```

### 8 'student.indexOf('t')'

### 9 substring

[)?

```java

student.substring(1)?

// 從第一個字符串截取到最后一個字符串

student.substring(1,3)?

```

以下是源碼：

以下是對應(yīng)結(jié)果：

1。字符串.html:9 a

1。字符串.html:10 a/

1。字符串.html:11 a

1。字符串.html:12 a/

1。字符串.html:13 a

b

1。字符串.html:14 a b

1。字符串.html:17 中

1。字符串.html:20 A

1。字符串.html:27 Character: 中

1。字符串.html:31 Character: A

1。字符串.html:38 i am msg:

hello ? ~

? ? 你好

world

你好呀 朋友

1。字符串.html:43 你好呀，wangqian!

1。字符串.html:48 打印student的第 2 位： u

1。字符串.html:50 7

1。字符串.html:51 s

1。字符串.html:56 STUDENT

1。字符串.html:58 student

1。字符串.html:61 1

1。字符串.html:63 tudent

1。字符串.html:65 st

## 3.2 數(shù)組

### Array可以包含任意的數(shù)據(jù)類型

console.log(arr)

(9) [0, 'we', '你', 3, 4, 5, 6, 7, 8]

通過下標(biāo)取值和賦值

arr[0] = 0

### 1、長度

arr.length1

注意: 加入給 arr.length 賦值，數(shù)組大小就會發(fā)生變化~，

arr.length

9

arr.length=15

15

console.log(arr)

VM295:1 (15) [0, 'we', '你', 3, 4, 5, 6, 7, 8, empty × 6]

?如果賦值過小，元素就會失

arr.length=3

3

console.log(arr)

VM387:1 (3) [0, 'we', '你']

### 2、indexOf，通過元素獲得下標(biāo)索引

arr.indexof(2)

字符串的“1”和數(shù)字 1 是不同的

### 3、slice () 截取Array的一部分，返回一個新數(shù)組

類似于String中的 substring

```java

arr1=arr.slice(1,3)

(2) ['we', '你']

console.log(arr1)

VM584:['we', '你']

```

```java

arr.push('hello','hi')

5

console.log(arr)

VM760:1 (5) [0, 'we', '你', 'hello', 'hi']

undefined

arr.length=10

10

arr.push('heyyyy')

11

console.log(arr)

VM1078:1 (11) [0, 'we', '你', 'hello', 'hi', empty × 5, 'heyyyy']

```

### 4、push0)，pop() 尾部

#### 1 push:壓入到尾部 壓入棧

```java

console.log(arr)

VM760:1 (5) [0, 'we', '你', 'hello', 'hi']

undefined

arr.length=10

10

arr.push('heyyyy')

11

console.log(arr)

VM1078:1 (11) [0, 'we', '你', 'hello', 'hi', empty × 5, 'heyyyy']

```

#### 2 pop: 彈出尾部的一個元素

```java

arr.pop(0)

'heyyyy'

console.log(arr)

VM1200:1 (10) [0, 'we', '你', 'hello', 'hi', empty × 5]

undefined

arr.pop(3)

undefined

console.log(arr)

VM1265:1 (9) [0, 'we', '你', 'hello', 'hi', empty × 4]

undefined

arr.pop()

undefined

console.log(arr)

VM1296:1 (8) [0, 'we', '你', 'hello', 'hi', empty × 3]

undefined

arr.pop()

undefined

arr.pop()

undefined

arr.pop()

undefined

arr.pop()

'hi'

arr.pop()

'hello'

```

### 5、unshift() , shift0) 頭部

#### 1 unshift:壓入到頭部 頭部壓入棧

```java

arr.unshift('我是頭部插入')

6

console.log(arr)

VM315:1 (6) ['我是頭部插入', 0, 'we', '你', 'hello', 'hi']

```

#### 2 shift:彈出頭部的一個元素 頭部彈出棧

```java

arr.shift

? shift() { [native code] }

arr.shift()

'我是頭部插入'

arr.shift()

0

console.log(arr)

VM410:1 (4) ['we', '你', 'hello', 'hi']

```

### 6.排序 sort（）

console.log(arr)

VM410:1 (4) ['we', '你', 'hello', 'hi']

undefined

arr.sort()

(4) ['hello', 'hi', 'we', '你']

console.log(arr)

VM500:1 (4) ['hello', 'hi', 'we', '你']

### 7、元素反轉(zhuǎn)?

arr.reverse()

(4) ['你', 'we', 'hi', 'hello']

### 8.concat()?

?["c"，"B"，"A"]

arr.concat([1,2,3])

["c"，"B","A"，1，2，3]

arr

["c"，"B"，"A”]

注意: concat () 并沒有修改數(shù)組，只是會返回一個新的數(shù)組

### 9、連接符join

打印拼接數(shù)組，使用特定的字符串連接

?["c"，"B"，"A]arr.join('-')

"C-B-A"

### 10、多維數(shù)組

arr = [[1,2],[3,4],["5","6"]];

arr[1][1];

javas

## 3.3對象

var 對象名 = {

屬性名:屬性值，

屬性名:屬性值，

屬性名:屬性值

}

var person = [

name :"wangqian"

age: 3,

email:"5488@qq.com"

score: 0?

}

Js中對象，ver 對象名 {.....}表示一個對象,

鍵值對描述屬性 屬性名:屬性值 隔開，最后一個屬性不加逗號!

### 1、對象賦值（直接替換）

person.name = "yuanbao"

person.name

"yuanbao'

### 2、使用一個不存在的對象屬性，不會報錯! undefined

person.haha

undefined

### 3、動態(tài)的刪減屬性 通過 delete 刪除對象的屬性

delete person . name

true

person

### 4、動態(tài)的添加，直接給新的屬性添加值即可

person .haha ="haha"

"haha"

person

### 5 判斷屬性值是否在這個對象中!xxx in xxx!

'age' in person

true

//繼承

tostring' in person

true

### 判斷一個屬性是否是這個對象自身擁有的 hasOwnProperty()

person.hasOwnProperty('tostring')

false

person .hasOwnProperty('age')

true

## 3.4 流程控制

### if判斷

```java

var age = 3;

if (age>3){ //第一個判斷

? ? alert("haha")

}else if(age<5) { //第二個判斷

? ? alert("kuwa~")}

else { //否則,,

? ? alert("kuwa~");

}

```

### while循環(huán)，避免程序死循環(huán)

```java

while(age<100){

age = age + 1;

console. 1og(age)

do{

age = age + 1;

console. 1og(age)}

while(age<100)

}

```

### for循環(huán)

```java

for (let i=0; i< 100 ; i++) {console.1og(i)}

```

### forEach循環(huán)

```java

? ? ? ? var age = [12, 3, 12, 3, 12, 3, 12, 31, 23, 123];

? ? ? ? age.forEach(function (value) {

? ? ? ? ? ? console.log(value)

? ? ? ? })

```

### for,,,in?

? ? ? ? let age = [21, 43, 54, 654, 777, 5634];

? ? ? ? //for(var index in object){]

? ? ? ? for (let num in age) {

? ? ? ? ? ? if (age.hasOwnProperty(num)) {

? ? ? ? ? ? ? ? console.log("存在")

? ? ? ? ? ? ? ? console.log(age[num])

? ? ? ? ? ? }

? ? ? ? }