- 博客(19)
- 收藏
- 关注
RSS订阅原创 vuex的模块化之间数据交互与命名空间的使用
namespaced 命名空间引用两位大佬的解释1、默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性。2、vuex中的store分模块管理，需要在store的index.js中引入各个模块，为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，之后在不同页面中引入getter、actions、mutations时，需要
2023-03-08 18:57:17
1109
原创 微信小程序behavior定义事件绑定this指向-节流示例
一、behavior的用处在behavior的definitionFilter，可以进行一些初始化值的添加操作，并且能够添加methods，这也是进行绑定事件的重要部分defFields.methods.bindDefFields = (function (defFields) { let throttleObj= defFields.throttle || {}; //获取组件实例添加的throttle对象，为他定义的属性handler设置节流 let throttleKeyList =
2021-07-18 13:02:30
542
1
原创 redux的异步处理与中间件
三、redux的异步处理像vuex提供了异步处理的过程actions，但在redux抛发后直接就让reducer进行处理修改store，貌似并关于异步的处理但是redux提供了一个非常优秀的机制，中间件，中间件放在事件抛发与事件接收之间，添加了一层拦截，他通过抛发的参数进行一些处理，最后将结果再次抛发出去。redux-thunk他是一个专门处理redux异步的中间件他的结构是四层的闭包函数，运用柯里化思想，第一层用于传入默认值，第二层传入store，可以解构出dispatch、getState，第
2021-06-20 17:01:55
562
原创 redux模块化
二、 redux模块化对于大型项目来说，单文件不利于协作开发，代码也比较混乱难以维护，于是我们想办法将redux进行模块化拆分拆分的思想应该是将reducer、action进行分类，将他们放在各自文件夹中combineReducers合并子reducer在进行项目的功能划分后，通常会针对每一模块创建自己的redux模块，这个模块具有自己独立的reducer、action、与切片state，用于管理自己的模块并将这个状态存储在全局中子reducer最终要通过combineReducers合并成成一个
2021-06-20 17:01:13
668
原创 react计算属性创建的几种方法 memoize-one缓存
1、计算属性react中实现类似vue计算属性的方法，用于props与state的计算求值1、类的get方法设置可以使用原生的get方法来实现类似计算属性的获取，它用于直接获取props值的计算属性get getCount(){ //get方式使用计算属性 return this.props.count*2}render() { return ( <p>{this.getCount}</p> )}2、getDeriv
2021-06-20 16:59:46
694
原创 react增强组件方法 高阶组件HOC
二、高阶组件HOCHOC是react对组件复用部分进行抽离的高级技术，HOC是一种设计模式HOC是一个函数，他接受一个组件并且返回一个组件，接收的是一个可复用组价，通过对他的功能增强，返回的新组件拥有更高的专用性，同时又不会影响可复用组件高阶组件实际上是一个函数，这个函数接收一个组件，进行增强功能后在导出一个组件HOC与mixin结果来看，HOC达到了和mixins相同的作用，HOC是将中间进行一层层的包装进行增强，而mixin则是将方法和属性混入在组件中对于被包裹的组件时不会感知到高阶组件的存
2021-06-20 16:58:14
277
原创 react增强组件方法 渲染属性RenderProps
一、渲染属性RenderProps渲染属性是一种React组件之间使用一个值为函数的props共享代码的简单技术简单来说，我在父组件中向子组件添加了一个函数，子组件通过函数的调用传入一个值或者模板，来调用父元素方法，或者将模板插入组件使用案例在常规的组件应用时有一个能够捕获鼠标位置的类组件**<catchLoca>他的状态只能他自己调用，而我想要真正应用的是一个能够让鼠标移动后让一个背景块跟随，这时候只能通过向<catchLocal>**组件中添加一个新的逻辑与标签，可以根
2021-06-20 16:56:59
349
原创 vue根据不同指令配置环境变量 结合vue-cli-service模块
环境变量模块将不同的测试环境、开发环境文件存储不同的配置，来实现不同的操作，在不同的环境下变量变为baseURL，如axios的baseURL的配置基于vue-cli-service模块来进行环境的配置当执行 vue-cli-service [参数] 会执行打包文件，根据参数的不同会去读取指定的文件，传入不同的环境变量默认的环境变量配置文件.env 全局默认配置文件，无论什么环境都会进行加载合并.env.development 开发环境下的配置文件 对应的指令 vue-cli-service
2021-06-12 13:28:01
1429
原创 vuex状态管理模块化的搭建流程
16、状态模块化为了合适分工，能够进行明确的个人状态管理1、创建store模块模块1const state = { //创建状态存储 name:"product",}const mutations = { //创建状态修改函数 setName(store) { store.name="product更改" }}export default { //导出store模块配置 namespaced: true, //为模块添加命名空间，这样在外部
2021-06-09 22:06:34
185
原创 vue生命周期的浅析
1、vue的生命周期也是vue的自带钩子函数生命周期中可以进行操作的节点首次可以进行ajax通信的节点 — beforeCreate获取vue属性、方法的节点 — created设置初始化属性与方法 — created子组件peops获取父组件传入的属性节点 — created获取第一次渲染的dom元素 — mounted获取当前组件中注册(ref)的子组件或元素 — mountedajax的最佳通信时机 — mounted获取更新前dom元素的节点 — bef
2021-06-07 20:56:18
112
原创 mongoose模块的简单使用
mongoose模块的使用安装npm i mongoose --save1、连接数据库链接后面追加库名const mongo = require("mongoose");;(async function() { let result =await mongo.connect("mongodb://127.0.0.1:27017/dbname"); if (!result) return;})();2、设计数据库结构let userSchema = mongo.Schem
2021-05-25 13:39:15
229
1
原创 mongodb 的查询指令，find的简单应用
简单查找全部db.find() / db.find({})查询全部条数字段条件简单查找db.find({age:10})条件查找age为10的字段字段的筛选db.find({},{age:1})查找全部条数，并且值保留age字段，会自带_id字段，因为数据库的默认添加db.find({},{_id:0,age:1}) 去掉_id字段，只保留age字段db.find({},{age:0,sex:0}) 过滤掉age与sex字段，保留剩余字段db.find({},{age:
2021-05-24 19:53:57
574
原创 单例模式在JavaScript与TypeScript中的几种设计方式
1、单例模式为什么要使用单例模式？在某些情况下，在处理多个模块的数据时，他们没有什么联系，但是我们想要用一个公共的部分来进行储存状态或者数据。为了保证这些模块之间能够稳定统一，那就要求这个公共部分是唯一的，各个模块之间所获取的数据与状态才能够保持一致这时候我们使用到了单例模式，顾名思义，就是单个实例。单例模式的特点单例模式一般用在es6类中单例在全局的每个位置都可以调用到单例自始至终都是初始创建的实例，无法被修改、覆盖ts单例模式设计export default class Modle
2021-05-14 20:12:24
426
原创 typescript 类型 下篇
12、对象 object规定变量类型时对象型他还能规定对象中的类型，规定有哪些属性对象的属性如果是可选用 ?如果不确定要添加的属性可以用[]let a:object; //a只能是对象，至于里面有几个对象、对象属性的类型都不关心let a1:{name:string,age:number}; //不仅声明了a1是对象并且规定a1对象的的属性有哪些，属性的类型也规范。let a2:{name:string,age:number,tel?:number}; // ? 添加可选属性tellet a
2021-05-14 08:05:59
104
原创 javascript canvas 画布的简单应用
canvas1、创建2d画布canvas=document.createElement("canvas");canvas.width=400; //画布不能通过style宽度、高度样式设置，会拉伸比例canvas.height=300;document.body.appendChild(canvas);ctx = canvas.getContext("2d"); //制定画布为2d画布2、canvas绘制一个矩形fillStyle 设置前景色用于填充图形，他是一个可读可写的属性fill
2021-05-12 20:01:41
596
原创 typescript 类型 上篇
1、自动类型变量没有声明类型，在第一次赋值时会按照值的类型设置变量类型这会导致编译过程再去判断，影响效率自动类型必须要在第一次声明的时候就进行赋值，如果只声明，变量会被转化成any类型/ let names = "haofusheng"; //转化成string类型// names="dly"; //不报错// names=23; //报错// let names1; //转化成any类型// names1="haofusheng"; //不报错// names1=23; //不报错
2021-04-29 22:04:00
99
原创 TS 接口 interface 的用法
接口接口就相当于是一个规范，凡是使用这个接口，就必须遵循这个接口的规范，这样便于类型的统一接口并不会影响、操作内部的值，他只是检查值是否符合规范语法interface声明一个接口interface userPort { //声明一个接口userPort id:number; names:string; age?:number; getAge():void;}注意接口的每个属性要用 ; 来分开应用函数参数的限制类似于自定义类型interface use
2021-04-28 21:24:05
2437
原创 TS 抽象类 abstract 的使用
抽象类特点抽象类并不能进行实例化他规范了继承他的子类必须拥有抽象属性与抽象方法他提供了抽象属性与抽象方法来让继承他的子类重写，来实现不同的处理方式他的保护属性与方法可以被每个子类继承来实现继承子类的公有部分，这部分方法属性处理的是相同的任务它类似于一个工厂，每个子类都可以去他那里继承公有的部分，但是也必须拥有它私有的部分，每个继承的子类都有相似的部分,又有他们独特的部分定义抽象类abstract class Role { //定义抽象属性姓名 abstract name:st
2021-04-28 21:19:43
5262
1
原创 js的四种模块化引入规范
1、AMDAMD是一种加载方式，异步加载模块，不占用主进程的代码执行AMD规范依赖于requirejs，来完成模块放在数组一块加载AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块，预加载AMD的执行需要引入require.js文件APIdefine定义模块他有两个参数，第一个用于声明需要加载的依赖模块，他是一个数组；第二个是模块加载成功后的回调函数，这个回调函数相当于这个模块文件的代码区域，该模块的代码是在这个函数中添加的。回调函数的参数依次是每个加载的依赖模块require.
2021-04-27 23:00:23
1701
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人