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

前端基础

经典三件套： 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快速入门使用

• 组件

• 路由