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”];
      • 常用方法：concat数组合并、reverse数组逆序、push()数组末尾添加新元素、pop()删除数组最后的元素
      • js数组和java数组的区别
      • javascript是弱类型语言，js数组可以自动扩容，不会出现数组越界的情况， 所以js数组中可以存放任意数据类型；
      • java数组是强类型一旦定义长度，不可以更改，java数组中的数据类型必须一致

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

    • 常见弹窗

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

  • BOM

    • BOM： 浏览器对象模型（Browser Object Model，简称 BOM），它提供了很多对象，用于访问浏览器的功能

    • BOM体系图

      • img

    • 常用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体系图
      • img

    • 获取元素

      • 通过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 = /1$/; 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}

  • 模板字符串 ：这是一段文字 ${变量名}文字

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

  • 定义方法简写

    • 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} !`;
};

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快速入门使用

  • 组件

  • 路由

  1. 0-9 ↩︎

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/587101.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

记一次生产事故的排查和解决

记一次生产事故的排查和解决

一. 事故概述 春节期间, 生产系统多次出现假死不可用现象, 导致绝大部分业务无法进行. 主要表现现象为接口无法访问. 背景为900W客户表和近实时ES, 以及春节期间疫情导致的普通卖菜场景近似秒杀等. 二. 排查过程 优先排查了info, error, catalina日志, 发现以下异常: 主要的…
阅读更多...
边循环边删除List中的数据

边循环边删除List中的数据

List边循环&#xff0c;边删除&#xff1b;这种一听感觉就像是会出问题一样&#xff0c;其实只要是删除特定数据&#xff0c;就不会出问题&#xff0c;你如果直接循环删除所有数据&#xff0c;那可能就会出问题了&#xff0c;比如&#xff1a; public static void main(String[…
阅读更多...
公考学习平台|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)

公考学习平台|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)

公考学习平台目录 目录 基于SprinBootvue的公考学习平台 一、前言 二、系统设计 三、系统功能设计 5.1用户信息管理 5.2 视频信息管理 5.3公告信息管理 5.1论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&…
阅读更多...
React的useEffect

React的useEffect

概念&#xff1a;useEffect是一个React Hook函数&#xff0c;组件渲染之后执行的函数 参数1是一个函数&#xff0c;可以把它叫做副作用函数&#xff0c;在函数内部可以放置要执行的操作参数2是一个数组&#xff08;可选参&#xff09;&#xff0c;在数组里放置依赖项&#x…
阅读更多...
Liunx发布tomcat项目

Liunx发布tomcat项目

Liunx在Tomcat发布JavaWeb项目 1.问题2.下载JDK3.下载Tomcat4.Tomcat本地JavaWeb项目打war包、解压、发布5.重启Tomcat,查看项目 1.问题 1.JDK 与 Tomcat 版本需匹配&#xff0c;否则页面不能正确显示 报错相关&#xff1a;Caused by: java.lang.ClassNotFoundException: java…
阅读更多...
十一、大模型-Semantic Kernel与 LangChain 的对比

十一、大模型-Semantic Kernel与 LangChain 的对比

Semantic Kernel 与 LangChain 的对比 Semantic Kernel 和 LangChain 都是用于开发基于大型语言模型&#xff08;LLM&#xff09;的应用程序的框架&#xff0c;但它们各有特点和优势。 基本概念和目标 Semantic Kernel 是一个由微软开发的轻量级 SDK&#xff0c;旨在帮助开发…
阅读更多...
每日OJ题_DFS爆搜深搜回溯剪枝⑤_力扣37. 解数独

每日OJ题_DFS爆搜深搜回溯剪枝⑤_力扣37. 解数独

目录 力扣37. 解数独 解析代码 力扣37. 解数独 37. 解数独 难度 困难 编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的…
阅读更多...
C++--const成员及const取地址操作符重载

C++--const成员及const取地址操作符重载

前言 今天我们来了解一下const成员的基本使用,以及const取地址重载的运用 来开始今天的学习 const成员 1.基本定义, 将const修饰的“成员函数”称之为const成员函数&#xff0c;const修饰类成员函数&#xff0c;实际修饰该成员函数 隐含的*this指针&#xff0c;表明在该成员函…
阅读更多...
Android4.4真机移植过程笔记（二）

Android4.4真机移植过程笔记（二）

5、盘符挂载 先定义overlay机制路径&#xff0c;后面storage_list.xml要用到&#xff1a; 在路径&#xff1a; rk3188_android4.4.1/device/rockchip/OK1000/overlay/frameworks/base/core/res/res/xml/定义好&#xff0c;注意名字要和emmc的代码片段&#xff08;往下面看&am…
阅读更多...
python学习笔记----安装pycharm（1）

python学习笔记----安装pycharm（1）

一、安装pycharm 1. 下载并安装pycharm https://www.jetbrains.com/pycharm/download2.汉化pycharm 安装插件并重启IDE完成汉化 二、 第一个python程序
阅读更多...
Flask教程1：flask框架基础入门，路由、模板、装饰器

Flask教程1：flask框架基础入门，路由、模板、装饰器

文章目录 一、 简介二、 概要 一、 简介 Flask是一个非常小的Python Web框架&#xff0c;被称为微型框架&#xff1b;只提供了一个稳健的核心&#xff0c;其他功能全部是通过扩展实现的&#xff1b;意思就是我们可以根据项目的需要量身定制&#xff0c;也意味着我们需要学习各…
阅读更多...
分享天某云对象存储开发的体验

分享天某云对象存储开发的体验

最近体验了天某云对象存储的功能&#xff0c;作为一名资深开发者&#xff0c;开发体验差强人意&#xff0c;与阿里云存在一定的差距。 首先在开发文档上居然没有基于nodejs的代码示例&#xff0c;只有java,c#,go等的代码示例&#xff0c;虽然有javascript的&#xff0c;但那也只…
阅读更多...
Outlook大附件插件 有效解决附件大小限制问题

Outlook大附件插件 有效解决附件大小限制问题

很多企业都是使用Outlook来进行邮件的收发&#xff0c;可是由于附件大小有限&#xff0c;导致很多大文件发不出去&#xff0c;就会产生Outlook大附件插件这种业务需求。 邮件系统在发送大文件时面临的限制问题主要如下&#xff1a; 1、附件大小限制&#xff1a;大多数邮件服务…
阅读更多...
net lambda 、 匿名函数 以及集合（实现IEnumerable的 如数组 、list等）

net lambda 、 匿名函数 以及集合（实现IEnumerable的 如数组 、list等）

匿名函数&#xff1a;》》》 Action a1 delegate(int i) { Console.WriteLine(i); }; Lambda:>>> Aciont a1 (int i) > { Console.WriteLine(i); }; 可以简写 &#xff08;编译器会自动根据委托类型 推断&#xff09; Action a1 &#xff08;i&#xff09;> {…
阅读更多...
前端vite+rollup前端监控初始化——封装基础fmp消耗时间的npm包并且发布npm beta版本

前端vite+rollup前端监控初始化——封装基础fmp消耗时间的npm包并且发布npm beta版本

文章目录 ⭐前言&#x1f496;vue3系列文章 ⭐初始化npm项目&#x1f496;type为module&#x1f496;rollup.config.js ⭐封装fmp耗时计算的class&#x1f496;npm build打包class对象 ⭐发布npm的beta版本&#x1f496; npm发布beta版本 ⭐安装web-performance-tool的beta版本…
阅读更多...
springcloud自定义全局异常

springcloud自定义全局异常

自行创建一个实体类 /*** 全局异常处理类**/ ControllerAdvice public class GlobalExceptionHandler {ExceptionHandler(Exception.class) ResponseBody public Result error(Exception e){e.printStackTrace(); return Result.fail();}/*** 自定义异常处理方法* param e * re…
阅读更多...
GPU 架构与 CUDA 关系 并行计算平台和编程模型 CUDA 线程层次结构 GPU 的算力是如何计算的 算力峰值

GPU 架构与 CUDA 关系 并行计算平台和编程模型 CUDA 线程层次结构 GPU 的算力是如何计算的 算力峰值

GPU 架构与 CUDA 关系 本文主要包含 NVIDIA GPU 硬件的基础概念、CUDA（Compute Unified Device Architecture）并行计算平台和编程模型，详细讲解 CUDA 线程层次结构，最后将讲解 GPU 的算力是如何计算的，这将有助于计算大模型的算力峰值和算力利用率。 GPU 硬件基础概念GP…
阅读更多...
GB32960解析工具

GB32960解析工具

几年前搞了一个用Qt开发的国标32960报文解析工具。分享给大家&#xff0c;只用1积分便可以下载。 国标32960新能源车协议解析工具资源-CSDN文库
阅读更多...
数据结构—C语言实现双向链表

数据结构—C语言实现双向链表

目录 1.双向带头循环链表 2.自定义头文件&#xff1a; 3.List.cpp 文件 3.1 newnode()函数讲解 3.2 init() 函数 初始化 3.3 pushback()函数 尾插 3.4 pushfront()函数 头插 3.5 popback() 尾删 3.6 popfront() 函数 头删 3.7 insert()函数 在pos之后插入 3.8 popbac…
阅读更多...
【JS篇之】异常

【JS篇之】异常

前言&#xff1a;在代码编写过程中&#xff0c;最常遇到的就是程序异常。其实异常并非坏事&#xff0c;它可以让开发人员及时发现、定位到错误&#xff0c;提醒我们做正确的事情&#xff0c;甚至在某些时候&#xff0c;我们还会手动抛出异常。 1.异常的分类 在JS中&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023