- 博客(118)
- 收藏
- 关注
RSS订阅原创 Vue进阶之Vue项目实战（三）
package.json:图表渲染器(图表组件)一般负责：基于数据协议的图表渲染逻辑渲染逻辑：通用渲染逻辑、特殊渲染逻辑BarRenderer.vue、LineRenderer.vue，统一在ChartsRenderer.vue中进行分发渲染（在这一层将不同的图表类型差异磨平）图表的事件处理图表举例：创建 ChartsRenderer.vuecomponentsChartsRenderer.vueApp.vue项目中：ChartsDataTransformer.t
2024-05-23 23:55:24
463
1
原创 Vue进阶之Vue项目实战（二）
使用代码分割来解决。不管是useForm，还是自己去封装表单，表格的插件，都需要将UI层（组件）和状态层（CompositionAPI负责产出的状态数据）分离，在用的地方，使用useForm，useTable等等解构出来。1.设计理念比较好 基于hooks实现的/CompositionAPI实现的，能够解决很多事情，例如，表单类型校验规则，动态表单，表单间联动，统一的表单状态处理等等。如果组件多了，渲染引擎变得慢或卡，一家公司的商城，首页用了无代码平台来搭建，首页要等一会才出来，这个如何解决?
2024-05-07 00:44:44
653
原创 Vue进阶之Vue项目实战（一）
git hooks提供的pre-commit等，可以在开发的时候，在提交对应的时机，发生一些作用。2.创建文件pre-commit.mjs 在husky/pre-commit.mjs。pre-commit:预提交 执行提交后会先预提交一下，失败的话全部打回，不会提交。husky是一个钩子工具，但是钩子本身不是husky的，钩子是属于git的。加依赖，devDependencies加。以后写脚本的时候可以尝试用zx写。node版本：20.11.1。pnpm版本：9.0.4。帮助轻松拦截hooks。
2024-05-03 14:30:30
1209
原创 Vue2进阶之Vue2高级用法
App.vuemain.jsApp.vuemain.jsglobal注入到new Vue实例上，然后在App.vue的实例中执行自己当前的data与Vue实例执行顺序有关，先进行当前实例化声明（全局注入），然后再实例化声明的时候注入我们内部的mixin，是外部的的global更高一点像Vue-router、Vuex等也是插件，通过插件注入进去的Vue-routerVue-router关于插件的内容Vuexinstall的方法，将全部内容挂载到Vue的构造函数上，通过use方法挂载到Vue实
2024-04-18 09:23:50
1133
原创 ECMA进阶2之从0~1搭建react同构体系项目2
webpack：cross-env能够声明不同的环境，dev，prod，test 能够通过dev注入到process.env.NODE_ENV。cross-env 能够注入到全局环境下，在window，linux，mac不同环境下都能使用cross-env做好兼容，只是用于注入变量。当src/server，webpack，babel.config.ts这几个发生变化的时候，才会去解析这个包。当我们的组件发生变化时，只要在外面包裹ErrorBoundary，就能避免页面报错，展示的是兜底错误的提示。
2024-04-15 23:27:25
631
原创 ECMA进阶1之从0~1搭建react同构体系项目1
当页面首次加载时候，spa只会返回空节点，内容都是空的，而ssr会将页面的骨架，内容等提前加载出来，提高效率。spa首屏加载很慢。SSR:利于首屏加载CSR:(spa)不利于首屏加载，页面结构为空节点本次项目可以执行在浏览器，也可以执行在客户端中。
2024-04-15 14:45:46
484
原创 JavaScript进阶7之TypeScript
d.ts是所有类型的集合，全称是：declaration type 都是通过 @types/react去管理的。针对不同场景下参数的兼容，参数不同，则场景不同，考虑到的情况也不一样。以上两种写法，一般都用第一种写法，比较规范，考虑到代码扩展性等。引入的是文件的类型，导出的时候也是按照文件模块/类型引用。关于ts配置项，tsconfig.json。再 tsconfig includes注入。@types是约定俗成的。全局模块，是全局直接用。
2024-04-11 14:47:14
598
3
原创 JavaScript进阶6之函数式编程与ES6&ESNext规范
在JavaScript中，o?这个操作符用于在访问对象属性时进行安全的操作，即使对象的某个属性不存在或者为null或undefined，也不会导致运行时错误。.a表示如果对象o存在且具有属性a，则返回o.a的值；如果对象o不存在或者属性a不存在，则返回undefined，而不会抛出错误。一方面，css in js 相对不好处理，但是有对应的方案， 而且比较符合正常开发者定义组件，维护对应的内容。这种语法的引入使得代码更加简洁并且更安全，特别是在处理深层嵌套的对象属性时。看具体原理，内部具体是怎么做的。
2024-04-10 17:47:20
823
原创 JavaScript进阶5之垃圾回收（计算机组成、解释与编译、JavaScript引擎、垃圾回收、内存管理）、运行机制（浏览器进程分类、浏览器事件循环）
标记清除（Mark-Sweep），目前在 JavaScript引擎 里这种算法是最常用的，到目前为止的大多数浏览器的 JavaScript引擎 都在采用标记清除算法，各大浏览器厂商还对此算法进行了优化加工，且不同浏览器的 JavaScript引擎 在运行垃圾回收的频率上有所差异。标记清除算法有一个很大的缺点，就是在清除之后，剩余的对象内存位置是不变的，也会导致空闲内存空间是不连续的，出现了 内存碎片（如下图），并且由于剩余空闲内存不是一整块，它是由不同大小内存组成的内存列表。
2024-03-27 17:58:43
1013
原创 JavaScript进阶4之JavaScript模块化，模块化的演进过程（全局函数、namespace、freeze、IIFE）、模块化规范（CommonJs、AMD、CMD、ES6模块化、UMD）
CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案；AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅；CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在Node.js中运行；
2024-03-26 09:51:00
580
原创 JavaScript进阶3之参数按值传递、call，apply，bind和new的实现、继承的多种方式
因为 new 的结果是一个新对象，所以在模拟实现的时候，我们也要建立一个新对象，假设这个对象叫 obj，因为 obj 会具有 Person 构造函数里的属性，我们可以使用 Person.apply(obj, arguments)来给 obj 添加新的属性。当传递 value 到函数 foo 中，相当于拷贝了一份 value，假设拷贝的这份叫 _value，函数中修改的都是 _value 的值，而不会影响原来的 value 值。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。
2024-03-13 18:07:36
675
原创 JavaScript进阶2之执行上下文、作用域链、函数创建、函数激活、checkScope的执行过程、闭包、this
结合着之前讲的变量对象和执行上下文栈，我们来总结一下函数执行上下文中作用域链和变量对象的创建过程checkscope 函数被创建，保存作用域链到 内部属性[[scope]]执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数[[scope]]属性创建作用域链。
2024-03-10 18:11:35
694
原创 JavaScript进阶1之作用域、执行上下文的顺序执行、可执行代码、执行上下文栈
JavaScript采用静态作用域，于是执行 foo 函数，先从 foo 函数内部查找是否有局部变量 value，如果没有，就根据书写的位置，查找上面一层的代码，也就是 value 等于 1，所以结果会打印 1。如果没有，就从调用函数的作用域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。但是使用var表达式定义函数add1，只有变量声明提前了，变量初始化代码仍然在原来的位置，没法提前执行。用函数语句创建的函数add2，函数名称和函数体均被提前，在声明它之前就使用它。
2024-03-10 16:19:59
398
原创 Javascript实现图片延迟加载
所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。// 页面窗口改变 / 视窗大小改变时。// 1. 做纵向的可见判断。// 3. 防止图片重复加载。// 加载需要懒加载的图片。// 判断图片是否可见。// 横纵方向改变时。
2024-03-08 09:43:36
830
原创 JavaScript基础4之原型的原型继承、原型链和理解对象的数据属性、访问器属性
基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链。继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript中大多是借助原型对象实现继承的特性。男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响。正常的原型链都会终止于 Object 的原型对象，Object 原型的原型是 null。//女人 构造函数 继承 想要继承 Person。
2024-03-07 22:10:27
705
原创 JavaScript基础3之面向对象关于面向过程、函数式编程、对比、构造函数、原型
所有的数据和方法都被封装在对象内，由开发者自己选择性的去公开哪些属性和方法，对于创建的实例来说他能访问的只能是这些公开的属性和方法，而对于其他对象来说是无权访问此类或者进行更改，封装这一特性为程序提供了更高的安全性。对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。所以，我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有。
2024-03-05 22:36:59
643
原创 JavaScript基础2之运算符、函数
逻辑与操作符是一种短路操作符，意思就是如果第一个操作数决定了结果，那么永远不会对第二个操作数求值。对逻辑与操作符来说，如果第一个操作数是 false，那么无论第二个操作数是什么值，结果也不可能等于 true。，只有当两个操作数的数据类型和值都相等时，才会返回true。一元减由一个减号（-）表示，放在变量前头，主要用于把数值变成负值，如把 1 转换为-1。其中一个操作数是NaN，相等运算符会返回false，不相等运算符会返回true。，只有两个操作数在不进行类型转化的情况下是不相等的，才会返回true。
2024-03-04 18:14:15
805
原创 JavaScript基础1之变量的var、const、let和数据类型的原始类型、对象类型、内存空间、拷贝
var name="张三",age=18,sex="男";
2024-03-04 09:42:36
850
原创 Http基础之http协议、无状态协议、状态码、http报文、跨域-cors
页面有很多的图片，在发送请求访问HTML，也可能包含其他的资源、所以我们每一次请求都要建立一次TCP的链接和断开增加了通信量的开销。表示服务器接收的请求已经成功处理，但是返回的响应报文中不包含实体的主体部分，而且不返回任务实体的主体。表示对请求资源的访问被服务器拒绝了。服务器接收到附带的条件的请求后，只有判断指定条件为真，才会执行请求。目的: 保护客户端的安全，防止不受信任的网站利用用户的浏览器向其他网站发送恶意请求。实体标记(ETag) 值和请求资源的ETag的值不一致的时候，告诉服务器处理请求。
2024-03-01 09:01:12
1538
原创 Nodejs基础6之HTTP模块的获取请求行和请求头、获取请求体、获取请求路径和查询字符串、http请求练习、设置HTTP响应报文、http响应练习
搭建 HTTP 服务，响应一个 4 行 3 列的表格，并且要求表格有隔行换色效果，且点击单元格能高亮显示。浏览器打开form表单，输入账户密码，点击提交。按照以下要求搭建 HTTP 服务。提交之后页面跳转链接。
2024-02-05 18:04:39
1888
原创 Nodejs基础5之网络基础概念的IP、端口，HTTP模块的创建HTTP服务、HTTP服务注意事项、浏览器查看HTTP报文
IP 也称为 「IP 地址」，本身是一个数字标识。例如 192.168.1.3ip本身是一个32Bit的二进制数字，例如，11000000101010000000000100000011但是为了标识，将每8个分为一组，转成十进制数字，并每组加上“.”来组合类型说明本机回环IP地址局域网IP (私网 IP)广域网 IP (公网 IP)除上述之外端口：应用程序的数字标识一台现代计算机有65536个端口（0~65535）一个应用程序可以使用一个或多个端口。
2024-01-30 15:00:50
785
原创 Nodejs基础4之fs模块的批量重命名练习、path模块、HTTP协议
HTTP（hypertext transport protocol）协议；在浏览器输入百度网址，并按下回车，fiddler出现的是按下回车之后的所有请求。然后为了更好的监听浏览器请求，将所有进程选择浏览器进程。需求：删除其中一个文件，序号中断，需要后续的序号顺连。JSON格式的数据或者是GET参数形式的数据等方式。不懂的也可在mdn上查到（与请求头查询链接一致）__filename 文件的绝对路径。协议：双方必须共同遵从的一组约定。key：value的格式。重新启动fiddler。百度的响应体是HTML。
2024-01-26 11:42:47
826
原创 Nodejs基础3之fs模块的文件重命名和移动、文件的删除、文件夹操作、查看资源状态、fs路径
在 Node.js 中，我们可以使用 rename 或 renameSync 来移动或重命名 文件或文件夹。在 Node.js 中，我们可以使用 readdir 或 readdirSync 来读取文件夹。在 Node.js 中，我们可以使用 stat 或 statSync 来查看资源的详细信息。在 Node.js 中，我们可以使用 rmdir 或 rmdirSync 来删除文件夹。在 Node.js 中，我们可以使用。
2024-01-15 16:03:25
1220
原创 Nodejs基础2之fs模块的文件写入、文件读取、fs练习-复制文件
同步处理 JavaScript 主线程 会等待 其他线程的执行结果，然后再继续执行主线程的代码，效率较低。异步处理 JavaScript 主线程 不会等待 其他线程的执行结果，直接执行后续的主线程代码，效率较好。文件复制：复制【资料】文件夹下的【动画1.gif】到 【复制文件】文件夹下一份。注意的是，实质上读取速度是比写入速度要快的，所以一般是读取几块才会写一块。因为第一种是一次性将文件读取到内存，然后再执行之后的工作。第二种是读一块到内存，然后再写一块到文件中。流式读取：分块读取（分块加载到内存）
2024-01-03 18:33:55
1077
原创 Nodejs基础1之基础知识、Buffer缓冲区、计算机基础
Buffer中文译为【缓冲区】，是一个类似于Array的对象，用于表示固定长度的字节序列。换句话说，Buffer就是一段固定长度的内存空间，用于处理二进制数据。程序一般保存在硬盘中，软件安装的过程就是将程序写入硬盘的过程。程序在运行时会加载进入内存，然后由 CPU 读取并执行程序。以上都不能使用，都会像上面一样报错。线程是一个进程中执行的一个执行流。toString默认是按照。注：pkg是mac电脑的。进程是程序的一次执行过程。一个线程是属于某个进程的。
2023-12-28 15:51:54
825
原创 Vue2项目练手——通用后台管理项目第八节
全部代码：Login.vue全部代码：CommonAside.vue全部代码：router/index.js全部代码：全部代码：CommonHeader.vue全部代码：main.js全部代码：项目到此Vue2部分也就结束了
2023-09-08 11:34:32
262
原创 Vue2项目练手——通用后台管理项目第七节
新增的代码：mock.js全部代码：全部代码：安装cookie全局代码：router/index.js全部代码：mock.js全部代码：api/index.js全部代码：Login.vue全部代码：CommonHeader.vue全部代码：
2023-09-07 16:22:55
880
3
原创 Vue2项目练手——通用后台管理项目第六节
使用的组件和前面的表格使用的一致。mock.js新增代码：全部代码：index.js新增代码全部代码：Users.vue新增代码全部代码：新增和编辑功能Users.vue新增代码：全部代码：新增代码：全部代码：
2023-09-07 10:36:27
449
原创 Vue2项目练手——通用后台管理项目第五节
src/components/CommonAside.vuesrc/components/CommonHeader.vueMain.vue全部代码：tabs.js全部代码：
2023-09-01 17:47:56
1264
2
原创 Vue2项目练手——通用后台管理项目第四节
mock官方文档前端用来模拟后端接口的工具，通过拦截前端发起的请求，自己定义一些数据src/api/mockServeData/home.jsmain.js安装echarts柱状图:饼状图全部代码：
2023-09-01 10:54:52
876
原创 Vue2项目练手——通用后台管理项目第三节
Home.vue全部代码：axios中文文档下载axiossrc/utils/request.jsHome.vue
2023-08-31 17:54:26
300
2
原创 Vue2项目练手——通用后台管理项目第二节
路由重复跳转会出现bug解决路由重复bug问题：CommonAside.vue顶部header组件搭建与样式修改右边用户菜单栏使用的组件store/tab.jsmain.jsCommonHeader.vueCommonAside.vueMain.vue
2023-08-30 16:58:29
581
原创 Vue2项目练手——通用后台管理项目第一节
有时候会出现版本不一致不能运行的情况。先vue create创建一个项目，然后安装element-ui组件和vue-router,less等组件main.jspages/Users.vuepages/Main.vuepages/Home.vuepages/Login.vueApp.vueApp.vueCommonAsidesrc/pages/Mall.vuesrc/pages/pageOne.vuesrc/pages/PageTwo.vuesrc/com
2023-08-26 17:23:36
968
原创 移动端布局之flex布局3：案例-携程网首页案例制作（曾经的版本）2
背景渐变必须添加浏览器私有前缀起始方向可以是：方位名词 或者度数，如果省略就是topindex.cssindex.cssindex.css
2023-06-07 15:20:23
554
原创 移动端布局之flex布局2：flex布局父项常见属性、flex布局子项常见属性、案例：携程网首页案例制作（曾经的版本）1
flex-flow属性是flex-direction和flex-wrap属性的复合属性flex属性定义子项目分配剩余空间，用flex来表示占多少京东商城移动端首页的搜索框部分另外写法：而且盒子可以随着页面宽度变化而变化直接分成三份，其中一个占两份，剩下两个占各占两份：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch数值越小，排列越靠前，默认为0
2023-06-07 11:56:18
616
原创 移动端布局之flex布局1：flex布局体验、flex布局原理、flex布局父项常见属性
以下有6个属性是对父元素设置的在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴flex-direction属性决定主轴的方向（即项目的排列方向）注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的justify-content属性定义了项目在主轴上的对齐方式默认情况下， 项目都排在一条线(又称“轴线”上)。flex-wrap属性定义，flex布局中默认是不换行的该属性是控制子项在侧轴（默认
2023-06-05 18:23:22
1045
原创 移动端布局之流式布局2（百分比布局）:案例-京东移动端首页2
在ps中用选区将所选区域选中，打开工具栏中的“窗口=>信息”会出现鼠标的x和y值，记录下来。在firework中里面把精灵图等比例缩放为原来的一半(也可以在ps中)注意代码里面的background-size也要写：精灵图原来宽度的一半。(根据大小 测量坐标)
2023-05-30 23:09:02
144
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人