- 博客(28)
- 收藏
- 关注
RSS订阅原创 前端中常见的设计模式
描述：观察者模式用于建立对象之间的一对多依赖关系，使得当一个对象的状态发生变化时，所有依赖它的对象都会得到通知。在前端中，可以用于处理不同的数据转换、验证或处理逻辑。描述：保证一个类仅有实例，并提供一个可以全局访问他的点，它通常用于管理应用程序的全局状态或资源，例如一个唯一的状态管理器。描述： 代理模式控制对其他对象的访问，可以添加额外的逻辑，如缓存、权限控制等。描述：工厂模式用于通过一个共同的接口来创建对象，隐藏了对象的创建细节。描述：装饰者模式用于动态地将责任添加到对象上，以扩展对象的功能。
2023-08-09 15:30:15
594
原创 js 计算俩个日期之间相差的天数 ，以及相差的日期的数组
js 计算俩个日期之间相差的天数 ，以及相差的日期的数组// 计算俩个日期相差的天数export const diffDays = (start, end) => { const s = new Date(start).getTime() const e = new Date(end).getTime() return (e-s)/(24*60*60*1000)}// 计算俩个日期相差日期的数组（包括开始和结束） diffDaysArr(start, end) {
2022-01-06 16:22:06
624
1
原创 输入框属于金额限制输入整数或最多俩位小数-自定义指令的方式
使用局部的自定义指令，当然也可以使用全局的指令方式代码是一样的directives: { money: { // 更新变化的时候 update(el) { // 获取你绑定的元素下面找到第一个input框 var newEl = el.getElementsByTagName("input")[0]; // 默认只能输入整数 var reg = "^\\d*";‘ // 查看是否有其他小数的位数 可以
2021-12-06 17:12:50
344
原创 正则表达式-自己学习书写
常用的修饰符i：执行对大小写不敏感的操作g：执行全局匹配m：多行匹配正则表达模式方括号用于查找某个范围内的字符：表达式 描述[abc] 查找方括号之间的任何字符。[^abc] 查找任何不在方括号之间的字符。[0-9] 查找任何从 0 至 9 的数字。[a-z] 查找任何从小写 a 到小写 z 的字符。[A-Z] 查找任何从大写 A 到大写 Z 的字符。[A-z] 查找任何从大写 A 到小写 z 的字符。[adgk] 查找给定集合内的任何字符。[^adgk] 查找给定集合外的任
2021-09-24 14:18:33
114
原创 前端性能优化建议
关于前端性能优化第一步：我们首先要了解浏览器加载前端页面的过程（1）浏览器输入地址点击回车------（2）浏览器查看当前浏览器是否存在缓存------（3）dns解析url对应的ip-----（4）根据ip简历tcp链接中间进行三次握手-----（5）http发送请求-----（6）服务器处理http请求 浏览器处理http响应------（7）渲染页面构建dom树-----（8）关闭TCP连接（四次挥手）第二步：我们针对过程 进行性能优化由于浏览器是最先读取缓存的所以我们要善用缓存，不重复加载相
2021-09-07 11:31:05
210
原创 webpack手动配置 vue
webpack五大核心功能1.entry入口文件本项目应该使用哪个模块，来作为其内部依赖的开始 。指定打包的入口文件2.output 输出在哪里输出他所创建的bundle，以及如何命名这些文件。默认值为./dist3.mode 模式通过选择development 或production来设置mode参数，可以启用想用的模块进行配置4.loaderloader的作用webpack处理那些非js文件。默认情况wenpack只能处理js文件5.plugins插件主要用于执行范围更广的任务。插件
2021-09-06 18:52:43
232
原创 上传图片展示本地预览的链接
上传展示本地图片链接 getObjectURL(file) { var promise = new Promise((resolve) => { var url = null; //下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已 if (typeof FileReader === "undefined") { if (window.createObjectURL != undefined)
2021-09-02 10:10:06
255
原创 个人笔记系列之关于前端问题的整理
面试记录1，说一下event-loop答：2，数组遍历的方法3，数组排序的方法4，说一下日常工作中遇到的设计模式5，订阅发布这模式6，继承es5 es67,浏览器怎么加载页面的8，判断是否是数组9，vue的原理10，vuex的原理11，promise的原理12，跨域的解决方案13，对于闭包的理解14，对于原型链的理解15，节流和防抖16.ds桥的原理17.vue的diff算法...
2021-03-05 11:39:30
261
1
原创 个人笔记之关于vue原理系列
个人笔记vue 双向绑定原理1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图vue的diff 原理diff 算法的本质是找出两个对象之间的差异diff 算法的核心是子节点数
2021-02-23 10:48:35
187
原创 个人笔记：关于浏览器输入url到页面渲染的流程
从输入URL到页面加载的全过程（1）浏览器输入地址点击回车------（2）浏览器查看当前浏览器是否存在缓存------（3）dns解析url对应的ip-----（4）根据ip简历tcp链接中间进行三次握手-----（5）http发送请求-----（6）服务器处理http请求 浏览器处理http响应------（7）渲染页面构建dom树...
2020-12-24 10:05:46
274
原创 关于http 1.x和http2的区别
个人学习笔记http1.x的缺点1.首先浏览器能够针对同一个域名能够发起的tcp请求是有限制的，谷歌浏览器限制的同时 的6个，这样的话其他的请求就需要排队处理。优化方法：js片段的整合，css整合，图片整合2.以明文文本字符串的形式传输内容，存在安全问题。3.http 请求头无状态特性 导致传输效率低下多个http请求头大部分信息是相同的，重复传输，导致宽带浪费.请求头多达几百字节，而请求主体却只有十几个字节，有效信息比很低4.只能浏览器主动请求响应，不能服务器主动推送信息过来...
2020-12-23 15:31:59
276
1
原创 记录关于hashchange事件
关于hashchange 在vue中使用的要点 window.addEventListener('hashchange', (e) => { //do something }, false);这里需要注意：1，在hashchange中获取到的router的参数是变化之前的参数，如果要根据这个使用需要多加注意。2,自mounted中使用的话初次不会执行hashchange3，回调的e中回返回 e.oldURL和e.newURL 即 hash变化前后的地址内容...
2020-08-14 16:07:39
767
原创 事件的节流和防抖
事件的节流和防抖下面我会介绍一下这俩个事件的区别：用途:都是用来阻止时间重复点击，造成请求不断的出发函数防抖定义 ：防抖的定义，在一段时间内执行的某一个函数，如果这个事件没有结束，那就从新定时去执行这个事件，总而言之就是执行这个事件的最后一次的触发操作列子：var timer;function action(){if(timer){ clearTimeout(timer)} timer=setTimeout(()=>{ alert("要执行的事件") },500)}
2020-05-21 15:01:51
477
原创 关于 async 和 await 的使用
关于 async 和 await 的使用关于异步函数变为同步函数es6 提供的方法下面以请求之前获取token 为例获取token 的方法function getToken(){ const promise1= new Promise((resolve, reject)=>{ service.get('http://rap2.taobao.org:38080/app/mock/254842/getToken', {params: {}}).then(res=>{
2020-05-21 12:01:37
483
原创 记录-关于微吼直播的对接
关于微吼直播的对接先看一下效果图由于页面未开启直播状态，所以展示的效果如下js库的依赖注意 ：这里如果不想使用后端的接口，前端加密的的使用MD5加密，所以 需要安装MD5加密，本文是前端使用MD5进行了加密npm install md5 --save<script src="http://cnstatic01.e.vhall.com/3rdlibs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
2020-05-21 11:36:36
2015
1
原创 关于小程序生成海报
关于小程序生成海报并保存到本地相册生成图片的过程 toSetImage(obj,width,height,imgUrl,codeImg,text) { //obj是页面的this //with,height指的是canvas的宽高 //imageUrl 指的的海报的图片 //codeImg 指的的生成的邀请二维码的图片 //text 文字说明 var that = obj; //控制canvas的显示隐藏 obj.canvasShow
2020-05-21 11:03:19
296
原创 关于微信扫码登陆页面
关于微信扫码登陆页面第一步：注册微信开放平台，创建应用，注意 appid 下面主要的使用的appid第二步：前端index.html引用wxlogin.js <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>第三步 ：创建一个空的div &l...
2019-12-11 17:28:18
583
1
原创 记录关于获取宽高以及距离父元素距离的方法
记录关于获取宽高以及距离父元素距离的方法记录原因，在拖动的时候经常会使用到距离父元素的距离，以及宽高等一些方法。offsetWidth,offsetHeight,offsetTop,offsetLeft等相关属性。关于offsetWidth和offsetHight 、 offsetTop和offsetLeft关于clientWidth和clientHeigh 、 clientTop和clientL...
2019-11-11 10:16:36
4450
原创 记一次关于vue和iframe的跨域问题
vue iframe 一起使用的跨域场景：在对接一些其他公司的项目的时候，代码逻辑可能很多，需要我们直接使用iframe 链接的这种方式进行处理，即使代码放在同一目录下，仍然会产生跨域的情况。亲测：this.$refs.iframe.contentWindow.XXX 的方法不行提供可用方案：使用postMessage的方法：vue向iframe 发送消息vue中的写法 mounte...
2019-07-25 10:18:51
8478
10
原创 关于axios的用法封装
axios的个人封装使用方法import axios from "axios"//这里为加密的js// import JSEncrypt from "@/libs/jsencrypt";//获取api地址//错误的时候的处理方法function showErrorMessage(message){ console.log(message)}//数据的统一处理functio...
2019-07-16 13:56:27
155
原创 记一次跨域的问题 vue vli3.0
跨域问题的处理1，首先明确一点跨域问题是浏览器的同源策略产生的导致，首先前端本都调试的方法就是使用代理的方式vue.congfig.jsdevServer: { disableHostCheck:true, proxy: { '/api': { target: 'http://172.21.0.49:9088', changeOr...
2019-07-16 11:47:29
151
原创 关于vuex的使用
vuex 状态管理实际项目中的使用1，首先vuex相当于一个全局变量的仓库，我们可以在页面的任意地方去使用这个仓库，便于不同的组件之间的共同状态的管理，以及组件之间的传值.最简单的使用const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { ...
2019-07-14 11:42:45
108
原创 关于router的导航守卫
关于router的导航守卫1，全局守卫有俩个beforeEach和afterEach vue 2.5+新增beforeResolverouter.beforeEach((to, from, next) => { //to:router即将进入的路由对象 //from:当前导航即将离开的路由 //next:Function,进行管道中的一个钩子，如果执行完了，则导航...
2019-07-14 11:08:49
141
原创 # vue cli 3.0 多环境配置
vue cli 3.0 多环境配置1，生成vue cli 3的项目 在跟目录自己创建 .env.[name]（注意：name即为你的环境的名字）的文件2，`现在我们拿测试环境做举例。.env.test的内容VUE_APP_NAME="测试环境"VUE_APP_TITLE="test"VUE_APP_HOST="http://http:test.com"VUE_PLATFORM="ap...
2019-07-14 10:53:44
304
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人