- 博客(221)
- 收藏
- 关注
RSS订阅转载 对双向绑定的理解。MVVM。
我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了ViewModel的数据也自动被更新了，这种情况就是双向绑定举个栗子当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下。
2024-05-14 17:39:53
4
原创 electron学习笔记
4、在渲染进程中使用node.js模块（写文件等）：在webPreference中引入预加载模块preload.js，node.js代码可以写在preload中。通过contextBridge可以将获取到的变量挂载到window上，渲染进程app.js中就可以通过window.xxx（3、主进程（操作硬件等，commonJS）与渲染进程（渲染页面，ES6）如：window.myApi.platfrom）获取到值了。实际上是chromium + Node.js。5、主进程和渲染进程通信：ipc。
2023-10-19 11:26:27
421
原创 react组件更新机制
3、组件更新会引起哪些相关组件更新？--以此组件为跟节点的子树的更新。2、setState的第二个参数，页面更新完后的回调函数。1、setState是异步更新state内容的。一、setState。
2023-03-13 11:19:33
691
原创 react组件性能优化
解决方法：shouldComponentUpdate(nextProps，nextState)钩子函数，此函数是更新阶段的钩子函数，组件重新渲染前执行，即在render函数前执行。注意：在此函数中，可以通过this.props获取组件当前props（未更新），nextProps参数获取组件更新后的props。纯组件：PureComponent，自动实现shouldComponentUpdate，自动比较state和props，决定是否更新。，如果想在对象、数组上实现，则需要创建新数据，不要直接修改数据。
2023-03-13 11:17:11
222
1
原创 react的一些原理
3、组件更新会引起哪些相关组件更新？--以此组件为跟节点的子树的更新。2、setState的第二个参数，页面更新完后的回调函数。1、setState是异步更新state内容的。一、setState。
2023-03-13 10:28:42
155
原创 组件生命周期
作用：发送网络请求、操作DOM。如果想调用setState，需要放在if条件语句中，否则会导致循环调用，if条件一般是比较preProps和this.props的相关内容。作用：渲染此函数的返回值，此时不能操作DOM ,也注意不要调用setState （会导致循环调用）作用：初始化state 、为事件处理程序绑定this。作用：发送网络请求、操作DOM。作用：清理工作，如清除计时器等。触发时机：渲染时，更新时。触发时机：组件挂载完成后。触发时机：组件更新渲染后。触发时机：组件创建时。触发时机：组件卸载前。
2022-12-12 15:27:39
355
原创 react学习笔记3--数据双向绑定，组件通信
注：1)props可以传递任意数据类型，包括数组、对象、函数、dom结构等。3）在类中如果定义了constructor(props)则必须将props传入做形参，且需要在super(props)函数也传入props形参。1）给input元素加name,name=state中对应的数据名、2）统一用一个处理函数处理数据变化，函数内用e.target.name获取应该修改的状态名。嵌套的内容可以是文本、标签、组件、jsx语句、函数等。2）子传父：props传函数，通过回调函数传参方式。3、props默认值。
2022-11-26 19:39:34
1312
原创 react学习笔记1
1.安装react（基础）、react-dom (web端应用)2.创建项目(react脚手架自动安装以上两个包了，后续引入即可)3.启动项目npm start。
2022-11-13 16:24:31
389
原创 白屏、首屏的定义、影响因素、优化方法
1.白屏时间(First Paint)：是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。2.首屏时间(First Contentful Paint)：是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。
2022-10-13 10:51:07
1259
原创 ElementPlus单独引入@2.1.8
第一步：安装element-plus第二步:安装babel的插件第三步：编写babel.config.js文件第四步：注意在template中使用的组件不需要注册，直接使用，如：el-input el-select在script中使用的需要引入，如ElMassage......
2022-08-02 17:57:41
475
转载 前端开发中的环境配置
1）环境变量文件分类：在vue-cli3中可以在根目录（与package.json同级）中创建以下四种类型的环境变量文件： 1 2 3 4值得注意的是，为一个特定模式准备的环境文件的（如：.env.production）将比一般的环境文件（如：.env）拥有更高的优先级。每一个环境变量文件中只包含环境变量的“键=值”对，所配置的变量中只有以VUE_APP_开头的变量才会被webpack.DefinePlugin静态嵌入到客户端侧包中，如： 13）环境变量访问被载入和变量
2022-07-07 14:45:43
3396
原创 前端开发时用到的跨域解决方案
（不带cookie） 1. vue.config.js里配置devServer.proxy（转发）2.vue.config.js里配置devServer.host，并且本地hosts文件中配置域名（本地DNS）当访问 http://local.youdao.com 时，会解析成127.0.0.1（localhost），因此能使用本地打开的前端项目。而跨域看的是域名即 local.youdao.com ,所以本地跑起来的项目就不存在跨域问题了。3.关闭google浏览器的跨域限制(带cook
2022-06-21 15:07:23
151
原创 关于页面布局宽高的心得
1.页面宽度：如下设置可以让屏幕居中显示，并且随浏览器横向缩放宽度会自适应处于最小宽度和最大宽度之间2.高度：footer不是固定定位的，但是需要距离底边100px，此时需要设置内容区高度与设备窗口可视高度相同，偶尔还需要减掉固定header的高度。在vue中，通过计算属性获取内容区高度，64是header高度可以尝试在css里 height:calc(100vh - 64px); //注意减号两边必须有空格3.水平居中显示时尽量用margin: 0 auto; 而不是position，因
2022-06-17 14:49:47
179
原创 文件转换、文件压缩、文件加密
一、file(文件流、二进制流) -> base64、base64 -> fileatob() 方法用于解码使用 base-64 编码的字符串。base-64 编码使用方法是 btoa() 。 2.blob->具体文件类型（用于从服务器端获取的数据）、文件->blob（用于从文本读取文件） 3.blob用formData进行传输二、文件压缩JSZip、三、文件加密MD5、RSA、RES：加密签名：防篡改......
2022-06-15 15:54:28
387
原创 NVM 的作用原理与安装使用
1.NVM的作用：管理不同版本的node，不用每个项目重新卸载安装不同版本的node2.NVM的作用原理：nvm本质上是安装时指定一个空文件夹,安装完成并且使用某版本node后这个空文件夹会变为一个快捷方式,环境变量中配置的正是这个快捷方式路径,而这个快捷方式指向nvm当前使用的node安装目录,以此实现了node的动态环境变量配置。3.如何管理全局npm安装包？并且需要将prefix的地址添加到path中 设置淘宝镜像： 某些版本的node不会自动安装npm，需要手动安装，首先找到node对
2022-06-14 20:20:16
1257
转载 如何实现大文件上传----分块
大文件怎样实现快速上传？大文件快速上传的方案，相信你也有过了解，其实无非就是将 文件变小，也就是通过 压缩文件资源 或者 文件资源分块 后再上传。本文只介绍资源分块上传的方式，并且会通过 前端（vue3 + vite） 和 服务端（nodejs + koa2） 交互的方式，实现大文件分块上传的简单功能......
2022-06-13 17:01:09
2488
1
原创 （项目总结）直播管理项目
1.直播封面更改，input type= file样式不可变的决绝方法：将其设为与自定义按钮一样的大小、透明，z-index置于自定义按钮之上2.直播间链接的复制3.文字计数，独立的div块，绝对定位置于input里。文字的计数方式为中文算一个字，两个英文算一个字。4.推流地址的展示和非首次直播默认勾选协议借助 localStorage进行存储。协议勾选默认长期存储。推流地址的展示由于不在init网络请求的返回值里，因此也将其存储在localStorage，一是为了避免刷新丢失，二是减少网络请求
2022-06-13 15:33:06
161
原创 硬件中台项目
一个ToC的项目，主要用到element UI组件库来实现基本的数据展示功能、根据用户操作进行相应处理。不同Tab中的操作不同待处理Tab展示换货处理选项，根据业务类型（退货，退A换A，退A换B）进行相关路由的展示。将业务类型当作params参数，用push进行路由跳转。进入到页面后，获取此参数，通过v-if展示不同的内容。展示换货详情，价格不变。 点击确定展示确认框，确定换货。 点击添加物料，展示可选商品 。 确认添加后展示已选商品列表，并可为之选择sku属性
2022-06-10 15:46:46
139
原创 观察网站的页面
1.在点击和hover的时候，鼠标样式编程小手；在可编辑的可选择文字内容时，变成光标2.页面点击跳到别的页面后，返回来依然时当前位置，并没有返回最顶部。keep-live实现。
2022-06-10 11:17:13
181
1
转载 postMassage
window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，而不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用这种消息传递技术来实现安全的通信。这项技术称为“跨文档消息传递”，又称为“窗口间消息传递”或者“跨域消息传递”。postMessage() 方法，该方法允许有限的通信 —— 通过异步消息传递的方式 —— 在来自不同源的脚本之间。postMessage 可用于解决以下方面的问题：页面和其打开的新窗口的数据
2022-04-22 09:39:13
603
原创 flex布局
弹性容器属性：1.flex-direction：指定弹性元素的排列方向row 默认横向从左到右 row-reverse 横向从右到左 column 从上到下 column-reverse 从下到上2.flex-wrap：弹性元素是否自动换行nowrap 默认不换 wrap 换行 wrap-reverse 逆辅轴反向换行 body { display: flex; flex-wrap:wrap-reverse}flex-flow:wrap和dir.
2022-04-22 09:38:18
380
原创 v8引擎相关
1.怎么实现数组的？快数组是一种线性的存储方式。新创建的空数组，默认的存储方式是快数组，快数组长度是可变的，可以根据元素的增加和删除来动态调整存储空间大小，内部是通过扩容和收缩机制实现。慢数组是一种字典的内存形式。不用开辟大块连续的存储空间，节省了内存，但是由于需要维护这样一个 HashTable，其效率会比快数组低。快慢数组转换：当加入的 index- 当前capacity >= kMaxGap（1024） 时（也就是至少有了 1024 个空洞），会转变为慢数组。处于哈希表实现的
2022-04-20 16:09:20
260
原创 HTML5、CSS3新特性
1.HTML5一：canvas标签your browser does not support the canvas tagvar canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);渲染结果：通过这个元素你可以绘制你想要的图案。二：video标签your bro.
2022-04-20 15:47:55
168
原创 跨域之Nginx
server { listen 22222; server_name localhost; location / { if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin 'http://localhost:8080'; add_header Access-Con.
2022-04-19 18:45:11
352
原创 HTML5新特性、CSS3新特性
1.HTML5一：canvas标签your browser does not support the canvas tagvar canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);渲染结果：通过这个元素你可以绘制你想要的图案。二：video标签your bro.
2022-04-19 17:15:45
581
原创 CSS画三角形、扇形
1.三角形<style>.sector { width: 0; height: 0; /*border-radius: 100px;*/ border-width: 100px; border-style: solid; border-color: red transparent transparent transparent;}</style><body> <div class="sector
2022-04-19 16:14:59
280
原创 v8引擎如何实现sort排序的？
在 V8 引擎中，7.0 版本之前，数组长度小于10时，Array.prototype.sort()使用的是插入排序，否则用快速排序。在 V8 引擎7.0 版本之后就舍弃了快速排序，因为它不是稳定的排序算法，在最坏情况下，时间复杂度会降级到 O(n2)。于是采用了一种混合排序的算法：TimSort。这种功能算法最初用于Python语言中，严格地说它不属于以上10种排序算法中的任何一种，属于一种混合排序算法：在数据量小的子数组中使用插入排序，然后再使用归并排序将有序的子数组进行合...
2022-04-18 20:25:18
624
原创 常见端口号
21：用于FTP（用于文本协议)服务22:是ssh端口，PcAnywhere建立TCP和这一端口的连接可能是为了寻找ssh。这一服务有许多弱点。如果配置成特定的模式，许多使用RSAREF库的版本有不少漏洞。23：用于远程登录服务25：为SMTP服务器开放，主要用于发送邮件53：为DNS服务器所开放，用于域名的解析67，68：分别是为Bootp服务的Bootstrap Protocol Server（引导程序协议服务端）和Bootstrap Protocol Client（引导程序协议客户端）开放的端
2022-04-18 19:36:05
714
原创 base64编码
1.用处在参数传输的过程中经常遇到的一种情况：使用全英文的没问题，但一旦涉及到中文就会出现乱码情况。与此类似，网络上传输的字符并不全是可打印的字符，比如二进制文件、图片等。Base64的出现就是为了解决此问题，它是基于64个可打印的字符来表示二进制的数据的一种方法。2.编码Base64的索引表，字符选用了"A-Z、a-z、0-9、+、/" 64个可打印字符，这是标准的Base64协议规定0 A 17 R 34 i 51 z1 B 18 S 35 j 52 02
2022-04-18 19:26:40
120
原创 js设计模式
JavaScript中常见的十五种设计模式 - -渔人码头- - 博客园发布-订阅模式：当一个对象的状态发 生改变时，所有依赖于它的对象都将得到通知（多个addEventListener、vue里面实现数据双向绑定用了发布订阅模式）观察者模式和发布订阅模式的区别：观察者模式和Subject之间是松耦合的关系，数据发生变化由Subject通知观察者；而发布者和订阅者是解耦的关系，其消息传递完全通过第三方来实现。代理模式：当客户不方便直接访问一个 对象或者不满足需要的时候，提供一个替身对象 来控制对这
2022-04-18 16:37:45
507
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人