- 博客(49)
- 收藏
- 关注
RSS订阅原创 JSBridge原理 - 前端H5与客户端Native交互
在混合应用开发中，一种常见且成熟的技术方案是将原生应用与 WebView 结合，使得复杂的业务逻辑可以通过网页技术实现。实现这种类型的混合应用时，就需要解决H5与Native之间的双向通信。JSBridge 是一种在混合应用中实现 Web 和原生代码之间通信的重要机制。
2024-04-08 14:14:21
786
原创 前端项目工程化搭建
在开发过程中，需要遵循一些规范，可以使用下面的工具来配置不同项目需要遵循的规范，来帮助我们检查错误、约束开发过程。使用 创建的项目，会自动生成 文件。只需要在这个文件的 配置项中配置相应的规则，在开发过程中，编译器会自动检查所写的代码是否符合规范，不规范的代码编译器会自动提示。一些常见的 规则如下：
2023-06-20 20:10:40
1096
1原创 一文全面理解React Hooks + 代码实例
自定义 Hook 更像是一种约定，而不是一种功能。如果函数的名字以 use 开头，并且调用了其他的 Hook，则就称其为一个自定义 Hook有时候我们会想要在组件之间重用一些状态逻辑，之前要么用 render props ，要么用高阶组件，要么使用 redux自定义 Hook 可以让你在不增加组件的情况下达到同样的目的Hook 是一种复用状态逻辑的方式，它不复用 state 本身事实上 Hook 的每次调用都有一个完全独立的 state},1000);},[]);
2023-05-12 10:19:54
617
原创 React Hooks精讲+案例
能在无需修改组件结构的情况下复用状态逻辑（自定义 Hooks ）能将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）副作用的关注点分离：副作用指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。以往这些副作用都是写在类组件生命周期函数中的。
2023-04-04 19:26:50
880
原创 React 组件通信
● 父组件向子组件通信: props● 子组件向父组件通信: 回调函数/自定义事件● 跨级组件通信: 层层组件传递props/context● 没有嵌套关系组件之间的通信: 发布订阅模式
2023-04-04 19:10:36
445
原创 React 生命周期精讲
React生命周期主要包括三个阶段：创建阶段(Mounting)、更新阶段(Updating) 和 销毁阶段(Unmounting)，在React不同的生命周期里，会依次触发不同的钩子函数。
2023-04-04 19:05:50
1180
原创 Vue最全性能优化方法
尽量减少 data 中的数据，data 中的数据都会增加 getter 和 setter，会收集对应的 watcherv-if 和 v-for 不能连用, v-for的优先级比v-if高，一起使用会造成性能浪费如果需要使用 v-for 给每项元素绑定事件时使用事件代理SPA 页面采用 keep-alive 缓存组件在更多的情况下，使用 v-if 替代 v-showkey 保证唯一使用路由懒加载、异步组件防抖、节流第三方模块按需导入长列表滚动到可视区域动态
2023-02-21 21:59:25
735
原创 探索 v-model 原理
v-model即可以作用于表单元素，又可作用于自定义组件，无论是哪一种情况，它都是一个语法糖，最终会生成一个属性和一个事件当其作用于表单元素时，vue会根据作用的表单元素类型而生成合适的属性和事件。例如，作用于普通文本框的时候，它会生成value属性和input事件;而当其作用于单选框或多选框时，它会生成checked属性和change事件。v-model也可作用于自定义组件，当其作用于自定义组件时，默认情况下，它会生成一个value属性和input事件。<Comp v-model
2023-02-20 17:25:49
385
原创 虚拟 DOM 详解
虚拟 dom 本质上就是一个普通的 JS 对象，用于描述视图的界面结构 在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟 dom 树，这也就意味着每个组件都对应一棵虚拟 DOM 树
2023-02-20 17:12:37
2921
原创 如何判断一个元素是否在可视区域中？
一、用途 可视区域即我们浏览网页的设备肉眼可见的区域，如下图在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如：图片的懒加载列表的无限滚动计算广告元素的曝光情况可点击链接的预加载二、实现方式 判断一个元素是否在可视区域，我们常用的有三种办法：offsetTop、scrollTopgetBoundingClientRectIntersection Observer方法一 offsetTop、scrollT
2023-02-19 23:37:15
1871
原创 大文件上传断点续传具体实现
不管怎样简单的需求，在量级达到一定层次时，都会变得异常复杂，文件上传简单，文件变大就复杂。上传大文件时，以下几个变量会影响我们的用户体验
2023-02-19 23:27:35
277
原创 如何实现单点登录
单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统SSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过passport，子系统本身将不参与登录操作当一个系统成功登录以后，passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被passport授权以后，会建立一个局部会话
2023-02-19 23:16:12
470
原创 对 WebSocket 的理解+应用场景
简版WebSocket 是 HTML5 下一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。WebSocket 与 HTTP 一样通过已建立的 TCP 连接来传输数据，但是它和 HTTP 最大不同是：WebSocket 是一种双向通信协议。在建立连接后，WebSocket 服务器端和客户端都能主动向对方发送或接收数据，就像 Socket 一样；WebSocket 需要像 TCP 一样，先建立连接，连接成功后才能相互通信。相比 HTTP 长连接，Web
2023-02-18 20:40:46
1612
原创 浅谈GET 和 POST 的区别
简版数据传输⽅式：get 通过 URL 传输数据 (地址栏拼接参数)post 通过请求体传输；数据安全:get 数据暴露在 URL 中，可通过浏览历史记录、缓存等很容易查到数据信息;post 数据因为在请求主体内，所以有⼀定的安全性保证。数据类型:get 只允许 ASCII 字符;post ⽆限制get ⽆害 刷新、后退等浏览器操作是⽆害的; post 可能会引起重复提交表单一、是什么GET和POST，两者是HTTP协议中发送请求的方法GETGET方法请求一个指定资源的表示形
2023-02-18 19:25:21
121
原创 说说 HTTP1.0/1.1/2.0 的区别
简版HTTP/2 的升级, 对于用户来说, 是跨时代的, 基于 HTTP/2, 用户访问网页的速度会非常快 (充分利用带宽)HTTP/2 采⽤⼆进制格式来传输数据，⽽⾮ HTTP 1.x 的⽂本格式，⼆进制协议解析起来更⾼效HTTP/2 采用一些头部压缩技术，减少在请求和响应头中重复携带的数据，降低网络负担HTTP/2 采⽤服务器推送方式，主动向客户端推送资源，提高页面加载效率HTTP/2 采⽤多路复用机制，减少需要创建的连接数量，降低资源占用和性能消耗HTTP/2: 淘宝, 天猫, 京东等, 已做升
2023-02-18 18:38:46
149
原创 什么是 HTTP? HTTP 和 HTTPS 的区别?
简版http 是无状态的超文本传输协议，连接简单，信息是明文传输，端口为 80。https 协议是由 http+ss 协议构建的可进行加密传输、身份认证的具有安全性网络协议,端口是 443。优缺点：“https 有加密认证相对于 http 安全一些https 因为需要进行加密解密等过程，因此速度会更慢；”一、HTTPHTTP (HyperText Transfer Protocol)，即超文本运输协议，是实现网络通信的一种规范在计算机和网络世界有，存在不同的协议，如广播协议、寻址协议
2023-02-18 18:20:25
520
原创 WEB常见的攻击方式有哪些？如何防御？
Web攻击是针对用户上网行为或网站服务器等设备进行攻击的行为Web 应用程序的安全性是任何基于 Web 业务的重要组成部分，大致分为植入恶意代码，修改网站权限，获取网站用户隐私信息等等。确保 Web 应用程序安全十分重要，即使是代码中很小的 bug 也有可能导致隐私信息被泄露站点安全就是为保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践。
2023-02-18 17:31:04
390
原创 Redux使用讲解+案例
组件可以根据不同的状态值切换为不同的显示，比如，用户登录和没登录看到页面应该是不同的，那么用户的登录与否就应该是一个状态。创建store后，需要引入react-redux中提供的Provider组件，将其设置到所有组件的最外层，并且将刚刚创建的store设置为组件的store属性，只有这样才能使得Redux中的数据能被所有的组件访问到。，它需要一个回调函数作为参数，回调函数的第一个参数就是当前的state，回调函数的返回值，会作为useSelector的返回值返回，所以。用来对state的功能进行扩展。
2022-09-16 16:28:09
641
原创 Strapi-API服务器 超详细配置使用攻略
Strapi就是一个API的管理系统，通过Strapi我们可以直接以网页的形式去定义自己的API、包括设置模型、权限等功能。有了Strapi我们无需编写代码便可开发出功能强大的API。
2022-09-16 15:39:39
2848
原创 虚拟DOM
在React中我们操作的元素被称为React元素，并不是真正的原生DOM元素React通过虚拟DOM 将React元素和原生DOM,进行映射；虽然操作的是React元素，但是这些操作最终都会映射到真实DOM之中。每当我们调用root.render()时，页面就会发生重新渲染React会通过diff算法，将新的元素和旧的元素进行比较通过比较找到发生变化的元素，并且只对变化的元素进行修改，没有发生变化的不予处理比较两次数据时，React会优先比较父元素，父元素如果不同，直接替换所有元素。
2022-09-13 11:56:17
195
原创 Vue axios详解 实例
axios用来链接ajax,去链接后台,可以在浏览器中发送XMLHttpRequests,支持在node中发送Http请求,支持promise,可以拦截请求和响应,可以转换请求和响应的数据，能够取消请求，自动转化json数据，可以防止XSRF网络攻击，可以设置多个回调函数。属性和方法 axios.get(路径，参数) 查询请求，放在请求头 axios.post(路径，参数) （增删改）处理数据，上传文件 放在请求体 axios.delete(路径，参数)
2022-09-04 01:04:47
309
原创 Vuex状态管理模式
Actions和Mutations比较类似，包含的都是一些方法，不同的是Actions不能直接更改数据，它的作用是提交Mutations，Mutations里面包含的才是具体操作数据的方法。（仓库）中去，这样各个组件需要数据的时候直接去仓库里面拿就好了，不用组件之间复杂的传值了，而且需要改变数据的时候，只需要将仓库里面的数据更改即可，各个组件里面引用的地方会自动更新。vuex是vue的前端数据库，用来存储变量，定义的是全局变量，保证数据的一致性，存数据的地方，所有的数据都要存在state里面。
2022-09-04 01:00:12
401
原创 Vue路由守卫 通俗易懂
beforeRouterEnter(to,from,next)在激活的组件里调用，进入组件之前。没创建在created之前。beforeRouterLeave(to,from,next)在失去的组件里调用，离开组件之前，此时进入了组件，但是没离开。beforeRouterUpdate(to,from,next)在组件被改变的时候调用，路由更新但是内容不会改变。定义子router.js中，只限制可跳转路径的组件。from用来获取将要离开的路径。to用来获取将要进入的路径。在某个组件内容使用，限制子组件。
2022-09-04 00:57:05
343
原创 Vue路由最全详解 创建路由
1.hash模式：路径里会带#，会显示锚点，支持所有浏览器，只能改变#后面的路由名称进行跳转。2.history模式：路径和正常网络路径一样，会存储路径的历史记录，每次刷新页面，就会重新请求后台服务器，会执行多次，会耗时间。3.abstract模式：适用于所有的js环境，可以在node环境里使用，可以在node环境下执行代码跳转。createWebHashHistory -> hash模式createWebHistory -> history模式。
2022-09-04 00:52:03
2414
原创 Vue子父、父子、兄弟组件传值方法汇总！
父组件传值子组件需要使用props 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型。这里需要使用自定义事件，在子组件中使用this.$emit(‘myEvent’) 触发，然后在父组件中使用@myEvent监听。需要注意的是这种传值是单向的，你无法改变父组件的值（当然引用类型例外）；4）使用ref传值，通过ref的能力，给子组件定义一个ID，父组件通过这个ID可以直接访问子组件里面的方法和属性。子组件传值父组件需要使用setup()
2022-09-04 00:43:13
621
原创 解决跨域问题（详解9种方法）
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。为了保证用户信息的安全性，防止恶意窃取当前网站的数据，禁止不同域直接与js代码交互。分布式项目：把后台放在一个服务器里，把前台放在一个服务器中，防止文件相互损坏，防止一个模块导致所有程序运行不起来，可以前后台同时开发，用来节省时间。...
2022-08-14 18:41:58
7960
原创 Vue环境配置 搭建脚手架
node相当于前端的服务器，用来编译js，vue和react框架都一个在node环境下进行安装和执行，为了让js的下扩展语法，列如es6和typescript进行兼容，则用node编译。package-lock.json 记录第三方模块的详细信息，例如：名称，版本，下载地址...模块打包机 ,我们可以把服务器下项目打包成浏览器下执行的项目，也可以打包成手机的app安装包。vue的脚手架cli：帮助你快速搭建项目，给项目内容进行分包分层，进行环境配置。npm install 模块名 -g全局安装模块。....
2022-08-14 18:34:28
439
原创 Vue生命周期函数
beforecreate：创建前 vue刚被创建时调用，此时所有变量和函数都未初始化完毕，在此函数下可以新增一些内容，跟着声明周期渲染。created：创建后，变量和函数初始化完毕，没有向页面渲染，此处可以执行ajax，让获取的变量跟着渲染。beforeMount：挂载前，此时el可以寻找到挂载点，开始渲染页面，此处也可以执行ajax。生命周期函数过程分为：创建前，创建后，挂载前，挂载后，更新前，更新后，销毁前，销毁后。父组件创建-父组件挂载-子组件创建-子组件挂载-子组件渲染-父组件渲染。......
2022-08-14 18:30:05
551
原创 最常用正则表达式（完全版）- JavaScript
一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。.........
2022-08-02 17:35:01
833
原创 React环境搭建--脚手架的安装
指令npminstall-gcnpm--registry=https//registry.npm.taobao.org。如已经安装了淘宝镜像，就在命令窗口输入cnpminstall-gcreate-react-app。没有安装淘宝镜像，可以输入这样的指令npminstall-gcreate-react-app；node.js官网下载https//nodejs.org/zh-cn/download/；2.检查版本号在命令窗口输入node-v和npm-v。......
2022-08-01 21:31:03
357
原创 js Promise的基本使用
从语法上来说Promise是一个构造函数从功能上来说promise对象用来封装一个异步操作并可以获取其成功/失败的结果值构造函数newresolverejectresolve函数的作用将promise实例的状态从，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去reject函数的作用将promise实例的状态从，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。promise实例具有三种状态。...
2022-07-30 15:41:09
520
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人