java技术栈快速复习02_前端基础知识总结

本文链接：https://blog.csdn.net/weixin_44797182/article/details/138355751

前端基础

经典三件套： html（盒子）+css（样式）+JavaScript（js：让盒子动起来）

html & css

HTML全称：Hyper Text Markup Language(超文本标记语言)，不是编程语言
- 超文本：页面内可以包含图片、链接，甚至音乐、程序等非文字元素（超出文本的范畴）；
- 标记：标签，不同的标签实现不同的功能
- 语言：人与计算机的交互工具
CSS (Cascading Style Sheets，层叠样式表），就是添加样式
资料：
- https://www.runoob.com/html/html-tutorial.html
- https://www.runoob.com/css/css-tutorial.html

JS

手册：https://www.techbrood.com/jsref?p=jsref-tutorial
JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。

js组成

ECMAScript：规定了JS的核心语法，是一种在国际认可的标准的脚本语言规范。如语法，数据类型，关键字，保留字，运算符，对象等。
BOM：浏览器对象模型（Browser Object Model），BOM赋予了JavaScript操作浏览器的能力，即Window操作。
DOM：文档对象模型（Document Object Model），DOM赋予了JavaScript操作 HTML 的能力，即Document操作；

js语言基础=》和java相似，只说不一样的地方

变量var a
数据类型：6种数据类型，5 种简单数据类型：Undefined（未定义）、Null（空值）、String、Number 、Boolean。还有一种复杂数据类型—Object
- Undefined 类型只有一个值，即特殊的 undefined。在使用 var 声明变量，但没有对其初始化时，这个变量的值就是 undefined。
- Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)，而 typeof 操作符检测 null 会返回 object
- 有个要说明的是：undefined 是派生自 null 的，因此 undefined 和 null 两个值的比较是相等的，所以，未初始化的变量和赋值为 null 的变量会相等。这时，可以采用 typeof 变量的类型进行比较。

数组

数组定义：var arr = [“123”, 1, “111”];
js数组和java数组的区别
- javascript是弱类型语言，js数组可以自动扩容，不会出现数组越界的情况，所以js数组中可以存放任意数据类型；
- java数组是强类型一旦定义长度，不可以更改，java数组中的数据类型必须一致
常用方法：
- concat数组合并array1.concat(array2,array3,...,arrayX)
- push()数组末尾添加新元素，修改原数组，并返回新的长度。array.push(item1, item2, ..., itemX)
- pop()删除数组最后的元素，修改原数组,，删除数组的最后一个元素并返回删除的元素。array.unshift(item1,item2, ..., itemX)
- unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。array.unshift(item1,item2, ..., itemX)
- shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。array.shift()

javascript 数组遍历的常用方法

（迭代、for循环、for… in、for…of、foreach、map、filter、every、some，findindex）

var arr = ["张三", 8, "李四"];
// for循环
logArr = []
for (var i = 0; i < arr.length; i++) {
	logArr.push(`index:${i}-value:${arr[i]}`)
}
console.log(logArr); //(3) ["index:0-value:张三", "index:1-value:8", "index:2-value:李四"]
//for… in
logArr = []
for (var i in arr) {
	logArr.push(`index:${i}-value:${arr[i]}`)
}
console.log(logArr); // (3) ["index:0-value:张三", "index:1-value:8", "index:2-value:李四"]
// for…of
logArr = []
for (var item of arr) {
	logArr.push(`value:${item}`)
}
console.log(logArr); //(3) [" value:张三", " value:8", " value:李四"]
// foreach被传递给foreach的函数会在数组的每个元素上执行一次，元素作为参数传递给该函数，（不能遍历伪数组）
logArr = []
arr.forEach(function(v, i) {
	logArr.push(`index:${i}-value:${v}`)
})
console.log(logArr); //(3) ["index:0-value:张三", "index:1-value:8", "index:2-value:李四"]
// map 历数组，并通过callback对数组元素进行操作，并将所有操作结果放入数组中并返回该数组（不能遍历伪数组）
var arr2 = arr
var arr3 = arr2.map(function(v) {
	return v + "wei"; //map可以返回处理过 的数据
})
console.log(arr); // (3) ["张三", 8, "李四"]
console.log(arr2); //(3) ["张三", 8, "李四"]
console.log(arr3); //(3) ["张三wei", "8wei", "李四wei"]
//filter( )返回一个包含所有在回调函数上返回为true的元素新数组，回调函数在此担任的是过滤器的角色，当元素符和条件，过滤器就返回true,而filter则会返回所有符合过滤条件的元素
var arr4 = arr
var arr5 = arr4.filter(function(item) {
	if (typeof item == 'number') {
		return item; // 如果是数字则过滤出来
	}
})
console.log(arr); //(3) ["张三", 8, "李四"]
console.log(arr4); //(3) ["张三", 8, "李四"]
console.log(arr5); //[8]
// every() 当数组中的每一个元素在callback上被返回true时就返回true(注意：要求每一个单元项都返回true时才为true)
// every()与filter()的区别是：后者会返回所有符合过滤条件的元素；前者会判断是不是数组中的所有元素都符合条件，并且返回的是布尔值
var arr6 = arr
var arr7 = arr4.every(function(item) {
	if (typeof item == 'number') {
		return item; // 如果是数字则过滤出来
	}
})
console.log(arr); //(3) ["张三", 8, "李四"]
console.log(arr6); //(3) ["张三", 8, "李四"]
console.log(arr7); //false
console.log("1234567---------"); //[8]
// some()只要数组中有一项在callback上就返回true
// every()与some()的区别是：前者要求所有元素都符合条件才返回true,后者要求只要有符合条件的就返回true
var arr9 = arr
var arr10 = arr9.some(function(item) {
	if (typeof item == 'number') {
		return item; // 如果是数字则过滤出来
	}
})
console.log(arr); //(3) ["张三", 8, "李四"]
console.log(arr9); //(3) ["张三", 8, "李四"]
console.log(arr10); //true

对象：类似于map，var obj = {}

js遍历对象的常用方式

let natureColors = {
	colorC: 'green',
	colorD: 'yellow'
};

var keys = Object.keys(natureColors);
console.log(keys); // (2) ["colorC", "colorD"]

var values = Object.values(natureColors);
console.log(values); // (2) ["green", "yellow"]

for (let key in natureColors) {
	console.log(key + ":" + natureColors[key]); // colorC:green  colorD:yellow
}

常见弹窗

alert("你好");这是一个只能点击确定按钮的弹窗
confirm("你好");这是一个可以点击确定或者取消的弹窗
prompt("你爱学习吗？","爱");这是一个你可以输入文本内容的弹窗

BOM

BOM： 浏览器对象模型（Browser Object Model，简称 BOM），它提供了很多对象，用于访问浏览器的功能
BOM体系图
常用BOM对象
- Location 对象
  - assign(URL)：载入一个新的文档，相当于window.location.href=“url”;当前页面会转为新页面内容，可以点击后退返回上一个页面。
  - reload()：重新载入当前文档，reload() 方法类似于你浏览器上的刷新页面按钮。
  - replace(newURL)：用新的文档替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的
  - href：返回完整的URL
  - …
- History 对象
  - back()：加载 history 列表中的前一个 URL
  - forward()：加载 history 列表中的下一个 URL
  - go(number|URL)：加载 history 列表中的某个具体页面，该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。
- 定时器
  - setInterval(‘调用函数’,毫秒时间)：每间隔固定毫秒值就执行一次函数
  - setTimeout(‘调用函数’,毫秒时间)：在固定时间之后执行一次调用函数

DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），DOM 模型被构造为对象的树。
dom体系图

获取元素
- 通过css选择器选取元素：querySelectorAll()和querySelector（）
- getElememtById(‘元素ID值’);
- getElementsByClassName(“类名”);
- getElementsByName(‘元素name值’);
- getElementsByTagName(‘标签名称’);
元素内容操作
- innerText和innerHTML
  - innerText:只对文本处理
  - innerHTML:可以解析HTML标签
- 获取值
  - var strValue = document.getElementById(‘元素ID值’).innerText;
  - var strValue = document.getElementById(‘元素ID值’).innerHTML;
- 赋值（显示动态值）
  - document.getElementById(‘元素ID值’).innerText = 动态值;
  - document.getElementById(‘元素ID值’).innerHTML = 动态值;
表单内容操作
- 从元素获取值：var strValue = document.getElementById(‘表单元素id值’).value;
- 给元素赋值(显示动态值)： document.getElementById(‘表单元素id值’).value = 动态值;
- 注意：从表单元素中获取的值都是字符串类型，如需要数值计算需要进行数据类型转换
属性操作
- 获取属性 getAttribute(“属性名”); allp[index].getAttribute("id")
- 设置属性 setAttribute(“属性名”,“属性值”);allp[index].setAttribute("class", "pclass");
元素操作
- createElement() 创建元素节点
- appendChild() 新元素作为父元素的最后一个子元素进行添加
- removeChild() 删除子节点
- replaceChild() 替换子节点
- insertBefore() 在指定的子节点前面插入新的子节点
- createTextNode() 创建文本节点
操作css
- document.getElementById(‘元素的id’).style.color=“red”
DOM 事件
- onclick 鼠标点击某个对象
- onload 加载完成
- 。。。
正则表达式-RegExp 对象 )
- var reg1 = /¹$/; console.log(reg1.test(“a”));//false

ES6基本语法

变量

var=》let；const
- var声明的变量，没有局部作用域 let声明的变量，有局部作用域

解构赋值

let [x, y, z] = [12, 24, 36]
let { name, age } = { name: 'Peter', age: 28 }
console.log(x, y, z, name, age); // 12 24 36 "Peter" 28

声明对象简写：const person2 = {age, name} =》相当于const person2 = {age:age, name:age}

模板字符串

let aaa = "张三"
console.log(`我;的名字是${aaa}`); // 我的名字是张三

定义方法简写

var obj = {
    // 传统
    demo1: function () {
        console.log("demo")
    },
    // es6
    demo2() {
        console.log("demo")
    }
}
obj.demo1() // demo
obj.demo2() // demo

对象拓展运算符

拓展运算符…用于取出参数对象所有可遍历属性然后拷贝到当前对象。

var oldObj = {age:20,name:"张三"}
var newData= {name:"李四",sex:"nan"}
var newObj1 = {...oldObj}
var newObj2 = {...oldObj,name:"王五"}
var newObj3 = {...oldObj,...newData}
console.log(newObj1) // {age: 20, name: '张三'}
console.log(newObj2) // {age: 20, name: '王五'}
console.log(newObj3) // {age: 20, name: '李四', sex: 'nan'}

箭头函数

箭头函数多用于匿名函数的定义，类似Java8的Lambda表达式。基本语法是：参数 => 函数体

// 箭头函数
let fn = (name) => {
    // 函数体
    return `Hello ${name} !`;
};

// 等同于
let fn = function (name) {
    // 函数体
    return `Hello ${name} !`;
};

模块化

module.exports和exports是属于 CommonJS 模块规范，export和export default是属于ES6语法。

module.exports和exports导出模块，用require引入模块。

export和export default导出模块，import导入模块。

exports指向了module.exports就相当于在js文件开头添加了这样一段代码var exports = module.exports;;总之我们只要记住一点:module.exports指向的东西，就是我们要导出的东西

exports.a = 1;
exports.add = add
//导入使用方法
var req = require ('../app.js');
console.log(req.a)

export var name = 'wei';
// 默认导出的
export default {
	"age":20
}

import common,{name} from './aaa.js';
console.log(common); // {age: 20}
console.log(name); // wei

Jquery

jQuery是一个快速、简洁的JavaScript代码库。
https://www.jq22.com/chm/jquery/index.html

AJAX

AJAX = Asynchronous (异步) JavaScript and XML（异步的JavaScript和XML）；
- 同步 — 客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作；
- 异步 — 客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。
AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术；

使用ajax有很多方案，原生方法，jquery，axios，使用的一般都是封装起来

//  1请求地址 2参数 3，请求方式
const request = (url, params = {}, method = "get") => {
  return new Promise((resolve, reject) => {
    $.ajax({
      url,
      method,
      data: params,
      success: function (res) {
        resolve(res)
      },
      contentType: "application/json;charset=UTF-8",
      error: function (res) {
        // alert("ajax获取数据失败")
        console.log("ajax获取数据失败", res, url, params, method);
        // reject(res)
        resolve("路径【" + url + "】没有找到文件；" + "<a href=\"javascript:history.back(-1)\">返回上一页</a>\n")
      }
    })
  })
}
// 使用
var data = await request("demo.txt",{"name":"张三"},"post")

JSON

JSON
- JSON(JavaScript Object Notation, JS对象标记，JavaScript对象表示法) 是一种轻量级的数据交换格式。
- json数据是由键值对构成的
- 键用引号(单双都行)引起来，也可以不使用引号
- 值的取值类型：
  - 数字（整数或浮点数）{ "age":30 }
  - 字符串（在双引号中）{ "name":"Bill" }
  - 逻辑值（true 或 false）{ "sale":true }
  - 数组（在方括号中） {"persons":[{},{}]}
  - 对象（在花括号中） {"address":{"province"："山东"....}}JSON 中作为值的对象必须遵守与 JSON 对象相同的规则。
  - null { "sale":true }
数据由逗号分隔：多个键值对由逗号分隔

json和js直接的转化

将JSON转换为JS对象
var json = '{"name":"张三", "age":36}';//定义一个JSON
var obj = JSON.parse(json);//调用parse()将json解析为一个JS对象
console.log(obj);//输出：{name: "张三", age: 36}

将JS对象转换为JSON
var obj = {name:"张三", age:36};//定义一个JS对象
var json = JSON.stringify(obj);//调用stringify()将一个JS对象转换为JSON
console.log(json);//输出：{"name":"张三","age":36}

JSON和Java直接的转化

在日常实践中通常会对JSON数据和Java对象进行相互转换，转换需要用到JSON解析器，常见的解析器如下：

Json-lib（最古老、使用范围广，需要较多第三方包，性能最差。不推荐！）
Gson（Google）
Jackson（SpringMVC默认集成）
Fastjson（Alibaba）

本质上就是一些工具类。效率：FastJson>Jackson>Gson>Jsonlib

Vue

资料：
- Vue.js (vuejs.org)官网
- vue思维导图](https://www.processon.com/view/link/6426f2c6f967315e33eb353c)

vue概述
- Vue是一套用于构建用户界面的渐进式JavaScript框架
- 形成Vue渐进式框架的核心概念为：MVVM，组件化，响应式，和生命周期。
- Vue一切是数据为核心，使用数据来驱动视图刷新，我们不建议去操作dom
MVC与MVVM
- MVC是模型(model)－视图(view)－控制器(controller)的缩写，是**后端的分层开发概念；**MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。
- MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的mvc的View 层的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。因此主要是前端视图层的概念，主要关注与视图层分离，也就是说MVVM将前端视图层分成三部分Model、View、ViewModel
- vue快速入门&生命周期

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8"/>
      <title>vue快速入门</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
  <div id="container">
      从vm中获取的数据为：{{str}}
  </div>
  
  <script type="text/javascript">
      var vm = new Vue({
          el: "#container",
          data: {
              str: "从前有座山"
          }
      });
  </script>
  </body>
  </html>

常见指令
- v-clock => 解决屏幕闪烁
- v-text、v-html、v-pre= 》渲染文本内容
- v-bind_属性绑定
- v-on_事件绑定
- v-model_表单双向数据绑定
- v-for_遍历
- v-if_v-show_显示隐藏
- 自定义指令（全局、私有）
事件修饰符(.stop、.prevent、 .capture 、.self)
按键修饰符（@keyup.键盘码）
class与style绑定
生命周期（钩子函数）：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！其中整个流程分三个阶段，创建（1-5）、运行（6）、销毁（7-8）；步骤如下：
1. 创建一个vue实例对象
2. 初始化一些默认的声明周期函数和默认的事件 => beforeCreate()
  
  这时候，data和methods中的数据都没初始化
3. 初始化数据 => created（）
  
  data和methods中的数据都被初始化好了
4. 编译模板 => beforeMount()
  
  即<div id="app">{{msg}} </div> => 在内存中生成一个编译好的最终模板字符串 -> 把这个模板字符串渲染为内存中dom
  
  注意：只是在内存中渲染好了模板，并没有把模板挂载到页面上去，此时页面还是旧的, 简单的说结果就是在内存中渲染了一个 <div id="app">ok</div> 的dom元素,但是页面上还是 <div id="app">{{msg}} </div>
5. 将编译好的模板真实提换到页面中去 => mounted()
  
  即将内存中渲染好的dom元素即 < div id="app">ok< /div>已经提换了页面上的 < div id="app">{{msg}} < /div>
6. 当数据改变时即完成data(model层) ->view(视图层)的更新
  1. 先在内存中渲染一份最新的dom树 => beforeUpdate()
    
    页面上的数据还是旧的，但是data中的数据都是最新的，页面和最新的数据尚未保存同步
  2. 将最新的dom树重新渲染到真实的页面上去 => updated()
    
    页面上的数据和data中的数据都是最新的，页面和最新的数据保存同步
7. 销毁之前，实例上的data和所有methods，以及过滤器、指令。。。都处于可用状态，还未真正销毁 => beforeDestroy()
8. 销毁，实例上的data和所有methods，以及过滤器、指令。。。都处于不可用状态，还未真正销毁 => destroyed()
过滤器
计算属性和侦听器(监听器)
axios快速入门使用
组件
路由