- 博客(81)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 js中的数据类型转换及变量提升
复习JavaScript 高级第三天（数据类型转换、变量提升）// --------数据类型转换的4大核心标准--------/* * 把其他数据类型转为 Number 类型 1、需要特定转化为 Number 的 + Number(val) + parseInt/parseFloat(val) 2、隐式转换（浏览器内部默认要先转为 Number 再进行计算的） + isNaN(val) + 数学运算（特殊情况：+
2020-11-25 10:16:22
179
2
原创 Promise中的then方法详解
Promise详解（第15天）/* * 创建Promise实例的时候得传一个函数 executor,并且这个函数接收两个参数 + resolve函数：将实例的状态从 pending 修改为 fulfilled/resolved，同时将实例的值改为执行这个函数时传递的实参 + reject函数：将实例的状态从 pending 修改为 rejected，同时将实例的值改为执行这个函数时传递的实参 每一个Promise实例都有两个重要的属性： + [[Pro
2020-10-29 16:48:18
4299
3
原创 关于原型和原型链，你必须要知道的
学习JavaScript高级第九天（面向对象、原型、原型链）// ----------面向对象编程--------------/* * OOP (Object Oriented Programming): 面向对象编程 + java + javascript + c# + python + ... * POP (Procedure Oriented Programming): 面向过程编程 + c + ...
2020-10-21 16:39:09
171
2
原创 闭包的高级应用
学习JavaScript高级第八天(闭包高级应用)1、闭包应用值惰性函数和柯理化函数/* * JS高阶编程函数：惰性函数 + 懒 + 能只执行一次的绝不会执第二次*/// 这样写，每调用一次都要处理兼容的问题：这完全没有必要，第一次执行知道了兼容情况，后期再调用（浏览器也没余刷新、也没有换浏览器）兼容检验是没有必要的/* function getCss(ele, attr){ if(window.getComputedStyle) { return win
2020-10-20 16:14:25
221
2
原创 Vue3+ts实现简单版本modal
项目中要求做一个询问弹框，有点类似ant-design-vue中的modal通过API调用的那种效果。虽然使用的ui库arco-design-vue中的modal也能满足我的需求，但是我懒得改样式，索性自己写一个阉割版的好了。实现的这个modal只支持通过API来进行调用。
2023-09-25 17:11:20
342
原创 前端优化渲染：长列表渲染
众所周知，DOM多了之后，页面会变得很卡顿。有时候又不得不渲染很多数据，比如长列表，这时就需要前端做一些渲染优化了。
2023-09-15 15:12:50
365
2
原创 arco-design-vue的tree组件实现右击事件
业务中需要使用到tree组件，并且还要对tree实现自定义鼠标右击事件。在arco-design-vue的文档中，可以明确的看到，tree组件并没有右击事件的相关回调，那要如何实现呢？？？这里提供两种思路：1、使用插槽，在插槽中对DOM实现contextmenu事件（会有问题，下面会说）；2、使用事件冒泡机制，对tree实现contextmenu事件
2023-09-05 09:13:07
628
原创 Vue3+ts封装一个简单版的Message组件
项目中需要使用信息提示框的功能，ui组件库使用的是字节的arco-design-vue。看了一下，现有的Message不满足要是需求，直接使用message组件的话，改样式太麻烦。Notification组件样式倒是符合了，但是弹出的位置不符合，查看了一下相关api，这位置不支持"top"。既然如此，那就去查看它俩的源码，找到我想要的，修修改改，自己也写一个，嘻嘻。
2023-09-01 09:40:52
703
原创 原生JS实现滑块功能
原生JS实现滑块功能前两天用到ant-design的滑块组件，觉得很有意思，就自己简单实现了一下。效果图如下：html代码<div class="box"> <div class="length"></div> <div class="tip"></div> <div class="light"></div> </div>样式.box { padding:
2022-04-21 11:22:11
2165
原创 原生JS封装Modal弹框
使用原生JS(es5)封装一个属于自己的Modal弹框效果图展示主要代码function Modal(options) { options = Object.assign({ title: '标题', backgroundColor: '#fff', // 背景颜色 mask: true, //是否显示遮罩层, content: '弹框内容', cancelText: '取消',//取消按钮文字 okText: '确认'
2022-04-12 17:19:00
2561
原创 关于Vue3的一个奇怪的警告：Failed to resolve component: dir If this is a native custom element
vue3报警告：Failed to resolve component: dir If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.今天运行项目的时候发现项目一直在报一个警告，这个警告网上都找不到你敢信报错截图后来还是有人提醒我，全局搜一下这个 ”dir“，结果真让我找到了，搞半天是我在组件中误将div写
2022-04-07 11:24:23
11850
11
原创 js封装在固定区域创建DIV并拖动
需求：在给定的区域(DOM)内实现鼠标按下拖动选中区域，并且选中的区域可以拖动实现效果鼠标按住选中区可滑动JS版本class createCanvas { constructor(options) { options = Object.assign( { container: document.body, // 父容器DOM， 默认是body lineColor: "black", // canvas中画的线的颜色 re.
2022-04-01 19:16:09
524
1
原创 本地代码提交到码云
本地代码提交到码云远程仓库创建好了，本地代码也写好了，准备提交。然后考验来了1、2步骤没有问题，走完了。当执行第三步的时候，出现了一些列问题直接执行 git push系统会提示，让你执行它这个 git push --set-upstream origin master执行完之后，顺利的话就能提交了，不顺利的话就继续报错不顺利了说你仓库地址 403，咋办。1、如果是用 ssh，那么没办法，只能去配置公钥了。具体怎么配置我这就不展开说了。重点说用 https的2、用https的：一
2022-03-15 18:01:50
1270
原创 把JSX语法转为虚拟DOM对象
把JSX语法转为虚拟DOM对象一、JSX虚拟DOM渲染为真实DOM的原理和步骤基于babel-preset-app把jsx语法变为React.createElement的模式=>凡是遇到元素标签（或者组件）都要createElement=>前两个参数是固定的：标签名（组件名）、属性对象（没有就是null），第三个及以后的参数是子元素基于React.createElement方法的执行，创建出虚拟DOM对象（JSX对象）=>首先是一个对象=>type属性：存储的是标签名
2021-08-16 09:34:12
391
原创 微信小程序——自定义组件时，编译报`Component is not found in path ‘...‘`
微信小程序——自定义组件时，编译报Component is not found in path '...'今天在学习小程序的时候，发现它给我报了这个错可是我明明在那个路径下有这个文件/组件的呀？后面我去cpn1.js查看，当我把那个options属性删掉之后，就好了！好了！了！果然，前端开发这条路，道阻且长呀！继续加油！！！！...
2021-07-03 09:52:10
830
2
原创 ReactDOM.render的渲染原理
ReactDOM.render的渲染原理在react项目中，之所以可以在函数/组件中直接写模板结构，是因为最后babel都会帮我们把这些模板转译成 React.createElemen(config) 的形式，这也就是为什么我们在每一个组件中明明没有主动调用React，但是却要引入react的原因。// 举例import React from 'react';import ReactDOM from 'react-dom';let h = React.createElement( 'div'
2021-05-25 10:17:55
350
原创 简单封装数据类型检测方法toType和循环遍历方法each
简单封装数据类型检测方法toType和循环遍历方法each数据类型检测方法toType实际项目开发时，往往需要对数据进行数据类型检测，根据检测的结果的不同从而进行不同的操作。但是目前已有的检测方法都要么不够全面，要么不够简洁，所以我们自己简单的封装一个检测数据类型的方法。（可能也不够全面，单足够用了）function toType(data) { if (typeof data !== 'object') return typeof data; if (typeof data
2021-05-13 11:36:12
635
原创 JS中关于数组和对象的深浅拷贝
数组与对象的深浅拷贝浅拷贝：只会拷贝数组/对象的第一层级深拷贝：只要有深层嵌套，都拷贝一些浅拷贝的方法let arr = [1, 2, 3, 4], newArr; // 数组浅拷贝 // 1.展开运算符 ... newArr = [...arr]; // 2.使用数组合并 concat 会返回一个新的数组 newArr = arr.concat([]); // 3.使用数组截取 slice newArr = arr.slice(0, arr.length
2021-05-13 11:24:29
130
原创 JS中关于数组对象的深浅合并
数组对象的深浅合并浅合并：只会把没有冲突的属性合并上，对于有冲突的属性，后者会完全覆盖前者的属性值，且只会合并第一层深合并：对于有冲突的属性，会把将两个属性值进行合并，而不是简单的让谁覆盖谁function deepMearge(obj, target={}) { // target 替换 obj let p = {}; // 是为了调用 Object.prototype.toSring方便 for(let key in target) { let is
2021-05-13 11:17:00
569
原创 观察者模式原理
观察者模式原理观察者模式其本质还是事件池机制。学了发布订阅之后，可以将二者进行简单的对比，方便记忆。发布订阅模式：只有一个类 Publish，该类提供了 on、off、fire三个方法，分别用来 添加、删除、通知 事件。在发布订阅中，我们往事件池中添加的都是一个个具名方法（函数）。function Publish() { // 事件池中存放的是一个个方法 this.fns = []; } Publish.prototype = { constrctor: Publ
2021-05-07 14:26:20
364
原创 JS中常见的几种设计模式
JS设计模式JS设计模式：是一种思想，更规范更合理地去管理代码【方便维护、升级、扩展、开发】单例模式 && 命令模式1、 最早期的模块化编程思想【同样的还有：AMD、CMD、CommonJS、ES6Module】2、 避免全局变量的污染3、 实现模块化之间的相互调用【提供了模块导出的方案】4、在实际开发中，还可以基于命令模式管控方法的执行顺序，从而有效的实现出对应的功能【命令模式：只导出一个方法，这是在该方法中将其余方法按照一定顺序去执行】// 单例设计模式 // 例如
2021-05-07 10:59:10
348
原创 简单实现EventBus
简单实现EventBus我们知道，基于DOM2级绑定事件是基于事件池的机制，可以给同一个元素的同一个行为绑定多个不同的方法，当该行为触发时，绑定的这些方法会被依次执行。但是，DOM2级事件绑定只能对元素的默认行为进行方法绑定，例如：click、keydown、scroll等原生默认行为。// 基于事件池机制实现事件绑定，可以绑定任意自定义事件(function(){ function Sub(){ this.listeners = {} } Sub.protot
2021-05-06 15:55:25
194
原创 js实现防抖和节流
利用闭包机制简单实现函数防抖和节流防抖 debounce：在规定的时间内只会执行一次 function debounce(fn, time) { time = time ? time : 500; var timer; return function (...params) { var that = this; // 每次执行之前判断是否已经有定时器了，如果有了就先清除定时器再重新创建定时器 timer ? clearTimeout(ti
2021-05-06 15:14:51
101
1
原创 Vuex原理理解及实现
Vuex是什么？官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。个人理解：Vuex就是用来进行组件之间进行数据交换的第三方 “仓库”，组件可以把想要共享的数据存放在这里面，别的组件想要的之后直接调取即可。Vuex原理个人理解它就是通过 全局混入 一个对象，在该对象的 beforeCreate 声明周期函数中，对每一个组件添加了一个属性 $store，值就是使用Vuex时所创建的
2020-12-03 16:18:58
398
原创 vue学习之父子组件及插槽
父子组件父子组件是组件之间的一种关系，这个关系并不是绝对的，而是相对的。通常，如果在A组件中 使用 了B组件，那么就称A组件为B组件的子组件，响应地，B组件就称为A组件的子组件。<!-- A组件 --><template> <div> <!-- 3、使用 --> <B></B> </div></template><script>/* 在工程化项目中，组件想
2020-11-30 10:38:04
1391
原创 vue学习之组件的使用
组件组件可以扩展 HTML 元素，封装可重用的代码。vue中的组件分为全局组件和局部组件全局组件全局组件：Vue.component(组件名（不能是已经存在的html标签），{配置项})在配置项中，除了没有 el项 和要有 template项 外，其他的跟vm一样 // 全局组件 Vue.component('my-h1', { data() { // 组件中的data必须是一个函数(函数返回一个对象)：是为了保证数据的独立 return {
2020-11-25 10:36:10
80
原创 vue的DOM更新
vue的DOM更新vue的DOM更新是一个异步操作：可以提高编译效率，避免性能浪费。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{name}}</h1> <
2020-11-24 16:35:42
876
原创 vue学习之生命周期钩子函数
生命周期钩子函数new Vue 要经历一系列的过程，在这个过程当中，vue制定了在某些节点要执行的函数，这些函数就叫是生命周期钩子函数。 let vm = new Vue({ el: '#app', data: { name: '测试' }, beforeCreate(){ // 在这个生命周期函数中，是获取不到当前实例的变量的 console.log(this.name); // undefine
2020-11-24 15:42:03
85
原创 vue学习之computed（计算属性）
计算属性_computed<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{name}}</h1> <input type="text" v-model="name
2020-11-24 13:46:28
112
原创 vue学习之过滤器_filter
过滤器过滤器分全局过滤器和局部过滤器。和自定义指令一样，过滤器对应的函数中的this是window（无论是全局的还是局部的），而不是当前vue的实例。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <
2020-11-24 13:18:47
88
原创 观察者模式与发布订阅模式的相同点和不同点
观察者模式与发布订阅模式的联系和区别有人说观察者模式是发布订阅的升级版，也有人说发布订阅是进阶版的观察者模式，但是无论是观察者模式还是发布订阅模式，它们都是定义了对象之间的一种一对多的依赖关系。观察者模式当目标对象的状态发生改变时，所有它里面的被观察的对象，都会得到通知，并执行相应的操作。 // 目标对象类 function Sub() { this.subs = []; // 观察者列表 } Sub.prototype = {
2020-11-23 15:36:24
222
原创 js实现mvvm_2
js实现mvvm_2<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{ name }}</h1> <!-- 这是一个注释 --> <h2>
2020-11-23 14:06:56
300
原创 js实现mvvm_1
手写mvvm_1<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{ name }}</h1> <!-- 这是一个注释 --> <h2>{
2020-11-23 13:28:32
198
原创 vue之更改数据触发视图更新小坑
更改对象数据触发视图更新Vue 是双向数据绑定（数据更新则视图更新；试图更新后数据自动更新）。但是某些操作发现，更改了数据，视图却没有更新<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1 st
2020-11-21 11:33:10
650
原创 Vue自定义指令实现权限校验
利用自定义指令实现权限校验// directive.js// 控制元素显示不显示Vue.directive('premission1', function(el, obj){ // 控制 display的值即可 el.style.display = obj.value > 3? 'none': 'block'; });// 控制元素加载不加载，需要用到钩子函数 insteredVue.directive('premission2',{ inserted(el, obj) {
2020-11-20 15:46:13
513
原创 vue学习之自定义指令
自定义指令vue中凡是 v- 开头的行内属性，都被认为是指令，不同的指令可以完成或实现不同的功效。vue自带的指令有时候无法满足实际需求，这时就需要我们自己“创建”指令，也就是自定义指令。自定义指令分为全局自定义指令和局部自定义指令。全局自定义指令全局自定义指令：Vue.directive(指令名, function(el,obj){…})适用范围：整个项目中都可以使用// 例如Vue.directive('color', function(el, obj){ // 用了几次v-
2020-11-20 14:50:53
95
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人