- 博客(20)
- 收藏
- 关注
RSS订阅原创 前端组件的可扩展性如何保证
提供适当的接口和配置选项：组件应该提供一些接口和配置选项，方便用户根据需求进行定制化的调整。可以提供一些钩子函数或事件，允许插件在组件的生命周期中介入，或者提供插件的注册和注销机制。使用组件化的开发方式：将页面分解为多个独立的组件，每个组件负责特定的功能。使用合适的设计模式：比如使用单一职责原则来保证组件的功能单一，使用开闭原则来保证组件的扩展性，使用依赖倒置原则来降低组件之间的耦合度。进行充分的测试：在开发过程中，应该进行充分的测试，包括单元测试、集成测试和端到端测试，以保证组件的功能和扩展性的稳定性。
2023-07-25 11:16:57
413
原创 vue3实现路由角色权限
首先，需要在项目中使用 Vue Router 进行路由管理，在主文件（一般是 main.js）中引入和使用 Vue Router。上述代码中，Dashboard 路由需要 admin 和 user 角色才能访问，Settings 路由只需要 admin 角色才能访问。上述代码中，通过 getUserRole 方法获取当前用户的角色，然后判断该角色是否在路由配置的允许访问的角色列表中。在路由配置文件中，可以定义路由的 meta 字段来表示当前路由需要的权限信息。
2023-07-25 10:58:23
1459
原创 vue3源码学习
与Vue 2不同，Vue 3的响应式系统不再使用Object.defineProperty方法来进行属性的劫持，而是使用Proxy对象的get和set方法来监听对象的访问和修改。与Vue 2不同，Vue 3的响应式数组不再通过改写数组的原型方法来实现。例如，通过修改数组的索引来改变数组的元素时，Vue 3会捕获到这个操作，并在相关的部分触发更新。总之，Vue 3的响应式系统对数组进行了改进和优化，通过Proxy对象实现对数组的监听和更新，能够更好地追踪数组的变化，并且能够监听到对数组的动态修改。
2023-07-25 10:43:35
172
原创 vite学习
vite是新一代的前端构建工具，核心原理：Vite其核心原理是利用浏览器现在已经支持ES6的import，碰见import就会发送一个HTTP请求去加载文件Vite整个过程中没有对文件进行打包编译，做到了真正的按需加载，所以其运行速度比原始的webpack开发编译速度快出许多特点：快速的冷启动：基于Esbuild的依赖进行预编译优化 （Esbuild 打包速度太快了，比类似的工具快10~100倍 ）增加缓存策略：源码模块使用协商缓存，依赖模块使用强缓；
2023-07-13 10:43:43
760
1
原创 vue3+ts+vite+element-plus从搭建环境到vite优化
提示是否，ts,jsx,router,pinia…可以按照个人需要选择。这里为了方便使用，将element-plus 全局引入。在index.vue添加个按钮组件，绑定事件，启动运行。在views下新创建一个first-page页面,在index.vue中简单引入使用下request。先将axios简单封装下，方便在demo中调用。我这里继续安装了些可能会用到的框架，插件，库。命令行提示在create-vue，ok。给首页index.vue来点简单的布局。今天使用vue3的命令创建了个新项目。
2023-07-08 11:31:16
1034
原创 webpack优化vue2实战记录
日常工作中对webpack的使用太少，导致对一些编译打包优化相关的知识掌握不是很好。这里起了一个比较简单的vue项目，引入了几个第三方库(lodash,moment,lvzc-ui,element-ui,echarts)。期望通过webpack进行相关配置，能够优化打包速度，打包文件大小，首屏加载等。期望在手动配置的过程中，能够加深对webpack的理解。可以看到，安装相关依赖之后，首次编译，compiled successfully in 16s。运行scripts的serve命令，启动项目。
2023-07-07 11:25:58
189
1
原创 typescript学习
TS泛型简单来说就是类型参数，在定义某些函数、接口和类时，不写死类型，而是改用类型参数的形式，让类型更加灵活。message?: string;data: T;id: number;// 使用时传入User类型code: 200,data: {id: 1,装饰器的作用，简单来说就是代码复用，和Java里的注解以及Rust里的属性宏类似。把通用的代码封装成装饰器，然后在使用的时候就可以将@xxx添加在方法或者类上，方法和类就得到了加强，特别简洁优雅。
2023-07-05 12:19:02
507
2
原创 vue3相关学习
使用 h() 函数来创建虚拟节点，例如 h(‘div’, {class: ‘container’}, ‘Hello, world’)。
2023-07-05 11:52:10
132
1
原创 webpack学习
webpack是模块打包工具，通过分析模块之间的依赖关系，最终将所有模块的代码打包成一个或者多个代码包，供html直接引用。
2023-06-28 10:44:35
197
1
原创 页面性能监控学习
lighthouse，直接生成了报告，在oppotunities中，会有非常详细的优化建议，会针对每一个优化点给出可行性建议和优化后能提升的时间。根据建议去进行优化工作，就能看到性能在不断提升。performance，能提供各项数据，但是需要自己去根据数据分析相应的优化点。有两种方案可以考虑：performance,lightHouse。
2023-06-27 16:59:43
64
原创 web安全学习
web安全代码注入xss攻击者恶意将代码注入到网页上，其他网页观看者就会受到影响，这类攻击通常包含了js脚本。攻击方式通过修改dom节点或者执行js脚本来攻击网站防御方法最普遍的做法是转义输入输出的内容，对尖括号，引号，斜杠进行转义function escape(str) { str = str.replace(/&/g, "&"); str = str.replace(/</g, "<"); str = str.replace(/>/g
2023-06-21 16:02:10
66
原创 vue学习
响应式原理，MVVMcomputedwatch组件通信，provide,injection生命周期指令routervuex虚拟dom,key作用nexttick $setkeep-alivetemplate 编译原理，diff算法mixinsslotvue.extend,vue.component
2023-06-15 17:16:06
99
1
原创 vue3+ts+vite+element-plus
如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。如果不想用模板，也可以直接运行 npm init vite，然后按照提示操作，可以选择vue,ts。运行 npm install element-plus --save。完成，可以直接在组件中使用el-button验证了。如果想图个简单，直接全局引入UI。
2023-06-15 16:19:01
507
1
原创 JS学习笔记
根据变量类型传递方式，分为基本类型和引用类型基本类型，传递方式是按值传递包括：number,string,boolean,undefined,null后续新加了Symbol,BigInt引用类型，传递方式是共享传递，类型包括：Object（包括:Array,function,Date,Math,RegExp…）
2023-06-13 14:25:36
88
1
原创 【无标题】栈溢出，递归优化
这里写自定义目录标题```javascript在这里插入代码片```function init(m,n,result){ if(m === n){ result.push(m) return result }else{ if(m%n === 0){ result.push(n) return () => init(m/n,n,result) }else{
2022-04-02 20:53:41
89
原创 vue 组件通信
vue 的组件通信是一个开发需要掌握的最基础的技能之一。今天做个小结：1.父传子props接收，2.子传父$emit发事件，3.同时存在的俩兄弟组件eventBus. $emit，4.祖传后代provide&inject，5.状态管理vuex，6.子组件主动去查询父组件变量或者调用事件this. $parent，7.父组件主动查询子组件变量或者调用事件方法this. $children或者this. $refs. childrenName（高版本已经不能用$child
2020-12-10 21:23:59
103
原创 2020-12-08前端学习
一、浏览器渲染过程1. 浏览器的主要结构：2. 浏览器的多进程模型：以chorme为例：Browser进程：浏览器的主进程，负责浏览器界面的显示，各个页面的管理，其他各种进程的管理； Renderer进程：页面的渲染进程，负责页面的渲染工作，Blink的工作主要在这个进程中完成(主要分成render主线程和合成器线程)； NPAPI插件进程：每种类型的插件只会有一个进程，每个插件进程可以被多个Render进程共享； GPU进程：最多只有一个，当且仅当GPU硬件加速打开的时候才会
2020-12-08 20:49:54
201
原创 高频请求时，接口不稳定对页面影响的处理总结
前段时间，BA来了个这样的需求，点击表格某一行的时候，向后台发请求获取行列表数据，并刷新行列表。然后业务大佬就发现问题了。突然某次请求，接口速度慢了后一个请求几秒，页面加载的数据就不对了。终究还是高频率触发事件引发的问题。第一时间，找需求大佬求助，是否可以将电机表格某一行的单击事件改成双击事件。需求大佬和业务沟通之后，业务表示双击是什么鬼，不干！好吧，业务是上帝。思考的时候，看到查询的时候，表格在加载的时候有个局部遮罩。嗯哼，那我在请求的时候，给页面来个全局遮罩，岂不是可以避免问题了。
2020-12-08 20:43:39
1664
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人