- 博客(29)
- 收藏
- 关注
RSS订阅原创 window History的pushState和replaceState方法
window history的pushState和replaceState方法使用。
2023-05-10 17:57:46
4617
原创 React17事件机制
为什么要React实现自己的事件机制● 将事件代理到根节点，减少事件监听器创建 节省内存● 磨平浏览器的差异（阻止事件传播只需：event.stopPropagation）● 只要在对应节点编写onClick、onClickCapture 可完成节点冒泡、捕获阶段监听，统一写法
2023-03-22 15:46:43
296
原创 React 路由详解
一、SPA理解单页面Web应用 single page web application SPA整个应用只有一个完整的页面点击页面的链接不会刷新页面，只会做页面的局部更新数据都需要通过ajax请求获取，并在前端异步展现二、路由理解前端路由：- 浏览器端路由，value是component，用于展示页面内容- 注册路由:<Router path="/test" componnet={Test}>- 工作过程：当浏览器的path编程/test时，当前路由组件就会变成Test组件
2021-04-04 23:10:24
306
原创 react的生命周期函数（超详细）
一、es5版实例化取得默认属性 getDefaultProps 外部传入的props初始状态 getInitailState state状态即将挂载 componentWillMount描画VDOM render二、旧版本生命周期加载阶段取得默认属性，初始状态在constructor中完成（运行一次，可读数据，可同步修改state，异步修改state需要setState,setState在实例产生后才可以使用，可以访问到props）即将挂载 componentWillMoun
2021-04-03 10:34:40
10714
原创 React实现ToDoList
需要搭建react脚手架，放在src的index.js中import { Component } from 'react'import ReactDOM from 'react-dom'class Tick extends Component { state = { val: '', arr: [], title: 'tiDo', res: [], flage: false } render(
2021-04-01 22:30:35
129
原创 微信小程序的生命周期（钩子函数）
一、app生命周期App({ //当小程序初始化完成时，触发onlaunch（全局只触发一次） onLaunch: function () { console.log("小程序页面初始化完成") } //当小程序启动，或从后台进入前台显示，会触发OnShow onShow: function (options) { console.log("小程序第一次启动，或者后台进入前台：onshow，金图场景不同option中的scene值不同",options) } //当小程序从前
2021-03-23 11:42:34
1462
原创 Vue状态管理器state（Vuex）
一、什么是VuexVuex是一个专为Vue.js应用程序开发的状态管理模式采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化二、什么是状态管理模式状态自管理应用包含以下几个部分- state，驱动应用的数据源- view，以声明方式将 state 映射到视图- actions，响应在 view 上的用户输入导致的状态变化什么时候使用- 多个视图依赖同一个状态- 来自不同视图的行为需要变更同一个状态分模块，每个模块内需要包含- state：初
2021-03-20 19:00:04
2221
原创 vue - mixin、keep-alive组件
一、mixin (混入)混入提供了一种非常灵活的方式，来分发Vue组件的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混入”进行该组件本身的选项当混入对象内有选项和组件内的选项重复时- 函数类会被放在一个数组中，都会执行，混入对象内的函数先执行- 对象类会被合并，重复的数据，以组件内部的数据为准// mixins.jsexport default { created () { console.log('mixins - c
2021-03-20 16:15:52
179
原创 Vue的路由模式和跳转方式
一、路由跳转方式push跳转<router-link to="路由"></router-link> - 相当于调用了router.push()方法，这个值可以是一个字符串或者是描述目标位置的对象 - 表示添加一个路由，会产生历史记录，页面跳转之后可以通过后退按钮返回replace跳转<router-link to="路由" replace></router-link> - 相对于调用了router.replace()方法，这个值可以
2021-03-10 00:02:10
538
2
原创 使用Vue编写简单的todolist
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="text" @keydown.enter="change" ref="val" /><button @click="search" &g
2021-03-06 11:58:22
235
1
原创 VUE的基础使用和模版语法的认识
一、VUE的认识Vue是一套用于构建用户界面的渐进式框架，与其他框架不同的是，Vue被设计为可以自底向上渐层应用。Vue的核心库只关注视图层，不仅易上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。VUE官网二、Vue快速实现购物车案例 <body> <div id="app" style="border:solid 2px #aaa;padding: 20px;">
2021-03-06 10:53:07
113
原创 MongoDB数据库的使用
一、MongoDB的认识MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写，是一个开源数据库系统。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。在高负载的情况下，添加更多的节点，可以
2021-02-25 21:16:45
132
原创 JavaScript 面向对象编程 编写放大镜
OOA:放大镜，等比例移动选择元素绑定事件进入显示离开隐藏移动遮罩层跟随鼠标移动边界限定计算移动的距离占了总距离的比例根据比例，设置右侧图片的位置OOD:function Magnifier(){// 1. 选择元素// 2. 绑定事件}Magnifier.prototype.addEvent = function(){// 进入事件// 3. 显示// 离开事件// 4. 隐藏// 移动事件// 5. 跟随移动功能，计算比例，设置位置}Magni..
2021-02-17 17:00:23
136
原创 JavaScript this关键字
一、this概念this一般存在于函数中，表示所在函数的执行对象。相当于一个指针，但只有在函数执行时才被指向具体的对象，如果函数没有执行，this将没有意义。注：函数的默认执行(this的默认绑定)，如果没有明确隶属对象的函数，this执行window当函数被当作事件处理函数执行时，this指向事件源当函数被赋值给某个对象的方法时，通过这个对象的方法执行函数叫隐式绑定，this为当前对象二、改变this指向的方法call()功能：改变原函数的this指向，并立即执行这个新函数(新函数
2021-02-17 16:50:50
79
原创 JavaScript ES6新增语法
一、声明关键字Let：基础功能与var一样全局变量不会绑定到window对象没有提升不允许重复声明块级作用域（只要是花括号就是作用域）暂时性死区（声明之前不允许使用）const：功能与let一致const声明的是常量，声明时候立即赋值，之后不能再修改（const不允许修改地址，但可以改值）一般声明一次再不回改变的变量使用const二、解构赋值数组的解构赋值（从左到右顺序，依次解构，变量多了就为undefined） let arr = [3,4,5,6]; le
2021-02-13 15:10:14
1248
4
原创 express框架、ejs基础语法详解
Express简介Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。express框架核心：可以设置中间件来响应http请求定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML 页面。express的安装npm install express --saveexpress运行其他几个重要模块安装body-parser - node.js 中间件，用于处
2021-02-12 18:06:04
1127
原创 Node内置模块的使用及服务器的搭建
一、什么是Node.Jsnode.js是服务器语言，后台语言，使用的是ECMScript的语法特点：对于前端非常友好，学习成本低node的服务器比PHP的服务器更快，速度提升了86倍单线程异步执行，事件处理机制node.js的源码是由c语言构成，采取了ECMAScript的语法进行编程，运行在V8引擎中二、Node.Js的安装官网下载安装（入门推荐）： (https://nodejs.org/zh-cn/download/)安装完node的标志是在命令提示符中输入nod
2021-02-08 12:30:45
184
原创 JavaScript的常见设计模式
一、设计模式：是一套经过反复使用、多人知晓的、经过分类的、代码设计经验的总结。优点：可以让代码更容易被他人理解、保证代码的可靠性和可重用性。W3shchol的设计模式分类：构造器模式、模块化模式、暴露模块模式、单例模式、中介者模式、原型模式、命令模式、外观模式、工厂模式、Mixin模式、装饰模式、亨元(Flyweight)模式、MVC模式、MVP模式、MVVM模式、组合模式、适配器模式、外观模式、观察者模式、迭代器模式、惰性初始模式、代理模式、建造者模式。共23种二、常见的设计模式实例工厂模式
2021-01-26 23:12:41
94
原创 jQuery的选择器 DOM 事件的使用
jQuery的引入<script src=“http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>jQuery选择器//指定ID选择器$("#d")//全选选择器$("*")//类选择器$(".class")//标签选择器$("div")//群组选择器$("div,span,a")//后代选择器$("ul li")// 子选择器$("div>p")//next选择器$("div+p")
2021-01-23 18:33:32
98
原创 JavaScript—闭包和继承
一、闭包通过作用域的嵌套，触发计算机的垃圾回收机制（硬盘），将原来的局部变量进化成私有变量的环境叫闭包私有变量：JavaScript没用私有属性的概念;所有的属性都是公用的;私有变量的概念:在任何函数中定义的变量,都是私有变量,因为不能在函数外部访问这些变量;私有变量:包括函数的参数/局部变量和在函数内部定义的其他函数;特权方法:内部创建一个闭包,闭包可以访问私有变量;因此创建用于访问私有变量的公用方法，称作特权方法可以通过构造方法传参来访问私有变量这种方法的缺点是会为每一个实例创建一组
2021-01-20 21:14:59
82
原创 本地缓存技术cookie和localStorage和sessionStorage
一、通信协议数据交互时，双方要遵守的约定或规定IP协议：地址协议TCP协议：数据传输协议，面向连接的协议，可靠的协议UDP协议： 数据传输协议，面向数据包的协议HTTP协议：超文本传输协议，网页传输协议，web协议，无状态协议cookie用来记录每次HTTP的连接产生的信息或数据，并在下次HTTP连接时一起发给服务器cookie的特点：在浏览器缓存中只能存文本（字符）大小限制：4k条数：50条时间限制：默认时间是会话结束，可设置指定时间不运行跨越：同源策略、浏览器、路径一般情
2021-01-18 23:26:38
130
原创 js - 前后端交互的基础掌握,php如何连接操作数据库
前后端的接收和发送方式：前端：发：表单、Ajax收：浏览器默认、Ajax后端：发：echo、print、die()收$_GET[]、$_POST[]、$_REQUEST[]服务器服务器：伺服器，为了随时响应或处理其他设备的请求或存储数据。服务器的分类：服务器：高配置、高性能，专用的网络，专人维护，7*2 小时不宕机云服务器：共享服务器本地服务器：在个人电脑通过安装软件，开放指定端口，实现跨设备进行数据传输，简单的服务器本地服务器的创建安装服务器工具:PHP：服务器语
2021-01-17 11:54:42
352
原创 前后端交互—跨越和CORS、jsonp的使用和封装
跨域：触发跨越：当没有遵守同源策略时，Ajax请求会报错：请求的资源上不存在访问控制允许源没有遵守同源策略时，浏览器不允许ajax请求没有明确允许访问的跨越资源请求同源策略：同协议、同域名、同端口解决跨越问题的方案：不使用Ajax（使用jsonp）后端服务器设置明确允许（CORS跨越）使用服务器代理jsonpjsonp的原理：利用script标签不会触发浏览器的同源策略，及script标签将自身引用的数据作为js代码执行的原理，配合函数的传参（执行时的参数发送给定义时的参数）实现
2021-01-16 17:00:10
152
原创 前后端交互——Ajax
Ajax是前后端交互的重要手段，也是前后端交互的重要桥梁。Ajax的组成：ajax不是单一的技术，是一组技术；异步的js，数据请求的异步（以事件的形式体现出异步）XMLGHTTPRequest对象，连接前后端的载体，承载了前后端交互的数据和其他信息其他js负责解析和处理使用数据Ajax的特点：不刷新页面加载数据不会产生历史记录，破坏了浏览器的前进和后退功能提升了页面的初始打开速度，用户体验极佳搜索引擎无法检索由js引起的数据变化，导致破坏了SEO提升了web页面的性能减轻了服务
2021-01-16 16:27:10
864
原创 JavaScript js数组和数组方法的使用
一、什么是数组把一组数据存放在单个变量下的方式，数据的有序集合。二、数组的创建方式字面量创建：var arr = [];构造函数创建var arr = new Array();当使用构造函数创建数组时。如果只有一个数据，会被表示创建数组的长度三、数组的操作1. 索引+长度操作（数组的原生操作）增：直接给数组进行赋值操作arr[index]='Hi'删：直接对数组的长度进行修改arr.length=1;改：直接对数组索引进行赋值操作查：利用for循环对数
2021-01-03 11:51:23
163
原创 JavaScript js函数的概念以及语法结构
一、函数的概念：函数就是把一个或者多个功能的代码段通过函数的方法封装起来，对外提供一个简单的函数接口。可以理解为榨汁机的原理二、函数的参数类型：实参：实际上的参数，可以用来传递数据给形参形参：形似上的参数，用来接收实参转递的参数三、函数的语法结构和创建方法创建方法：声明函数调用函数语法结构：function getSum(形参){ //功能代码段}getSum(实参)；函数不能自动执行；需要调用才能执行。函数的执行：直接执行：函数名()行为调用：事件源.on
2020-12-18 19:50:00
836
2
原创 JavaScript的循环结构
JavaScript 的循环结构循环的目的：在实际问题中，有许多具有规律性的重复操作，因此在程序中就需要重复执行某些语句来完成。一、循环的类型1. while循环：语法结构：var i = 0; //变量赋值（初始值）while (i<//终止条件){ console.log(i); //循环体 i++; //改变计数器的变量值}2. do…while循环：语法结构：var i = 0; //变量赋值（初始值）do{ console.log(i); //循环体 i
2020-12-17 12:03:10
148
原创 JavaScript 学习笔记 — (数据类型转换)
JavaScript的数据类型转换一、为什么进zhan行数据类型转换使用表单、prompt获取过来的数据默认为字符型，此时还不能直接简单的进行算术运算，从而需要转变数据类型。可以理解把一种数据类型转换为另一种数据类型二、数据转换的类型1.隐式类型转换不主动转换，在运算过程中自动转换转换时机：在运算的过程中进行转换，不会影响原数据。在某些运算符的两边进行转换2.强制类型转换主动进行转换：如：parseInt() ：（非严格转换：将String转为整数数值，小数数值只取整数部分）
2020-12-15 20:08:53
132
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人