- 博客(80)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue3.2 使用笔记总结【自学复习使用】
1、起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；2、Vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需return，template可直接使用。一、文件结构<template> // Vue2中，template标签中只能有一个根元素，在Vue3中没有此限制</template><script setup></script&g
2022-02-22 14:23:51
4869
3
翻译 TS（一）Types
翻译自： https://ts.chibicode.com/todo自学记录！！分为三部分：Section 1: Types, Read-only Properties, and Mapped TypesSection 2: Array Types, Literal Types, and Intersection TypesSection 3: Union Types and Optional PropertiesSection 1type Todo = { readonly id: n
2021-10-22 16:52:03
491
原创 自定义 toast 组件
利用 Vue.extend一、新建 toast.js 文件import Vue from 'vue'import ToastVue from './toast.vue';const ToastConstructor = Vue.extend(ToastVue);let removeDom = event => { event.target.parentNode.removeChild(event.target);};ToastConstructor.prototype.close
2021-08-17 10:26:58
282
原创 三个常用正则-- 邮箱、手机号与机构code
const regRule = { agencyCode: /^[A-Z\d]+$/, contactEmail: /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/, phone: /^[0-9|-]{1,20}$/};
2021-07-15 11:53:15
315
原创 单例模式--惰性单例
惰性单例是指在需要的时候才创建对象的实例。我们把如何管理单例的逻辑抽离出来：var getSingle = function(fn){ var result; return function(){ return result || (fn.apply(this, arguments)) }}接下来将用于创建登录浮窗的方法用参数 fn 的形式传入 getSingle，我们不仅可以传入 createLoginLayer，还能传入 createScript、createIframe、creat
2021-06-15 17:58:33
259
原创 高阶函数 与设计模式之装饰者模式 以及实际应用
定义：高阶函数是指至少满足下列条件之一的函数。 函数可以作为参数被传递； 函数可以作为返回值输出。二、高阶函数实现AOP（面向切面编程）通常，在 JavaScript 中实现 AOP，都是指把一个函数“动态织入”到另外一个函数之中，具 体的实现技术有很多，本节我们通过扩展 Function.prototype 来做到这一点。代码如下：Function.propotype.before = function(beforefn){ var _self = this; return fun
2021-06-09 21:00:00
210
1
原创 深入理解闭包
一、变量作用域对于全局变量来说，全局变量的生存周期当然是永久的，除非我们主动销毁这个全局变量。而对于在函数内用 var 关键字声明的局部变量来说，当退出函数时，这些局部变量即失去了 它们的价值，它们都会随着函数调用的结束而被销毁。var func = function(){ var a = 1; return function(){ a++; alert ( a ); } };var f = func();f(); // 输出：
2021-06-08 11:48:18
157
1
原创 ...扩展运算符的妙用
一、普通用法const arr1 = [1, 2, 3, 4]const arr2 = [5, 6, 7, 8]const newArr = [...arr1, ...arr2]二、妙用当它被用在函数形参上时，它还可以把一个分离的参数序列整合成一个数组function mutiple(...args) { let result = 1; for (var val of args) { result *= val; } return result;}mutiple(
2021-06-03 18:26:37
177
原创 new webpack 的 DefinePlugin 与 ProvidePlugin
一、DefinePluginDefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发环境和生产环境构建的规则。同时 也可以用来区分环境 变量 ， 例如我在build.jsDefinePlugin中加了BUILD_EVN: JSON.stringify(true)那我们对dev
2021-05-18 18:02:28
954
原创 零碎学习 之 -webkit-background-clip: text
实现文字颜色的渐变首先：给外层div来一个渐变。其次：用webkit-background-clip: text;以div的文字作为裁剪区域向外裁剪；最后：把文字变透明：可以用rgba给文本填充透明颜色或者直接设置color: transparent;<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>文字渐变</title> <style
2021-05-18 17:03:14
451
原创 promise.all的手写实现
一、promise.all 的使用let promise1 = new Promise(function(resolve) { resolve(1);});let promise2 = new Promise(function(resolve) { resolve(2);});let promise3 = new Promise(function(resolve) { resolve(3);});let promiseAll = Promise.all([promise1, pr
2021-04-26 16:39:30
384
原创 如何让if(a == 1 && a == 2)条件成立
1、首先看一下 对象 转原始类型 是如何转换的对象转原始类型，会调用内置的[ToPrimitive]函数，对于该函数而言，其逻辑如下：1、如果Symbol.toPrimitive()方法，优先调用再返回2、调用valueOf()，如果转换为原始类型，则返回3、调用toString()，如果转换为原始类型，则返回4、如果都没有返回原始类型，会报错var obj = { value: 3, valueOf() { return 4; }, toString() {
2021-03-16 22:05:24
1950
1
转载 记录一条vue引入 JQuery 的记录
https://liuhuiyao.blog.csdn.net/article/details/108573671?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%20%E4%B8%AD%E4%BD%BF%E7%94%A8at.js&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-3-108573671.firs
2021-03-12 11:07:27
105
原创 记录一下this 以及提升的面试题
function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } };}var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,?var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?var c = fun(0).fun(1); c.fun(2
2021-02-26 13:44:49
143
原创 Vue中事件绑定的原理
之前我搜这个原理的时候，好多文章，都只写了俩句话：原生事件绑定是通过addEventListener绑定给真实元素的。组件事件绑定是通过Vue自定义的key$on实现的。那具体是怎么实现的呢， 没有说？就现在具体看一下。// 原生事件绑定<div @click="fn()"></div>// 组件绑定<my-component @click.native="fn" @click="fn1"></my- component>原理：事件
2021-02-25 17:33:49
1286
1
原创 Vue模板是怎么在浏览器中运行的
首先直接把模板丢到浏览器中肯定是不能运行的，模板只是为了方便开发者进行开发。Vue 会通过编译器将模板通过几个阶段最终编译为 render 函数，然后通过执行 render 函数生成 Virtual DOM 最终映射为真实 DOM。这个编译过程其中又分为三个阶段，分别为：将模板解析为 AST优化 AST将 AST 转换为 render 函数在第一个阶段中，最主要的事情还是通过各种各样的正则表达式去匹配模板中的内容，然后将内容提取出来做各种逻辑操作，接下来会生成一个最基本的 AST 对象{
2021-02-25 16:05:57
2007
原创 Vue响应式原理
Object.defineProperty()Vue 内部使用了 Object.defineProperty() 来实现数据响应式，通过这个函数可以监听到 set 和 get 的事件。先定义一个对象 以及属性var data = {name: 'john'};observe(data); // 监听 这个对象console.log(data.name);data.name = 'lily';console.log(data.name);定义observefunction observe(
2021-02-25 15:05:01
196
原创 防抖 与 节流
防抖（debounce）防抖就是 短时间内大量触发同一件事，只触发一次；function debuonce(fn, delay){ let timer = null; return function() { if(timer) { clearTimeout(timer) // 将上一次的清除掉 } timer = setTimeout(fn, delay); // 然后重新计时 }}调用function log(){ console.log(2)}wind
2021-02-24 23:16:30
136
原创 手写实现peomise
Promises/A+ 规范作为 Modern JavaScript 基础设施的一部分，Promises 对前端开发者而言异常重要。它是 async/await 语法的基础，是 JavaScript 中处理异步的标准形式。并且，未来的 Web API，只要是异步的，都会以 Promises 的形式出现。如果不理解 Promises 相关的知识和运行机制，将来可能无法完成 Web 开发的日常工作。因此，Promises 成为了前端面试中的必问问题之一。在网络上，也可以搜索到很多 Promises 的技
2021-02-23 11:53:01
179
转载 数组全排列
规律当n = 1时， 数组arr = [A]，全排列结果为[A];当n = 2时， 数组arr = [A, B]，全排列结果为[A, B][B, A];当n = 3时， 数组arr = [A, B, C]，全排列结果为[A, B, C][A, C, B][B, A, C][B, C, A][C, A, B][C, B, A]到n = 3时可以看出全排列有以下规律固定第一个元素，将剩下的元素进行全排列处理；将第一个元素与依次与第i（1<i<=arr.length）个元
2021-02-23 11:47:47
606
原创 自定义 loader 去删除全局console.log
思路就是，拿到代码中所有的 console.log(xxx)，并对其进行删除，webpack 的 loader 本质上其实就是一个函数，我们可以在这个函数内部，根据正则匹配出我们想删除的字符串，对其进行替换。自定义 loaders/ignore-console-log-loader.js 代码很简单，如下：const reg = /(console.log\()(.*)(\))/;gmodule.exports = function (sourceCode) { return sourceCod
2021-02-22 21:39:41
366
原创 有关虚拟滚动 以及 懒加载的原理
目录懒加载实现方式及底层原理一、浏览器的底层渲染机制：二、几个API三、getBoundingClientRect()四、基于 IntersectionObserver 实现图片懒加载虚拟滚动一、二者区别2、虚拟滚动有两个重要的基本概念：3、简单实现懒加载实现方式及底层原理一、浏览器的底层渲染机制：1、构建 DOM 树2、样式计算3、布局阶段4、分层5、绘制6、分块7、光栅化8、合成二、几个API1、document.documentElement.clientHeight获取屏幕
2021-02-22 17:31:41
2138
原创 算法题
面试是真的会紧张， 面试的时候被要求写这道题，没有快速写出来就放弃了。现在一写就写完了，想想实在是记得记录一下啊啊啊啊啊题目：给出一个数组，例如[1, 9, 8, 4, 5, -1, -8, 5, 2, 3, 6, 0, 0];给出一个 目标值， 例如 5；返回 数组中可以 计算得出 目标值的所有组合例如[ [1, 4], [-1, 6], [2, 3] ]以下就是我写的答案（再次崩溃，为啥面试的时候没有写出来呢啊啊啊）const numArrry = [1, 9, 8, 4, 5, -1,
2021-01-29 16:04:14
100
原创 每日学习-- margin 为什么会发生重叠以及解决
块级元素 相邻margin会发生重叠，大多数人都知道。也大都知道解决方法， 但是 为什么会重叠呢？？在stackoverflow上找到了一个很好的解释：margin的定义不是让元素移动xxpx，而是这个元素的旁边必须有xxxpx的的空白。得到了这个解释之后，想一下“为首个子元素添加20px的上边距，父元素竟跟着子元素下沉了”这个问题，再思考一下解决方法。给父元素添加overflow开启一个BFC，或者给父元素增加padding、border之类，这样的做法使元素的旁边边界不是上一个盒子而是父元素
2021-01-29 15:10:28
1013
原创 微前端 之 single-spa 应用demo
一、对于子应用 的修改1、main.js 文件import Vue from 'vue'import singleSpaVue from 'single-spa-vue';import router from './router';import App from './App.vue'Vue.config.productionTip = falseconst appOptions = { el: '#vue', // 主应用中你需要挂载到的地方 的div， id名 router,
2021-01-19 11:32:12
401
3
原创 手写实现数组的方法 --例如 findIndex
Array.prototype.myfindidx = function(fn) { for (var i = this.length - 1; i >= 0; i--) { if (fn(this[i], i, this)) return i } return -1 }
2021-01-18 16:08:30
215
原创 手写实现 call 与 apply 与 bind
一、call 与 bind 与 apply 的使用先定义一个 a对象 与 一个 函数let a = { value: 1 } function getValue(name, age) { console.log(name) console.log(age) console.log(this.value) }现在 如果单纯的正常 调用 getValue ， 其中的this是指向 window但是 如果是以下调用 则 this指向 a对象。getValue.call(a
2021-01-13 15:02:35
109
1
原创 简易实现 vue
首先创建一个 html 文件<!DOCTYPE html><head> <title>简易Vue双向绑定</title> <script src="./twoway-bingding.js"></script> // 引入实现vue的文件 <script> // @:在DOMContentLoaded后完成vue初始化, 毕竟#app根元素还是要拿到的:) document.addEve
2020-12-25 16:33:57
173
原创 有关 pug-loader 的使用
一、安装npm i pug pug-loader#二、 配置vue-cli 3 以下版本修改webpackvue-cli 3 以上版本 是在vue.config.js 里面修改#三 使用lang = ‘pug’. 就是 默认 div 的 class 名缩进 就是默认 含在 下一级不用写 类似 结束 标签。 看起来比较简洁。<template lang='pug'>.kkkk div(class="start common" @mousedown="mousedow
2020-12-18 11:53:18
498
原创 websocket心跳包
HeartPongWebsocket.js/** * `WebsocketHeartbeatJs` constructor. * * @param {Object} opts * { * url websocket链接地址 * pingTimeout 未收到消息多少秒之后发送ping请求，默认15000毫秒 pongTimeout 发送ping之后，未收到消息超时时间，默认10000毫秒 reconnectTimeout onreconn
2020-12-07 17:14:24
748
原创 IE11页面闪烁的问题
IE11 页面点击出现某些元素造成页面会闪烁的问题原因是那些元素是 position: fixed 定位把排版改成 position: absolute 调整后就没有闪烁了
2020-12-07 16:31:29
992
原创 如何把 json 数据转化为 demo.json 并下载文件
在开发过程中， 遇到过半路接手项目，但是数据比较复杂， 想要看看时，如果只是console 在控制台， 看起来比较费劲，想着能将json 下载出来， 就好了。于是可以：有俩种方法function download (url, name) { const a = document.createElement('a') a.download = name a.rel = 'noopener' a.href = url // 触发模拟点击 a.dispatchEvent(new Mo
2020-11-22 17:53:57
450
1
原创 CSS -webkit-box-orient: vertical属性编译后丢失问题
CSS -webkit-box-orient: vertical属性编译后丢失问题该问题进行记录方法一、网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法：/*! autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */这样确实解决了编译丢失的情况，但会在编译过程中报warning，最后到GitHub上找到最佳解决方案,如下方法二、/* autoprefixer: ignore ne
2020-11-20 16:22:26
203
原创 关于 图片在线上环境不显示问题
遇到的一个bug 是图片， 放在assets 目录下，js中 通过 相对路径引用。 本地可以正常显示，但是线上就无法显示。打包路径显示打进了 static 中。最后发现是wenpack 的限制。
2020-11-16 20:57:46
756
原创 Array.of与 Array.from学习
Array.from方法用于将两类对象转为真正的数组类似数组的对象可遍历的对象实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。// NodeList对象let ps = document.querySelectorAll('p');Array.from(ps).filter(p => { return p.textContent.length > 100;});
2020-11-03 11:07:48
208
原创 Set、Map、WeakSet 和 WeakMap 的区别
一、set它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。数组去重 以及 字符串去重：[...new Set(array)]; Array.from(new Set(array)); [...new Set('ababbc')].join('')// "abc"向 Set 加入值的时候，不会发生类型转换。Array.from方法可以将 Set 结构转为数组。const items = new Set([1, 2, 3, 4,
2020-10-30 11:36:07
143
原创 记录 cookie 遇到了一个问题 SameSite=Lax
通过看阮一峰老师的 可以清晰明了的知道。http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html正是因为我的项目是需要通过iframe 嵌入，且302redirect到其他地址。所以带不到。解决方式：https://blog.csdn.net/qq_42196055/article/details/104918291进行记录一下。...
2020-10-27 13:56:27
878
原创 location.search 进行处理，返回包含所有参数的一个对象
const qs = location.search.length > 0 ? location.search.substr(1) : ''; // 去掉？ let args = {}; const itemsArr = qs.length > 0 ? qs.split('&') : []; itemsArr.forEach((el) => { let item = el.split('='); let name = decodeURIComponent(it.
2020-10-23 18:56:38
355
原创 X-Frame-Options的nginx配置
X-Frame-Options头主要是为了防止站点被别人劫持、iframe引入nginx配置形式:add_header X-Frame-Options ALLOWALL; #允许所有域名iframeadd_header X-Frame-Options DENY; #不允许任何域名iframe,包括相同的域名add_header X-Frame-Options SANEORIGIN; #允许相同域名iframe,如a.test.com允许b.test.comadd_header X-Frame-Op
2020-10-22 14:09:56
3413
原创 1、每天学习一点点之 contenteditable 属性
起初 遇见一个 需求 是 要求 再输入框可以输入文本， 点击检测，调用接口，将特定的文字可以 加颜色 或者 下划线展示， 然后可以继续输入。 正常是用textarea， 但是textarea 不可以 v-html， 里面只能是文本， 不能包含标签。所以发现该 属性-----contenteditable<div contenteditable="true">这是一个可编辑段落。</div>这样就可以实现 div 可以编辑， 如同textarea。 并且可以包含标签，进行样式修
2020-10-12 12:27:14
818
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人