07 2021 档案
摘要：所谓的设计模式，就是为了解决特定的问题，进而定义的程序的一种书写方式 目的：就是为了优化代码，减少冗余 一、工厂模式 将重复冗余的定义对象属性和方法的程序封装在一个函数内，调用函数就可以完成对对象的定义 定义一个函数，生成一个对象，添加上方法、属性、再返回这个对象 1 function create
阅读全文
摘要：继承的概念：让一个对象可以访问到另一个对象中的属性和方法 一、构造函数继承 构造函数：本质还是一个函数，是一个专门生成对象的函数，生成的对象有属性属性值，还有函数方法 创建新的构造函数时，有一些属性或者方法，与之前的构造函数相同 为了节约代码，可以从之前的构造函数中，继承属性和方法 对不同的属性和方
阅读全文
摘要：闭包就是能够读取其他函数内部变量的函数 一、闭包简介 闭包的作用：可以读取函数内部的变量 函数的封装 在内存中，定义一个存储空间，赋值一个内存地址，准备存储函数 将函数以类似字符串的形式存储在存储空间中 将存储空间的内存地址，赋值给变量或者函数名称存储 1 function fun2() { 2 c
阅读全文
摘要：cookie是浏览器用来存储前端数据的一种存储机制 本质上是在浏览器内创建一个文档文件，在这个文件中写入数据、存储数据、读取数据 存储在 cookie 文件中的数据，一般是作为整个项目的公共数据使用 一、cookie的时效 cookie中存储的数据，都是带有时效性的，如果是超过了时效性，cookie
阅读全文
摘要：一、http协议 网络传输协议 https http ftp 端口 一般完整的网络地址应该由这三部分组成：协议+地址+端口 http协议是网络协议的一种 与服务器建立连接：需要三次握手 客户端 >服务器：发送请求，第一次握手 客户端：确认客户端自己可以正常发送请求 服务器：确认客户端可以正常发送请求
阅读全文
摘要：一、面向对象概念 关注对象的形式进行开发，面对JavaScript中对象数据类型 面向对象，是一种编程思想、语法、方法、代码编写的方式 面向对象 关注注重对象的操作 可以设定属性/键名 可以设定属性值/键值 可以设定函数 可以将需要执行的程序内容，都定义给对象 调用对象的函数，来执行程序 有Java
阅读全文
摘要：节点：html文件中，所有的内容都是节点 标签对象：也是节点的一种，叫标签节点 DOM操作，实际上就是在操作页面中的节点 1 // 通过标签语法获取节点 2 const oDiv = document.querySelector('div'); 3 const oSpan = document.qu
阅读全文
摘要：一、ES6变量 1、let 变量名称不能重复 1 // var语法中下面写法正确，如果使用let定义变量会报错 2 var int = 100; 3 var int = 200; 不能预解释/预解析 预解释只会解释var和function两个关键词声明的变量 不会预解释let、const声明的变量
阅读全文
摘要：一、事件的传播和阻止 事件的传播：点击后代标签时，会触发所有父级标签相同类型的事件 执行顺序：从当前标签向父级元素执行，也就是执行当前标签的事件，再逐一执行父级标签的事件 捕获顺序：当前标签触发事件，会寻找父级标签上相同的事件类型一起执行 冒泡机制：IE浏览器，从子级开始，向父级获取具有相同的事件类
阅读全文
摘要：一、BOM操作 Browser Object Model 浏览器对象模型 window 对象中存储所有对浏览器操作的方法 window 顶级对象中存储的方法可以不写window，也能正常调用 1 window.alert('我是弹窗功能1111'); 2 alert('我是弹窗功能2222'); 1
阅读全文
摘要：一、对象的定义 object / obj 存储数据方式：属性: 属性值 定义方式： 1、字面量：通过{}来定义一个空对象 1 var obj = {}; 2、构造函数 1 var obj = new Object(); 与数组的区别： 数组只能使用索引下标，不能使用字符串下标 对象可以使用字符串作为
阅读全文
摘要：一、基本概念 字符串又称作包装数据类型，当我们对字符串进行操作时，字符串会把自己包装成伪数组的形式 所谓的伪数组，就是像数组一样，可以使用[]语法通过索引下标，来进行操作 并且具有length属性 但是伪数组的操作方法和数组不同，例如 push()、pop()、join()、forEach()等等，
阅读全文
摘要：一、基本概念 基本语法： 1、字面量方法： 1 var 变量 = [数据1, 数据2, 数据3, ...]; 2、构造函数定义： 1 var 变量 = new Array(); 数组中存储的数据类型，可以是JavaScript支持的任意数据类型 如果存储的是一个变量，会解析变量中的数据，存储在数组中
阅读全文
摘要：函数：函数就是实现功能的代码模块 作用：方便我们反复调用，执行程序，实现效果 注意：函数定义时，只是在定义封装程序，并没有执行程序，只有调用函数才会执行其中封装的程序 一、函数基本语法 1、声明式 通过关键词function来定义声明函数 1 // 语法结构: 2 function 函数名称 (){
阅读全文
摘要：计算机语言中,有三大流程控制顺序 顺序控制语句：是计算机程序最基本执行顺序，从上至下 从左至右 分支控制语句：if语句 switch语句，根据不同的条件，判断不同的结果，执行不同的语句 循环控制语句：for循环语句、while循环语句、do...while循环语句 、forEach循环语句，根据循环
阅读全文
摘要：算术运算符：+ - * / % ** 比较运算符：> < >= <= == != !== 字符串拼接运算符：+ 递增/递减运算符：++ -- 赋值运算符：= += -= *= /= %= 逻辑运算符：&& || ! 三元运算符：条件 ? 表达式1 : 表达式2 一、算数运算符 +：加法，如果有字符串
阅读全文
摘要：基本数据类型 Boolean（布尔类型）：true、false Number（数值类型）：Number String（字符串类型）：String undefined null 复杂数据类型 Array（数组） Object（对象） Function（函数） 一、布尔类型 布尔类型只有两个数值 tru
阅读全文
摘要：一、变量的概念 官方定义： 存储在内存之中的，带有名称的，数据信息 其中存储的数据信息，在程序的执行过程中，是可以改变的 通俗理解： 变量就是一个容器 这个容器必须有一个名称 1、在计算机中，数据是不能独立存在的，必须要有一个存储数据的容器 2、在数据的传递过程中，实际上传递的是这个容器（可理解为水
阅读全文
摘要：一、行内式 与CSS的行内式基本相同 在标签中，通过script标签来定义JavaScript代码 但是在实际操作时，一般通过定义事件来定义JavaScript程序代码 行内式在项目中一般不会用到，作为了解 1 <div onclick="window.alert('我是点击弹出的内容')">你点我
阅读全文
摘要：一、JavaScript语言特点 HTML：超文本，标记语言 JavaScript：轻量级、弱类型、脚本语言 脚本语言和标记语言的主要区别 标记语言：可以通过浏览器直接执行 脚本语言：必须要通过浏览器内核的编译，才能正常运行 轻量级，意味着语言难度较低，简单 弱类型，意味着语法规范松散，易学 二、J
阅读全文
摘要：一、StateHook 在函数组件中使用state，React.useState 1 import React from 'react' 2 3 function Demo(){ 4 const [count, setCount] = React.useState(0) 5 6 function a
阅读全文
摘要：一、Ant-Design 官网：Ant-Design、Ant-Design-Mobile 安装（PC端是antd） 1 npm i -S antd-mobile 使用：参考官网 安装customize-cra、react-app-rewired开发依赖 1 npm i -D customize-cr
阅读全文
摘要：一、路由的使用 React Router官网：https://reactrouter.com/ 安装 1 npm i -S react-router-dom 1、相关组件 Router组件：包裹整个应用（单个具体的组件/根组件），一个React应用只需要使用一次 Router类型： HashRout
阅读全文
摘要：一、Redux简介 网址：https://redux.js.org/introduction/getting-started 1、如果UI层非常简单，没有很多互动，Redux就是不必要的，用了反而增加复杂性 2、如果项目的迭代变得越来越复杂，组件的数量和层级也变得越来越多、越来越深，此时组件间的数据
阅读全文
摘要：Higher - Order Components：其实就是一个函数，传给它一个组件，它返回一个新的组件 形如： 1 const NewComponent = HOC(YourComponent) 高阶组件是强化组件的一种方式，一般是具备复用的，如果只是某个组件需要强化，则没有必要写成高阶组件的形式
阅读全文
摘要：一、axios基本属性和设置 axios文档 安装 1 npm i -S axios axios支持的请求方式 get post put：修改数据 delete：删除数据 axios响应结果的属性 config：配置信息 data：实际响应的数据 headers：响应头信息 status：响应状态码
阅读全文
摘要：一、使用步骤 安装脚手架 1 npm i -g create-react-app 创建项目 1 create-react-app 项目名称 1 #也可以不用安装create-react-app创建项目 2 npx create-react-app my-app 清理创建好的项目中不需要的文件及文件夹
阅读全文
摘要：一、说明 下面代码运行后会报错，因为在React中并不存在类似于Vue的双向数据绑定操作 1 import React, { Component } from "react"; 2 3 class App extends Component { 4 state = { 5 msg: "hello w
阅读全文
摘要：函数组件无生命周期一说 生命周期函数指在某一时刻组件会自动调用并执行的函数 React每个组件都包含生命周期方法，我们可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法 完整的生命周期图 常见生命周期图 一、新旧生命周期函数 1、旧生命周期函数 初始化阶段：由ReactDOM.render(
阅读全文
摘要：组件通信除了props（父传子）以外，还有其他方式 一、父传子（ref） 组件内的标签可以定义ref属性来标识自己 不要过度使用ref 1、字符串形式的ref 不推荐使用，已经过时，存在一些效率问题 1 import React, { Component } from "react"; 2 3 cl
阅读全文
摘要：一、children属性 children属性表示组件标签的子节点 当组件标签有子节点时，接受传值的子组件中的props里就会有该属性 与普通的props一样，其值可以是任意类型 注意 如果子组件标签里只存在一个子节点，则children属性值为一个字符串 如果子组件标签里存在多个子节点，那么chi
阅读全文
摘要：1、状态就是组件描述某种显示情况的数据，由组件自己设置和更改 2、使用状态的目的就是为了在不同的状态下使组件的显示不同 3、state状态只在class类组件才有，函数组件没有此功能 一、基本使用 状态（state）即数据，是组件自己内部的私有数据，只能在组件内部使用 state的值是对象，表示一个
阅读全文
摘要：一、事件绑定 React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同，React元素的事件绑定采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写，如onclick, React里的事件是驼峰，如onClick，React的事件并不是原生事件，而是
阅读全文
摘要：一、组件的概念 1、组件允许我们将UI拆分为独立可复用的代码片段，并对每个片段进行独立构思。 2、从概念上类似于JavaScript函数，它接受任意的入参（props），并返回用于描述页面展示内容的React元素（JSX） 二、组件的创建方式 1、函数组件 函数组件的特点 函数组件（无状态组件）：使
阅读全文
摘要：一、JSX概述 由于通过React.createElement()方法创建的React元素代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。 React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XM
阅读全文
摘要：一、介绍 React起源于Facebook的内部项目，它是一个用于构建用户界面的javascript库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。 React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之
阅读全文
摘要：vue常用特性 一、computed 计算属性：计算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是当多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。 计算属性定义在Vue对象中，通过关键词computed属性对象中定义一个个函
阅读全文
摘要：vue常用指令 官网详细api 一、v-cloak 作用：解决浏览器在加载页面时因存在时间差而存在的闪动问题，隐藏未编译的nustache标签直到实例准备完毕 1 <div id="app"> 2 <div>{{message}}</div> 3 <div v-cloak>{{message}}</
阅读全文
摘要：vue官网 一、vue基础入门 一、声明式渲染 Vue.js的核心是一个允许采用简洁的模板语法来声明数据渲染进DOM系统，如下： 1 <div id="app"> 2 <!-- 渲染 --> 3 {{ message }} 4 </div> 5 6 <script type='text/javasc
阅读全文
