- 博客(53)
- 收藏
- 关注
RSS订阅原创 前端知识1-4：性能优化进阶
开始解析渲染DOM树的时间 => readyState变成loading => readystatechange。表示从上一个文档卸载结束时 => 如果没有上一个文档，这个值和fetchStart相等。b. 整体化内容插入 => 影响整体布局 => 重排 => 重绘。第一个http重定向发生和结束的时间。完成解析 => dom树解析完成时间。浏览器准备好使用请求获取文档的时间。HTTP开始建立连接的时间。TCP开始建立连接的时间。HTTPS连接开始的时间。a. 减少JS的执行时间。加载网页内资源的时间。
2024-05-29 18:04:08
966
原创 前端知识1-3：模块化+浏览器详解
location.assign(‘url’) 跳转到指定path，并替换pathname => path。网页内容size => offsetHeight = clientHeight + 滚动条 + 边框。scrollLeft / scrollTop - 距离常规左/上滚动的距离。offsetLeft / offsetTop - 距离常规左/上距离。history.state => 存储获取当前页面状态。经典框架：require.js。表示显示区域 —— 屏幕。引入——import。
2024-05-23 19:30:33
962
原创 react状态管理
通过Provider ，可以使用Consumer 调用传递的store数据，并且通过connect可以直接调用store的方法和数据。connect原理其实通过配置高阶组件，返回一个新的组件，将store和组件结合起来。模拟定义redux的createStore 和 combineReducer 方法（redux.js）connect两个参数：mapStateToProps, mapDispatchToProps。有修改这个数据的明确方法，并且，能够让其他的方法感知到。组件之外，可以在全局共享状态/数据。
2024-05-23 17:28:35
309
原创 react高级用法
ref 一般可以标识在 hostComponent 宿主元素(首字母小写的，最终会变成基础HTML元素的)；ref 本身是不能跨层级捕获和传递的，forwardRef 可以接收父元素的ref信息，转发下去。类似 Vue 中的 inject 和 provider。对应过来就是 consumer 和 provider。我们可以通过forwardRef 进行转发。useMemo 的实现。
2024-05-23 10:38:17
388
原创 vuejs路由和组件系统
滚动行为记录：这个功能只在支持 history.pushState 的浏览器中可用。路由匹配规则：静态路由、动态路由、正则匹配。路由元信息：路由表中配置meta字段。
2024-05-21 13:17:07
755
1
原创 vue.js状态管理和服务端渲染
（源码仓库：https://github.com/vuejs/pinia/blob/v2/packages/pinia/src/createPinia.ts）provide/inject：通过provide/inject实现父组件和后代组件的跨层级通信。组件内管理状态：通过data，computed等属性管理组件内部状态。父子组件通信：通过props和自定义事件实现父子组件状态的通信和传递。事件总线eventBus：通过new Vue()实例，实现跨组件通信。状态管理库：Vuex/Pinia。
2024-05-20 17:02:28
518
原创 vue核心模块源码解析
编译原理：从模板到渲染函数===> 源代码->词法分析->语义分析->AST->transform->目标代码。模板的本质就是对HTML的增强 ：增加了一些指令 v-if 、 {{}}3、vue代码一致性比较弱（实现同一个功能方法路径太多）渲染器初次渲染 createApp().mount()2、表现能力不同，vue语法糖比react多很多。渲染函数本质就是js，注入了一些context。二次更新：patch函数—dom diff。4、性能，compiler优化。compiler编译时->
2024-05-20 11:30:24
670
原创 vue基础+高级用法
在vue2.x中，v-if和v-for同时使用，v-for优先级更高。v-model - 双向绑定 => :value + @input。执行顺序：extends > mixin > 引入组件。v-html -渲染html，慎用，防止攻击脚本的注入。从预定的配置中拓展出来一个独立的配置项进行合并。在vue3中，v-if始终高于v-for。v-text - 只渲染字符串。外部做结构描述勾勒，内部做传参。v-once - 只渲染一次。
2024-05-14 15:40:55
881
原创 2021-05-28Vue的学习思维导图
1.vue的基本代码结构const vm=new Vue({ el:"#app",//把实例与视图层进行关联 data：{//this->window},//把实例与数据层进行关联 methods:{//this->vm}, props:{ //可以是数组或者对象，用于接收父组件数据 //对象可以配置高级选项，如类型检测、自定义验证和设置默认值 }, watch:{//this->wm}, computed:{}, render(){ //声明周期钩子函数
2021-05-28 12:42:09
221
原创 W1_Express
Express：第三方模块安装：npm install express使用：const express=require('express')//创建一个http服务器const app=express()//静态资源服务器app.use(express.static('./'))const middleware=function(req,res,next){ //req:request对象 //res：response对象 //next：是一个函数，用于执行下一个中间件 cons
2021-04-28 19:41:23
93
原创 W1_NodeJS
NodeJS:ECMAScript在nodejs中没有DOM和BOMNodeJS多版本共存工具：nvmnvm version 查看版本nvm list 查看安装列表nvm install 安装node版本nvm uninstall 写在已安装的node版本nvm use 切换（使用）node版本模块化：commonJS规范引入：require（）查找策略：导出：module.exports(推荐)exports模块化开发规范CommonJS nod
2021-04-27 14:22:06
213
原创 day33-Sass
SassSASS是一个成熟、稳定、强大的CSS扩展语言解析器，提供变量、嵌套、混合、继承等特性，大大节省了设计者的时间，使得CSS开发变得简单和可维护语法注释：sass有两种注释方式（与js相同）多行注释 /* */单行注释 / /body{ color:#333; //这种注释内容不会出现在生成的css文件中 padding:0; /*这种注释内容会出现在生成的css文件中*/ }变量sass 的变量必须是$开头，后面紧跟着变量名，而变量值和变量名之间
2021-04-08 21:21:09
87
原创 day32-gulp
gulpgulp是当下最流行的自动化构建工具，可以自动化完成我们开发过程中大量的重复工作gulp能做什么编译:es6->es5sass->cssless->csscoffeescript->js合并：css，js压缩：css，js，html优化：图片优化准备工作安装NodeJS环境了解npm命令的使用了解NodeJS模块化了解gulp安装与运行全局安装gulp（一台电脑只需安装一次，gulp-v查询安装是否成功） np
2021-04-08 17:23:53
102
原创 day31-继承与闭包
01.原型对象原型链：当前对象到Object的原型对象之间的链条原型：原型对象（prototype，__proto__）属性访问规则从当前对象中查找，找不到则返回，否则进入第2步在原型对象中查找，找到则返回，否则进入第3步在原型对象的原型查找，找到则返回，否则继续往原型中查找，依此类推直到 Object 的原型对象中查找（终点），找到则返回，否则（属性：得到的是undefined，方法：xxx is not a function）内置原型对象let use
2021-04-07 19:33:59
97
原创 day29-jQuery2
01.补充css方法css（）方法的参数还可以是数组，数组中写css的属性返回值：一个对象，把你要获取的元素样式 以对象的形式返回第二个参数还可以为函数：函数的返回值 就是给这个属性设置的值函数中有两个参数 index valueindex：表示元素在jQuery集合中的索引value：这个元素对应的属性的默认值 // console.log(box.css(['width','color'])); // box.css('wi
2021-04-06 20:34:30
68
原创 day28-jQuery1
01 . jQuery的认识-jQuery是一个其前端的方法库-jQuery的三个优点：强大的选择器机制优质的隐式迭代无所不能的链式调用-jQuery向全局暴露两个对象来通过我们调用它的方法jquery$ /* 使用jquery的时候 需要把jquery的插件引入 jquery向全局暴露两个关键字 jquery $ 当使用jquery方法的时候 可以用这两个
2021-04-06 17:37:36
57
原创 day26-购物车
本地存储local storage也是浏览器提供的一个存储空间和 cookie 的区别cookie 前后台来回跑，localStorage 只存储再浏览器不会来回跑cookie 前后台都可以设置， localStorage 只能由前台操作cookie 存储的是字符串，localStorage 只能存储 json 格式的字符串或者普通字符串cookie 存储 4KB 左右，localStorage 20M 左右cookie 自己封装 API 去操作，localStorage 有自己的
2021-04-06 16:08:36
101
1
原创 day25-promise
回调地狱在异步的程序中想要拿到 异步程序执行的结果，必须使用回调函数当异步操作越来越多，那么回调函数嵌套就会越来越深当回调函数嵌套过多的这个请就叫做回调地狱代码的执行顺序会非常不直观，不利于维护。案例：有三个接口 data1.php data2.php data3.phpdata2.php 需要 data1.php 中返回的数据当参数data3.php 需要 data2.php 中返回的数据当参数 <script> // data
2021-04-06 12:38:05
63
原创 day24-Ajax的封装
Ajax的封装/* 参数： 【1】请求的地址 【2】请求方式（get||post） 【3】回调函数（用于获取异步代码执行的结果），成功，失败 【4】请求携带的参数 【5】设置同步或者异步 当函数的参数过多的时候，应该把参数写出一个对象传递 { url：“请求的地址”， 请求的地址是必须的 type："get" ,选填，不填的时候默认为get请求 data：{username:"aaa",password:"123456"},
2021-04-04 18:21:52
58
原创 day23-Ajax
Ajax介绍Ajax=Async JavaScript and XML（异步的JavaScript 和 XML）概念：Ajax不是新的编程语言，而是一个异步的用于发送 http 请求的技术Ajax特点：无需刷新页面，可以更改页面布局内容按需加载，减轻服务器的压力实时更新提供用户体验Ajax使用步骤【1】创建Ajax的对象【2】设置请求方式和接口地址在Ajax对象中 ，有一个open（）的方法用于设置请求方式和地址第三参数：设置同步或者异步 取值为布尔值。默认情况下为tru
2021-04-04 17:27:27
95
原创 day22-http，cookie
概念01 .url = 协议 + 域名 + 资源路径 比如: https://www.baidu.com/index.htmlhttp：超文本传输协议https：安全的超文本传输协议filetcp/ip02 . 思考：地址栏输入：https://www.gz2005.io/code/index.html 到页面展示这个过程浏览器内部做了什么？（面试）输入网址DNS解析建立tcp连接客户端发送HTPP请求服务器处理请求服务器响应请求浏览器展示HTML浏览器发送请求获取其他在H
2021-04-02 16:36:59
125
原创 day21-PHP，MySQL
01 .静态页面和动态页面的区分静态页面：所有的数据和结构都是写在前端动态页面：页面的数据都是由后端提供，然后前端渲染02 .网站的基本组织结构前端：客户端，编写样式和结构 数据的渲染，用户操作的一切功能都在前端实现后端：服务端，主要提供数据接口，把数据从数据库中获取出来，数据的处理，然后再把数据传递给前端数据库：提供数据仓库03 . PHP的基本语法所有的php代码写在一个php后缀的文件里面php的代码必须有分号结束php定义变量：变量前面必须使用 $<?php
2021-04-01 15:01:18
127
原创 day19-面向对象3
使用class定义函数 <script> // let fun = function(a){}; // fn(); // function fn(a) { // console.log(2); // } // class 定义函数 用class 来代替function // 【1】class 定义的函
2021-04-01 14:11:19
75
原创 day18-面向对象2
this指向的总结普通函数【1】如果函数用new关键字调用的时候，这个函数中的this指向构造函数的实例【2】如果函数用事件驱动调用的时候，函数中的this指向绑定事件的元素【3】如果函数用对象obj.fun( ) ，fun函数中的this指向obj对象【4】如果没有以上三种情况，函数中this指向window原型对象中两个关键字 function Person() {} Person.prototype.init = function ()
2021-03-31 23:27:58
62
原创 day17-面向对象1
构造函数，实例对象和原型对象创建对象的练习<script> //对象：人 let person={}; //描述对象 //静态属性 person.name="张三"; person.age=48; person.sex="男"; person.height=160; //动态方法 person.say=function(){ console.log("可以说话") } person.running=function(){
2021-03-18 19:27:25
64
原创 day16-动画
匀速运动：在相同的时间内 移动的距离一样let box=document.querySelector("#box");let left=0;let timer=setInterval(function(){left+=13;if(left>=1000){left=1000;clearInterval(timer);}box.style.left=left+"px";},50);加速运动：在相同的时间内 移动的距离 越来越长，速度越来越快 let box = do..
2021-03-18 16:36:00
53
原创 day14-正则
概念正则：由一些符号和一些特殊符号组成的一种模式作用：检测字符串是否符合规则的一种模式定义正则模式：var reg = / 正则规则 /var reg = new RegExp（正则规则）正则提供了一个方法来判断字符串是否符合正则的规则test（）正则的规则，必须要正则来调用返回值：布尔值，如果字符串符合正则的规则返回true 不符合返回falsevar reg = /\d/; var str = "dskufh7"; var res
2021-03-16 19:28:00
59
原创 day15-ES6
es6定义变量的关键字：let 和 constvar 和let const定义变量区别：let 和 const 不能重复定义变量let 和 const 声明的变量不能进行与解析（只能声明之后调用）let 和 const 声明变量存在块级作用域，在{ }中声明的变量只能在{ }中使用，不能在{ }外使用===》因为在es6中每一个{ } 就是一个块级作用域let 和 const的区别：let 定义的是变量，可以先定义变量后赋值const 定义的是常量，定义变量的时候，一定要赋值，后期也不
2021-03-15 23:45:21
133
原创 day13-event2
新闻信息提示案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <st
2021-03-15 19:55:57
76
原创 day12-event1
获取非行内样式window.getComputedStyle（你要获取样式的元素）.获取什么属性window.getComputedStyle() 在ie9及以上的浏览器才会识别，其他的浏览器不识别元素.currentStyle.属性 ie及以下的浏览器获取样式的方式编写一个函数获取样式参数：ele 获取哪一个元素的样式attr 获取元素的什么样式返回值：把获取的样式的值返回function getStyle(ele, attr) { // 兼容的获取方
2021-03-15 17:23:23
95
原创 day11-DOM
DOM介绍DOM：文档对象模型提供一些操作文档的属性和方法操作元素节点的属性和方法获取元素的方法：【1】根据id名来获取 document.getElementById(‘id名’)返回值：直接就是获取的元素【2】根据class名来获取 document.getElementsByClassName()返回值：是一个伪数组，需要通过索引的形式 获取里面的元素【3】根据标签名来获取 document.getElementsByTagName()返回值：是一个伪数组，需要通过索
2021-03-13 17:31:27
64
原创 day10-BOM
BOM介绍JavaScript的组成：ECMAScript+BOM+DOMECMAScript：js中核心语法BOM：浏览器对象模型，主要提供一些操作浏览器的方法和属性DOM：文档对象模型，主要提供一些操作文档的属性和方法window BOM：范畴中的顶级对象，es中的全局对象es中的全局对象：当全局定义了一个变量的时候，那么会把这个变量存储在window对象中作用【1】获取浏览器的窗口消息【2】可以操作浏览器的地址信息【3】操作浏览器的滚动条的信息【4】查看浏览器的版本信息【5
2021-03-13 09:54:05
114
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人