- 博客(104)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 redux的核心知识点
中间件：中间件都是用来简化redux的开发，他存在于action和store中间，是对于dispatch方法的包装。例如redux-thunk。Redux核心包：redux是一个非常小的库，他的的核心包只有一些基础的API，例如创建一个redux的存储实例（）、合并多个reducer、合并多个中间件等。这意味着其他的相关逻辑都需要自己编码实现。Redux-thunk中间件：简化redux开发。改造store.dispatch，主要实现了异步请求的支持。
2024-04-03 11:31:29
681
原创 Effect了解
Effect可以理解为暂时跳出React代码，并与外部系统进行同步的一种机制，例如浏览器API、下载文件、网络、第三方插件等。他在每次渲染后执行。
2024-01-30 14:38:57
421
原创 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
471
原创 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
923
原创 react基础入门
从以上概念可知，react组件就是一部分的js逻辑，封装的独立的可复用的代码片段，这样每个片段都可以进行独立的管理，很好的实现了代码的复用。react的核心是封装一个个大大小小的组件（小到一个按钮，大到一个页面）来构建复杂的UI界面，每个组件都是UI的一部分。函数式组件其实就是官网的标准案例，定义一个函数，接受任意的props参数，函数中返回jsx语法的页面UI内容。class组件不同于函数组件的是，class组件会创建对应的实例，因此。，该函数的返回值是JSX语法编写的React元素。
2024-01-12 10:10:53
1125
原创 了解vite构建工具
vite是一个新型的前端构建工具，他主要由两部分组成，开发工具和构建指令。随着前端应用越来越庞大复杂，例如上千个模块，基于js开发的工具（例如webpack、Rollup、Parcel）就会遇到性能瓶颈，而vite就是用来解决这个问题，他的与构建依赖的速度比js打包构建工具的速度快10~100倍。
2024-01-11 10:29:46
533
原创 前端要了解的k8s、CI/CD、Devops概念
综上，可以基于docker、k8s、gitLab CI/CD打造一套完整的自动化构建部署流程。可参考CI/CD系列 | 一步上手Gitlab CI/CD - 掘金。
2024-01-10 17:24:19
768
原创 前端开发Docker了解
docker主要解决了最初软件开发环境配置的困难，完善了虚拟机部署的资源占用多，启动慢等缺点，保证了一致的运行环境，可以更轻松的维护和扩展。docker在linux容器的基础上进行了进一步的封装，提供更简单易用的接口。把自己的应用放入容器，应用在docker的虚拟容器里运行，就像在真实的物理机上运行一样，容器还可以进行版本管理、复制、分享、修改等，像管理普通的代码一样简单。
2024-01-10 09:57:00
1165
原创 了解nginx
nginx是一个轻量级、高性能的HTTP和反向代理web服务器，同时也是一个通用代理服务器（TCP、UDP、IMAP、POP3、SMTP）。
2024-01-05 17:24:25
978
原创 了解单元测试
属于黑盒测试。主要通过测试框架，站在用户测试人员的角度，模拟用户的操作进行页面功能的验证，不管内部实现机制，完全模拟浏览器的行为。（但对于前端开发，E2E测试用的不多，通常都是做单元测试）常用的框架有 Puppeteer、Cypress、Playwright、Selenium 、cucumber、TestCafe等。
2024-01-05 10:33:49
1147
原创 常用js工具库整理
处理日期和时间安装 | Day.js中文网Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。
2024-01-04 11:37:04
934
原创 了解eslint的使用
eslint除了可以在package.json文件中eslintConfig属性中配置，也可以使用单独的配置文件，配置文件分为多种，例如：.eslintrc.js、.eslintrc.cjs、.eslintrc.yaml、.eslintrc.json等。.eslintignore（默认文件）
2023-11-15 20:25:00
309
原创 Vue-router源码-各原理简单总结
初始化之前，首先要通过import VueRouter导入，说明VueRouter也是一个对象。通过源码看到，在new Vue()的时候，将实例化的router对象传入，然后与vuex同样的原理，利用data实现响应式，在Vue.use调用router对象的install方法时初始化，注册插件，将插件存入installedPlugins中保证不会重复注册，挂载到全局，同样也是借助beforeCreate钩子函数实现。
2023-11-03 10:30:53
174
原创 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
214
原创 Vue源码-各实现原理简单总结
通过js的层层封装，互相调用，实际就是利用js的Object.defineProperty()方法，然后实现了一个发布订阅模式。整体逻辑是在vue初始化的时候，通过Object.defineProperty()重写数据的set、get方法。在每个调用到变量的地方（例如vue的模板字符串{{ }}），会触发重写的get方法，该方法增加一个观察者；在每次修改变量值的时候，会触发重写的set方法，该方法会通知所有的观察者更新视图。详细源码解读可查看。
2023-11-02 10:35:38
153
原创 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
189
原创 包管理工具与配置文件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
522
原创 自定义指令
通常会在main.js中注册全局的自定义指令。主要语法Vue.directive(指令名，{ 钩子函数名称: 钩子函数 })bind - 只调用一次，在指令第一次绑定到元素的时候调用。通常可用来做一些初始化操作unbind - 只调用一次，指令与元素解绑时调用inserted- 被绑定元素插入父节点时调用（只能保证父节点存在，但不一定插入到文档中）update - 所在的组件的虚拟dom更新时候调用（但是可能发生在他的子组件虚拟dom更新前）
2023-09-20 11:01:01
257
原创 MV*结构的发展
Model模型，View视图，Controller控制器MVC就是将最原始的繁琐流程进行模块化，Model负责从数据库取数据，View负责展示获取的数据，用户在View进行操作，Controller处理用户交互，负责主要的业务逻辑处理（例如用户点击事件，Controller修改Model的数据，然后View通过观察者模式检测到Model数据发生变化，然后刷新页面）
2023-09-18 14:08:00
62
原创 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
274
原创 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
216
原创 Less的强大变量用法
说明：即动态定义要引用的变量名称引用：还是通过@符号，但是引用变量的变量，需要两个@。示例@wd: 100px;// 定义labelWd变量需要引用的变量名为wd// 引用.title {// 即@wd > 100px;
2023-09-01 10:10:01
1643
原创 SASS常用内置函数
space-空格，comma-逗号，slash-斜杠。$weight表示color1颜色的占比。color1和color2颜色占比混合。支持传入多个key值获取深层的值。相同的属性取$map2的值。
2023-08-31 10:49:33
1013
原创 SASS的@规则
sass扩展了import导入，对于css，@import导入在页面加载的时候去下载导入的外部文件，而sass的导入，在编译成css文件的时候就将外部的sass文件导入合并编译成一个css文件。他支持同时导入多个文件；支持在嵌套样式中导入文件。
2023-08-29 11:54:31
992
原创 样式继承extend
less是在定义新选择器的时候继承，而sass是在选择器内部继承。新选择器:extend(要继承的选择器)@extend 要继承的选择器;
2023-08-25 09:30:18
64
原创 tsconfig.json
tsconfig.json所在位置是ts项目的根目录，他的主要作用是自定义配置不同的选项来告诉编译器如何编译当前项目。
2023-08-17 17:22:18
231
原创 模块与命名空间
ts中的模块与ES6的模块用法基本一致，通过export导出模块，import导入模块。也可以将一个单独的.ts文件作为一个模块。可以使用as关键字在导出、导入时重命名。
2023-08-16 15:19:41
82
原创 了解HTTPS的三次握手
客户端收到响应后，根据CA机构提供的整数公钥来解密证书中的签名，确定证书的真实有效性，并校验一些其他信息（例如请求的域名是否与证书中一致），所有校验通过后，将。三次握手成功后，客户端和服务器后续的每次请求，都将使用前三次的随机字符串A、B、C，使用加密算法c，生成一个对称秘钥symmetric_key，来进行加密解密。服务器收到请求后，将字符串A存储到本地，并从客户端支持的加密算法中。HTTPS也有三次握手，不同于HTTP的三次握手。服务器收到加密后的secret_key值后，用。，并使用证书中的公钥。
2023-08-11 08:51:26
577
原创 XSS和CSRF
如果登陆了一个网站，不小心又打开另一个恶意网站，如果没有安全策略，则他可以对已登录的网站进行任意的dom操作、伪造接口请求等，因此安全策略是必要的；浏览器的同源策略限制了非同源的域名之间不可以对DOM进行读写操作不可以读取非同源的cookie、indexDB、localStorge等数据与资源。
2023-08-10 10:20:17
1352
人工智能chatgpt学习宝典：原理、实践、案例一网打尽
2024-04-03
echarts bar series下的label position位置实现问题
2019-04-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人