前端知识体系メモ２０２３０７０５
# 0、前端知识体系
## 0.1、前端三要素
1. HTML(结构) : 超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容。
2. CSS (表现) :层叠样式表(Cascading Style Sheets)设定网页的表现样式
3. JavaScript (行为): 是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行用于控制网页的行为
## 0.2、结构层 (HTML)
## 0.3、表现层 (CSS)
CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下:
1、语法不够强大，比如无法嵌套书写，需要书写很多重复的选择器;。没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，反复造轮子且难以维护:
2、这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为 [CSS 预处理器] 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。
### 什么是 CSS 预处理器
CSS预处理器就是以CSS作为目标生成文件的CSS文件制造工厂编程语言。只要使用这种语言进行 CSS 的编码工作。即，一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。
### 常用的 CSS 预处理器有哪些
#### SASS
基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
#### LESS
less.js less中文网
基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用 LESS。
## 0.4、行为层 (JavaScript)
JavaScript 一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行.
### 1 Native 原生 JS 开发
原生的JS 开发，也就是让我们按照 [ECMAScript] 标准规范的开发方式，简称是 ES，特点是所有浏览器都支持。
### 2 微软的标准
TypeScript 是一种由微软开发的自由和开源的编程语言。
它是JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
该语言的特点就是除了具备 ES 的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很浏览器不能直接支持 TypeScript 语法，需要编译后 (编译成 JS) 才能被浏览器正确执行。
### 3 JavaScript 框架
##### 1 jQuery5：js库 不是框架
熟知的 JavaScript 框架，优点是简化了 DOM 操作，缺点是 DOM 操作太频繁影响前端性能;在前端眼里使用它仅仅是为了兼容 IE6、7、8;
##### 2 Angular:模块化开发框架
Google 收购的前端框架，由一群 Java 程序员开发，其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念，与微软合作，采用 TypeScript 语法开发;
对后台程序员友好，对前端程序员不太友好;
最大的缺点是版本迭代不合理(如:1代 ->2代，除了名字，基本就是两个东西;截止发表博客时已推出了 Angular6)
##### 3 React: 提出了[虚拟 DOM] 的概念
Facebook 出品，一款高性能的JS 前端框架; 特点是提出了新概念[虚拟 DOM] 用于减少真实 DOM 操作，在内存中模拟 DOM 操作，有效的提升了前端渲染效率;
缺点是使用复杂，因为需要额外学习一门 [JSX] 语言;
##### 4 Vue :集angular与 react 大成 模块开发+虚拟dom
一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular (模块化) 和 React (虚拟 DOM) 的优点;
##### 5 Axios : 前端通信框架
因为 vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery 提供的AJAX 通信功能:
### 4 UI 框架
- Ant-Desin（用得多
阿里巴巴出品，基于 React前端框架 的 UI 框架
- ElementUl（用得多、iview、ice: 饿了么出品，基于 Vue 的 UI 框架
- Bootstrap:Twitter 推出的一个用于前端开发的开源工具包
- AmazeUl: 又叫“妹子 UI”，一款 HTML5 跨屏前端框架
### 5 JavaScript 构建工具
##### Babel:JS 编译工具，
主要用于浏览器不支持的 ES 新特性，比如用于编译 TypeScript。
##### WebPack:
模块打包器，主要作用是打包、压缩、合并及按序加载
注:以上知识点已将 WebApp 开发所需技能全部梳理完毕
## 0.5、三端统一
### 混合开发 (Hybrid App)一套代码二端统一
主要目的是实现一套代码二端统一(PC、Android: .apk、iOS: .ipa ) 并能够调用到设备底层硬件 (如: 传感器、GPS、摄像头等)，打包方式主要有以下两种:
#### 。云打包:HBuild -> HBuildX，DCloud 出品:API Cloud
#### 。本地打包: Cordova (前身是 PhoneGap)
### 微信小程序
详见微信官网，这里就是介绍一个方便微信小程序 UI 开发的框架: WeUI
## 0.6、后端技术
前端人员为了方便开发也需要掌握一定的后端技术，但我们 Java 后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了 NodeJS 这样的技术。
# 1、什么是javascript
## 1.1概述
## 一个合格的后端人员，必须要精通JavaScript
由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。如果Brendan Eich预见到，未来这种语言会成为互联网第一大语言，全世界有几百万学习者，他会不会多花一点时间呢?总的来说，他的设计思路是这样的:
##### (1) 借鉴C语言的基本语法;
##### (2) 借鉴Java语言的数据类型和内存管理
##### (3) 借鉴Scheme语言，将函数提升到"第一等公民”(first class)的地位;
##### (4) 借鉴Self语言，使用基于原型 (prototype)的继承机制。
所以，Javascript语言实际上是两种语言风格的混合产物---- (简化的)函数式编程+ (简化的)面向对象编程。这是由Brendan Eich (函数式编程)与网景公司(面向对象编程)共同决定的。
多年以后，Brendan Eich还是看不起Java。他说:
Java (对Javascript)的影响，主要是把数据分成基本类型 (primitive)和对象类型 (object)两种，比如字符串和字符串对象，以及引入了Y2K问题。这真是不幸啊
## 1.2
ECMAScript它可以理解为是JavaScript的一个标准最新版本已经到es6版本~
但是大部分浏览器还只停留在支持 es5 代码上!
开发环境---线上环境，版本不一致
# 2 快速入门
## 2.1 引入javascript
#### 浏览器必备调试须知：
ELements （元素）console （控制台） sources（源文件及资源） network （抓包 表单信息）application
### 3 数据类型
### var 不能用数字开头，可以_$ 中文
#### 1number
js不区分小数和整数，Number
123 //整数123
123.1 // 浮点数123.1
1.123e3 //科学计数法
-99//复数
NaN
// not a number
Infinity //表示无限大
#### 2字符串
'abc'"abc"
#### 3布尔值
true , false
#### 4逻辑运算 && || !
&& 两个都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真
#### 5比较运算符
##### 1 =赋值
##### 2 == 等于 (类型不一样，值一样，也会判断为true)
例如：
> console.log(1=="1")
true
##### 3 ===绝对等于(类型一样，值一样，结果true)
例如：
> console.log(1==="1")
false
=== 这是一个JS的缺陷，坚持不要使用 ==
比较须知:NaN===NaN false
##### 这个与所有的数值都不相等，包括自己
只能通过 isNaN(NaN) 来判断这个数是否是 NaN
#### 6浮点数精度问题
1 console.1og((1/3) == (1-2/3))
尽量避免使用浮点数进行运算，存在精度问题!
` 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 数组
Java的数值必须是相同类型的对象~，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>
//取数组下标: 如果越界了，就会 undefined
```
对象
对象是大括号，数组是中括号~~
每个属性之间使用逗号隔开，最后一个不需要添加
1 //Person person = new Person(1, 2, 3,4, 5);
2
var person = f
name: "qinjiang",
age: 3,
tags: ['js',"java', "web', '..."]
取对象的值
### 4 严格检查模式
use strict
# 3 数据类型
## 3.1 字符串
### 1、正常字符串我们使用 单引号，或者双引号包裹
### 2、注意转义字符
\t
\n
u4e2d \u#### Unicode字符
x41 \x## Asc11字符
### 3 多行字符串编写
`` tab 上面 esc键下面
var msg =`
hello
world
你好ya
你好
`
> 编码值中0x是什么
> 在编程中，0x 前缀表示后面的数值是十六进制（Hexadecimal）表示法。十六进制是一种表示数字的方法，使用 16 个符号（0-9 和 A-F）来表示 0-15 的数值。
> 在 JavaScript 中，使用 0x 前缀可以表示一个十六进制的数值。例如，0x4e2d 表示十六进制数值 4E2D，其对应的十进制值为 20013。
> 同样地，还有其他进制的表示方式，例如：
> 0b 前缀表示二进制（Binary）数值，例如 0b1010 表示二进制数值 1010。
> 0o 前缀表示八进制（Octal）数值，例如 0o16 表示八进制数值 16。
> 这些进制的前缀可以帮助开发者明确指定数值的进制类型，并在编程中进行数值的表示和操作。
---
>
> 同样 ，在编程中，\x 是一种转义序列（Escape sequence）的表示形式，用于表示一个字符的十六进制编码值。
> 当你在字符串中使用 \x 后跟两个十六进制数字时，它将被解释为对应的字符。例如，\x41 表示 ASCII 值为 41（十进制为 65）的字符，即大写字母 "A"。
> 这种转义序列的形式允许你在字符串中插入特定的字符，例如控制字符、非打印字符或其他特殊字符。使用 \x 转义序列可以方便地表示字符的十六进制编码值。
### 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 大小写转换
//注意，这里是方法，不是属性了
```java
student.toUpperCase(）
student.toLowerCase()
```
### 8 'student.indexOf('t')'
### 9 substring
[)
```java
student.substring(1)
// 从第一个字符串截取到最后一个字符串
student.substring(1,3)
```
以下是源码：
以下是对应结果：
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 数组
### Array可以包含任意的数据类型
console.log(arr)
(9) [0, 'we', '你', 3, 4, 5, 6, 7, 8]
通过下标取值和赋值
arr[0] = 0
### 1、长度
arr.length1
注意: 加入给 arr.length 赋值，数组大小就会发生变化~，
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，通过元素获得下标索引
arr.indexof(2)
字符串的“1”和数字 1 是不同的
### 3、slice () 截取Array的一部分，返回一个新数组
类似于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、元素反转
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 () 并没有修改数组，只是会返回一个新的数组
### 9、连接符join
打印拼接数组，使用特定的字符串连接
["c"，"B"，"A]arr.join('-')
"C-B-A"
### 10、多维数组
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、动态的删减属性 通过 delete 删除对象的属性
delete person . name
true
person
### 4、动态的添加，直接给新的属性添加值即可
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循环，避免程序死循环
```java
while(age<100){
age = age + 1;
console. 1og(age)
do{
age = age + 1;
console. 1og(age)}
while(age<100)
}
```
### for循环
```java
for (let i=0; i< 100 ; i++) {console.1og(i)}
```
### forEach循环
```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])
}
}
