- 博客(153)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 RTK(二代redux)和一代redux的对比学习
redux分别定义state状态和reducer函数，reducer函数接收当前的state和action对象。// 定义初始状态count: 0,// 编写reducer函数default:RTK利用createSlice切片来简化action和reducer的创建，在createSlice中定义reducers对象，每个键值对代表一个action类型和对应的reducer函数。一个createSlice切片可以理解为一个业务模块。// 引入创建slice切片的函数。
2024-06-14 16:11:14
693
原创 Vue3.0：前端开发的新纪元，核心特性全览
Vue 3.0 的新特性为开发者提供了强大的工具，使他们能够构建更高效、更可维护的应用程序。从 Proxy API 的使用到 Composition API 的引入，再到模板语法的增强，这些新特性不仅提高了开发效率，也使得 Vue.js 在大型项目中的表现更加出色。随着时间的推移，我们期待看到更多基于 Vue 3.0 的创新应用出现，为前端开发领域带来更多的活力和创新。
2024-06-12 17:01:30
1698
8
原创 H5页面SEO攻略：揭秘meta标签的奥秘
通过本次旅行，我们深入了解了H5页面的meta标签及其在SEO中的重要作用。从认识meta标签的基本概念到掌握其分类和应用场景，再到学习如何优化meta标签以提升网页性能，我们逐步揭开了meta标签的神秘面纱。希望这场旅行能为你提供宝贵的知识和启示，让你在构建H5页面的过程中更加得心应手！
2024-06-04 16:45:27
1301
原创 Set与Map的奇妙世界：他们没那么复杂呀
在JavaScript的世界里，ES6引入了两个非常强大且实用的数据结构：Set和Map。这两个结构为我们的编程生活带来了极大的便利。面试问道二者区别可以用这套顺口溜：Set无序去重忙，Map有序记心上。key莫重复可多样，Value自由任徜徉。性能出众Map强，兼容性好不彷徨。实例清晰增信服，技能精湛显专长。
2024-05-28 14:36:17
686
原创 Javascript函数柯里化的魔法：从新手到专家的进阶指南
函数柯里化是一种将多参数函数转换成一系列使用一个参数的函数的技术。它的主要目的是将复杂的函数调用过程分解成多个简单的步骤，使得代码更加简洁、易读、易维护。通过本文的介绍，相信大家对 JavaScript 函数柯里化有了更深入的了解。函数柯里化不仅可以简化复杂的函数调用过程，还可以实现延迟执行、部分求值和组合多个函数等功能。希望本文能够帮助初级前端更好地理解和应用函数柯里化，提升编码能力。
2024-05-21 09:04:35
461
原创 前端性能大揭秘：优化秘籍攻略
功能：分析网站性能并提供优化建议。网址：https://developers.google.com/speed/pagespeed/insights/前端性能优化是一个不断进化的领域，随着技术的进步，我们有了更多的工具和技术来帮助我们构建更快、更高效的网站。
2024-05-13 09:00:00
889
原创 JavaScript中的上下文：从生活细节看编程艺术
总结起来，JavaScript的执行上下文就像是剧场的运营方式，它管理着每一个细节，确保每场戏都能有序地展开。通过掌握这个概念，我们可以写出更加精确和高效的代码，就像导演精心策划每一幕一样。
2024-05-07 14:49:03
1134
原创 闭包不难懂：一次搞懂底层逻辑与应用技巧
通过理解闭包的工作原理，你可以创造出更加模块化和功能强大的代码，就像是在你的写作中加入了一种新的笔触，使得你的作品层次丰富，意味深长。不要仅仅依赖记忆中的概念，而是要去实践，去体验闭包的力量，并且形成你自己对它的理解。这样，无论何时何地，你都能够运用自如，写出既优雅又高效的代码。
2024-05-07 11:13:54
990
原创 你是否每次面试前都要临时抱佛脚，重温一遍跨域的知识？
你是否每次面试前都要临时抱佛脚，重温一遍跨域的知识？你看了那么多的跨域文章，为什么还要花时间反复的学习这个知识点？你真的是记性不好，学完就忘了吗？想象一下你住在一个小区里，你可以自由地在小区内走动，访问任何一个你想去的地方。但是，如果你想去对面小区找朋友借个充电器，通常会有小区的门禁挡住去路。这个小区的门禁就为了阻止了你直接进入另一个区域，它有效的保障了自己小区内的人员安全，为了防止小偷、抢劫犯、推销人员等等。但是它的缺点也不言而喻，限制了你走亲访友的自由。
2024-05-06 13:24:13
678
原创 redux的核心知识点
中间件：中间件都是用来简化redux的开发，他存在于action和store中间，是对于dispatch方法的包装。例如redux-thunk。Redux核心包：redux是一个非常小的库，他的的核心包只有一些基础的API，例如创建一个redux的存储实例（）、合并多个reducer、合并多个中间件等。这意味着其他的相关逻辑都需要自己编码实现。Redux-thunk中间件：简化redux开发。改造store.dispatch，主要实现了异步请求的支持。
2024-04-03 11:31:29
813
原创 Effect了解
Effect可以理解为暂时跳出React代码，并与外部系统进行同步的一种机制，例如浏览器API、下载文件、网络、第三方插件等。他在每次渲染后执行。
2024-01-30 14:38:57
696
原创 useReducer和useContext的用法
解释：使用第1步创建的Context值LevelContext.Provider来包裹所有的子组件，这样<Section>组件中的任何子组件请求LevelContext时，都。useContext是props传参的另一种用法，他避免了深层嵌套的props和多个相同组件使用的冗余props。父组件和多个子组件都要分别传入相同的props“level”，而使用useContext可以解决这种代码冗余。使用Context Provider包裹他所有的子组件，并提供Context。传递的value值level。
2024-01-26 11:37:16
896
原创 mutation概念与Immer库的使用
const [user, setUser] = useState( {id: '123', name: '张三'} );如上方示例，在react引用state时，无论state的值是什么类型，都要将存在state的js值视为只读的， 也就是不允许修改，如果直接修改了state的值（例如user.name = '李四'），这个操作就制造了一个mutation。在react使用state时，要遵循state的值是不可变的原则！
2024-01-18 10:45:38
1159
原创 react基础入门
从以上概念可知，react组件就是一部分的js逻辑，封装的独立的可复用的代码片段，这样每个片段都可以进行独立的管理，很好的实现了代码的复用。react的核心是封装一个个大大小小的组件（小到一个按钮，大到一个页面）来构建复杂的UI界面，每个组件都是UI的一部分。函数式组件其实就是官网的标准案例，定义一个函数，接受任意的props参数，函数中返回jsx语法的页面UI内容。class组件不同于函数组件的是，class组件会创建对应的实例，因此。，该函数的返回值是JSX语法编写的React元素。
2024-01-12 10:10:53
1506
原创 了解vite构建工具
vite是一个新型的前端构建工具，他主要由两部分组成，开发工具和构建指令。随着前端应用越来越庞大复杂，例如上千个模块，基于js开发的工具（例如webpack、Rollup、Parcel）就会遇到性能瓶颈，而vite就是用来解决这个问题，他的与构建依赖的速度比js打包构建工具的速度快10~100倍。
2024-01-11 10:29:46
898
原创 前端要了解的k8s、CI/CD、Devops概念
综上，可以基于docker、k8s、gitLab CI/CD打造一套完整的自动化构建部署流程。可参考CI/CD系列 | 一步上手Gitlab CI/CD - 掘金。
2024-01-10 17:24:19
1275
原创 前端开发Docker了解
docker主要解决了最初软件开发环境配置的困难，完善了虚拟机部署的资源占用多，启动慢等缺点，保证了一致的运行环境，可以更轻松的维护和扩展。docker在linux容器的基础上进行了进一步的封装，提供更简单易用的接口。把自己的应用放入容器，应用在docker的虚拟容器里运行，就像在真实的物理机上运行一样，容器还可以进行版本管理、复制、分享、修改等，像管理普通的代码一样简单。
2024-01-10 09:57:00
1850
原创 了解nginx
nginx是一个轻量级、高性能的HTTP和反向代理web服务器，同时也是一个通用代理服务器（TCP、UDP、IMAP、POP3、SMTP）。
2024-01-05 17:24:25
1164
原创 了解单元测试
属于黑盒测试。主要通过测试框架，站在用户测试人员的角度，模拟用户的操作进行页面功能的验证，不管内部实现机制，完全模拟浏览器的行为。（但对于前端开发，E2E测试用的不多，通常都是做单元测试）常用的框架有 Puppeteer、Cypress、Playwright、Selenium 、cucumber、TestCafe等。
2024-01-05 10:33:49
1546
原创 常用js工具库整理
处理日期和时间安装 | Day.js中文网Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。
2024-01-04 11:37:04
1306
原创 了解eslint的使用
eslint除了可以在package.json文件中eslintConfig属性中配置，也可以使用单独的配置文件，配置文件分为多种，例如：.eslintrc.js、.eslintrc.cjs、.eslintrc.yaml、.eslintrc.json等。.eslintignore（默认文件）
2023-11-15 20:25:00
481
原创 Vue-router源码-各原理简单总结
初始化之前，首先要通过import VueRouter导入，说明VueRouter也是一个对象。通过源码看到，在new Vue()的时候，将实例化的router对象传入，然后与vuex同样的原理，利用data实现响应式，在Vue.use调用router对象的install方法时初始化，注册插件，将插件存入installedPlugins中保证不会重复注册，挂载到全局，同样也是借助beforeCreate钩子函数实现。
2023-11-03 10:30:53
265
原创 Vuex源码-各原理简单总结
Vuex就是一个构造函数，他拥有install方法和Store类这两个属性。在vue初始化调用new Vue的时候，将store作为参数传入，然后调用Vue.use()实际是调用install方法将store这个实例挂载到全局，从而可以保证全局只有一个唯一的store对象。Store这个类拥有commit和dispatch这些方法，同时将用户传入的state包装成data，从而在vew Vue()的过程中实现了响应式。
2023-11-02 16:48:26
342
原创 Vue源码-各实现原理简单总结
通过js的层层封装，互相调用，实际就是利用js的Object.defineProperty()方法，然后实现了一个发布订阅模式。整体逻辑是在vue初始化的时候，通过Object.defineProperty()重写数据的set、get方法。在每个调用到变量的地方（例如vue的模板字符串{{ }}），会触发重写的get方法，该方法增加一个观察者；在每次修改变量值的时候，会触发重写的set方法，该方法会通知所有的观察者更新视图。详细源码解读可查看。
2023-11-02 10:35:38
317
原创 Vue源码总结
调用initState初始化state, props, methods, computed, watch等，将data, props都挂载到vm._data, vm._props上，设置访问数据代理，访问this.xx就是访问vm.xx；调用initLifecycle初始化vm.$parent, vm.$root, vm.$children, vm.$refs 等属性值；8，eventsMixin中，在Vue原型上定义$on, $once, $off, $emit 事件方法，并返回vm。
2023-10-26 14:40:24
263
原创 包管理工具与配置文件package.json
设置npm包在什么系统中使用，在什么系统中禁用（eg：{ "os": ["darwin", "linux"] } // 适用的操作系统 { "os" ["!- 具体环境（node和npm）版本（例如："engines": { "node": ">=8.10.3 =6.9.0" }）因此会衍生出很多新的包管理工具，例如yarn。- 和OS配置类似，更准确的限制用户的安装环境（eg："cpu" ["x64", "AMD64"] // 适用的cpu）
2023-10-24 14:39:02
1743
原创 自定义指令
通常会在main.js中注册全局的自定义指令。主要语法Vue.directive(指令名，{ 钩子函数名称: 钩子函数 })bind - 只调用一次，在指令第一次绑定到元素的时候调用。通常可用来做一些初始化操作unbind - 只调用一次，指令与元素解绑时调用inserted- 被绑定元素插入父节点时调用（只能保证父节点存在，但不一定插入到文档中）update - 所在的组件的虚拟dom更新时候调用（但是可能发生在他的子组件虚拟dom更新前）
2023-09-20 11:01:01
496
原创 MV*结构的发展
Model模型，View视图，Controller控制器MVC就是将最原始的繁琐流程进行模块化，Model负责从数据库取数据，View负责展示获取的数据，用户在View进行操作，Controller处理用户交互，负责主要的业务逻辑处理（例如用户点击事件，Controller修改Model的数据，然后View通过观察者模式检测到Model数据发生变化，然后刷新页面）
2023-09-18 14:08:00
180
原创 vue中的ref
this.$refs是一个对象，他是当前组件使用ref注册过特性的所有dom元素和子组件的实例。也就是通过ref来注册一个元素通过this.$refs来访问注册的dom元素或子组件实例1，作用在当前页的上，获取的是当前页面节点的dom元素，this.$refs.refName，2，作用在子组件上，获取的是子组件对象，调用方式也是this.$refs.refName3，与v-for一起使用，动态实现循环列表类的标签。
2023-09-14 14:07:26
565
原创 Less的导入@import特点
例如：@import (less, optional, reference) "common.less";例如：@import (multiple) "common.less";例如：@import (reference) "common.css";（1）如果后缀是.css，他会被视为css文件且@import语句保持原样。（3）如果没有后缀，则会附加.less并视为less导入。（2）如果后缀是任何其他扩展名，都会被视为less导入。仅在文件存在时导入该文件。
2023-09-06 09:01:03
437
原创 Less的强大变量用法
说明：即动态定义要引用的变量名称引用：还是通过@符号，但是引用变量的变量，需要两个@。示例@wd: 100px;// 定义labelWd变量需要引用的变量名为wd// 引用.title {// 即@wd > 100px;
2023-09-01 10:10:01
2671
原创 SASS常用内置函数
space-空格，comma-逗号，slash-斜杠。$weight表示color1颜色的占比。color1和color2颜色占比混合。支持传入多个key值获取深层的值。相同的属性取$map2的值。
2023-08-31 10:49:33
1618
原创 SASS的@规则
sass扩展了import导入，对于css，@import导入在页面加载的时候去下载导入的外部文件，而sass的导入，在编译成css文件的时候就将外部的sass文件导入合并编译成一个css文件。他支持同时导入多个文件；支持在嵌套样式中导入文件。
2023-08-29 11:54:31
1365
原创 数据类型与运算
Less的数据类型概念比较模糊，只支持一些基本的数据类型，例如数字、字符串、布尔值、颜色数字字符串（分为有引号和无引号布尔值颜色。
2023-08-29 09:55:31
116
人工智能chatgpt学习宝典：原理、实践、案例一网打尽
2024-04-03
echarts bar series下的label position位置实现问题
2019-04-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人